diff --git a/.env.example b/.env.example
index b913a3c..dd446c7 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,2 @@
 PORT=3000
-NEXT_PUBLIC_API_URL=https://www.hailearning.edu.vn/
\ No newline at end of file
+NEXT_PUBLIC_API_URL=http://localhost:3001
\ No newline at end of file
diff --git a/app/about/page.tsx b/app/about/page.tsx
index e8958c5..8c71402 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,24 +1,26 @@
-import { AboutHero, AboutIntro, AboutMission, AboutFeatures, AboutNews } from "../components/about";
 import { aboutApi } from "../../api/aboutApi";
+import HeroSection from "../components/about/HeroSection";
+import Mission from "../components/about/Mission";
+import WhyParis from "../components/about/WhyParis";
+import HistoryTimeline from "../components/about/HistoryTimeline";
+import LeadershipMessage from "../components/about/LeaderShip_Message";
+import LeadershipBoard from "../components/about/LeaderShip_Broad";
+import Campus from "../components/about/Campus";
 
-// Force dynamic rendering - không cache
 export const dynamic = 'force-dynamic';
 
 export default async function AboutPage() {
     const data = await aboutApi.getAbout();
 
-    if (!data) {
-        return null;
-    }
-
     return (
         <>
-            <AboutHero data={data.hero} />
-            <AboutIntro data={data.intro} />
-            <AboutMission data={data.mission} />
-            <AboutFeatures data={data.features} />
-            <AboutNews data={data.news} />
+            <HeroSection data={data} />
+            <Mission />
+            <WhyParis />
+            <LeadershipMessage />
+            <Campus />
+            <HistoryTimeline />
+            <LeadershipBoard />
         </>
     );
 }
-
diff --git a/app/accreditation/page.tsx b/app/accreditation/page.tsx
new file mode 100644
index 0000000..9e443c7
--- /dev/null
+++ b/app/accreditation/page.tsx
@@ -0,0 +1,13 @@
+import AccreditationHero from "../components/accreditation/AccreditationHero";
+import AccreditationGrid from "../components/accreditation/AccreditationGrid";
+import QualityStandards from "../components/accreditation/QualityStandards";
+
+export default function AccreditationPage() {
+  return (
+    <main className="accreditation-page w-full">
+      <AccreditationHero />
+      <AccreditationGrid />
+      <QualityStandards />
+    </main>
+  );
+}
diff --git a/app/blog/[slug]/components/CommentForm.tsx b/app/blog/[slug]/components/CommentForm.tsx
deleted file mode 100644
index 3a4b580..0000000
--- a/app/blog/[slug]/components/CommentForm.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-interface CommentFormProps {
-  slug: string;
-  parentId?: string | null;
-  replyToName?: string | null;
-  initialContent?: string;
-  onSubmitted?: () => void;
-}
-
-export default function CommentForm({
-  slug,
-  parentId = null,
-  replyToName = null,
-  initialContent = "",
-  onSubmitted,
-}: CommentFormProps) {
-  const router = useRouter();
-  const [isPending, setIsPending] = useState(false);
-  const [authorName, setAuthorName] = useState("");
-  const [authorEmail, setAuthorEmail] = useState("");
-  const [authorPhone, setAuthorPhone] = useState("");
-  const [authorAddress, setAuthorAddress] = useState("");
-  const [authorDate, setAuthorDate] = useState("");
-  const [content, setContent] = useState(initialContent);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setSuccess(null);
-
-    if (!authorName.trim() || !content.trim()) {
-      setError("Please enter your name and comment.");
-      return;
-    }
-
-    // Basic email validation if provided
-    if (authorEmail.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(authorEmail.trim())) {
-      setError("Please enter a valid email address.");
-      return;
-    }
-
-    try {
-      setIsPending(true);
-      const res = await fetch(`${apiUrl}/api/blog/${slug}/comments`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          authorName: authorName.trim(),
-          ...(authorEmail.trim() ? { authorEmail: authorEmail.trim() } : {}),
-          ...(authorPhone.trim() ? { authorPhone: authorPhone.trim() } : {}),
-          ...(authorAddress.trim() ? { authorAddress: authorAddress.trim() } : {}),
-          ...(authorDate.trim() ? { authorDate: authorDate.trim() } : {}),
-          content: content.trim(),
-          ...(parentId ? { parentId } : {}),
-        }),
-      });
-
-      const data = await res.json();
-      if (!res.ok || !data?.success) {
-        throw new Error(data?.message || "Failed to submit comment");
-      }
-
-      setAuthorName("");
-      setAuthorEmail("");
-      setAuthorPhone("");
-      setAuthorAddress("");
-      setAuthorDate("");
-      setContent("");
-      setSuccess("Comment submitted.");
-
-      // Re-fetch server data (blog detail is no-store) to show new comment immediately
-      router.refresh();
-
-      onSubmitted?.();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to submit comment");
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <div>
-      <h3 className="mb-3">
-        {parentId ? (replyToName ? `Reply to @${replyToName}` : "Reply") : "Leave A Comment"}
-      </h3>
-
-      {error && <p className="text-danger mb-3">{error}</p>}
-      {success && <p className="text-success mb-3">{success}</p>}
-
-      <form onSubmit={onSubmit} className="contact-form-items">
-        <div className="row g-4">
-          <div className="col-lg-4">
-            <div className="form-clt">
-              <span>Your Name</span>
-              <input
-                type="text"
-                name="authorName"
-                placeholder="Your name"
-                value={authorName}
-                onChange={(e) => setAuthorName(e.target.value)}
-                disabled={isPending}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="col-lg-4">
-            <div className="form-clt">
-              <span>Your Email</span>
-              <input
-                type="email"
-                name="authorEmail"
-                placeholder="Your email"
-                value={authorEmail}
-                onChange={(e) => setAuthorEmail(e.target.value)}
-                disabled={isPending}
-              />
-            </div>
-          </div>
-
-          <div className="col-lg-4">
-            <div className="form-clt">
-              <span>Your Phone</span>
-              <input
-                type="text"
-                name="authorPhone"
-                placeholder="Phone Number"
-                value={authorPhone}
-                onChange={(e) => setAuthorPhone(e.target.value)}
-                disabled={isPending}
-              />
-            </div>
-          </div>
-
-          <div className="col-lg-6">
-            <div className="form-clt">
-              <span>Your Address</span>
-              <input
-                type="text"
-                name="authorAddress"
-                placeholder="Address Now"
-                value={authorAddress}
-                onChange={(e) => setAuthorAddress(e.target.value)}
-                disabled={isPending}
-              />
-            </div>
-          </div>
-
-          <div className="col-lg-6">
-            <div className="form-clt">
-              <span>Your Date</span>
-              <input
-                type="text"
-                name="authorDate"
-                placeholder="Date"
-                value={authorDate}
-                onChange={(e) => setAuthorDate(e.target.value)}
-                disabled={isPending}
-              />
-            </div>
-          </div>
-
-          <div className="col-lg-12">
-            <div className="form-clt">
-              <textarea
-                name="content"
-                placeholder="Type your comment"
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                disabled={isPending}
-                required
-              ></textarea>
-            </div>
-          </div>
-
-          <div className="col-lg-12 wow fadeInUp" data-wow-delay=".3s">
-            <button type="submit" className="theme-btn" disabled={isPending}>
-              {isPending ? "Sending..." : "Send Comment"}
-              <i className="fa-solid fa-arrow-right"></i>
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
diff --git a/app/blog/[slug]/components/CommentsSection.tsx b/app/blog/[slug]/components/CommentsSection.tsx
deleted file mode 100644
index b74fdc6..0000000
--- a/app/blog/[slug]/components/CommentsSection.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-"use client";
-
-import type { BlogComment } from "@/types/blog";
-import { useMemo, useState } from "react";
-import CommentForm from "./CommentForm";
-import { formatLongDate } from "@/utils";
-
-interface CommentsSectionProps {
-  slug: string;
-  comments: BlogComment[];
-}
-
-export default function CommentsSection({ slug, comments }: CommentsSectionProps) {
-  const [showAllComments, setShowAllComments] = useState(false);
-  const [expandedCommentKeys, setExpandedCommentKeys] = useState<Set<string>>(
-    () => new Set()
-  );
-  const [replyTarget, setReplyTarget] = useState<{
-    // ID của comment gốc để lưu làm parentId (giữ thread 1 cấp trên backend)
-    parentId: string;
-    // Tên tác giả mà chúng ta đang reply (dùng cho UI @mention)
-    replyToName: string;
-    // ID của item trong UI đang hiển thị form reply bên dưới
-    anchorId: string;
-  } | null>(null);
-
-  // Helper function để lấy chữ cái đầu của tên
-  const getInitials = (name?: string): string => {
-    if (!name) return "?";
-    const trimmed = name.trim();
-    if (trimmed.length === 0) return "?";
-    return trimmed.charAt(0).toUpperCase();
-  };
-
-  const makeCommentKey = (prefix: "p" | "r", id: string | undefined, index: number) =>
-    id ? `${prefix}:${id}` : `${prefix}:idx:${index}`;
-
-  const isExpanded = (key: string) => expandedCommentKeys.has(key);
-
-  const toggleExpanded = (key: string) => {
-    setExpandedCommentKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  };
-
-  const { parents, repliesByParent } = useMemo(() => {
-    const parentsLocal = (comments || []).filter((c) => !c.parentId);
-    const replies = (comments || []).filter((c) => !!c.parentId);
-    const map = new Map<string, BlogComment[]>();
-    for (const r of replies) {
-      const pid = r.parentId as string;
-      map.set(pid, [...(map.get(pid) || []), r]);
-    }
-    return { parents: parentsLocal, repliesByParent: map };
-  }, [comments]);
-  // Thu thập tất cả tên tác giả để phát hiện @mention đầy đủ (bao gồm tên nhiều từ)
-  const authorNames = useMemo(() => {
-    return (comments || [])
-      .map((c) => c.authorName)
-      .filter((n): n is string => !!n)
-      // Sắp xếp theo độ dài giảm dần để khớp tên dài nhất trước
-      .sort((a, b) => b.length - a.length);
-  }, [comments]);
-
-  const renderContentWithMention = (text?: string) => {
-    if (!text) return null;
-    if (!text.startsWith("@")) return text;
-
-    // Thử khớp @mention với tên tác giả đã biết
-    // Hỗ trợ tên nhiều từ như "@Bạn Cũng Thấy Thế Hà"
-    const matchedName = authorNames.find((name) => {
-      const candidate = `@${name}`;
-      if (!text.startsWith(candidate)) return false;
-
-      // Đảm bảo khớp kết thúc ở cuối chuỗi hoặc theo sau bởi khoảng trắng
-      const nextChar = text.charAt(candidate.length);
-      return candidate.length === text.length || nextChar === " ";
-    });
-
-    if (!matchedName) {
-      // Fallback: trả về text gốc nếu không thể khớp tên một cách chắc chắn
-      return text;
-    }
-
-    const mention = `@${matchedName}`;
-    const rest = text.slice(mention.length); // bao gồm khoảng trắng đầu nếu có
-
-    return (
-      <>
-        <strong>{mention}</strong>
-        {rest}
-      </>
-    );
-  };
-
-  const splitWords = (s: string) =>
-    s
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean);
-
-  const renderTruncatedContent = (text: string | undefined, key: string) => {
-    if (!text) return null;
-
-    const maxWords = 35;
-    const words = splitWords(text);
-    const needsTruncate = words.length > maxWords;
-    const expanded = isExpanded(key);
-
-    const displayText =
-      !needsTruncate || expanded ? text : `${words.slice(0, maxWords).join(" ")}...`;
-
-    return (
-      <>
-        {renderContentWithMention(displayText)}
-        {needsTruncate && (
-          <>
-            {" "}
-            <button
-              type="button"
-              onClick={() => toggleExpanded(key)}
-              style={{
-                border: "none",
-                background: "transparent",
-                padding: 0,
-                color: "var(--primary-color, #0d6efd)",
-                cursor: "pointer",
-                fontWeight: 600,
-              }}
-            >
-              {expanded ? "less" : "more"}
-            </button>
-          </>
-        )}
-      </>
-    );
-  };
-
-  // Tính toán các parent comment cần hiển thị (bao gồm children) để hiển thị tối đa 5 comments tổng cộng
-  const getDisplayedParents = () => {
-    if (showAllComments) return { parents: parents, repliesMap: new Map() };
-    
-    let totalCount = 0;
-    const result: typeof parents = [];
-    const limitedRepliesMap = new Map<string, BlogComment[]>();
-    
-    for (const parent of parents) {
-      const allReplies = parent._id ? repliesByParent.get(parent._id) || [] : [];
-      const remaining = 5 - totalCount;
-      
-      if (remaining <= 0) break;
-      
-      // Tính toán số lượng replies có thể hiển thị
-      const repliesToShow = Math.min(allReplies.length, remaining - 1); // -1 cho chính parent comment
-      
-      if (repliesToShow >= 0) {
-        result.push(parent);
-        if (parent._id && repliesToShow > 0) {
-          limitedRepliesMap.set(parent._id, allReplies.slice(0, repliesToShow));
-        }
-        totalCount += 1 + repliesToShow;
-      } else {
-        // Không thể hiển thị cả parent, dừng lại
-        break;
-      }
-    }
-    
-    return { parents: result, repliesMap: limitedRepliesMap };
-  };
-
-  const { parents: displayedParents, repliesMap: displayedRepliesMap } = getDisplayedParents();
-  
-  // Tính số lượng comments hiển thị ban đầu (khi thu gọn, tối đa 5)
-  const initialDisplayCount = displayedParents.reduce((sum, parent) => {
-    // Khi thu gọn, sử dụng replies giới hạn từ displayedRepliesMap
-    const replies = parent._id ? (displayedRepliesMap.get(parent._id) || []) : [];
-    return sum + 1 + replies.length;
-  }, 0);
-  
-  const hasMoreComments = (comments || []).length > initialDisplayCount;
-
-  return (
-    <div className="comments-area">
-      <div className="comments-heading">
-        <h3>
-          {(comments || []).length} {(comments || []).length === 1 ? "Comment" : "Comments"}
-        </h3>
-      </div>
-
-      {displayedParents.map((comment, index) => {
-        // Khi showAllComments là false, chỉ sử dụng replies giới hạn từ displayedRepliesMap
-        // Khi showAllComments là true, sử dụng tất cả replies từ repliesByParent
-        const replies = comment._id 
-          ? (showAllComments 
-              ? (repliesByParent.get(comment._id) || [])
-              : (displayedRepliesMap.get(comment._id) || []))
-          : [];
-        const isReplyingHere = !!comment._id && replyTarget?.anchorId === comment._id;
-
-        return (
-          <div key={comment._id || index}>
-            <div
-              className="news-single-comment d-flex pt-4 pb-0 position-relative"
-            >
-              <div className="image">
-                <div className="comment-avatar-box">
-                  {getInitials(comment.authorName)}
-                </div>
-              </div>
-
-              <div className="content">
-                <div className="head d-flex gap-2 gap-md-2 align-items-center">
-                  <div className="con">
-                    <span>{formatLongDate(comment.createdAt)}</span>
-                    <h4>{comment.authorName}</h4>
-                  </div>
-                </div>
-
-                <p className="mt-30">
-                  {renderTruncatedContent(
-                    comment.content,
-                    makeCommentKey("p", comment._id, index)
-                  )}
-                </p>
-
-                {comment._id && (
-                  <button
-                    type="button"
-                    className="reply reply-absolute"
-                    onClick={() =>
-                      setReplyTarget({
-                        parentId: comment._id!,
-                        replyToName: comment.authorName,
-                        anchorId: comment._id!,
-                      })
-                    }
-                  >
-                    Reply
-                  </button>
-                )}
-
-                {isReplyingHere && comment._id && (
-                  <div className="mb-4">
-                    <div className="d-flex justify-content-end mb-2">
-                      <button
-                        type="button"
-                        className="btn btn-sm btn-outline-secondary"
-                        onClick={() => setReplyTarget(null)}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                    <CommentForm
-                      slug={slug}
-                      parentId={replyTarget?.parentId || comment._id}
-                      replyToName={replyTarget?.replyToName || comment.authorName}
-                      initialContent={`@${replyTarget?.replyToName || comment.authorName} `}
-                      onSubmitted={() => setReplyTarget(null)}
-                    />
-                  </div>
-                )}
-
-                {/* Các reply */}
-                {replies.length > 0 && (
-                  <div className="replies">
-                    {replies.map((reply: BlogComment, replyIndex: number) => (
-                      <div key={reply._id || replyIndex}>
-                        <div
-                          className="news-single-comment d-flex pt-4 pb-0 position-relative"
-                        >
-                          <div className="image">
-                            <div className="comment-avatar-box">
-                              {getInitials(reply.authorName)}
-                            </div>
-                          </div>
-                          <div className="content">
-                            <div className="head d-flex gap-2 gap-md-2 align-items-center">
-                              <div className="con">
-                              <span>{formatLongDate(reply.createdAt)}</span>
-                                <h4>{reply.authorName}</h4>
-                              </div>
-                            </div>
-                            <p className="mt-30">
-                              {renderTruncatedContent(
-                                reply.content,
-                                makeCommentKey("r", reply._id, replyIndex)
-                              )}
-                            </p>
-
-                            {reply._id && comment._id && (
-                              <button
-                                type="button"
-                                className="reply reply-absolute"
-                                onClick={() =>
-                                  setReplyTarget({
-                                    // Giữ parentId trên backend là ID của comment gốc (comment._id)
-                                    parentId: comment._id!,
-                                    // Mention tác giả mà chúng ta click reply (tác giả của child comment)
-                                    replyToName: reply.authorName,
-                                    // Hiển thị form bên dưới child comment này
-                                    anchorId: reply._id!,
-                                  })
-                                }
-                              >
-                                Reply
-                              </button>
-                            )}
-                          </div>
-                        </div>
-
-                        {/* Form reply bên dưới child comment */}
-                        {reply._id && replyTarget && replyTarget.anchorId === reply._id && (
-                          <div className="mb-4 mt-3">
-                            <div className="d-flex justify-content-end mb-2">
-                              <button
-                                type="button"
-                                className="btn btn-sm btn-outline-secondary"
-                                onClick={() => setReplyTarget(null)}
-                              >
-                                Cancel
-                              </button>
-                            </div>
-                            <CommentForm
-                              slug={slug}
-                              parentId={replyTarget.parentId}
-                              replyToName={replyTarget.replyToName}
-                              initialContent={`@${replyTarget.replyToName} `}
-                              onSubmitted={() => setReplyTarget(null)}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-
-      {/* Nút hiển thị thêm comments */}
-      {hasMoreComments && !showAllComments && (
-        <div className="text-center mt-4 mb-4">
-          <button
-            type="button"
-            className="theme-btn"
-            onClick={() => setShowAllComments(true)}
-          >
-            Show More Comments ({(comments || []).length - initialDisplayCount} more)
-            <i className="fa-solid fa-arrow-down"></i>
-          </button>
-        </div>
-      )}
-
-      {/* Nút thu gọn */}
-      {hasMoreComments && showAllComments && (
-        <div className="text-center mt-4 mb-4">
-          <button
-            type="button"
-            className="theme-btn"
-            onClick={() => {
-              setShowAllComments(false);
-            }}
-          >
-            Show Less
-            <i className="fa-solid fa-arrow-up"></i>
-          </button>
-        </div>
-      )}
-
-      {/* Form comment mới (top-level) */}
-      <div className="mt-5">
-        <CommentForm slug={slug} />
-      </div>
-    </div>
-  );
-}
-
diff --git a/app/blog/[slug]/components/NewsDetailsContent.tsx b/app/blog/[slug]/components/NewsDetailsContent.tsx
deleted file mode 100644
index 11bf29d..0000000
--- a/app/blog/[slug]/components/NewsDetailsContent.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import Link from "next/link";
-import type { BlogPost } from "@/types/blog";
-import { editorjsToHtml, getCmsImageUrl } from "@/utils";
-import { toSlug } from "@/utils/slugify";
-import CommentsSection from "./CommentsSection";
-
-interface NewsDetailsContentProps {
-  post: BlogPost;
-}
-
-export default function NewsDetailsContent({ post }: NewsDetailsContentProps) {
-  // Lấy comments từ post (đã được bao gồm trong API response)
-  const postComments = post.comments || [];
-
-  // Lấy base URL cho EditorJS images và URL tuyệt đối của bài viết
-  const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-  const postUrl = `${baseUrl}/blog/${post.slug}`;
-  const encodedPostUrl = encodeURIComponent(postUrl);
-  const encodedTitle = encodeURIComponent(post.title);
-
-  // Chuyển đổi EditorJS content sang HTML
-  const renderContent = () => {
-    const html = editorjsToHtml(post.content, baseUrl);
-    return { __html: html };
-  };
-
-  // Chuyển đổi EditorJS contentAfterQuote sang HTML
-  const renderContentAfterQuote = () => {
-    const html = editorjsToHtml(post.contentAfterQuote, baseUrl);
-    return { __html: html };
-  };
-
-  return (
-    <div className="col-lg-8 col-12">
-      <div className="news-details-post">
-        <div className="news-details-image">
-          <img
-            src={getCmsImageUrl(post.featuredImage) || "/assets/img/inner-page/news-details/details-1.jpg"}
-            alt={post.title}
-          />
-        </div>
-        <div className="details-content">
-          <ul className="news-list">
-            <li>
-              <i className="fa-solid fa-user"></i> By {post.author}
-            </li>
-            <li>
-              <i className="fa-solid fa-calendar-days"></i> {post.publishedAt}
-            </li>
-            <li>
-              <i className="fa-solid fa-comments"></i> {postComments.length} Comments
-            </li>
-          </ul>
-          <h2>{post.title}</h2>
-          <div className="editorjs-render" dangerouslySetInnerHTML={renderContent()} />
-
-          {/* Hình ảnh gallery */}
-          {post.galleryImages && post.galleryImages.length > 0 && (
-            <div className="row g-4 gallery-images-row">
-              {post.galleryImages.map((image, index) => (
-                <div key={index} className={post.galleryImages!.length === 1 ? "col-12" : "col-lg-6 gallery-item"}>
-                  <div className="thumb">
-                    <img src={getCmsImageUrl(image)} alt={`${post.title} - Image ${index + 1}`} />
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Quote/Sidebar */}
-          {post.quote && (
-            <div className="sideber mt-4 mb-3">
-              <h5>{post.quote}</h5>
-            </div>
-          )}
-
-          {/* Nội dung sau Quote */}
-          {post.contentAfterQuote && (
-            <div
-              className="editorjs-render"
-              dangerouslySetInnerHTML={renderContentAfterQuote()}
-            />
-          )}
-
-          {/* Tags và Social Share */}
-          <div className="row tag-share-wrap mt-4 mb-5">
-            <div className="col-lg-8 col-12">
-              <div className="tagcloud">
-                <span>Tags:</span>
-                {post.tags.map((tagName) => {
-                  // Tạo slug từ tên tag (hỗ trợ tiếng Việt)
-                  const tagSlug = toSlug(tagName);
-                  return (
-                    <Link key={tagName} href={`/blog/tag/${tagSlug}`}>
-                      {tagName}
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-            <div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
-              <div className="social-share">
-                <a
-                  href={`https://twitter.com/intent/tweet?url=${encodedPostUrl}&text=${encodedTitle}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label="Share on Twitter"
-                >
-                  <i className="fab fa-twitter"></i>
-                </a>
-                <a
-                  href={`https://www.facebook.com/sharer/sharer.php?u=${encodedPostUrl}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label="Share on Facebook"
-                >
-                  <i className="fab fa-facebook-f"></i>
-                </a>
-                <a
-                  href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedPostUrl}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label="Share on LinkedIn"
-                >
-                  <i className="fab fa-linkedin-in"></i>
-                </a>
-                <a
-                  href={postUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label="Open blog post"
-                >
-                  <i className="fa-solid fa-link"></i>
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <CommentsSection slug={post.slug} comments={postComments} />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/blog/[slug]/components/NewsDetailsSection.tsx b/app/blog/[slug]/components/NewsDetailsSection.tsx
deleted file mode 100644
index de4d86d..0000000
--- a/app/blog/[slug]/components/NewsDetailsSection.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import NewsDetailsContent from "./NewsDetailsContent";
-import Sidebar from "@/app/blog/components/Sidebar";
-import type { BlogPost } from "@/types/blog";
-
-interface NewsDetailsSectionProps {
-    post: BlogPost;
-}
-
-export default function NewsDetailsSection({ post }: NewsDetailsSectionProps) {
-    return (
-        <section className="news-standard-section section-padding fix">
-            <div className="container">
-                <div className="news-details-wrapper">
-                    <div className="row g-4">
-                        <NewsDetailsContent post={post} />
-                        <Sidebar />
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
deleted file mode 100644
index 336f3ec..0000000
--- a/app/blog/[slug]/page.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import Link from "next/link";
-import type { Metadata } from "next";
-import Breadcrumb from "@/app/components/Breadcrumb";
-import NewsDetailsSection from "./components/NewsDetailsSection";
-import { fetchBlogList, fetchBlogDetail } from "@/api/blogsApi";
-import Sidebar from "@/app/blog/components/Sidebar";
-import { getCmsImageUrl } from "@/utils";
-
-// Force dynamic rendering - không cache
-export const dynamic = 'force-dynamic';
-
-// Generate static params for all blog posts
-export async function generateStaticParams() {
-    try {
-        const blogResponse = await fetchBlogList({ page: 1, limit: 100 });
-        return blogResponse.data.blogs.map((post) => ({
-            slug: post.slug,
-        }));
-    } catch (error) {
-        console.error("Error generating static params:", error);
-        return [];
-    }
-}
-
-interface BlogDetailsPageProps {
-    params:
-        | Promise<{
-              slug: string;
-          }>
-        | {
-              slug: string;
-          };
-}
-
-// SEO metadata cho từng bài blog (Open Graph / thumbnail khi share)
-export async function generateMetadata({
-    params,
-}: {
-    params:
-        | Promise<{
-              slug: string;
-          }>
-        | {
-              slug: string;
-          };
-}): Promise<Metadata> {
-    const resolvedParams = params instanceof Promise ? await params : params;
-    const slug = resolvedParams.slug;
-
-    try {
-        const blogResponse = await fetchBlogDetail(slug);
-        const post = blogResponse.data;
-
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-        const url = `${apiUrl}/blog/${post.slug}`;
-        const imageUrl = post.featuredImage
-            ? getCmsImageUrl(post.featuredImage)
-            : `${apiUrl}/assets/img/inner-page/news-details/details-1.jpg`;
-
-        return {
-            title: post.title,
-            description: post.excerpt,
-            openGraph: {
-                title: post.title,
-                description: post.excerpt,
-                url,
-                type: "article",
-                images: [
-                    {
-                        url: imageUrl,
-                        alt: post.title,
-                    },
-                ],
-            },
-            twitter: {
-                card: "summary_large_image",
-                title: post.title,
-                description: post.excerpt,
-                images: [imageUrl],
-            },
-        };
-    } catch {
-        return {
-            title: "Blog Details",
-        };
-    }
-}
-
-export default async function BlogDetailsPage({ params }: BlogDetailsPageProps) {
-    // Handle both Promise and direct object
-    const resolvedParams = params instanceof Promise ? await params : params;
-    const slug = resolvedParams.slug;
-
-    // Fetch blog detail from API
-    let blogResponse;
-    try {
-        blogResponse = await fetchBlogDetail(slug);
-    } catch {
-        return (
-            <>
-                <Breadcrumb title="Blog Details" current="Blog Details" />
-                <section className="news-standard-section section-padding fix">
-                    <div className="container">
-                        <div className="news-standard-wrapper">
-                            <div className="row g-4">
-                                <div className="col-lg-8 col-12">
-                                    <div className="py-5">
-                                        <h2>Post not found</h2>
-                                        <p>The blog post you are looking for does not exist.</p>
-                                        <Link href="/blog" className="theme-btn mt-3">
-                                            Back to Blog <i className="fa-solid fa-arrow-right"></i>
-                                        </Link>
-                                    </div>
-                                </div>
-                                {/* Sidebar on the right */}
-                                <Sidebar />
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </>
-        );
-    }
-
-    const post = blogResponse.data;
-
-    return (
-        <>
-            <Breadcrumb title={post.title} current="Blog Details" />
-            <NewsDetailsSection post={post} />
-        </>
-    );
-}
diff --git a/app/blog/blog-page.css b/app/blog/blog-page.css
new file mode 100644
index 0000000..5cb4b50
--- /dev/null
+++ b/app/blog/blog-page.css
@@ -0,0 +1,176 @@
+/* ============================================
+   Blog Page — Scoped Styles
+   Scope: .blog-page
+   ============================================ */
+
+/* Reset heading override từ main.css */
+.blog-page h1,
+.blog-page h2,
+.blog-page h3,
+.blog-page h4 {
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  margin: 0;
+  padding: 0;
+}
+
+/* Typography classes thay thế h1/h2/h3 */
+.blog-page .blog-heading {
+  font-size: clamp(1.75rem, 4vw, 3rem);
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+.blog-page .blog-card-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.blog-page .blog-widget-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+/* ---------- Color tokens ---------- */
+
+.blog-page .bg-brand-blue       { background-color: rgb(38, 60, 111); }
+.blog-page .text-brand-blue     { color: rgb(38, 60, 111); }
+.blog-page .border-brand-blue   { border-color: rgb(38, 60, 111); }
+
+.blog-page .bg-brand-light      { background-color: #f8fbff; }
+.blog-page .text-brand-light    { color: #f8fbff; }
+
+.blog-page .bg-brand-hover      { background-color: #2d3a8c; }
+.blog-page .hover\:bg-brand-hover:hover { background-color: #2d3a8c; }
+
+.blog-page .text-ui-text        { color: #111827; }
+.blog-page .text-ui-muted       { color: #6b7280; }
+.blog-page .bg-ui-bg            { background-color: #f9fafb; }
+.blog-page .border-ui-border    { border-color: #e5e7eb; }
+
+/* hover:text-brand-blue */
+.blog-page .hover\:text-brand-blue:hover  { color: #1b254b; }
+.blog-page .hover\:border-brand-blue:hover { border-color: #1b254b; }
+
+/* group-hover */
+.blog-page .group:hover .group-hover\:text-brand-blue { color: #1b254b; }
+.blog-page .group:hover .group-hover\:border-brand-blue { border-color: #1b254b; }
+.blog-page .group:hover .group-hover\:gap-2 { gap: 0.5rem; }
+.blog-page .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
+
+/* shadow tokens */
+.blog-page .shadow-soft {
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
+}
+.blog-page .shadow-hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+}
+.blog-page .hover\:shadow-hover:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+}
+
+/* border-brand-blue/20, border-brand-blue/50 */
+.blog-page .border-brand-blue\/20 { border-color: rgb(27 37 75 / 0.2); }
+.blog-page .border-brand-blue\/50 { border-color: rgb(27 37 75 / 0.5); }
+.blog-page .hover\:border-brand-blue\/50:hover { border-color: rgb(27 37 75 / 0.5); }
+
+/* text-brand-blue/40 */
+.blog-page .text-brand-blue\/40 { color: rgb(27 37 75 / 0.4); }
+
+/* text-brand-light/80, /60 */
+.blog-page .text-brand-light\/80 { color: rgb(248 251 255 / 0.8); }
+.blog-page .text-brand-light\/60 { color: rgb(248 251 255 / 0.6); }
+
+/* bg-white/10, /90 */
+.blog-page .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
+.blog-page .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
+
+/* border-white/20 */
+.blog-page .border-white\/20 { border-color: rgb(255 255 255 / 0.2); }
+
+/* placeholder */
+.blog-page .placeholder-white\/50::placeholder { color: rgb(255 255 255 / 0.5); }
+
+/* Category filter buttons */
+.blog-page #category-filters button {
+  padding-left: 1.25rem !important;
+  padding-right: 1.25rem !important;
+  padding-top: 0.4rem !important;
+  padding-bottom: 0.4rem !important;
+  border-radius: 9999px !important;
+  font-size: 0.8rem !important;
+}
+
+/* Category filter hover — viền sáng lên */
+.blog-page #category-filters button:not(:first-child):hover {
+  border-color: #1b254b !important;
+  color: #1b254b !important;
+}
+
+/* Newsletter input placeholder */
+.blog-page .newsletter-input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Newsletter widget */
+.blog-page .folder-tab {
+  background-color: #263c6f !important;
+  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
+  border-radius: 12px !important;
+}
+
+.blog-page .folder-tab input {
+  border-radius: 8px !important;
+  padding: 0.35rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  background-color: rgba(255,255,255,0.12) !important;
+  border: 1px solid rgba(255,255,255,0.25) !important;
+  color: white !important;
+}
+
+.blog-page .folder-tab input::placeholder {
+  color: rgba(255,255,255,0.5) !important;
+}
+
+.blog-page .folder-tab button[type="submit"] {
+  border-radius: 8px !important;
+  padding: 0.35rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  font-weight: 700 !important;
+  background-color: white !important;
+  color: #1b254b !important;
+}
+
+/* Pagination buttons */
+.blog-page .border-ui-border[class*="w-10"] {
+  border-radius: 8px !important;
+}
+
+.blog-page .border-ui-border[class*="w-10"]:hover {
+  border-color: rgb(38, 60, 111) !important;
+  color: rgb(38, 60, 111) !important;
+}
+
+.blog-page .bg-brand-blue[class*="w-10"] {
+  border-radius: 8px !important;
+  background-color: rgb(38, 60, 111) !important;
+}
+
+/* Pagination */
+.blog-page .pg-btn {
+  border-radius: 8px !important;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.blog-page .pg-btn:hover {
+  border-color: rgb(38, 60, 111) !important;
+  color: rgb(38, 60, 111) !important;
+}
+
+.blog-page .pg-active {
+  background-color: rgb(38, 60, 111) !important;
+  border: none !important;
+}
diff --git a/app/blog/blog.json b/app/blog/blog.json
deleted file mode 100644
index 4a6b1d2..0000000
--- a/app/blog/blog.json
+++ /dev/null
@@ -1,170 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "Visa & Immigration",
-      "slug": "visa-immigration",
-      "description": "Tin tức và hướng dẫn về visa, định cư."
-    },
-    {
-      "name": "Study Abroad",
-      "slug": "study-abroad",
-      "description": "Kinh nghiệm du học, trường học, học bổng."
-    },
-    {
-      "name": "Travel Tips",
-      "slug": "travel-tips",
-      "description": "Mẹo du lịch, chuẩn bị hành lý, bảo hiểm."
-    }
-  ],
-  "tags": [
-    {
-      "name": "WorkVisa",
-      "slug": "work-visa"
-    },
-    {
-      "name": "StudentVisa",
-      "slug": "student-visa"
-    },
-    {
-      "name": "Canada",
-      "slug": "canada"
-    },
-    {
-      "name": "Scholarship",
-      "slug": "scholarship"
-    },
-    {
-      "name": "TravelSafety",
-      "slug": "travel-safety"
-    }
-  ],
-  "posts": [
-    {
-      "title": "Ultimate Guide To Getting A Work Visa In Canada",
-      "slug": "ultimate-guide-work-visa-canada",
-      "excerpt": "Tổng hợp đầy đủ các bước xin work visa tại Canada cho người mới bắt đầu, từ điều kiện, hồ sơ đến thời gian xử lý.",
-      "content": "<p>Trong bài viết này, chúng ta sẽ đi qua từng bước cụ thể để xin work visa Canada, từ việc chuẩn bị hồ sơ, chọn chương trình phù hợp đến cách theo dõi tiến độ xử lý hồ sơ. Bạn cũng sẽ tìm thấy một số mẹo thực tế để tránh những sai lầm phổ biến.</p>",
-      "category": ["Visa & Immigration", "Canada"],
-      "tags": ["WorkVisa", "Canada"],
-      "author": "Admin",
-      "status": "published",
-      "publishedAt": "11 March 2025",
-      "isFeatured": true,
-      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
-      "galleryImages": [
-        "/assets/img/inner-page/news-details/details-2.jpg",
-        "/assets/img/inner-page/news-details/details-3.jpg"
-      ],
-      "quote": "This blog really helped me understand the difference between student and work visas. The explanations were clear and practical.",
-      "contentAfterQuote": "<p class=\"mb-3\">It provides access to world-class universities, cultural exposure, and global networking opportunities. With a student visa, you may also get part-time work rights, which can help support your expenses and give you valuable international work experience. However, the primary focus remains on academics and personal growth. On the other hand, a work visa is perfect for those who want to establish themselves in a career overseas.</p><p>It provides immediate access to job markets, stable income, and often a pathway to permanent residency. Work visas are suitable for skilled professionals who are ready to contribute to the global workforce and achieve long-term career goals. Ultimately, the choice comes down to your personal aspirations. If education and exploration are your priorities, a student visa is ideal. If career advancement and stability are your goals, a work visa is the right fit.</p>",
-      "commentsCount": 3
-    },
-    {
-      "title": "Top 5 Scholarship Programs For International Students",
-      "slug": "top-5-scholarship-programs-international-students",
-      "excerpt": "Danh sách 5 chương trình học bổng nổi bật dành cho sinh viên quốc tế với mức hỗ trợ hấp dẫn.",
-      "content": "<p>Nếu bạn đang tìm kiếm học bổng để giảm chi phí du học, đây là 5 chương trình bạn không nên bỏ qua. Mỗi chương trình đều có tiêu chí xét tuyển, mức hỗ trợ và thời hạn đăng ký khác nhau.</p><p class=\"mt-4 mb-3\">Học bổng là một trong những cách tốt nhất để giảm gánh nặng tài chính khi du học. Các chương trình học bổng không chỉ hỗ trợ về mặt tài chính mà còn mở ra nhiều cơ hội phát triển nghề nghiệp và mở rộng mạng lưới quan hệ quốc tế.</p>",
-      "category": ["Study Abroad"],
-      "tags": ["StudentVisa", "Scholarship"],
-      "author": "Admin",
-      "status": "published",
-      "publishedAt": "20 March 2025",
-      "isFeatured": false,
-      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
-      "galleryImages": [
-        "/assets/img/inner-page/news-details/details-2.jpg",
-        "/assets/img/inner-page/news-details/details-3.jpg"
-      ],
-      "quote": "These scholarship programs opened doors I never thought possible. The application process was straightforward, and the support I received was incredible.",
-      "contentAfterQuote": "<p class=\"mb-3\">Applying for scholarships requires careful planning and preparation. Start by researching each program's requirements, deadlines, and eligibility criteria. Make sure to prepare all necessary documents well in advance, including transcripts, recommendation letters, and personal statements. Each scholarship has its own unique focus, so tailor your application to highlight how you align with their values and goals.</p><p>Remember that scholarship applications are competitive, so it's important to stand out. Showcase your academic achievements, extracurricular activities, and community involvement. Be authentic in your personal statement and demonstrate how the scholarship will help you achieve your educational and career aspirations. With dedication and proper preparation, you can increase your chances of securing financial support for your studies abroad.</p>",
-      "commentsCount": 2
-    },
-    {
-      "title": "10 Travel Safety Tips You Should Know Before Flying",
-      "slug": "10-travel-safety-tips-before-flying",
-      "excerpt": "Những lưu ý quan trọng để đảm bảo an toàn cho chuyến bay và hành trình của bạn.",
-      "content": "<p>An toàn luôn là ưu tiên hàng đầu khi đi du lịch. Dưới đây là 10 tips giúp bạn yên tâm hơn trên mọi chuyến đi, từ việc chuẩn bị giấy tờ, bảo hiểm đến cách bảo vệ tài sản cá nhân.</p><p class=\"mt-4 mb-3\">Du lịch là một trải nghiệm tuyệt vời, nhưng điều quan trọng là phải chuẩn bị kỹ lưỡng để đảm bảo an toàn. Những tips này được đúc kết từ kinh nghiệm thực tế của nhiều du khách và sẽ giúp bạn tránh được những rủi ro không đáng có.</p>",
-      "category": ["Travel Tips"],
-      "tags": ["TravelSafety"],
-      "author": "Admin",
-      "status": "published",
-      "publishedAt": "05 April 2025",
-      "isFeatured": false,
-      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
-      "galleryImages": [
-        "/assets/img/inner-page/news-details/details-2.jpg",
-        "/assets/img/inner-page/news-details/details-3.jpg"
-      ],
-      "quote": "These safety tips saved me from potential problems during my trip. I especially appreciated the advice about travel insurance and document preparation.",
-      "contentAfterQuote": "<p class=\"mb-3\">Before you travel, make sure to research your destination thoroughly. Understand local customs, laws, and potential safety concerns. Keep copies of important documents like your passport, visa, and travel insurance in multiple places - both physical and digital. Inform family or friends about your itinerary and check in regularly during your trip.</p><p>When packing, prioritize essential items and keep valuables secure. Use luggage locks and consider travel insurance for expensive items. Stay aware of your surroundings, especially in crowded areas, and trust your instincts if something feels off. By following these safety tips, you can focus on enjoying your journey while staying protected throughout your travels.</p>",
-      "commentsCount": 1
-    }
-  ],
-  "recentPosts": [
-    {
-      "title": "Ultimate Guide To Getting A Work Visa In Canada",
-      "slug": "ultimate-guide-work-visa-canada",
-      "thumbnail": "/assets/img/inner-page/news-details/post-1.jpg",
-      "publishedAt": "11 March 2025"
-    },
-    {
-      "title": "Top 5 Scholarship Programs For International Students",
-      "slug": "top-5-scholarship-programs-international-students",
-      "thumbnail": "/assets/img/inner-page/news-details/post-2.jpg",
-      "publishedAt": "20 March 2025"
-    },
-    {
-      "title": "10 Travel Safety Tips You Should Know Before Flying",
-      "slug": "10-travel-safety-tips-before-flying",
-      "thumbnail": "/assets/img/inner-page/news-details/post-3.jpg",
-      "publishedAt": "05 April 2025"
-    }
-  ],
-  "comments": [
-    {
-      "postSlug": "ultimate-guide-work-visa-canada",
-      "authorName": "Frank Flores",
-      "authorAvatar": "/assets/img/inner-page/news-details/comment-1.png",
-      "content": "Bài viết rất hữu ích, cảm ơn bạn đã chia sẻ!",
-      "createdAt": "February 10, 2024",
-      "status": "approved",
-      "parentAuthorName": null
-    },
-    {
-      "postSlug": "ultimate-guide-work-visa-canada",
-      "authorName": "Courtney Henry",
-      "authorAvatar": "/assets/img/inner-page/news-details/comment-2.png",
-      "content": "Mình đã làm theo hướng dẫn và hồ sơ được duyệt nhanh hơn hẳn.",
-      "createdAt": "February 12, 2024",
-      "status": "approved",
-      "parentAuthorName": "Frank Flores"
-    },
-    {
-      "postSlug": "top-5-scholarship-programs-international-students",
-      "authorName": "Sarah Johnson",
-      "authorAvatar": "/assets/img/inner-page/news-details/comment-1.png",
-      "content": "Cảm ơn bạn đã chia sẻ thông tin về các chương trình học bổng này. Mình đã apply và đang chờ kết quả!",
-      "createdAt": "March 15, 2025",
-      "status": "approved",
-      "parentAuthorName": null
-    },
-    {
-      "postSlug": "top-5-scholarship-programs-international-students",
-      "authorName": "Michael Chen",
-      "authorAvatar": "/assets/img/inner-page/news-details/comment-2.png",
-      "content": "Bài viết rất chi tiết và hữu ích. Mình đã tìm thấy một chương trình phù hợp với mình.",
-      "createdAt": "March 18, 2025",
-      "status": "approved",
-      "parentAuthorName": null
-    },
-    {
-      "postSlug": "10-travel-safety-tips-before-flying",
-      "authorName": "Jenny Wilson",
-      "authorAvatar": "/assets/img/inner-page/news-details/comment-3.png",
-      "content": "Những tip này rất thực tế, đặc biệt là phần chuẩn bị bảo hiểm!",
-      "createdAt": "March 02, 2024",
-      "status": "approved",
-      "parentAuthorName": null
-    }
-  ]
-}
diff --git a/app/blog/category/[slug]/page.tsx b/app/blog/category/[slug]/page.tsx
deleted file mode 100644
index b2532c0..0000000
--- a/app/blog/category/[slug]/page.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import Breadcrumb from "@/app/components/Breadcrumb";
-import NewsSection from "@/app/blog/components/NewsSection";
-import Sidebar from "@/app/blog/components/Sidebar";
-import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blogsApi";
-
-interface CategoryPageProps {
-    params:
-        | Promise<{
-              slug: string;
-          }>
-        | {
-              slug: string;
-          };
-    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
-}
-
-export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
-    // Handle both Promise and direct object
-    const resolvedParams = params instanceof Promise ? await params : params;
-    const slug = resolvedParams.slug;
-    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-    const searchQuery = resolvedSearchParams?.search?.toString() || "";
-    const pageParam = resolvedSearchParams?.page?.toString() || "1";
-    const currentPage = Number.parseInt(pageParam, 10) || 1;
-
-    // Fetch category detail and blogs
-    let categoryResponse, blogsResponse;
-    try {
-        [categoryResponse, blogsResponse] = await Promise.all([
-            fetchCategoryDetail(slug),
-            fetchBlogsByCategory(slug, {
-                page: currentPage,
-                limit: 3,
-                ...(searchQuery ? { search: searchQuery } : {}),
-            }),
-        ]);
-    } catch {
-        return (
-            <>
-                <Breadcrumb title="Category" current="Blog Category" />
-                <section className="news-standard-section section-padding fix">
-                    <div className="container">
-                        <div className="news-standard-wrapper">
-                            <div className="row g-4">
-                                <div className="col-lg-8 col-12">
-                                    <div className="py-5">
-                                        <h2>Category not found</h2>
-                                        <p>The category you are looking for does not exist.</p>
-                                    </div>
-                                </div>
-                                <Sidebar />
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </>
-        );
-    }
-
-    const category = categoryResponse.data;
-    const { blogs, pagination } = blogsResponse.data;
-
-    return (
-        <>
-            <Breadcrumb title={category.name} current="Blog Category" />
-            <NewsSection blogs={blogs} categorySlug={slug} searchQuery={searchQuery} pagination={pagination} />
-        </>
-    );
-}
diff --git a/app/blog/components/NewsList.tsx b/app/blog/components/NewsList.tsx
deleted file mode 100644
index bf717a1..0000000
--- a/app/blog/components/NewsList.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from "next/link";
-import type { BlogPost } from "@/types/blog";
-import { getCmsImageUrl } from "@/utils";
-
-interface NewsListProps {
-  blogs?: BlogPost[];
-  categorySlug?: string;
-  tagSlug?: string;
-}
-
-export default function NewsList({ blogs = [], categorySlug, tagSlug }: NewsListProps) {
-  // Use blogs from props (already filtered by API)
-  const posts = blogs;
-
-  // Additional client-side filtering if needed (though API should handle this)
-  if (categorySlug || tagSlug) {
-    // If filters are provided but blogs are not pre-filtered, filter here
-    // This is a fallback - ideally API should handle filtering
-  }
-
-  return (
-    <div className="col-lg-8 col-12">
-      {posts.map((post, index) => (
-        <div
-          key={post.slug}
-          className={`news-standard-post ${index === posts.length - 1 ? "mb-0" : ""}`}
-        >
-          <div className="news-image">
-            <img
-              src={
-                post.featuredImage
-                  ? getCmsImageUrl(post.featuredImage)
-                  : "/assets/img/inner-page/news-details/details-1.jpg"
-              }
-              alt={post.title}
-            />
-          </div>
-          <div className="news-content">
-            <ul className="news-list">
-              <li>
-                <i className="fa-solid fa-user"></i> By {post.author}
-              </li>
-              <li>
-                <i className="fa-solid fa-calendar-days"></i> {post.publishedAt}
-              </li>
-              <li>
-                <i className="fa-solid fa-comments"></i> {post.commentsCount} Comments
-              </li>
-            </ul>
-            <h3>
-              <Link href={`/blog/${post.slug}`}>{post.title}</Link>
-            </h3>
-            <p>{post.excerpt}</p>
-            <Link href={`/blog/${post.slug}`} className="theme-btn">
-              VIEW MORE <i className="fa-solid fa-arrow-right"></i>
-            </Link>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/blog/components/NewsSection.tsx b/app/blog/components/NewsSection.tsx
deleted file mode 100644
index 34c3138..0000000
--- a/app/blog/components/NewsSection.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import NewsList from "./NewsList";
-import Sidebar from "./Sidebar";
-import Pagination from "./Pagination";
-import type { BlogPost, BlogPagination } from "@/types";
-
-interface NewsSectionProps {
-  blogs?: BlogPost[];
-  categorySlug?: string;
-  tagSlug?: string;
-  searchQuery?: string;
-  pagination?: BlogPagination;
-}
-
-export default function NewsSection({
-  blogs,
-  categorySlug,
-  tagSlug,
-  searchQuery,
-  pagination,
-}: NewsSectionProps) {
-  const basePath = categorySlug
-    ? `/blog/category/${categorySlug}`
-    : tagSlug
-      ? `/blog/tag/${tagSlug}`
-      : "/blog";
-
-  return (
-    <section className="news-standard-section section-padding fix">
-      <div className="container">
-        <div className="news-standard-wrapper">
-          <div className="row g-4">
-            <NewsList blogs={blogs} categorySlug={categorySlug} tagSlug={tagSlug} />
-            <Sidebar searchQuery={searchQuery} />
-          </div>
-          {pagination && pagination.total > 1 && (
-            <div className="row g-4 mt-4">
-              <div className="col-12">
-                <Pagination basePath={basePath} pagination={pagination} searchQuery={searchQuery} />
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
\ No newline at end of file
diff --git a/app/blog/components/Pagination.tsx b/app/blog/components/Pagination.tsx
deleted file mode 100644
index c1a815e..0000000
--- a/app/blog/components/Pagination.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import Link from "next/link";
-import type { BlogPagination } from "@/types";
-
-interface PaginationProps {
-  basePath: string;
-  pagination: BlogPagination;
-  searchQuery?: string;
-}
-
-export default function Pagination({ basePath, pagination, searchQuery }: PaginationProps) {
-  const { current, total } = pagination;
-
-  if (total <= 1) return null;
-
-  const makeHref = (page: number) => {
-    const params = new URLSearchParams();
-    if (page > 1) params.set("page", page.toString());
-    if (searchQuery) params.set("search", searchQuery);
-    const qs = params.toString();
-    return qs ? `${basePath}?${qs}` : basePath;
-  };
-
-  const pages: number[] = [];
-  for (let i = 1; i <= total; i++) {
-    if (i === 1 || i === total || (i >= current - 2 && i <= current + 2)) {
-      pages.push(i);
-    }
-  }
-
-  const items: (number | "...")[] = [];
-  for (let i = 0; i < pages.length; i++) {
-    const page = pages[i];
-    items.push(page);
-    if (i < pages.length - 1 && pages[i + 1] !== page + 1) {
-      items.push("...");
-    }
-  }
-
-  return (
-    <nav aria-label="Blog pagination" className="mt-4">
-      <ul className="pagination justify-content-center hai-pagination">
-        {current > 1 && (
-          <li className="page-item">
-            <Link className="page-link" href={makeHref(current - 1)} aria-label="Previous page">
-              <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
-            </Link>
-          </li>
-        )}
-
-        {items.map((item, idx) =>
-          item === "..." ? (
-            <li key={`ellipsis-${idx}`} className="page-item disabled">
-              <span className="page-link">...</span>
-            </li>
-          ) : (
-            <li key={item} className={`page-item ${item === current ? "active" : ""}`}>
-              {item === current ? (
-                <span className="page-link">{item}</span>
-              ) : (
-                <Link className="page-link" href={makeHref(item as number)}>
-                  {item}
-                </Link>
-              )}
-            </li>
-          ),
-        )}
-
-        {current < total && (
-          <li className="page-item">
-            <Link className="page-link" href={makeHref(current + 1)} aria-label="Next page">
-              <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
-            </Link>
-          </li>
-        )}
-      </ul>
-    </nav>
-  );
-}
-
diff --git a/app/blog/components/Sidebar.tsx b/app/blog/components/Sidebar.tsx
deleted file mode 100644
index 3bb3be6..0000000
--- a/app/blog/components/Sidebar.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import Link from "next/link";
-import { fetchCategories, fetchRecentBlogs, fetchPopularTags } from "@/api/blogsApi";
-import { getCmsImageUrl } from "@/utils";
-
-interface SidebarProps {
-  searchQuery?: string;
-}
-
-export default async function Sidebar({ searchQuery }: SidebarProps) {
-  // Fetch data from API
-  const [categoriesResponse, recentBlogsResponse, tagsResponse] = await Promise.all([
-    fetchCategories(),
-    fetchRecentBlogs(5),
-    fetchPopularTags(10),
-  ]);
-
-  const categories = categoriesResponse.data;
-  const recentPosts = recentBlogsResponse.data;
-  const tags = tagsResponse.data;
-
-  return (
-    <div className="col-lg-4 col-12">
-      <div className="main-sideber">
-        {/* Search Widget */}
-        <div className="news-sideber-box">
-          <div className="search-widget">
-            <form action="/blog" method="GET">
-              <input
-                type="text"
-                name="search"
-                placeholder="Search Blog"
-                defaultValue={searchQuery || ""}
-              />
-              <button type="submit">
-                <i className="fa-solid fa-magnifying-glass"></i>
-              </button>
-            </form>
-          </div>
-        </div>
-        {/* Categories */}
-        <div className="news-sideber-box">
-          <div className="wid-title">
-            <h3>Categories</h3>
-          </div>
-          <div className="news-widget-categories">
-            <ul>
-              {categories.map((category) => {
-                const postCount = category.postCount || 0;
-                return (
-                  <li key={category.slug}>
-                    <Link href={`/blog/category/${category.slug}`}>
-                      <i className="fa-solid fa-chevrons-right"></i> {category.name}
-                    </Link>
-                    <span>({String(postCount).padStart(2, "0")})</span>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-        {/* Recent Post */}
-        <div className="news-sideber-box">
-          <div className="wid-title">
-            <h3>Recent Post</h3>
-          </div>
-          <div className="recent-post-area">
-            {recentPosts.map((post) => (
-              <div key={post.slug} className="recent-items">
-                <div className="recent-thumb">
-                  <img
-                    src={getCmsImageUrl(post.thumbnail) || "/assets/img/inner-page/news-details/details-1.jpg"}
-                    alt={post.title}
-                  />
-                </div>
-                <div className="recent-content">
-                  <h6>
-                    <Link href={`/blog/${post.slug}`}>{post.title}</Link>
-                  </h6>
-                  <ul>
-                    <li>{post.publishedAt}</li>
-                  </ul>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        {/* Tag Cloud */}
-        <div className="news-sideber-box mb-0">
-          <div className="wid-title">
-            <h3>Tag Cloud</h3>
-          </div>
-          <div className="news-widget-categories">
-            <div className="tagcloud">
-              {tags.map((tag) => (
-                <Link key={tag.slug} href={`/blog/tag/${tag.slug}`}>
-                  {tag.name}
-                </Link>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 1c9e5af..ad577fc 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,29 +1,26 @@
-import Breadcrumb from "@/app/components/Breadcrumb";
-import NewsSection from "./components/NewsSection";
-import { fetchBlogList } from "@/api/blogsApi";
+import "./blog-page.css";
+import FeaturedHero from "../components/blog/FeaturedHero";
+import CategoryFilters from "../components/blog/CategoryFilters";
+import NewsGrid from "../components/blog/NewsGrid";
+import BlogSidebar from "../components/blog/BlogSidebar";
 
-interface NewsPageProps {
-    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
-}
-
-export default async function NewsPage({ searchParams }: NewsPageProps) {
-    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-    const searchQuery = resolvedSearchParams?.search?.toString() || "";
-    const pageParam = resolvedSearchParams?.page?.toString() || "1";
-    const currentPage = Number.parseInt(pageParam, 10) || 1;
-
-    // Fetch blog list from API
-    const blogResponse = await fetchBlogList({
-        page: currentPage,
-        limit: 3,
-        ...(searchQuery ? { search: searchQuery } : {}),
-    });
-    const { blogs, pagination } = blogResponse.data;
-
-    return (
-        <>
-            <Breadcrumb title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"} current="Blog Standard" />
-            <NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
-        </>
-    );
+export default function BlogPage() {
+  return (
+    <main className="blog-page w-full min-h-screen bg-ui-bg pb-20">
+      <FeaturedHero />
+
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="flex flex-col lg:flex-row gap-12">
+          {/* Left: filters + news grid */}
+          <div className="flex-1">
+            <CategoryFilters />
+            <NewsGrid />
+          </div>
+
+          {/* Right: sidebar */}
+          <BlogSidebar />
+        </div>
+      </div>
+    </main>
+  );
 }
diff --git a/app/blog/tag/[slug]/page.tsx b/app/blog/tag/[slug]/page.tsx
deleted file mode 100644
index 5090bcc..0000000
--- a/app/blog/tag/[slug]/page.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import Breadcrumb from "@/app/components/Breadcrumb";
-import NewsSection from "@/app/blog/components/NewsSection";
-import Sidebar from "@/app/blog/components/Sidebar";
-import { fetchBlogsByTag, fetchTagDetail } from "@/api/blogsApi";
-
-interface TagPageProps {
-    params:
-        | Promise<{
-              slug: string;
-          }>
-        | {
-              slug: string;
-          };
-    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
-}
-
-export default async function TagPage({ params, searchParams }: TagPageProps) {
-    // Handle both Promise and direct object
-    const resolvedParams = params instanceof Promise ? await params : params;
-    const slug = resolvedParams.slug;
-    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-    const searchQuery = resolvedSearchParams?.search?.toString() || "";
-    const pageParam = resolvedSearchParams?.page?.toString() || "1";
-    const currentPage = Number.parseInt(pageParam, 10) || 1;
-
-    // Fetch tag detail and blogs
-    let tagResponse, blogsResponse;
-    try {
-        [tagResponse, blogsResponse] = await Promise.all([
-            fetchTagDetail(slug),
-            fetchBlogsByTag(slug, {
-                page: currentPage,
-                limit: 3,
-                ...(searchQuery ? { search: searchQuery } : {}),
-            }),
-        ]);
-    } catch {
-        return (
-            <>
-                <Breadcrumb title="Tag" current="Blog Tag" />
-                <section className="news-standard-section section-padding fix">
-                    <div className="container">
-                        <div className="news-standard-wrapper">
-                            <div className="row g-4">
-                                <div className="col-lg-8 col-12">
-                                    <div className="py-5">
-                                        <h2>Tag not found</h2>
-                                        <p>The tag you are looking for does not exist.</p>
-                                    </div>
-                                </div>
-                                <Sidebar />
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </>
-        );
-    }
-
-    const tag = tagResponse.data;
-    const { blogs, pagination } = blogsResponse.data;
-
-    return (
-        <>
-            <Breadcrumb title={tag.name} current="Blog Tag" />
-            <NewsSection blogs={blogs} tagSlug={slug} searchQuery={searchQuery} pagination={pagination} />
-        </>
-    );
-}
diff --git a/app/components/about/AboutFeatures.tsx b/app/components/about/AboutFeatures.tsx
deleted file mode 100644
index 30ee458..0000000
--- a/app/components/about/AboutFeatures.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Link from "next/link";
-import { AboutData } from "../../about/types";
-
-interface AboutFeaturesProps {
-    data: AboutData["features"];
-}
-
-const AboutFeatures = ({ data }: AboutFeaturesProps) => {
-    return (
-        <section
-            className="choose-us-section-2 section-padding fix bg-cover"
-            style={{ backgroundImage: `url(${data.backgroundImage})` }}
-        >
-            <div className="container">
-                <div className="choose-us-wrapper-2">
-                    <div className="row g-4">
-                        <div className="col-lg-6">
-                            <div className="choose-us-image">
-                                <img src={data.image} alt="img" />
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="feature-content">
-                                <div className="section-title mb-0">
-                                    <span className="sub-title-2 wow fadeInUp">{data.subheading}</span>
-                                    <h2 className="split-text-right split-text-in-right">{data.heading}</h2>
-                                </div>
-                                <p className="text">{data.description}</p>
-                                {data.items.map((item, index) => (
-                                    <div key={index} className="choose-us-box">
-                                        <div className="icon">
-                                            <img src={item.icon} alt="img" />
-                                        </div>
-                                        <div className="content">
-                                            <h5>{item.title}</h5>
-                                            <p>{item.description}</p>
-                                        </div>
-                                    </div>
-                                ))}
-                                <Link href={data.ctaButton.href} className="theme-btn">
-                                    {data.ctaButton.label}
-                                    <i className="fa-solid fa-arrow-right"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AboutFeatures;
diff --git a/app/components/about/AboutHero.tsx b/app/components/about/AboutHero.tsx
deleted file mode 100644
index 9ab631c..0000000
--- a/app/components/about/AboutHero.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link';
-import { AboutData } from '../../about/types';
-
-interface AboutHeroProps {
-    data: AboutData['hero'];
-}
-
-const AboutHero = ({ data }: AboutHeroProps) => {
-    return (
-        <section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
-            <div className="shape">
-                <img src="/assets/img/inner-page/shape.png" alt="img" />
-            </div>
-            <div className="container">
-                <div className="page-heading">
-                    <h1 className="breadcrumb-title">{data.title}</h1>
-                    {Array.isArray(data.breadcrumb) && (
-                        <ul className="breadcrumb-list">
-                            {data.breadcrumb.map((item, index) => (
-                                <li key={index}>
-                                    {index === data.breadcrumb.length - 1 ? (
-                                        item
-                                    ) : (
-                                        <>
-                                            <Link href="/">{item}</Link>
-                                            <i className="fa-solid fa-chevron-right ms-2 me-2"></i>
-                                        </>
-                                    )}
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AboutHero;
diff --git a/app/components/about/AboutIntro.tsx b/app/components/about/AboutIntro.tsx
deleted file mode 100644
index 0e828c2..0000000
--- a/app/components/about/AboutIntro.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { AboutData } from "../../about/types";
-
-interface AboutIntroProps {
-    data: AboutData["intro"];
-}
-
-const AboutIntro = ({ data }: AboutIntroProps) => {
-    return (
-        <section className="intro-section section-padding fix pb-0">
-            <div className="container">
-                <div className="section-title-area">
-                    <div className="section-title">
-                        <span className="sub-title-2 wow fadeInUp">{data.subheading}</span>
-                        <h2 className="split-text-right split-text-in-right">{data.heading}</h2>
-                    </div>
-                    <p>{data.description}</p>
-                </div>
-                <div className="row">
-                    <div className="intro-image tp-clip-anim p-relative">
-                        <img src={data.image} alt="img" className="tp-anim-img" data-animate="true" />
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AboutIntro;
diff --git a/app/components/about/AboutMission.tsx b/app/components/about/AboutMission.tsx
deleted file mode 100644
index ba6d6d8..0000000
--- a/app/components/about/AboutMission.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import Link from "next/link";
-import { AboutData } from "../../about/types";
-
-interface AboutMissionProps {
-    data: AboutData["mission"];
-}
-
-const AboutMission = ({ data }: AboutMissionProps) => {
-    return (
-        <section className="about-section section-padding fix pb-0">
-            <div className="top-shape">
-                <img src={data.images.globeShape} alt="img" />
-            </div>
-            <div className="container">
-                <div className="about-wrapper">
-                    <div className="row g-4">
-                        <div className="col-lg-6">
-                            <div className="about-image">
-                                <img src={data.images.main} alt="img" className="wow img-custom-anim-left" />
-                                <div className="about-image-2">
-                                    <img src={data.images.secondary} alt="img" className="wow img-custom-anim-right" />
-                                </div>
-                                <div className="bg-shape">
-                                    <img src={data.images.bgShape} alt="img" />
-                                </div>
-                                <div className="plane-shape float-bob-y">
-                                    <img src={data.images.planeShape} alt="img" />
-                                </div>
-                                <div className="top-shape float-bob-y">
-                                    <img src={data.images.topShape} alt="img" />
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="about-content">
-                                <div className="section-title mb-0">
-                                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                                    <h2 className="split-text-right split-text-in-right">{data.heading}</h2>
-                                </div>
-                                <p className="text wow fadeInUp" data-wow-delay=".3s">
-                                    {data.description}
-                                </p>
-                                <div className="about-item wow fadeInUp" data-wow-delay=".5s">
-                                    {data.items.map((item, index) => (
-                                        <div key={index} className="content">
-                                            <span>
-                                                <img src={item.icon} alt="" className="me-2 d-inline-block" />
-                                                {item.label}-
-                                            </span>
-                                            <p>{item.description}</p>
-                                        </div>
-                                    ))}
-                                </div>
-                                <ul className="list wow fadeInUp" data-wow-delay=".3s">
-                                    {data.features.map((feature, index) => (
-                                        <li key={index}>
-                                            <i className="fa-solid fa-chevrons-right"></i>
-                                            {feature}
-                                        </li>
-                                    ))}
-                                </ul>
-                                <Link
-                                    href={data.ctaButton.href}
-                                    className="theme-btn wow fadeInUp"
-                                    data-wow-delay=".5s"
-                                >
-                                    {data.ctaButton.label}
-                                    <i className="fa-solid fa-arrow-right"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AboutMission;
diff --git a/app/components/about/AboutNews.tsx b/app/components/about/AboutNews.tsx
deleted file mode 100644
index f188cde..0000000
--- a/app/components/about/AboutNews.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Link from "next/link";
-import { AboutData } from "../../about/types";
-
-interface AboutNewsProps {
-    data: AboutData["news"];
-}
-
-const AboutNews = ({ data }: AboutNewsProps) => {
-    return (
-        <section className="news-section section-padding fix pt-0">
-            <div className="container">
-                <div className="section-title-area">
-                    <div className="section-title">
-                        <span className="sub-title">{data.subheading}</span>
-                        <h2 className="split-text-right split-text-in-right">{data.heading}</h2>
-                    </div>
-                    <Link href={data.ctaButton.href} className="theme-btn">
-                        {data.ctaButton.label}
-                        <i className="fa-solid fa-arrow-right"></i>
-                    </Link>
-                </div>
-                <div className="row">
-                    {data.items.map((item, index) => (
-                        <div key={index} className="col-xl-4 col-lg-6 col-md-6">
-                            <div className="news-card-item">
-                                <div className="news-image">
-                                    <img src={item.thumbnail} alt="img" />
-                                    <span>{item.category}</span>
-                                    <div className="news-layer-wrapper">
-                                        <div
-                                            className="news-layer-image"
-                                            style={{ backgroundImage: `url('${item.thumbnail}')` }}
-                                        ></div>
-                                        <div
-                                            className="news-layer-image"
-                                            style={{ backgroundImage: `url('${item.thumbnail}')` }}
-                                        ></div>
-                                        <div
-                                            className="news-layer-image"
-                                            style={{ backgroundImage: `url('${item.thumbnail}')` }}
-                                        ></div>
-                                        <div
-                                            className="news-layer-image"
-                                            style={{ backgroundImage: `url('${item.thumbnail}')` }}
-                                        ></div>
-                                    </div>
-                                </div>
-                                <div className="news-content">
-                                    <div className="list">
-                                        <span>Comment ({item.comments})</span>
-                                        <span>_ {item.date}</span>
-                                    </div>
-                                    <h3>
-                                        <Link href={item.link}>{item.title}</Link>
-                                    </h3>
-                                    <div className="news-bottom">
-                                        <div className="info-item">
-                                            <img src={item.author.avatar} alt="img" />
-                                            <span>By {item.author.name}</span>
-                                        </div>
-                                        <Link href={item.link} className="link-btn">
-                                            View Articles<i className="fa-solid fa-arrow-right"></i>
-                                        </Link>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AboutNews;
diff --git a/app/components/about/Campus.tsx b/app/components/about/Campus.tsx
new file mode 100644
index 0000000..c8d477c
--- /dev/null
+++ b/app/components/about/Campus.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link";
+
+const CENTERS = [
+    {
+        tag: "Biosciences",
+        tagColor: "blue",
+        title: "Institut Pasteur Collaborative Lab",
+        desc: "A premier center focusing on immunology, genetics, and infectious diseases.",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/115ee2f067-72629210549870cf0d35.png",
+        href: "#",
+    },
+    {
+        tag: "Humanities",
+        tagColor: "yellow",
+        title: "Center for European Studies",
+        desc: "Housing over 2 million volumes and dedicated to historical and sociological research.",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/c11358a8da-a7b331f85d1fbd27c851.png",
+        href: "#",
+    },
+    {
+        tag: "Technology",
+        tagColor: "green",
+        title: "AI & Robotics Institute",
+        desc: "Pioneering developments in machine learning, automation, and computational science.",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/97fca8b57f-238aa78a799f22cf1cd1.png",
+        href: "#",
+    },
+];
+
+const Campus = () => {
+    return (
+        <section id="campus" className="about-campus">
+            <div className="container">
+                <div className="about-campus__header text-center">
+                    <h2 className="about-campus__title">Campus &amp; Research Centers</h2>
+                    <p className="about-campus__subtitle">
+                        State-of-the-art facilities nestled in the historic Latin Quarter, designed to foster innovation and collaboration.
+                    </p>
+                </div>
+
+                <div className="about-campus__grid">
+                    {CENTERS.map((center, i) => (
+                        <div key={i} className="about-campus__card">
+                            <div className="about-campus__img-wrap">
+                                <img src={center.img} alt={center.title} className="about-campus__img" />
+                            </div>
+                            <div className="about-campus__body">
+                                <span className={`about-campus__tag about-campus__tag--${center.tagColor}`}>
+                                    {center.tag}
+                                </span>
+                                <h3 className="about-campus__card-title">{center.title}</h3>
+                                <p className="about-campus__card-desc">{center.desc}</p>
+                                <Link href={center.href} className="about-campus__link">
+                                    Explore Facility <i className="fa-solid fa-arrow-right"></i>
+                                </Link>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Campus;
diff --git a/app/components/about/HeroSection.tsx b/app/components/about/HeroSection.tsx
new file mode 100644
index 0000000..362026a
--- /dev/null
+++ b/app/components/about/HeroSection.tsx
@@ -0,0 +1,74 @@
+import { AboutData } from "@/app/about/types";
+import { getCmsImageUrl } from "@/utils/image";
+import Link from "next/link";
+
+interface HeroSectionProps {
+    data?: AboutData | null;
+}
+
+const HeroSection = ({ data }: HeroSectionProps) => {
+    const title = data?.hero?.title || "A Legacy of Liberal Arts & Research";
+    const backgroundImage = data?.hero?.backgroundImage
+        ? getCmsImageUrl(data.hero.backgroundImage)
+        : null;
+
+    return (
+        <section
+            id="about-hero"
+            className="about-hero fix bg-cover"
+            style={backgroundImage ? { backgroundImage: `url('${backgroundImage}')` } : undefined}
+        >
+            <div className="container">
+                <div className="row align-items-center">
+                    {/* Left: Text */}
+                    <div className="col-lg-6">
+                        <div className="about-hero__content">
+                            <div className="about-hero__badge">
+                                <span className="about-hero__badge-line"></span>
+                                <span className="about-hero__badge-text">Our Identity</span>
+                            </div>
+                            <h1 className="about-hero__title"
+                                dangerouslySetInnerHTML={{ __html: title }}
+                            />
+                            <p className="about-hero__desc">
+                                Founded in the heart of Paris, Université Libérale is dedicated to fostering
+                                critical thinking, interdisciplinary innovation, and global understanding through
+                                a rigorous liberal arts curriculum and world-class research initiatives.
+                            </p>
+                            <div className="about-hero__actions">
+                                <button className="about-hero__btn">
+                                    Discover Our History
+                                    <i className="fa-solid fa-arrow-down"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right: Image */}
+                    <div className="col-lg-6">
+                        <div className="about-hero__image-wrap">
+                            <img
+                                src={data?.intro?.image
+                                    ? getCmsImageUrl(data.intro.image)
+                                    : "https://storage.googleapis.com/uxpilot-auth.appspot.com/e0291249ca-9b14cf509f6076b406c0.png"}
+                                alt="University campus"
+                                className="about-hero__image"
+                            />
+                            <div className="about-hero__badge-card">
+                                <div className="about-hero__badge-icon">
+                                    <i className="fa-solid fa-award"></i>
+                                </div>
+                                <div>
+                                    <h4 className="about-hero__badge-value">Top 50</h4>
+                                    <p className="about-hero__badge-label">Global Research Ranking</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroSection;
diff --git a/app/components/about/HistoryTimeline.tsx b/app/components/about/HistoryTimeline.tsx
new file mode 100644
index 0000000..f1c5959
--- /dev/null
+++ b/app/components/about/HistoryTimeline.tsx
@@ -0,0 +1,39 @@
+const TIMELINE = [
+    { year: "1895", title: "Foundation", desc: "Established as an independent institute for liberal studies by a group of visionary scholars.", side: "left" },
+    { year: "1945", title: "Post-War Expansion", desc: "Expanded faculties to include modern sciences and established the first dedicated research hub.", side: "right" },
+    { year: "1982", title: "Global Partnerships", desc: "Initiated formal exchange programs and research partnerships with leading universities worldwide.", side: "left" },
+    { year: "2020", title: "Modern Research Era", desc: "Inauguration of the new interdisciplinary research center, focusing on sustainable global development.", side: "right" },
+];
+
+const HistoryTimeline = () => {
+    return (
+        <section id="history-timeline" className="about-timeline">
+            <div className="container">
+                <div className="about-timeline__header text-center">
+                    <h2 className="about-timeline__title">Our History</h2>
+                    <p className="about-timeline__subtitle">A legacy of academic excellence spanning over a century.</p>
+                </div>
+
+                <div className="about-timeline__track">
+                    <div className="about-timeline__line"></div>
+
+                    {TIMELINE.map((item, i) => (
+                        <div key={i} className={`about-timeline__item about-timeline__item--${item.side}`}>
+                            <div className="about-timeline__content">
+                                <h3 className="about-timeline__year">{item.year}</h3>
+                                <h4 className="about-timeline__event">{item.title}</h4>
+                                <p className="about-timeline__desc">{item.desc}</p>
+                            </div>
+                            <div className="about-timeline__dot-wrap">
+                                <div className="about-timeline__dot"></div>
+                            </div>
+                            <div className="about-timeline__spacer"></div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HistoryTimeline;
diff --git a/app/components/about/LeaderShip_Broad.tsx b/app/components/about/LeaderShip_Broad.tsx
new file mode 100644
index 0000000..eefd6bc
--- /dev/null
+++ b/app/components/about/LeaderShip_Broad.tsx
@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+const LEADERS = [
+    {
+        name: "Dr. Eleanor Laurent",
+        role: "President",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8ce6757572-cd9d4e986dee9e71d10c.png",
+    },
+    {
+        name: "Prof. Marcus Dubois",
+        role: "Dean of Humanities",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-020f60df05ac2c52a087.png",
+    },
+    {
+        name: "Dr. Sophie Martin",
+        role: "Dean of Research",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3fc05a202c-26e5f00c35a829b5462d.png",
+    },
+    {
+        name: "Prof. Jean-Paul Roux",
+        role: "Provost",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-c36f00cff7803c4209d4.png",
+    },
+];
+
+const LeadershipBoard = () => {
+    return (
+        <section id="leadership-board" className="about-leadership">
+            <div className="container">
+                <div className="about-leadership__header text-center">
+                    <div className="about-mission__badge">
+                        <span className="about-mission__badge-line"></span>
+                        <span className="about-mission__badge-text">University Leadership</span>
+                        <span className="about-mission__badge-line"></span>
+                    </div>
+                    <h2 className="about-leadership__title">Meet Our Leaders</h2>
+                    <p className="about-leadership__subtitle">Guiding our academic vision and institutional strategy.</p>
+                </div>
+
+                <div className="about-leadership__grid">
+                    {LEADERS.map((leader, i) => (
+                        <div key={i} className="about-leadership__card">
+                            <div className="about-leadership__photo-wrap">
+                                <img src={leader.img} alt={leader.name} className="about-leadership__photo" />
+                            </div>
+                            <div className="about-leadership__info">
+                                <h3 className="about-leadership__name">{leader.name}</h3>
+                                <p className="about-leadership__role">{leader.role}</p>
+                                <div className="about-leadership__socials">
+                                    <Link href="#" className="about-leadership__social-link">
+                                        <i className="fa-brands fa-linkedin"></i>
+                                    </Link>
+                                    <Link href="#" className="about-leadership__social-link">
+                                        <i className="fa-solid fa-envelope"></i>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default LeadershipBoard;
diff --git a/app/components/about/LeaderShip_Message.tsx b/app/components/about/LeaderShip_Message.tsx
new file mode 100644
index 0000000..95396b8
--- /dev/null
+++ b/app/components/about/LeaderShip_Message.tsx
@@ -0,0 +1,73 @@
+import Link from "next/link";
+
+const LeadershipMessage = () => {
+    return (
+        <section id="leadership-message" className="about-message">
+            <div className="container">
+                <div className="row">
+                    {/* Main content */}
+                    <div className="col-lg-8">
+                        <div className="about-message__header">
+                            <h2 className="about-message__title">A Message from the President</h2>
+                            <div className="about-message__divider"></div>
+                        </div>
+                        <div className="about-message__body">
+                            <p className="about-message__quote">
+                                "Research is not just about discovery; it is about responsibility. As a premier institution in Paris, we carry the torch of enlightenment into the 21st century."
+                            </p>
+                            <p>
+                                Welcome to Paris Research University. For decades, our halls have echoed with the profound debates of brilliant minds and the quiet hum of groundbreaking laboratories. We stand at the intersection of history and the future, leveraging our rich heritage to propel innovation that addresses the world's most pressing challenges.
+                            </p>
+                            <p>
+                                Our commitment is unwavering: to foster an inclusive, vibrant academic community where interdisciplinary collaboration thrives. We invite you to explore our centers, engage with our faculty, and join us in our relentless pursuit of knowledge.
+                            </p>
+                        </div>
+                        <div className="about-message__author">
+                            <div className="about-message__avatar">
+                                <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="President" />
+                            </div>
+                            <div>
+                                <h4 className="about-message__author-name">Dr. Jean-UX Pilot Laurent</h4>
+                                <p className="about-message__author-role">President &amp; Vice-Chancellor</p>
+                            </div>
+                            <i className="fa-solid fa-quote-right about-message__quote-icon"></i>
+                        </div>
+                    </div>
+
+                    {/* Sidebar */}
+                    <div className="col-lg-4">
+                        <div className="about-message__sidebar">
+                            <div className="about-message__sidebar-card about-message__sidebar-card--primary">
+                                <h3>Accreditation &amp; Standards</h3>
+                                <p>Learn about our rigorous academic standards and global recognitions.</p>
+                                <Link href="/accreditation" className="about-message__sidebar-link">
+                                    View Credentials <i className="fa-solid fa-arrow-right"></i>
+                                </Link>
+                            </div>
+
+                            <div className="about-message__sidebar-card">
+                                <div className="about-message__sidebar-icon">
+                                    <i className="fa-solid fa-handshake"></i>
+                                </div>
+                                <h3>Global Partnerships</h3>
+                                <p>Explore our network of industry and academic collaborators.</p>
+                                <Link href="/partnerships" className="about-message__sidebar-text-link">
+                                    Discover Network <i className="fa-solid fa-arrow-right"></i>
+                                </Link>
+                            </div>
+
+                            <div className="about-message__sidebar-card">
+                                <h3>Have Questions?</h3>
+                                <Link href="/contact" className="about-message__sidebar-outline-link">
+                                    Contact Administration
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default LeadershipMessage;
diff --git a/app/components/about/Mission.tsx b/app/components/about/Mission.tsx
new file mode 100644
index 0000000..dc64fe3
--- /dev/null
+++ b/app/components/about/Mission.tsx
@@ -0,0 +1,51 @@
+const VALUES = [
+    {
+        icon: "fa-solid fa-book-open",
+        title: "Liberal Arts Foundation",
+        desc: "Providing a broad intellectual foundation that encourages critical thinking, creativity, and the ability to adapt to a rapidly changing world.",
+    },
+    {
+        icon: "fa-solid fa-microscope",
+        title: "Research Excellence",
+        desc: "Fostering a culture of rigorous inquiry and innovation, supporting faculty and students in pushing the boundaries of knowledge.",
+    },
+    {
+        icon: "fa-solid fa-globe",
+        title: "Global Perspective",
+        desc: "Cultivating an inclusive environment that values diverse perspectives and prepares students to engage with complex global challenges.",
+    },
+];
+
+const Mission = () => {
+    return (
+        <section id="mission-values" className="about-mission">
+            <div className="container">
+                <div className="about-mission__header text-center">
+                    <div className="about-mission__badge">
+                        <span className="about-mission__badge-line"></span>
+                        <span className="about-mission__badge-text">Core Principles</span>
+                        <span className="about-mission__badge-line"></span>
+                    </div>
+                    <h2 className="about-mission__title">Our Mission &amp; Values</h2>
+                    <p className="about-mission__subtitle">
+                        We are committed to advancing human knowledge and cultivating responsible global citizens through transformative education.
+                    </p>
+                </div>
+
+                <div className="about-mission__grid">
+                    {VALUES.map((item, i) => (
+                        <div key={i} className="about-mission__card">
+                            <div className="about-mission__icon-wrap">
+                                <i className={item.icon}></i>
+                            </div>
+                            <h3 className="about-mission__card-title">{item.title}</h3>
+                            <p className="about-mission__card-desc">{item.desc}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Mission;
diff --git a/app/components/about/WhyParis.tsx b/app/components/about/WhyParis.tsx
new file mode 100644
index 0000000..276aeff
--- /dev/null
+++ b/app/components/about/WhyParis.tsx
@@ -0,0 +1,65 @@
+const FEATURES = [
+    "Access to world-renowned museums, archives, and libraries.",
+    "A hub for international organizations and global policy.",
+    "A vibrant cultural ecosystem that enriches the liberal arts experience.",
+];
+
+const IMAGES = [
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/4df3620db3-dda28233c91d6369d039.png", alt: "Parisian cafe and street", tall: false },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png", alt: "Students in Parisian library", tall: true },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fe39e27ab6-40f9c9b4851f3b8176da.png", alt: "Seine river with historic bridges", tall: true },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png", alt: "Modern research facility", tall: false },
+];
+
+const WhyParis = () => {
+    return (
+        <section id="why-paris" className="why-paris">
+            <div className="container">
+                <div className="row align-items-center">
+                    {/* Left: Image grid */}
+                    <div className="col-lg-6 order-lg-1 order-2">
+                        <div className="why-paris__image-grid">
+                            <div className="why-paris__image-col">
+                                <img src={IMAGES[0].src} alt={IMAGES[0].alt} className="why-paris__img why-paris__img--short" />
+                                <img src={IMAGES[1].src} alt={IMAGES[1].alt} className="why-paris__img why-paris__img--tall" />
+                            </div>
+                            <div className="why-paris__image-col why-paris__image-col--offset">
+                                <img src={IMAGES[2].src} alt={IMAGES[2].alt} className="why-paris__img why-paris__img--tall" />
+                                <img src={IMAGES[3].src} alt={IMAGES[3].alt} className="why-paris__img why-paris__img--short" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right: Text */}
+                    <div className="col-lg-6 order-lg-2 order-1">
+                        <div className="why-paris__content">
+                            <div className="about-hero__badge">
+                                <span className="about-hero__badge-line"></span>
+                                <span className="about-hero__badge-text">Our Location</span>
+                            </div>
+                            <h2 className="why-paris__title">Why Paris?</h2>
+                            <p className="why-paris__desc">
+                                Paris is not just a backdrop; it is our extended campus. As a historic center
+                                of intellectual thought, art, and scientific discovery, the city offers
+                                unparalleled opportunities for our students and researchers.
+                            </p>
+                            <ul className="why-paris__list">
+                                {FEATURES.map((item, i) => (
+                                    <li key={i} className="why-paris__list-item">
+                                        <span className="why-paris__check">
+                                            <i className="fa-solid fa-check"></i>
+                                        </span>
+                                        <span>{item}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                            <button className="why-paris__btn">Explore Campus Life</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default WhyParis;
diff --git a/app/components/about/index.ts b/app/components/about/index.ts
deleted file mode 100644
index 0f58ea8..0000000
--- a/app/components/about/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as AboutHero } from './AboutHero';
-export { default as AboutIntro } from './AboutIntro';
-export { default as AboutMission } from './AboutMission';
-export { default as AboutFeatures } from './AboutFeatures';
-export { default as AboutNews } from './AboutNews';
diff --git a/app/components/accreditation/AccreditationCard.tsx b/app/components/accreditation/AccreditationCard.tsx
new file mode 100644
index 0000000..bcfd948
--- /dev/null
+++ b/app/components/accreditation/AccreditationCard.tsx
@@ -0,0 +1,20 @@
+type AccreditationCardProps = {
+  logo: string;
+  logoAlt: string;
+  title: string;
+  subtitle: string;
+  description: string;
+};
+
+export default function AccreditationCard({ logo, logoAlt, title, subtitle, description }: AccreditationCardProps) {
+  return (
+    <div className="bg-white p-8 rounded-[24px] shadow-soft border border-ui-border hover:shadow-hover transition-all duration-300">
+      <div className="h-20 flex items-center mb-6">
+        <img src={logo} alt={logoAlt} className="h-16 object-contain grayscale hover:grayscale-0 transition-all duration-300" />
+      </div>
+      <div className="acc-card-title font-bold text-ui-text mb-2">{title}</div>
+      <p className="text-sm text-brand-accent font-medium mb-4">{subtitle}</p>
+      <p className="text-ui-muted leading-relaxed text-sm">{description}</p>
+    </div>
+  );
+}
diff --git a/app/components/accreditation/AccreditationGrid.tsx b/app/components/accreditation/AccreditationGrid.tsx
new file mode 100644
index 0000000..ee4b145
--- /dev/null
+++ b/app/components/accreditation/AccreditationGrid.tsx
@@ -0,0 +1,43 @@
+import AccreditationCard from "./AccreditationCard";
+
+const accreditations = [
+  {
+    logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/5688d070b4-3c6c0b3c66f21c272558.png",
+    logoAlt: "French Ministry of Higher Education Logo",
+    title: "Ministère de l'Enseignement Supérieur",
+    subtitle: "National Institutional Accreditation",
+    description: "Fully recognized by the French government as a degree-granting institution, ensuring our diplomas meet national educational standards.",
+  },
+  {
+    logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/e2bd5be26e-fb4f2f04e138848db7e4.png",
+    logoAlt: "European Association for Quality Assurance Logo",
+    title: "ENQA",
+    subtitle: "European Quality Assurance",
+    description: "Compliant with the Standards and Guidelines for Quality Assurance in the European Higher Education Area (ESG).",
+  },
+  {
+    logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/b97d101d24-d2eeb52206ef7f99965a.png",
+    logoAlt: "Global Liberal Arts Alliance Logo",
+    title: "GLAA",
+    subtitle: "International Programmatic Certification",
+    description: "Certified member of the Global Liberal Arts Alliance, affirming our commitment to interdisciplinary education globally.",
+  },
+];
+
+export default function AccreditationGrid() {
+  return (
+    <section id="accreditation-grid" className="py-20 bg-ui-bg">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="mb-12">
+          <div className="acc-section-title font-bold text-ui-text mb-4">Recognized Issuing Bodies</div>
+          <p className="text-ui-muted text-lg">Our institutional and programmatic accreditations ensure global recognition of our degrees.</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {accreditations.map((item) => (
+            <AccreditationCard key={item.title} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/accreditation/AccreditationHero.tsx b/app/components/accreditation/AccreditationHero.tsx
new file mode 100644
index 0000000..1ee0518
--- /dev/null
+++ b/app/components/accreditation/AccreditationHero.tsx
@@ -0,0 +1,22 @@
+export default function AccreditationHero() {
+  return (
+    <section id="accreditation-hero" className="relative w-full py-20 lg:py-24 bg-white overflow-hidden mesh-bg border-b border-ui-border">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="text-center max-w-4xl mx-auto">
+          <div className="inline-flex items-center gap-2 mb-6">
+            <span className="w-8 h-[2px] bg-brand-accent"></span>
+            <span className="text-sm font-semibold text-brand-blue uppercase tracking-wider">Global Standards </span>
+            <span className="w-8 h-[2px] bg-brand-accent"></span>
+          </div>
+          <div className="acc-heading font-bold text-brand-blue leading-tight mb-6">
+            Accreditations  <br />
+            <span className="text-ui-text">&amp; Compliance</span>
+          </div>
+          <p className="text-lg text-ui-muted leading-relaxed mb-8">
+            Our commitment to excellence is validated by leading national and international accrediting bodies. We uphold the highest standards of academic rigor, research ethics, and institutional quality.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/accreditation/QualityStandards.tsx b/app/components/accreditation/QualityStandards.tsx
new file mode 100644
index 0000000..cc30c78
--- /dev/null
+++ b/app/components/accreditation/QualityStandards.tsx
@@ -0,0 +1,71 @@
+const features = [
+  {
+    icon: "fa-solid fa-chart-line",
+    title: "Continuous Evaluation",
+    description: "Annual reviews of all academic programs by independent academic boards.",
+  },
+  {
+    icon: "fa-solid fa-users",
+    title: "Peer Review Integration",
+    description: "Regular assessments conducted by visiting professors from partner institutions.",
+  },
+  {
+    icon: "fa-solid fa-shield",
+    title: "Ethical Compliance",
+    description: "Strict adherence to international research ethics and data protection standards.",
+  },
+];
+
+export default function QualityStandards() {
+  return (
+    <section id="quality-standards" className="py-20 bg-white border-t border-ui-border">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+          {/* Left: Text content */}
+          <div className="space-y-8">
+            <div className="inline-flex items-center gap-2">
+              <span className="w-8 h-[2px] bg-brand-accent"></span>
+              <span className="text-sm font-semibold text-ui-muted uppercase tracking-wider">Quality Assurance</span>
+            </div>
+            <div className="acc-section-title font-bold text-ui-text">Our Framework for Excellence</div>
+            <p className="text-lg text-ui-muted leading-relaxed">
+              Our internal quality assurance mechanisms are designed to continuously evaluate and improve our academic offerings, research outputs, and student services.
+            </p>
+
+            <div className="space-y-6 mt-8">
+              {features.map((f) => (
+                <div key={f.title} className="flex gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-brand-light flex items-center justify-center text-brand-blue shrink-0">
+                    <i className={`${f.icon} text-xl`}></i>
+                  </div>
+                  <div>
+                    <div className="acc-card-title font-bold text-ui-text mb-1">{f.title}</div>
+                    <p className="text-ui-muted text-sm">{f.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right: Images */}
+          <div className="relative">
+            <div className="grid grid-cols-2 gap-4">
+              <img
+                className="w-full h-64 object-cover rounded-[24px] shadow-soft"
+                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png"
+                alt="Students studying in library"
+              />
+              <img
+                className="w-full h-64 object-cover rounded-[24px] shadow-soft mt-8"
+                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png"
+                alt="Research facility"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/blog/BlogSidebar.tsx b/app/components/blog/BlogSidebar.tsx
new file mode 100644
index 0000000..3adbf25
--- /dev/null
+++ b/app/components/blog/BlogSidebar.tsx
@@ -0,0 +1,13 @@
+import NewsletterWidget from "./NewsletterWidget";
+import ResearcherSpotlight from "./ResearcherSpotlight";
+import UpcomingEvents from "./UpcomingEvents";
+
+export default function BlogSidebar() {
+  return (
+    <aside className="w-full lg:w-[400px] shrink-0 space-y-8">
+      <NewsletterWidget />
+      <ResearcherSpotlight />
+      <UpcomingEvents />
+    </aside>
+  );
+}
diff --git a/app/components/blog/CategoryFilters.tsx b/app/components/blog/CategoryFilters.tsx
new file mode 100644
index 0000000..fb413d0
--- /dev/null
+++ b/app/components/blog/CategoryFilters.tsx
@@ -0,0 +1,21 @@
+const categories = ["All News", "Campus", "Research", "Partnerships", "Events"];
+
+export default function CategoryFilters() {
+  return (
+    <div id="category-filters" className="flex flex-wrap items-center gap-3 mb-10 pb-6 border-b border-ui-border">
+      {categories.map((cat, i) => (
+        <button
+          key={cat}
+          style={{ borderRadius: "9999px", fontSize: "0.8rem" }}
+          className={
+            i === 0
+              ? "px-6 py-2 bg-brand-blue text-white text-sm font-semibold shadow-sm transition-colors"
+              : "px-6 py-2 bg-white border border-ui-border text-ui-text hover:border-brand-blue hover:text-brand-blue text-sm font-medium transition-colors"
+          }
+        >
+          {cat}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/blog/FeaturedHero.tsx b/app/components/blog/FeaturedHero.tsx
new file mode 100644
index 0000000..a1525bc
--- /dev/null
+++ b/app/components/blog/FeaturedHero.tsx
@@ -0,0 +1,44 @@
+export default function FeaturedHero() {
+  return (
+    <section id="featured-hero" className="w-full bg-white border-b border-ui-border mb-12">
+      <div className="max-w-[1440px] mx-auto">
+        <div className="flex flex-col lg:flex-row min-h-[500px]">
+          {/* Left: Content */}
+          <div className="w-full lg:w-1/2 p-8 lg:p-16 flex flex-col justify-center">
+            <span className="inline-block px-3 py-1 bg-brand-light text-brand-blue border border-brand-blue/20 text-xs font-semibold mb-4 w-fit" style={{ borderRadius: "6px" }}>
+              Featured Research
+            </span>
+            <div className="blog-heading text-ui-text tracking-tight mb-6 leading-tight font-bold">
+              Pioneering Sustainable Urban Development in the Heart of Paris
+            </div>
+            <p className="text-lg text-ui-muted mb-8 leading-relaxed">
+              Our latest collaborative research initiative uncovers groundbreaking methods for integrating green infrastructure into historic urban environments, setting a new standard for European cities.
+            </p>
+            <div className="flex items-center gap-4 text-sm text-ui-muted mb-8 mt-4">
+              <div className="flex items-center gap-2">
+                <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Author" className="w-8 h-8 rounded-full border border-ui-border" />
+                <span className="font-medium text-ui-text">Dr. Amélie Dubois</span>
+              </div>
+              <span>•</span>
+              <span>October 15, 2024</span>
+              <span>•</span>
+              <span>5 min read</span>
+            </div>
+            <a href="#" className="inline-flex items-center justify-center px-5 py-3 text-white font-semibold text-sm hover:bg-brand-hover transition-colors shadow-sm w-fit gap-2" style={{ borderRadius: "5px", backgroundColor: "rgb(38, 60, 111)" }}>
+              Read Full Story <i className="fas fa-arrow-right text-xs"></i>
+            </a>
+          </div>
+
+          {/* Right: Image */}
+          <div className="w-full lg:w-1/2 bg-gray-100 relative min-h-[300px] lg:min-h-full">
+            <img
+              className="absolute inset-0 w-full h-full object-cover"
+              src="https://storage.googleapis.com/uxpilot-auth.appspot.com/75c7c284e8-18119bca345a35938b88.png"
+              alt="Aerial view of Paris with sustainable green roofs and modern eco-friendly architecture blending with historic buildings"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/blog/NewsCard.tsx b/app/components/blog/NewsCard.tsx
new file mode 100644
index 0000000..806a3a0
--- /dev/null
+++ b/app/components/blog/NewsCard.tsx
@@ -0,0 +1,48 @@
+type NewsCardProps = {
+  category: string;
+  date: string;
+  title: string;
+  excerpt: string;
+  image?: string;
+  icon?: string;
+};
+
+export default function NewsCard({ category, date, title, excerpt, image, icon }: NewsCardProps) {
+  return (
+    <article className="bg-white rounded-xl border border-ui-border overflow-hidden shadow-soft hover:shadow-hover hover:border-brand-blue/50 transition-all group flex flex-col">
+      {/* Thumbnail */}
+      <div className="h-48 overflow-hidden relative">
+        {image ? (
+          <img
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            src={image}
+            alt={title}
+          />
+        ) : (
+          <div className="w-full h-full bg-brand-light flex items-center justify-center">
+            <i className={`${icon} text-4xl text-brand-blue/40`}></i>
+          </div>
+        )}
+        <div className="absolute top-4 left-4">
+          <span className="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand-blue rounded-md text-xs font-bold shadow-sm">
+            {category}
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-6 flex flex-col flex-1">
+        <div className="text-xs text-ui-muted mb-3 flex items-center gap-2">
+          <i className="far fa-calendar"></i> {date}
+        </div>
+        <div className="blog-card-title text-ui-text group-hover:text-brand-blue transition-colors mb-3 leading-tight font-bold">
+          {title}
+        </div>
+        <p className="text-sm text-ui-muted mb-6 flex-1 line-clamp-3">{excerpt}</p>
+        <a href="#" className="text-sm font-bold text-brand-blue flex items-center gap-1 group-hover:gap-2 transition-all pt-4">
+          Read more <i className="fas fa-arrow-right text-xs"></i>
+        </a>
+      </div>
+    </article>
+  );
+}
diff --git a/app/components/blog/NewsGrid.tsx b/app/components/blog/NewsGrid.tsx
new file mode 100644
index 0000000..1d88770
--- /dev/null
+++ b/app/components/blog/NewsGrid.tsx
@@ -0,0 +1,59 @@
+import NewsCard from "./NewsCard";
+
+const news = [
+  {
+    category: "Campus",
+    date: "Oct 12, 2024",
+    title: "New Liberal Arts Library Wing Opens to Students",
+    excerpt: "The state-of-the-art facility provides expanded collaborative spaces and access to over 50,000 new digital and print resources for our growing student body.",
+    image: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8eafd095d9-314bdad36b2119266084.png",
+  },
+  {
+    category: "Partnerships",
+    date: "Oct 10, 2024",
+    title: "ULP Announces Strategic Alliance with TechGlobal Institute",
+    excerpt: "A new partnership aimed at bridging the gap between liberal arts education and emerging technological paradigms in the 21st century.",
+    icon: "fas fa-handshake",
+  },
+  {
+    category: "Events",
+    date: "Oct 05, 2024",
+    title: "Annual Global Ethics Symposium Draws Record Attendance",
+    excerpt: "Scholars from over 40 countries gathered at ULP this weekend to discuss the evolving landscape of international human rights and digital privacy.",
+    image: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fc832714d8-ee7527b4d94c300aae71.png",
+  },
+  {
+    category: "Research",
+    date: "Sep 28, 2024",
+    title: "Department of Sociology Publishes Landmark Study on Urban Migration",
+    excerpt: "A comprehensive 5-year study reveals shifting demographic patterns in post-industrial European cities, highlighting new socio-economic challenges.",
+    icon: "fas fa-flask",
+  },
+];
+
+export default function NewsGrid() {
+  return (
+    <div className="flex-1">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+        {news.map((item) => (
+          <NewsCard key={item.title} {...item} />
+        ))}
+      </div>
+
+      {/* Pagination */}
+      <div className="flex justify-center items-center gap-2 border-t border-ui-border pt-8">
+        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-muted transition-colors disabled:opacity-50" disabled>
+          <i className="fas fa-chevron-left"></i>
+        </button>
+        <button className="pg-btn pg-active w-10 h-10 flex items-center justify-center text-white font-bold">1</button>
+        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">2</button>
+        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">3</button>
+        <span className="text-ui-muted mx-2">...</span>
+        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">12</button>
+        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors">
+          <i className="fas fa-chevron-right"></i>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/blog/NewsletterWidget.tsx b/app/components/blog/NewsletterWidget.tsx
new file mode 100644
index 0000000..ab9db59
--- /dev/null
+++ b/app/components/blog/NewsletterWidget.tsx
@@ -0,0 +1,37 @@
+export default function NewsletterWidget() {
+  return (
+    <div className="bg-brand-blue rounded-xl p-8 text-white shadow-hover relative overflow-hidden folder-tab">
+      <div className="relative z-10">
+        <div className="blog-widget-title font-bold mb-3">Stay Informed</div>
+        <p className="text-sm text-brand-light/80 mb-6 leading-relaxed ">
+          Subscribe to our weekly newsletter for the latest research updates, campus news, and upcoming events.
+        </p>
+        <form className="space-y-4">
+          <div>
+            <input
+              type="email"
+              placeholder="Enter your email address"
+              className="w-full px-4 py-3 mt-4 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white focus:ring-1 focus:ring-white text-sm"
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full py-3 bg-white text-brand-blue rounded-lg font-bold hover:bg-gray-50 transition-colors text-sm shadow-sm"
+          >
+            Subscribe Now
+          </button>
+        </form>
+        <p className="text-xs text-brand-light/60 mt-4 text-center">
+          By subscribing, you agree to our{" "}
+          <a href="#" style={{ color: "inherit", textDecoration: "underline" }}>Privacy Policy</a>.
+        </p>
+      </div>
+
+      {/* Decorative background element */}
+      <div className="absolute -bottom-12 -right-12 text-white/5 text-9xl">
+        <i className="far fa-envelope"></i>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/blog/ResearcherSpotlight.tsx b/app/components/blog/ResearcherSpotlight.tsx
new file mode 100644
index 0000000..6be6691
--- /dev/null
+++ b/app/components/blog/ResearcherSpotlight.tsx
@@ -0,0 +1,47 @@
+const researchers = [
+  {
+    name: "Dr. Sarah Jenkins",
+    field: "Cognitive Linguistics",
+    bio: "Exploring the intersection of language processing and modern ethical frameworks in digital communication.",
+    avatar: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg",
+  },
+  {
+    name: "Prof. Marcus Chen",
+    field: "Economic History",
+    bio: "Recent recipient of the European Heritage Grant for his work on interwar economic policies.",
+    avatar: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg",
+  },
+  {
+    name: "Dr. Elena Rostova",
+    field: "Political Science",
+    bio: "Leading the new comparative study on post-war democratic institutions across Western Europe.",
+    avatar: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg",
+  },
+];
+
+export default function ResearcherSpotlight() {
+  return (
+    <div className="bg-white rounded-xl border border-ui-border shadow-soft p-6">
+      <div className="flex items-center justify-between mb-6 pb-4 border-b border-ui-border">
+        <div className="blog-widget-title font-bold text-ui-text">Researcher Spotlight</div>
+        <a href="#" className="text-sm text-brand-blue font-medium hover:underline">View All</a>
+      </div>
+      <div className="space-y-6">
+        {researchers.map((r) => (
+          <div key={r.name} className="flex gap-4 items-start group cursor-pointer">
+            <img
+              src={r.avatar}
+              alt={r.name}
+              className="w-16 h-16 rounded-lg object-cover border border-ui-border group-hover:border-brand-blue transition-colors"
+            />
+            <div>
+              <div className="font-bold text-ui-text text-sm group-hover:text-brand-blue transition-colors">{r.name}</div>
+              <p className="text-xs text-brand-blue font-medium mb-1">{r.field}</p>
+              <p className="text-xs text-ui-muted line-clamp-2">{r.bio}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/blog/UpcomingEvents.tsx b/app/components/blog/UpcomingEvents.tsx
new file mode 100644
index 0000000..30da6f0
--- /dev/null
+++ b/app/components/blog/UpcomingEvents.tsx
@@ -0,0 +1,40 @@
+const events = [
+  {
+    month: "Nov",
+    day: "12",
+    title: "Open Campus Day",
+    time: "09:00 AM - 04:00 PM",
+  },
+  {
+    month: "Nov",
+    day: "18",
+    title: "Guest Lecture: Future of AI in Arts",
+    time: "06:00 PM - Main Hall",
+  },
+];
+
+export default function UpcomingEvents() {
+  return (
+    <div className="bg-white rounded-xl border border-ui-border shadow-soft p-6">
+      <div className="blog-widget-title font-bold text-ui-text mb-6 pb-4 border-b border-ui-border">
+        Upcoming Events
+      </div>
+      <ul className="space-y-4">
+        {events.map((e) => (
+          <li key={e.title} className="flex gap-4">
+            <div className="flex flex-col items-center justify-center w-12 h-12 bg-brand-light rounded-lg border border-brand-blue/20 shrink-0">
+              <span className="text-xs font-bold text-brand-blue uppercase">{e.month}</span>
+              <span className="text-lg font-bold text-ui-text leading-none">{e.day}</span>
+            </div>
+            <div>
+              <div className="text-sm font-bold text-ui-text hover:text-brand-blue cursor-pointer transition-colors">{e.title}</div>
+              <p className="text-xs text-ui-muted mt-1">
+                <i className="far fa-clock mr-1"></i>{e.time}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/app/components/contact/Accessibility.tsx b/app/components/contact/Accessibility.tsx
new file mode 100644
index 0000000..89444c3
--- /dev/null
+++ b/app/components/contact/Accessibility.tsx
@@ -0,0 +1,21 @@
+export default function Accessibility() {
+  return (
+    <div className="bg-white rounded-[24px] p-8  shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100">
+      <div className="contact-card-title font-bold text-dark mb-4">Accessibility</div>
+      <p className="text-sm text-gray-600 mb-3 mt-2">
+        Our campus is designed to be accessible to everyone. If you require specific accommodations for your visit, please contact us in advance.
+      </p>
+      <div className="flex flex-wrap gap-3">
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-brands fa-accessible-icon text-primary"></i> Wheelchair Access
+        </div>
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-solid fa-elevator text-primary"></i> Elevators
+        </div>
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-solid fa-square-parking text-primary"></i> Reserved Parking
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/contact/ContactHero.tsx b/app/components/contact/ContactHero.tsx
new file mode 100644
index 0000000..531d1cc
--- /dev/null
+++ b/app/components/contact/ContactHero.tsx
@@ -0,0 +1,17 @@
+export default function ContactHero() {
+  return (
+    <section id="contact-hero" className="bg-white border-b border-gray-200 pt-16 pb-20 px-6 lg:px-12">
+      <div className="max-w-[1440px] mx-auto text-center">
+        <span className="inline-block bg-blue-50 text-xs font-bold px-4 py-2 uppercase tracking-wider rounded-full mb-3 border border-blue-100" style={{ color: "rgb(38, 60, 111)" }}>
+          Get in Touch
+        </span>
+        <div className="contact-heading font-display font-bold text-dark mb-6 leading-tight max-w-3xl mx-auto">
+          How can we help advance your research journey?
+        </div>
+        <p className="text-gray-600 text-lg mb-0 leading-relaxed max-w-2xl mx-auto">
+          Connect with our specialized departments to find the support, guidance, and resources you need to succeed at Paris Research University.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/contact/ContactSplit.tsx b/app/components/contact/ContactSplit.tsx
new file mode 100644
index 0000000..bae717f
--- /dev/null
+++ b/app/components/contact/ContactSplit.tsx
@@ -0,0 +1,19 @@
+import InquiryForm from "./InquiryForm";
+import LocationMap from "./LocationMap";
+import OfficeHours from "./OfficeHours";
+import Accessibility from "./Accessibility";
+
+export default function ContactSplit() {
+  return (
+    <section id="inquiry-form-section" className="py-16 px-6 lg:px-12 max-w-[1440px] mx-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-stretch">
+        <InquiryForm />
+        <div className="space-y-8">
+          <LocationMap />
+          <OfficeHours />
+          <Accessibility />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/contact/DepartmentCard.tsx b/app/components/contact/DepartmentCard.tsx
new file mode 100644
index 0000000..322b3ec
--- /dev/null
+++ b/app/components/contact/DepartmentCard.tsx
@@ -0,0 +1,27 @@
+type DepartmentCardProps = {
+  icon: string;
+  title: string;
+  description: string;
+  email: string;
+  phone: string;
+};
+
+export default function DepartmentCard({ icon, title, description, email, phone }: DepartmentCardProps) {
+  return (
+    <div className="bg-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_8px_30px_rgb(38,60,111,0.08)] transition-all duration-300 flex flex-col h-full group">
+      <div className="w-14 h-14 bg-blue-50 rounded-[12px] flex items-center justify-center text-primary text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
+        <i className={icon}></i>
+      </div>
+      <div className="contact-card-title font-display font-bold text-dark mb-3">{title}</div>
+      <p className="text-sm text-gray-600 mb-6 flex-grow">{description}</p>
+      <div className="pt-4 border-t border-gray-100 mt-auto">
+        <a href={`mailto:${email}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary mb-3 transition-colors">
+          <i className="far fa-envelope text-primary w-4"></i> {email}
+        </a>
+        <a href={`tel:${phone.replace(/\s/g, '')}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary transition-colors">
+          <i className="fas fa-phone text-primary w-4"></i> {phone}
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/contact/DepartmentCardBlue.tsx b/app/components/contact/DepartmentCardBlue.tsx
new file mode 100644
index 0000000..9416a9c
--- /dev/null
+++ b/app/components/contact/DepartmentCardBlue.tsx
@@ -0,0 +1,22 @@
+export default function DepartmentCardBlue() {
+  return (
+    <div className="bg-primary text-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(38,60,111,0.15)] transition-all duration-300 flex flex-col h-full relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-10 -mt-10 blur-xl"></div>
+      <div className="w-14 h-14 bg-white/10 rounded-[12px] flex items-center justify-center text-white text-2xl mb-6 backdrop-blur-sm border border-white/20">
+        <i className="fas fa-microscope"></i>
+      </div>
+      <div className="contact-card-title font-display font-bold mb-3">Research Office</div>
+      <p className="text-sm text-white/80 mb-6 flex-grow relative z-10">
+        Grant applications, ethics committee approvals, lab space allocation, and cross-disciplinary collaboration opportunities.
+      </p>
+      <div className="pt-4 border-t border-white/20 mt-auto relative z-10">
+        <a href="mailto:research@parisresearch.edu" className="flex items-center gap-3 text-sm text-white/90 hover:text-white mb-3 transition-colors">
+          <i className="far fa-envelope w-4 opacity-80"></i> research@parisresearch.edu
+        </a>
+        <a href="tel:+33123456790" className="flex items-center gap-3 text-sm text-white/90 hover:text-white transition-colors">
+          <i className="fas fa-phone w-4 opacity-80"></i> +33 1 23 45 67 90
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/contact/DepartmentCardEmpty.tsx b/app/components/contact/DepartmentCardEmpty.tsx
new file mode 100644
index 0000000..f4e55e2
--- /dev/null
+++ b/app/components/contact/DepartmentCardEmpty.tsx
@@ -0,0 +1,16 @@
+export default function DepartmentCardEmpty() {
+  return (
+    <div className="bg-gray-50 rounded-[16px] p-8 border border-gray-200 border-dashed flex flex-col items-center justify-center text-center h-full">
+      <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-gray-400 text-2xl mb-4 shadow-sm">
+        <i className="fas fa-circle-question"></i>
+      </div>
+      <div className="contact-card-title font-bold text-gray-700 mb-2">Not sure who to contact?</div>
+      <p className="text-sm text-gray-500 mb-6">
+        Use our general inquiry form below and we'll route your message to the appropriate department.
+      </p>
+      <a href="#inquiry-form-section" className="text-primary font-medium text-sm hover:underline flex items-center gap-2">
+        Go to Form <i className="fas fa-arrow-down"></i>
+      </a>
+    </div>
+  );
+}
diff --git a/app/components/contact/DepartmentDirectory.tsx b/app/components/contact/DepartmentDirectory.tsx
new file mode 100644
index 0000000..5cd42d0
--- /dev/null
+++ b/app/components/contact/DepartmentDirectory.tsx
@@ -0,0 +1,49 @@
+import DepartmentCard from "./DepartmentCard";
+import DepartmentCardBlue from "./DepartmentCardBlue";
+import DepartmentCardEmpty from "./DepartmentCardEmpty";
+
+const departments = [
+  {
+    icon: "fas fa-graduation-cap",
+    title: "Admissions & Enrollment",
+    description: "Questions regarding application processes, deadlines, program requirements, and international student visas.",
+    email: "admissions@parisresearch.edu",
+    phone: "+33 1 23 45 67 89",
+  },
+  {
+    icon: "fas fa-handshake",
+    title: "Industry Partnerships",
+    description: "Corporate sponsorships, technology transfer, joint research ventures, and industry-funded scholarships.",
+    email: "partners@parisresearch.edu",
+    phone: "+33 1 23 45 67 91",
+  },
+  {
+    icon: "fas fa-bullhorn",
+    title: "Media & Press",
+    description: "Press releases, expert commentary requests, media kits, and institutional branding guidelines.",
+    email: "press@parisresearch.edu",
+    phone: "+33 1 23 45 67 92",
+  },
+  {
+    icon: "fas fa-book-open",
+    title: "Repository Support",
+    description: "Assistance with navigating the publication database, requesting access to restricted papers, and submitting new works.",
+    email: "library@parisresearch.edu",
+    phone: "+33 1 23 45 67 93",
+  },
+];
+
+export default function DepartmentDirectory() {
+  return (
+    <section id="department-directory" className="py-20 px-6 lg:px-12 max-w-[1440px] mx-auto -mt-10 relative z-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <DepartmentCard {...departments[0]} />
+        <DepartmentCardBlue />
+        <DepartmentCard {...departments[1]} />
+        <DepartmentCard {...departments[2]} />
+        <DepartmentCard {...departments[3]} />
+        <DepartmentCardEmpty />
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/contact/InquiryForm.tsx b/app/components/contact/InquiryForm.tsx
new file mode 100644
index 0000000..71ff7c6
--- /dev/null
+++ b/app/components/contact/InquiryForm.tsx
@@ -0,0 +1,71 @@
+export default function InquiryForm() {
+  const inputClass = "w-full bg-gray-50 border border-gray-200 text-gray-800 px-4 py-3 rounded-[12px] focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-sm placeholder:text-gray-400";
+
+  return (
+    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-full flex flex-col">
+      <div className="mb-8">
+        <div className="contact-form-title font-display font-bold text-dark mb-1">Send a Message</div>
+        <p className="text-gray-600 text-sm">Please fill out the form below and our team will get back to you within 24-48 business hours.</p>
+      </div>
+
+      <form className="space-y-5 flex-1 flex flex-col">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700 block">First Name</label>
+            <input type="text" placeholder="Jane" className={inputClass} />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700 block">Last Name</label>
+            <input type="text" placeholder="Doe" className={inputClass} />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Email Address <span className="text-red-500">*</span></label>
+          <input type="email" placeholder="jane.doe@example.com" required className={inputClass} />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Inquiry Topic <span className="text-red-500">*</span></label>
+          <div className="relative">
+            <select required className={inputClass + " appearance-none cursor-pointer"}>
+              <option value="" disabled selected>Select a topic...</option>
+              <option value="admissions">Admissions & Enrollment</option>
+              <option value="research">Research Opportunities</option>
+              <option value="partnerships">Corporate Partnerships</option>
+              <option value="media">Media Inquiry</option>
+              <option value="repository">Publication Repository Access</option>
+              <option value="other">Other</option>
+            </select>
+            <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
+              <i className="fas fa-chevron-down text-xs"></i>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Message <span className="text-red-500">*</span></label>
+          <textarea rows={5} placeholder="How can we help you?" required className={inputClass + " resize-none"} />
+        </div>
+
+        <div className="pt-2 pb-2 space-y-4">
+          <label className="flex items-start gap-3 cursor-pointer">
+            <input type="checkbox" required className="custom-checkbox mt-1 shrink-0" />
+            <span className="text-xs text-gray-600 leading-relaxed">
+              I consent to having Paris Research University collect my details via this form to respond to my inquiry. I understand my data will be handled in accordance with the{" "}
+              <a href="#" className="text-primary hover:underline">Privacy Policy</a>.
+            </span>
+          </label>
+          <div className="bg-gray-50 p-4 rounded-[12px] border border-gray-200 flex items-center justify-between max-w-xs">
+            <span className="text-sm text-gray-600 font-medium">I am human</span>
+            <input type="checkbox" required className="custom-checkbox w-6 h-6 rounded-full border-2" />
+          </div>
+        </div>
+
+        <button type="submit" className="w-full bg-primary text-white font-bold py-4 rounded-[12px] text-sm hover:bg-opacity-90 transition-colors shadow-md flex items-center justify-center gap-2">
+          Send Message <i className="fas fa-paper-plane text-xs"></i>
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/components/contact/LocationMap.tsx b/app/components/contact/LocationMap.tsx
new file mode 100644
index 0000000..b68c660
--- /dev/null
+++ b/app/components/contact/LocationMap.tsx
@@ -0,0 +1,26 @@
+export default function LocationMap() {
+  return (
+    <div className="bg-white rounded-[24px] overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-[420px] relative">
+      <div className="absolute inset-0 bg-gray-200 relative">
+        <img
+          className="w-full h-full object-cover"
+          src="https://storage.googleapis.com/uxpilot-auth.appspot.com/3d6faeb2c9-8e1cfd08c74433d49f78.png"
+          alt="Modern minimalist map of Paris showing a university campus location with a blue pin marker"
+        />
+        {/* Floating Pin Card */}
+        <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md p-4 rounded-[12px] shadow-lg border border-white/50 flex items-start gap-4">
+          <div className="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-primary flex-shrink-0 mt-1">
+            <i className="fas fa-location-dot"></i>
+          </div>
+          <div>
+            <div className="contact-pin-title font-bold text-dark mb-1">Main Campus</div>
+            <p className="text-xs text-gray-600 leading-relaxed">
+              15 Rue de l'École de Médecine<br />75006 Paris, France
+            </p>
+            <a href="#" className="text-primary text-xs font-medium mt-2 inline-block hover:underline">Get Directions</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/contact/OfficeHours.tsx b/app/components/contact/OfficeHours.tsx
new file mode 100644
index 0000000..9acfe58
--- /dev/null
+++ b/app/components/contact/OfficeHours.tsx
@@ -0,0 +1,28 @@
+const hours = [
+  { day: "Monday - Thursday", time: "08:30 - 18:00" },
+  { day: "Friday", time: "08:30 - 17:00" },
+  { day: "Saturday - Sunday", time: null },
+];
+
+export default function OfficeHours() {
+  return (
+    <div className="bg-white rounded-[24px] p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100">
+      <div className="flex items-center gap-3 mb-6">
+        <i className="far fa-clock text-primary text-xl"></i>
+        <div className="contact-card-title font-display font-bold text-dark" style={{ fontSize: "1.3rem" }}>Office Hours</div>
+      </div>
+
+      <div className="space-y-4">
+        {hours.map(({ day, time }) => (
+          <div key={day} className="flex justify-between items-center pb-3 border-b border-gray-100 text-sm">
+            <span className="text-gray-600 font-medium">{day}</span>
+            {time
+              ? <span className="text-dark font-bold">{time}</span>
+              : <span className="text-gray-400 font-medium">Closed</span>
+            }
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/home/Achievements.tsx b/app/components/home/Achievements.tsx
deleted file mode 100644
index 689328c..0000000
--- a/app/components/home/Achievements.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-interface AchievementsProps {
-    data: {
-        heading: string;
-        subheading: string;
-        items: {
-            value: string;
-            suffix: string;
-            label: string;
-            description: string;
-        }[];
-    };
-}
-
-const Achievements = ({ data }: AchievementsProps) => {
-    return (
-        <section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
-            <div className="shape">
-                <img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
-            </div>
-            <div className="container">
-                <div className="section-title text-center">
-                    <span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
-                    <h2 className="text-white split-text-right split-text-in-right">
-                        {data.heading}
-                    </h2>
-                </div>
-            </div>
-            <div className="counter-wrapper">
-                <div className="container">
-                    <div className="counter-main-item">
-                        {data.items.map((item, index) => (
-                            <div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
-                                <h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
-                                <h5>{item.label}</h5>
-                                <p>
-                                    {item.description}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default Achievements;
diff --git a/app/components/home/BlogPreview.tsx b/app/components/home/BlogPreview.tsx
deleted file mode 100644
index ab19413..0000000
--- a/app/components/home/BlogPreview.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { getCmsImageUrl } from '@/utils/image';
-import Link from 'next/link';
-
-interface BlogPreviewProps {
-    data: {
-        heading: string;
-        subheading: string;
-        ctaButton: {
-            label: string;
-            href: string;
-        };
-        items: {
-            title: string;
-            excerpt: string;
-            category: string;
-            date: string;
-            author: {
-                name: string;
-                avatar: string;
-            };
-            comments: number;
-            link: string;
-            thumbnail: string;
-        }[];
-    };
-}
-
-const BlogPreview = ({ data }: BlogPreviewProps) => {
-    const formatDate = (dateString: string) => {
-        const date = new Date(dateString);
-        return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
-    };
-
-    return (
-        <section className="news-section section-padding fix">
-            <div className="container">
-                <div className="section-title-area">
-                    <div className="section-title">
-                        <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                        <h2 className="split-text-right split-text-in-right">
-                            {data.heading}
-                        </h2>
-                    </div>
-                    <Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
-                        {data.ctaButton.label}
-                        <i className="fa-solid fa-arrow-right"></i>
-                    </Link>
-                </div>
-                <div className="row">
-                    {data.items.map((item, index) => {
-                        const thumbUrl = getCmsImageUrl(item.thumbnail);
-                        return (
-                            <div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
-                                <div className="news-card-item">
-                                    <div className="news-image">
-                                        <img 
-                                            src={thumbUrl} 
-                                            alt="img" 
-                                            style={{ 
-                                                width: '419px', 
-                                                height: '312px', 
-                                                objectFit: 'cover' 
-                                            }} 
-                                        />
-                                        <span>{item.category}</span>
-                                        <div className="news-layer-wrapper">
-                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
-                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
-                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
-                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
-                                        </div>
-                                    </div>
-                                    <div className="news-content">
-                                        <div className="list">
-                                            <span>Comment ({item.comments.toString().padStart(2, '0')})</span>
-                                            <span>_ {formatDate(item.date)}</span>
-                                        </div>
-                                        <h3>
-                                            <Link href={item.link}>
-                                                {item.title}
-                                            </Link>
-                                        </h3>
-                                        <div className="news-bottom">
-                                            <div className="info-item">
-                                                <div 
-                                                    style={{ 
-                                                        width: '32px', 
-                                                        height: '32px', 
-                                                        backgroundColor: '#d1d5db', 
-                                                        display: 'flex', 
-                                                        alignItems: 'center', 
-                                                        justifyContent: 'center',
-                                                        fontSize: '14px',
-                                                        fontWeight: 'bold',
-                                                        color: '#374151',
-                                                        marginRight: '10px'
-                                                    }}
-                                                >
-                                                    {item.author.name.charAt(0).toUpperCase()}
-                                                </div>
-                                                <span>By {item.author.name}</span>
-                                            </div>
-                                            <Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default BlogPreview;
diff --git a/app/components/home/FAQSection.tsx b/app/components/home/FAQSection.tsx
deleted file mode 100644
index dc47ac5..0000000
--- a/app/components/home/FAQSection.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import Link from 'next/link';
-
-interface FAQSectionProps {
-    data: {
-        heading: string;
-        subheading: string;
-        description: string;
-        ctaButton: {
-            label: string;
-            href: string;
-        };
-        items: {
-            question: string;
-            answer: string;
-        }[];
-    };
-}
-
-const FAQSection = ({ data }: FAQSectionProps) => {
-    return (
-        <section className="faq-section section-padding fix">
-            <div className="container">
-                <div className="faq-wrapper">
-                    <div className="row g-4">
-                        <div className="col-lg-5">
-                            <div className="faq-content">
-                                <div className="section-title mb-0">
-                                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                                    <h2 className="split-text-right split-text-in-right">
-                                        {data.heading}
-                                    </h2>
-                                </div>
-                                <p className="text">
-                                    {data.description}
-                                </p>
-                                <Link href={data.ctaButton.href} className="theme-btn">
-                                    {data.ctaButton.label}
-                                    <i className="fa-solid fa-arrow-right"></i>
-                                </Link>
-                            </div>
-                        </div>
-                        <div className="col-lg-7">
-                            <div className="faq-items">
-                                <div className="accordion" id="accordionExample">
-                                    {data.items.map((item, index) => (
-                                        <div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
-                                            <h5 className="accordion-header" id={`heading${index}`}>
-                                                <button 
-                                                    className="accordion-button collapsed"
-                                                    type="button" 
-                                                    data-bs-toggle="collapse"
-                                                    data-bs-target={`#collapse${index}`} 
-                                                    aria-expanded="false" 
-                                                    aria-controls={`collapse${index}`}
-                                                >
-                                                    {item.question}
-                                                </button>
-                                            </h5>
-                                            <div 
-                                                id={`collapse${index}`} 
-                                                className="accordion-collapse collapse" 
-                                                aria-labelledby={`heading${index}`}
-                                                data-bs-parent="#accordionExample"
-                                            >
-                                                <div className="accordion-body">
-                                                    <p>
-                                                        {item.answer}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default FAQSection;
diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx
index d123810..3f9b71d 100644
--- a/app/components/home/HeroSection.tsx
+++ b/app/components/home/HeroSection.tsx
@@ -1,141 +1,46 @@
-import { getCmsImageUrl } from '@/utils/image';
-import Link from 'next/link';
+import Link from "next/link";
 
-interface HeroSlide {
-    title: string;
-    subtitle: string;
-    description: string;
-    primaryButton: {
-        label: string;
-        href: string;
-    };
-    secondaryButton: {
-        label: string;
-        href: string;
-    };
-    heroImage?: string;
-    videoUrl: string;
-}
+const HeroSection = () => {
+  return (
+    <section id="hero-banner" className="hero-home">
+      <div className="hero-home__overlay">
+        <img
+          src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
+          alt="Paris University Campus"
+          className="hero-home__bg-img"
+        />
+        <div className="hero-home__gradient" />
+      </div>
 
-interface HeroSectionProps {
-    data: {
-        backgroundImage: string;
-        // Optional multi-slide support from CMS
-        slides?: HeroSlide[];
-        // Legacy single-slide fields (fallback)
-        title?: string;
-        subtitle?: string;
-        description?: string;
-        primaryButton?: {
-            label: string;
-            href: string;
-        };
-        secondaryButton?: {
-            label: string;
-            href: string;
-        };
-        heroImage?: string;
-        videoUrl?: string;
-    };
-}
+      <div className="hero-home__container">
+        <div className="hero-home__content">
+          <div className="hero-home__badge">
+            <span className="hero-home__badge-dot" />
+            <span className="hero-home__badge-text">Leading Research Institution</span>
+          </div>
 
-const HeroSection = ({ data }: HeroSectionProps) => {
-    const slides: HeroSlide[] =
-        (data.slides && data.slides.length > 0)
-            ? data.slides
-            : [{
-                title: data.title || '',
-                subtitle: data.subtitle || '',
-                description: data.description || '',
-                primaryButton: data.primaryButton || { label: '', href: '#' },
-                secondaryButton: data.secondaryButton || { label: '', href: '#' },
-                heroImage: data.heroImage,
-                videoUrl: data.videoUrl || '',
-            }];
+          <h1 className="hero-home__title">
+            Advancing Knowledge in the Heart of Paris
+          </h1>
 
-    const firstSlide = slides[0];
+          <p className="hero-home__desc">
+            A premier liberal arts and research university dedicated to fostering
+            interdisciplinary innovation, global partnerships, and academic excellence.
+          </p>
 
-    return (
-        <section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
-            <div className="left-shape">
-                <img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
-            </div>
-            <div className="hero-shape">
-                <img src="/assets/img/home-1/hero/shape.png" alt="img" />
-            </div>
-            <div className="top-shape">
-                <img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
-            </div>
-            <div className="right-shape">
-                <img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
-            </div>
-            <div className="pagi-item">
-                <div className="dot-number">
-                    <span className="dot-num">
-                        <span>03</span>
-                    </span>
-                    <span className="dot-num">
-                        <span>05</span>
-                    </span>
-                </div>
-            </div>
-            <div className="container-fluid">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="swiper hero-slider">
-                            <div className="swiper-wrapper">
-                                {slides.map((slide, index) => (
-                                    <div className="swiper-slide" key={index}>
-                                        <div className="hero-content">
-                                            <h6>{slide.subtitle}</h6>
-                                            <h1>
-                                                {slide.title}
-                                                {slide.videoUrl && (
-                                                    <a href={slide.videoUrl} className="video-btn video-popup">
-                                                        <i className="fa-solid fa-play"></i>
-                                                    </a>
-                                                )}
-                                            </h1>
-                                            <p>
-                                                {slide.description}
-                                            </p>
-                                            <div className="hero-button">
-                                                {slide.primaryButton?.href && (
-                                                    <Link href={slide.primaryButton.href} className="theme-btn">
-                                                        {slide.primaryButton.label}
-                                                        <i className="fa-solid fa-arrow-right"></i>
-                                                    </Link>
-                                                )}
-                                                {slide.secondaryButton?.href && (
-                                                    <Link href={slide.secondaryButton.href} className="theme-btn style-2">
-                                                        {slide.secondaryButton.label}
-                                                        <i className="fa-solid fa-arrow-right"></i>
-                                                    </Link>
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="swiper image-slider">
-                            <div className="swiper-wrapper">
-                                {slides.map((slide, index) => (
-                                    <div className="swiper-slide" key={index}>
-                                        <div className="hero-image">
-                                            <img src={slide.heroImage || firstSlide.heroImage || "/assets/img/home-1/hero/man.png"} alt="img" />
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
+          <div className="hero-home__actions">
+            <button className="hero-home__btn hero-home__btn--primary">
+              Explore Research
+              <i className="fa-solid fa-arrow-right"></i>
+            </button>
+            <button className="hero-home__btn hero-home__btn--secondary">
+              Partner With Us
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export default HeroSection;
diff --git a/app/components/home/Partners.tsx b/app/components/home/Partners.tsx
deleted file mode 100644
index 5681d28..0000000
--- a/app/components/home/Partners.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { getCmsImageUrl } from '@/utils/image';
-
-interface PartnersProps {
-    data: {
-        visaConsultancy: {
-            items: {
-                name: string;
-                icon: string;
-                year: string;
-            }[];
-        };
-        brands: {
-            items: {
-                logo: string;
-            }[];
-        };
-    };
-}
-
-const Partners = ({ data }: PartnersProps) => {
-    return (
-        <>
-            {/* Awards Section */}
-            <section className="visa-consultency-section section-padding fix">
-                <div className="container">
-                    <div className="row g-4">
-                        {(data.visaConsultancy?.items || []).map((partner, index) => (
-                            <div key={index} className="col-xl-3 col-lg-4 col-md-6">
-                                <div className="visa-consultency-item">
-                                    <div className="image d-flex justify-content-center">
-                                        <img src={getCmsImageUrl(partner.icon)} alt={partner.name} />
-                                    </div>
-                                    <h3>{partner.name}</h3>
-                                    <h6>{partner.year}</h6>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            {/* Brand Partners Section */}
-            <div className="brand-section fix">
-                <div className="container">
-                    <div className="brand-wrapper style-1">
-                        <div className="brand-item">
-                            <div className="swiper brand-slider">
-                                <div className="swiper-wrapper">
-                                    {(data.brands?.items || []).map((brand, index) => (
-                                        <div key={index} className="swiper-slide">
-                                            <div className="brand-image d-flex justify-content-center">
-                                                <img src={getCmsImageUrl(brand.logo)} alt="brand-logo" />
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default Partners;
diff --git a/app/components/home/QuickLinksGrid.tsx b/app/components/home/QuickLinksGrid.tsx
new file mode 100644
index 0000000..366301b
--- /dev/null
+++ b/app/components/home/QuickLinksGrid.tsx
@@ -0,0 +1,67 @@
+import Link from "next/link";
+
+const LINKS = [
+    {
+        icon: "fa-solid fa-microscope",
+        title: "Research Hub",
+        desc: "Discover our ongoing projects, facilities, and interdisciplinary centers.",
+        cta: "View Hub",
+        href: "/research",
+    },
+    {
+        icon: "fa-solid fa-book-open",
+        title: "Publications",
+        desc: "Access our extensive repository of peer-reviewed papers and journals.",
+        cta: "Browse",
+        href: "/publications",
+    },
+    {
+        icon: "fa-solid fa-handshake",
+        title: "Partnerships",
+        desc: "Collaborate with us through industry, academic, and global networks.",
+        cta: "Connect",
+        href: "/partnerships",
+    },
+    {
+        icon: "fa-solid fa-newspaper",
+        title: "News & Events",
+        desc: "Stay updated with our latest breakthroughs, seminars, and campus life.",
+        cta: "Read More",
+        href: "/blog",
+    },
+];
+
+const QuickLinksGrid = () => {
+    return (
+        <section id="quick-links" className="quick-links">
+            <div className="container">
+                <div className="quick-links__header text-center">
+                    <h2 className="quick-links__title">Explore Our Ecosystem</h2>
+                    <p className="quick-links__subtitle">
+                        Navigate through our core pillars of academic excellence and global partnerships.
+                    </p>
+                </div>
+
+                <div className="quick-links__grid">
+                    {LINKS.map((item, i) => (
+                        <Link href={item.href} key={i} className="quick-links__card">
+                            <div className="quick-links__icon-wrap">
+                                <i className={item.icon}></i>
+                            </div>
+                            <h3 className="quick-links__card-title">{item.title}</h3>
+                            <p className="quick-links__card-desc">{item.desc}</p>
+                            <div className="quick-links__card-footer">
+                                <span className="quick-links__cta">{item.cta}</span>
+                                <span className="quick-links__arrow">
+                                    <i className="fa-solid fa-arrow-right"></i>
+                                </span>
+                            </div>
+                        </Link>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default QuickLinksGrid;
diff --git a/app/components/home/Testimonials.tsx b/app/components/home/Testimonials.tsx
deleted file mode 100644
index 9e75793..0000000
--- a/app/components/home/Testimonials.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-interface TestimonialsProps {
-    data: {
-        heading: string;
-        subheading: string;
-        videoUrl: string;
-        videoThumbnail: string;
-        items: {
-            name: string;
-            role: string;
-            country: string;
-            rating: number;
-            comment: string;
-            avatar: string;
-        }[];
-    };
-}
-
-const Testimonials = ({ data }: TestimonialsProps) => {
-    return (
-        <section className="testimonial-section section-padding pb-0 fix">
-            <div className="container">
-                <div className="section-title text-center">
-                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                    <h2 className="split-text-right split-text-in-right">
-                        {data.heading}
-                    </h2>
-                </div>
-                <div className="testimonial-wrapper">
-                    <div className="row g-4">
-                        <div className="col-lg-4">
-                            <div className="testimonia-image tp-clip-anim p-relative">
-                                <img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
-                                <a href={data.videoUrl} className="video-btn video-popup">
-                                    <i className="fa-solid fa-play"></i></a>
-                                <h5>Real stories</h5>
-                            </div>
-                        </div>
-                        <div className="col-lg-8">
-                            <div className="swiper testimonial-slider">
-                                <div className="swiper-wrapper">
-                                    {data.items.map((testimonial, index) => (
-                                        <div key={index} className="swiper-slide">
-                                            <div className="testimonial-box">
-                                                <div className="star">
-                                                    {Array.from({ length: testimonial.rating }).map((_, i) => (
-                                                        <i key={i} className="fa-solid fa-star"></i>
-                                                    ))}
-                                                </div>
-                                                <p>
-                                                    {testimonial.comment}
-                                                </p>
-                                                <div className="info-item">
-                                                    <div className="client-image">
-                                                        <img src={testimonial.avatar} alt="img" />
-                                                    </div>
-                                                    <div className="content">
-                                                        <h5>{testimonial.name}</h5>
-                                                        <span>{testimonial.country}</span>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default Testimonials;
diff --git a/app/components/home/VideoGallery.tsx b/app/components/home/VideoGallery.tsx
deleted file mode 100644
index 44faf61..0000000
--- a/app/components/home/VideoGallery.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-interface VideoGalleryProps {
-    data: {
-        heading: string;
-        videoUrl: string;
-        thumbnail: string;
-    };
-}
-
-const VideoGallery = ({ data }: VideoGalleryProps) => {
-    return (
-        <section className="video-section bg-cover">
-            <video autoPlay loop muted playsInline className="video-bg">
-                <source src={data.videoUrl} type="video/mp4" />
-            </video>
-            <div className="text-image">
-                <img src="/assets/img/home-1/feature/text.png" alt="img" />
-            </div>
-            <div className="text-image-2">
-                <img src="/assets/img/home-1/feature/text-2.png" alt="img" />
-            </div>
-            <div className="container">
-                <div className="video-content">
-                    <div className="shape">
-                        <img src="/assets/img/home-1/feature/Vector.png" alt="img" />
-                    </div>
-                    <h2 className="split-text-right split-text-in-right">{data.heading.split(' ').map((word, index) => (
-                        <span key={index}>{word}{index === 0 ? <br /> : ' '}</span>
-                    ))}</h2>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default VideoGallery;
diff --git a/app/components/home/VisaCountries.tsx b/app/components/home/VisaCountries.tsx
deleted file mode 100644
index 1d44bfc..0000000
--- a/app/components/home/VisaCountries.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import Link from 'next/link';
-
-interface VisaCountriesProps {
-    data: {
-        heading: string;
-        subheading: string;
-        description: string;
-        countries: {
-            name: string;
-            code: string;
-            flag: string;
-            link: string;
-            visaTypes: string[];
-        }[];
-        ctaButton: {
-            label: string;
-            href: string;
-        };
-    };
-}
-
-const VisaCountries = ({ data }: VisaCountriesProps) => {
-    // Display the first country as featured
-    const featuredCountry = data.countries[0];
-    const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2);
-    const firstColumn = featuredCountry.visaTypes.slice(0, halfLength);
-    const secondColumn = featuredCountry.visaTypes.slice(halfLength);
-
-    return (
-        <section className="feature-section section-padding fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg.png')" }}>
-            <div className="container">
-                <div className="feature-wrapper">
-                    <div className="row g-4">
-                        <div className="col-lg-6">
-                            <div className="feature-content">
-                                <div className="section-title mb-0">
-                                    <span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
-                                    <h2 className="text-white split-text-right split-text-in-right">
-                                        {data.heading}
-                                    </h2>
-                                </div>
-                                <p className="text wow fadeInUp" data-wow-delay=".3s">
-                                    {data.description}
-                                </p>
-                                <div className="feature-list-item wow fadeInUp" data-wow-delay=".5s">
-                                    <ul className="list">
-                                        {firstColumn.map((visaType, index) => (
-                                            <li key={index}>
-                                                <i className="fa-solid fa-arrow-right"></i>
-                                                {visaType}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                    <ul className="list">
-                                        {secondColumn.map((visaType, index) => (
-                                            <li key={index}>
-                                                <i className="fa-solid fa-arrow-right"></i>
-                                                {visaType}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-                                <Link href={data.ctaButton.href} className="theme-btn">
-                                    {data.ctaButton.label}
-                                    <i className="fa-solid fa-arrow-right"></i>
-                                </Link>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="feature-image">
-                                <img src={featuredCountry.flag} alt="img" />
-                                <h6>{featuredCountry.code}.{featuredCountry.name}</h6>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default VisaCountries;
diff --git a/app/components/home/VisaSolutions.tsx b/app/components/home/VisaSolutions.tsx
deleted file mode 100644
index bd637c5..0000000
--- a/app/components/home/VisaSolutions.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from 'next/link';
-
-interface VisaSolutionsProps {
-    data: {
-        heading: string;
-        subheading: string;
-        items: {
-            number: string;
-            title: string;
-            description: string;
-            link: string;
-        }[];
-    };
-}
-
-const VisaSolutions = ({ data }: VisaSolutionsProps) => {
-    return (
-        <div className="service-section section-padding fix">
-            <div className="container">
-                <div className="section-title text-center">
-                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                    <h2 className="split-text-right split-text-in-right">
-                        {data.heading}
-                    </h2>
-                </div>
-            </div>
-            {data.items.map((item, index) => (
-                <div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
-                    <div className="container">
-                        <div className="service-item">
-
-                            <div className="left-item">
-                                <h5 className="number">{item.number}</h5>
-                                <h3>
-                                    <Link href={item.link}>{item.title}</Link>
-                                </h3>
-                            </div>
-                            <div className="right-item">
-                                <p>
-                                    {item.description}
-                                </p>
-                                <Link href={item.link} className="service-btn">Service Details <i className="fa-solid fa-arrow-right"></i></Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default VisaSolutions;
diff --git a/app/components/home/WhyChooseUs.tsx b/app/components/home/WhyChooseUs.tsx
deleted file mode 100644
index a47bf22..0000000
--- a/app/components/home/WhyChooseUs.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import Link from 'next/link';
-
-interface WhyChooseUsProps {
-    data: {
-        heading: string;
-        highlightWord?: string;
-        subheading: string;
-        description: string;
-        mainImage?: string;
-        secondaryImage?: string;
-        items: {
-            icon: string;
-            title: string;
-            description: string;
-        }[];
-        features: string[];
-        ctaButton: {
-            label: string;
-            href: string;
-        };
-    };
-}
-
-const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
-    const highlight = data.highlightWord?.trim();
-
-    let headingContent: React.ReactNode = data.heading;
-
-    if (highlight) {
-        const index = data.heading.indexOf(highlight);
-        if (index !== -1) {
-            const before = data.heading.slice(0, index);
-            const after = data.heading.slice(index + highlight.length);
-            headingContent = (
-                <>
-                    {before}
-                    <span>{highlight}</span>
-                    {after}
-                </>
-            );
-        }
-    }
-
-    return (
-        <section className="about-section section-padding fix pb-0">
-            <div className="top-shape">
-                <img src="/assets/img/home-1/about/globe.png" alt="img" />
-            </div>
-            <div className="container">
-                <div className="about-wrapper">
-                    <div className="row g-4">
-                        <div className="col-lg-6">
-                            <div className="about-image">
-                                <img src={data.mainImage || "/assets/img/home-1/about/about-1.jpg"} alt="img" className="wow img-custom-anim-left" />
-                                <div className="about-image-2">
-                                    <img src={data.secondaryImage || "/assets/img/home-1/about/about-02.jpg"} alt="img" className="wow img-custom-anim-right" />
-                                </div>
-                                <div className="bg-shape">
-                                    <img src="/assets/img/home-1/about/Vector.png" alt="img" />
-                                </div>
-                                <div className="plane-shape float-bob-y">
-                                    <img src="/assets/img/home-1/about/plane.png" alt="img" />
-                                </div>
-                                <div className="top-shape float-bob-y">
-                                    <img src="/assets/img/home-1/about/shape.png" alt="img" />
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="about-content">
-                                <div className="section-title mb-0">
-                                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
-                                    <h2 className="split-text-right split-text-in-right">
-                                        {headingContent}
-                                    </h2>
-                                </div>
-                                <p className="text wow fadeInUp" data-wow-delay=".3s">
-                                    {data.description}
-                                </p>
-                                <div className="about-item wow fadeInUp" data-wow-delay=".5s">
-                                    {data.items.map((item, index) => (
-                                        <div key={index} className="content">
-                                            <span><img src={item.icon} alt="" /> {item.title}-</span>
-                                            <p>{item.description}</p>
-                                        </div>
-                                    ))}
-                                </div>
-                                <ul className="list wow fadeInUp" data-wow-delay=".3s">
-                                    {data.features.map((feature, index) => (
-                                        <li key={index}>
-                                            <i className="fa-solid fa-chevrons-right"></i>
-                                            {feature}
-                                        </li>
-                                    ))}
-                                </ul>
-                                <Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
-                                    {data.ctaButton.label}
-                                    <i className="fa-solid fa-arrow-right"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default WhyChooseUs;
diff --git a/app/components/partnership/CollaborateCTA.tsx b/app/components/partnership/CollaborateCTA.tsx
new file mode 100644
index 0000000..42e0117
--- /dev/null
+++ b/app/components/partnership/CollaborateCTA.tsx
@@ -0,0 +1,16 @@
+import CollaborateInfo from "./CollaborateInfo";
+import PartnershipForm from "./PartnershipForm";
+
+export default function CollaborateCTA() {
+  return (
+    <section id="collaborate-cta" className="py-14 bg-brand-blue relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-brand-hover rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/3"></div>
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <CollaborateInfo />
+          <PartnershipForm />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/partnership/CollaborateInfo.tsx b/app/components/partnership/CollaborateInfo.tsx
new file mode 100644
index 0000000..c5c3836
--- /dev/null
+++ b/app/components/partnership/CollaborateInfo.tsx
@@ -0,0 +1,35 @@
+const checkItems = [
+  "Joint Research Initiatives",
+  "Student & Faculty Exchange",
+  "Industry Integration & Internships",
+];
+
+export default function CollaborateInfo() {
+  return (
+    <div>
+      {/* Badge */}
+      <div className="inline-flex items-center gap-2 mb-6">
+        <span className="w-8 h-[2px] bg-brand-accent"></span>
+        <span className="text-sm font-semibold text-brand-light uppercase tracking-wider">Join Our Network</span>
+      </div>
+
+      {/* Heading — dùng div tránh main.css override h2 */}
+      <div className="ps-heading text-white font-bold mb-6 leading-tight">
+        Collaborate <br />With Us
+      </div>
+
+      <p className="text-lg text-brand-light opacity-90 mb-8 leading-relaxed max-w-lg">
+        We are constantly seeking to expand our network with institutions and organizations that share our commitment to rigorous research and liberal arts education.
+      </p>
+
+      <ul className="space-y-4 text-white mb-10 pl-4 pt-5">
+        {checkItems.map((item) => (
+          <li key={item} className="flex items-center gap-3">
+            <i className="fas fa-circle-check text-brand-accent"></i>
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/app/components/partnership/MainIntroBlock.tsx b/app/components/partnership/MainIntroBlock.tsx
new file mode 100644
index 0000000..61734d1
--- /dev/null
+++ b/app/components/partnership/MainIntroBlock.tsx
@@ -0,0 +1,39 @@
+export default function MainIntroBlock() {
+  return (
+    <div className="col-span-12 lg:col-span-8 bento-item rounded-[24px] p-10 lg:p-16 flex flex-col justify-start pt-12 relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-64 h-64 bg-brand-light rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/4"></div>
+      <div className="relative z-10">
+
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 mb-6">
+          <span className="w-8 h-[2px] bg-brand-accent"></span>
+          <span className="text-sm font-semibold text-brand-blue uppercase tracking-wider">Global Network</span>
+        </div>
+
+        {/* Heading — dùng div tránh main.css override h1 */}
+        <div className="ps-heading text-brand-blue tracking-tight mb-8">
+          Global <br />Partnerships
+        </div>
+
+        {/* Description */}
+        <div className="space-y-4 max-w-xl mb-10">
+          <p className="text-lg text-ui-muted leading-relaxed font-medium">
+           [We at Université Libérale de Paris believe that research and liberal arts education thrive through global collaboration.]
+          </p>
+          <p className="text-lg text-ui-muted leading-relaxed">
+            [By bridging international institutions and industry leaders, we create opportunities for our students and faculty to engage in transformative academic exchanges.]
+          </p>
+        </div>
+
+        {/* Button */}
+        <button
+          className="px-5 py-2 bg-white border border-ui-border text-brand-blue text-xs font-semibold transition-all duration-300 flex items-center gap-2 ps-explore-btn"
+          style={{ borderRadius: "20px" }}
+        >
+          Explore Directory <i className="fas fa-arrow-right text-xs"></i>
+        </button>
+
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/partnership/NetworkHighlightBlock.tsx b/app/components/partnership/NetworkHighlightBlock.tsx
new file mode 100644
index 0000000..1d27eb2
--- /dev/null
+++ b/app/components/partnership/NetworkHighlightBlock.tsx
@@ -0,0 +1,26 @@
+export default function NetworkHighlightBlock() {
+  return (
+    <div className="col-span-12 md:col-span-6 lg:col-span-4 bento-item ps-highlight-card rounded-[24px] p-10 flex flex-col justify-between text-white relative overflow-hidden">
+      <div className="absolute bottom-0 right-0 w-48 h-48 bg-brand-accent rounded-full blur-2xl opacity-40 translate-y-1/4 translate-x-1/4"></div>
+      <div className="relative z-10">
+
+        {/* Icon + Brand */}
+        <div className="flex items-center gap-3 mb-12">
+          <i className="fas fa-globe text-2xl text-brand-light"></i>
+          <span className="font-bold text-xl tracking-tight">ULP Network</span>
+        </div>
+
+        {/* Heading — dùng div tránh main.css override h2 */}
+        <div>
+          <div className="ps-subheading text-white font-bold leading-tight mb-4">
+            Connect Across<br />Continents
+          </div>
+          <p className="text-brand-light opacity-90">
+            150+ active academic agreements across 45 countries.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/partnership/PartnershipForm.tsx b/app/components/partnership/PartnershipForm.tsx
new file mode 100644
index 0000000..7719f67
--- /dev/null
+++ b/app/components/partnership/PartnershipForm.tsx
@@ -0,0 +1,49 @@
+export default function PartnershipForm() {
+  return (
+    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-2xl">
+      {/* Title — dùng div tránh main.css override h3 */}
+      <div className="ps-form-title text-ui-text font-bold mb-2">Partnership Inquiry</div>
+      <p className="text-sm text-ui-muted mb-8">
+        Fill out this brief form and our Global Relations office will contact you.
+      </p>
+
+      <form className="space-y-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Institution Name</label>
+            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="e.g. Oxford University" />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Contact Person</label>
+            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="Full Name" />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Email Address</label>
+            <input type="email" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="email@institution.edu" />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Partnership Type</label>
+            <select className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-brand-blue appearance-none">
+              <option>Academic Exchange</option>
+              <option>Joint Research</option>
+              <option>Industry Partnership</option>
+              <option>Other</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Message</label>
+          <textarea rows={3} className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue resize-none" placeholder="Briefly describe your proposed collaboration..." />
+        </div>
+
+        <button type="button" className="w-full py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-brand-hover transition-colors shadow-md mt-4">
+          Submit Inquiry
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/components/publications/PublicationHeader.tsx b/app/components/publications/PublicationHeader.tsx
new file mode 100644
index 0000000..5bcba22
--- /dev/null
+++ b/app/components/publications/PublicationHeader.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+const PublicationHeader = () => {
+    return (
+        <section id="repo-header">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+
+                {/* Title row + action buttons */}
+                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-8 w-full">
+                    <div className="flex-1 max-w-3xl">
+                        <h1>Publication Repository</h1>
+                        <p>Search, filter, and access over 15,000 academic publications and research papers.</p>
+                    </div>
+                    <div className="flex gap-3 shrink-0">
+                        <button className="pub-btn-outline">
+                            <i className="fa-regular fa-bookmark"></i>
+                            Saved Searches
+                        </button>
+                        <button className="pub-btn-primary">
+                            <i className="fa-solid fa-download"></i>
+                            Export Results
+                        </button>
+                    </div>
+                </div>
+
+                {/* Search bar */}
+                <div className="pub-search-bar">
+                    <span className="pub-search-icon">
+                        <i className="fa-solid fa-magnifying-glass"></i>
+                    </span>
+                    <input
+                        type="text"
+                        placeholder="Search by title, author, keyword, or DOI..."
+                    />
+                    <div className="pub-search-btn-wrap">
+                        <button className="pub-btn-primary">Search</button>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+    );
+};
+
+export default PublicationHeader;
diff --git a/app/components/publications/PublicationResults.tsx b/app/components/publications/PublicationResults.tsx
new file mode 100644
index 0000000..7f63444
--- /dev/null
+++ b/app/components/publications/PublicationResults.tsx
@@ -0,0 +1,169 @@
+'use client';
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+const SORT_OPTIONS = ['Relevance', 'Newest First', 'Oldest First', 'Most Cited'];
+
+const PublicationResults = () => {
+    const [isSortOpen, setIsSortOpen] = useState(false);
+    const [selectedSort, setSelectedSort] = useState('Relevance');
+
+    return (
+        <div className="pub-results">
+
+            {/* Toolbar */}
+            <div className="pub-results-toolbar">
+                <p className="pub-results-count">
+                    Showing <strong>1-10</strong> of <strong>12,450</strong> results
+                </p>
+
+                <div className="pub-sort-wrap">
+                    <label>Sort by:</label>
+                    <div className="pub-sort-dropdown">
+                        <button
+                            className={`pub-sort-dropdown-btn ${isSortOpen ? 'open' : ''}`}
+                            onClick={() => setIsSortOpen(!isSortOpen)}
+                        >
+                            <span>{selectedSort}</span>
+                            <i className="fa-solid fa-chevron-down"></i>
+                        </button>
+                        {isSortOpen && (
+                            <div className="pub-sort-dropdown-menu">
+                                {SORT_OPTIONS.map((opt) => (
+                                    <div
+                                        key={opt}
+                                        className={`pub-sort-dropdown-option ${selectedSort === opt ? 'selected' : ''}`}
+                                        onClick={() => { setSelectedSort(opt); setIsSortOpen(false); }}
+                                    >
+                                        {opt}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Cards */}
+            <div className="pub-card-list">
+
+                {/* Card 1 */}
+                <div className="pub-card">
+                    <div className="pub-card-top">
+                        <h3 className="pub-card-title">
+                            <Link href="#">The Evolution of Democratic Institutions in Post-War Europe</Link>
+                        </h3>
+                        <div className="pub-badges">
+                            <span className="pub-badge pub-badge-open">
+                                <i className="fa-solid fa-lock-open"></i> Open Access
+                            </span>
+                            <span className="pub-badge pub-badge-peer">Peer Reviewed</span>
+                        </div>
+                    </div>
+
+                    <div className="pub-card-meta">
+                        <div className="pub-meta-item">
+                            <i className="fa-solid fa-user"></i>
+                            <strong>Dr. Elena Rostova</strong>, Prof. Marcus Chen
+                        </div>
+                        <div className="pub-meta-item">
+                            <i className="fa-regular fa-calendar"></i> October 2024
+                        </div>
+                        <div className="pub-meta-item">
+                            <i className="fa-solid fa-link"></i> DOI: 10.1038/s41586-024
+                        </div>
+                        <div className="pub-meta-item">
+                            <i className="fa-solid fa-building-columns"></i> Center for Political Studies
+                        </div>
+                    </div>
+
+                    <p className="pub-card-abstract">
+                        This paper examines the structural shifts in Western European democratic frameworks from 1945 to 1980. By analyzing institutional archives across France, Germany, and Italy, the research identifies a distinct divergence in how parliamentary powers were consolidated versus distributed. The findings challenge traditional narratives of a uniform democratic resurgence, suggesting instead that local historical contexts heavily dictated the adoption of specific liberal norms.
+                    </p>
+
+                    <div className="pub-keywords">
+                        <span className="pub-keywords-label">Keywords:</span>
+                        <span className="pub-keyword-tag">Democracy</span>
+                        <span className="pub-keyword-tag">European History</span>
+                        <span className="pub-keyword-tag">Institutions</span>
+                    </div>
+
+                    <div className="pub-card-actions">
+                        <button className="pub-action-btn pub-action-btn-primary">
+                            <i className="fa-solid fa-file-pdf"></i> View PDF
+                        </button>
+                        <button className="pub-action-btn pub-action-btn-secondary">
+                            <i className="fa-solid fa-quote-right"></i> Cite
+                        </button>
+                        <button className="pub-action-btn pub-action-btn-secondary">
+                            <i className="fa-regular fa-bookmark"></i> Save
+                        </button>
+                    </div>
+                </div>
+
+                {/* Card 2 */}
+                <div className="pub-card">
+                    <div className="pub-card-top">
+                        <h3 className="pub-card-title">
+                            <Link href="#">Cognitive Linguistics and the Framing of Modern Ethics</Link>
+                        </h3>
+                        <div className="pub-badges">
+                            <span className="pub-badge pub-badge-institutional">
+                                <i className="fa-solid fa-building-user"></i> Institutional
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="pub-card-meta">
+                        <div className="pub-meta-item">
+                            <i className="fa-solid fa-user"></i>
+                            <strong>Dr. Sarah Jenkins</strong>
+                        </div>
+                        <div className="pub-meta-item">
+                            <i className="fa-regular fa-calendar"></i> August 2024
+                        </div>
+                        <div className="pub-meta-item">
+                            <i className="fa-solid fa-link"></i> DOI: 10.1016/j.cogling.2024
+                        </div>
+                    </div>
+
+                    <p className="pub-card-abstract">
+                        An exploration into how metaphor and cognitive framing shape contemporary ethical debates. The study utilizes computational linguistics to analyze over 10,000 policy documents and public speeches, demonstrating a significant correlation between specific metaphorical structures and the resulting ethical policy frameworks adopted by legislative bodies.
+                    </p>
+
+                    <div className="pub-card-actions">
+                        <button className="pub-action-btn pub-action-btn-primary">
+                            <i className="fa-solid fa-arrow-right-to-bracket"></i> Login to Access
+                        </button>
+                        <button className="pub-action-btn pub-action-btn-secondary">
+                            <i className="fa-solid fa-quote-right"></i> Cite
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+
+            {/* Pagination */}
+            <div className="pub-pagination">
+                <button className="pub-page-btn" disabled>
+                    <i className="fa-solid fa-arrow-left"></i> Previous
+                </button>
+
+                <div className="pub-page-numbers">
+                    <button className="pub-page-num active">1</button>
+                    <button className="pub-page-num">2</button>
+                    <button className="pub-page-num">3</button>
+                    <span className="pub-page-ellipsis">...</span>
+                    <button className="pub-page-num">124</button>
+                </div>
+
+                <button className="pub-page-btn">
+                    Next <i className="fa-solid fa-arrow-right"></i>
+                </button>
+            </div>
+
+        </div>
+    );
+};
+
+export default PublicationResults;
diff --git a/app/components/publications/PublicationSidebar.tsx b/app/components/publications/PublicationSidebar.tsx
new file mode 100644
index 0000000..37b7de2
--- /dev/null
+++ b/app/components/publications/PublicationSidebar.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useState } from 'react';
+
+const YEARS = ['2024 (1,245)', '2023 (3,412)', '2022 (2,890)'];
+const DOMAINS = ['Liberal Arts (4,521)', 'Social Sciences (3,210)', 'Humanities (2,980)', 'Political Science (1,840)'];
+const ACCESS_TYPES = ['Open Access', 'Institutional Login', 'Request Access'];
+
+const AccordionSection = ({
+    title,
+    open,
+    onToggle,
+    children,
+}: {
+    title: string;
+    open: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+}) => (
+    <div className="pub-accordion-item">
+        <button
+            className={`pub-accordion-trigger ${open ? 'open' : ''}`}
+            onClick={onToggle}
+        >
+            {title}
+            <i className="fa-solid fa-chevron-down"></i>
+        </button>
+        <div className={`pub-accordion-body ${open ? 'open' : ''}`}>
+            {children}
+        </div>
+    </div>
+);
+
+const PublicationSidebar = () => {
+    const [isYearOpen, setIsYearOpen] = useState(true);
+    const [isDomainOpen, setIsDomainOpen] = useState(true);
+    const [isAccessOpen, setIsAccessOpen] = useState(true);
+    const [minYear, setMinYear] = useState('');
+    const [maxYear, setMaxYear] = useState('');
+
+    return (
+        <aside className="pub-sidebar">
+            <div className="pub-sidebar-inner">
+
+                <div className="pub-sidebar-header">
+                    <h2>
+                        <i className="fa-solid fa-filter"></i> Filters
+                    </h2>
+                    <button
+                        className="pub-clear-btn"
+                        onClick={() => { setMinYear(''); setMaxYear(''); }}
+                    >
+                        Clear All
+                    </button>
+                </div>
+
+                <div className="pub-accordion">
+
+                    {/* Publication Year */}
+                    <AccordionSection title="Publication Year" open={isYearOpen} onToggle={() => setIsYearOpen(!isYearOpen)}>
+                        <div className="pub-filter-list">
+                            {YEARS.map((year, idx) => (
+                                <label key={year} className="pub-filter-label">
+                                    <input
+                                        type="checkbox"
+                                        className="pub-checkbox"
+                                        defaultChecked={idx === 0}
+                                    />
+                                    <span>{year}</span>
+                                </label>
+                            ))}
+                            <div className="pub-year-range">
+                                <input
+                                    type="number"
+                                    placeholder="Min"
+                                    value={minYear}
+                                    onChange={(e) => setMinYear(e.target.value)}
+                                />
+                                <input
+                                    type="number"
+                                    placeholder="Max"
+                                    value={maxYear}
+                                    onChange={(e) => setMaxYear(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                    </AccordionSection>
+
+                    {/* Research Domain */}
+                    <AccordionSection title="Research Domain" open={isDomainOpen} onToggle={() => setIsDomainOpen(!isDomainOpen)}>
+                        <div className="pub-filter-list">
+                            {DOMAINS.map((domain, idx) => (
+                                <label key={domain} className="pub-filter-label">
+                                    <input
+                                        type="checkbox"
+                                        className="pub-checkbox"
+                                        defaultChecked={idx === 0}
+                                    />
+                                    <span>{domain}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </AccordionSection>
+
+                    {/* Access Type */}
+                    <AccordionSection title="Access Type" open={isAccessOpen} onToggle={() => setIsAccessOpen(!isAccessOpen)}>
+                        <div className="pub-filter-list">
+                            {ACCESS_TYPES.map((type) => (
+                                <label key={type} className="pub-filter-label">
+                                    <input type="checkbox" className="pub-checkbox" />
+                                    <span>{type}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </AccordionSection>
+
+                </div>
+            </div>
+        </aside>
+    );
+};
+
+export default PublicationSidebar;
diff --git a/app/components/research/ProjectsAndCenters.tsx b/app/components/research/ProjectsAndCenters.tsx
new file mode 100644
index 0000000..83c078d
--- /dev/null
+++ b/app/components/research/ProjectsAndCenters.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+
+// Khối chứa 2 cột: Active Projects Feed và Funding Calls
+const ProjectsAndCenters = () => {
+    return (
+        <section id="projects-centers">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
+                    
+                    {/* --- CỘT TRÁI (7/12): ACTIVE PROJECTS LIST --- */}
+                    <div className="lg:col-span-7">
+                        <div className="flex items-center justify-between mb-8">
+                            <h2 className="text-2xl font-bold text-ui-text">Active Projects Feed</h2>
+                            <a href="#" className="text-sm font-medium text-brand-accent hover:text-brand-blue transition-colors">
+                                View All Projects
+                            </a>
+                        </div>
+                        
+                        <div className="space-y-4">
+                            
+                            {/* Project Item 1 */}
+                            <div className="project-card">
+                                <div className="project-icon project-icon-blue">
+                                    <i className="text-2xl text-brand-blue inline-flex">
+                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path fill="currentColor" d="M160 32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32zM32 448H320c70.7 0 128-57.3 128-128s-57.3-128-128-128V128c106 0 192 86 192 192c0 49.2-18.5 94-48.9 128H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm80-64H304c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
+                                        </svg>
+                                    </i>
+                                </div>
+                                <div className="flex-grow">
+                                    <div className="flex flex-wrap items-center gap-2 mb-2">
+                                        <span className="badge badge-active">Active</span>
+                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
+                                            <i className="inline-flex">
+                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
+                                                </svg>
+                                            </i> 
+                                            Updated 2d ago
+                                        </span>
+                                    </div>
+                                    <h4 className="text-lg font-bold text-ui-text mb-1">Urban Microclimate Modeling</h4>
+                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
+                                        Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning.
+                                    </p>
+                                    
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex -space-x-2">
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="Researcher" title="Dr. Alan Turing" />
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="Researcher" title="Dr. Marie Curie" />
+                                            <div className="w-8 h-8 rounded-full border-2 border-white bg-ui-bg flex items-center justify-center text-[10px] font-bold text-ui-muted">+3</div>
+                                        </div>
+                                        <div className="w-32">
+                                            <div className="flex justify-between text-xs mb-1">
+                                                <span className="text-ui-muted">Progress</span>
+                                                <span className="font-medium">65%</span>
+                                            </div>
+                                            <div className="progress-bar-track">
+                                                <div className="progress-bar-fill progress-fill-blue" style={{ width: '65%' }}></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Project Item 2 */}
+                            <div className="project-card">
+                                <div className="project-icon project-icon-purple">
+                                    <i className="text-2xl text-purple-600 inline-flex">
+                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path fill="currentColor" d="M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5-12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z"></path>
+                                        </svg>
+                                    </i>
+                                </div>
+                                <div className="flex-grow">
+                                    <div className="flex flex-wrap items-center gap-2 mb-2">
+                                        <span className="badge badge-collection">Data Collection</span>
+                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
+                                            <i className="inline-flex">
+                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
+                                                </svg>
+                                            </i> 
+                                            Updated 1w ago
+                                        </span>
+                                    </div>
+                                    <h4 className="text-lg font-bold text-ui-text mb-1">Digital Rights in the EU Framework</h4>
+                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
+                                        A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties.
+                                    </p>
+                                    
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex -space-x-2">
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg" alt="Researcher" />
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-7.jpg" alt="Researcher" />
+                                        </div>
+                                        <div className="w-32">
+                                            <div className="flex justify-between text-xs mb-1">
+                                                <span className="text-ui-muted">Progress</span>
+                                                <span className="font-medium">30%</span>
+                                            </div>
+                                            <div className="progress-bar-track">
+                                                <div className="progress-bar-fill progress-fill-accent" style={{ width: '30%' }}></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            {/* Project Item 3 */}
+                            <div className="project-card">
+                                <div className="project-icon project-icon-orange">
+                                    <i className="text-2xl text-orange-600 inline-flex">
+                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path fill="currentColor" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z"></path>
+                                        </svg>
+                                    </i>
+                                </div>
+                                <div className="flex-grow">
+                                    <div className="flex flex-wrap items-center gap-2 mb-2">
+                                        <span className="badge badge-review">Review</span>
+                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
+                                            <i className="inline-flex">
+                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
+                                                </svg>
+                                            </i> 
+                                            Updated 3w ago
+                                        </span>
+                                    </div>
+                                    <h4 className="text-lg font-bold text-ui-text mb-1">Behavioral Impacts of Universal Basic Income</h4>
+                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
+                                        Longitudinal study tracking spending habits and employment outcomes in selected pilot regions across France.
+                                    </p>
+                                    
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex -space-x-2">
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-8.jpg" alt="Researcher" />
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-9.jpg" alt="Researcher" />
+                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Researcher" />
+                                        </div>
+                                        <div className="w-32">
+                                            <div className="flex justify-between text-xs mb-1">
+                                                <span className="text-ui-muted">Progress</span>
+                                                <span className="font-medium">90%</span>
+                                            </div>
+                                            <div className="progress-bar-track">
+                                                <div className="progress-bar-fill progress-fill-blue" style={{ width: '90%' }}></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* --- CỘT PHẢI (5/12): FUNDING CALLS --- */}
+                    <div className="lg:col-span-5">
+                        <div className="flex items-center justify-between mb-8">
+                            <h2 className="text-2xl font-bold text-ui-text">Funding Calls</h2>
+                        </div>
+
+                        <div className="funding-card">
+                            <div className="space-y-4 flex-grow">
+
+                                {/* Item 1 */}
+                                <div className="funding-item">
+                                    <span className="funding-label-urgent">Closing Soon</span>
+                                    <h4>EU Horizon 2025: Sustainable Tech</h4>
+                                    <div className="funding-meta">
+                                        <span className="funding-due">
+                                            <i className="fa-regular fa-calendar"></i> Due Nov 15
+                                        </span>
+                                        <a href="#" className="funding-link">
+                                            Details <i className="fa-solid fa-arrow-right" style={{fontSize:'0.625rem'}}></i>
+                                        </a>
+                                    </div>
+                                </div>
+
+                                {/* Item 2 */}
+                                <div className="funding-item">
+                                    <span className="funding-label-internal">Internal Grant</span>
+                                    <h4>Seed Funding for AI Ethics</h4>
+                                    <div className="funding-meta">
+                                        <span className="funding-due">
+                                            <i className="fa-regular fa-calendar"></i> Due Dec 01
+                                        </span>
+                                        <a href="#" className="funding-link">
+                                            Details <i className="fa-solid fa-arrow-right" style={{fontSize:'0.625rem'}}></i>
+                                        </a>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <button className="funding-view-all">
+                                View All Opportunities
+                            </button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ProjectsAndCenters;
\ No newline at end of file
diff --git a/app/components/research/ResearchDomains.tsx b/app/components/research/ResearchDomains.tsx
new file mode 100644
index 0000000..7c13d6c
--- /dev/null
+++ b/app/components/research/ResearchDomains.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+
+// Khối chứa danh sách các lĩnh vực nghiên cứu.
+const ResearchDomains = () => {
+    return (
+        <section id="research-domains">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                
+                {/* Tiêu đề Section */}
+                <div className="text-center mb-16">
+                    <h2 className="text-3xl lg:text-4xl font-bold text-ui-text mb-4">Research Domains</h2>
+                    <p className="text-ui-muted max-w-2xl mx-auto">
+                        Discover our core areas of expertise, where interdisciplinary teams tackle complex global challenges.
+                    </p>
+                </div>
+                
+                {/* Grid chứa các thẻ (Cards) */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    
+                    {/* Domain Card 1 (Nổi bật - Màu xanh) */}
+                    <div className="folder-tab folder-tab-blue group">
+                        {/* Hiệu ứng Glow */}
+                        <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
+                        
+                        <div className="domain-icon-blue">
+                            <i className="text-2xl text-white inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                                    <path fill="currentColor" d="M384 32H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H398.4c-5.2 25.8-22.9 47.1-46.4 57.3V448H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 128c-17.7 0-32-14.3-32-32s14.3-32 32-32H288V153.3c-23.5-10.3-41.2-31.6-46.4-57.3H128c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c14.6-19.4 37.8-32 64-32s49.4 12.6 64 32zm55.6 288H584.4L512 195.8 439.6 320zM512 416c-62.9 0-115.2-34-126-78.9c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C627.2 382 574.9 416 512 416zM126.8 195.8L54.4 320H199.3L126.8 195.8zM.9 337.1c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C242 382 189.7 416 126.8 416S11.7 382 .9 337.1z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        
+                        <h3 className="text-2xl font-bold mb-4">Law & Policy</h3>
+                        <p className="text-white/80 text-sm leading-relaxed mb-8 flex-grow">
+                            Investigating the evolution of international law, human rights, and public policy in a rapidly changing geopolitical landscape.
+                        </p>
+                        
+                        <div className="domain-card-footer">
+                            <span className="domain-badge-glass">42 Centers</span>
+                            <i className="text-white/70 group-hover:text-white group-hover:translate-x-1 transition-all inline-flex">
+                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                    
+                    {/* Domain Card 2 */}
+                    <div className="folder-tab folder-tab-light group">
+                        <div className="domain-icon-light">
+                            <i className="text-2xl text-brand-blue inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path fill="currentColor" d="M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        
+                        <h3 className="text-2xl font-bold mb-4">Cognitive Science</h3>
+                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
+                            Bridging psychology, neuroscience, and artificial intelligence to understand human cognition and behavior.
+                        </p>
+                        
+                        <div className="domain-card-footer">
+                            <span className="domain-badge-white">28 Centers</span>
+                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
+                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                    
+                    {/* Domain Card 3 */}
+                    <div className="folder-tab folder-tab-light group">
+                        <div className="domain-icon-light">
+                            <i className="text-2xl text-brand-blue inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path fill="currentColor" d="M266.3 48.3L232.5 73.6c-5.4 4-8.5 10.4-8.5 17.1v9.1c0 6.8 5.5 12.3 12.3 12.3c2.4 0 4.8-.7 6.8-2.1l41.8-27.9c2-1.3 4.4-2.1 6.8-2.1h1c6.2 0 11.3 5.1 11.3 11.3c0 3-1.2 5.9-3.3 8l-19.9 19.9c-5.8 5.8-12.9 10.2-20.7 12.8l-26.5 8.8c-5.8 1.9-9.6 7.3-9.6 13.4c0 3.7-1.5 7.3-4.1 10l-17.9 17.9c-6.4 6.4-9.9 15-9.9 24v4.3c0 16.4 13.6 29.7 29.9 29.7c11 0 21.2-6.2 26.1-16l4-8.1c2.4-4.8 7.4-7.9 12.8-7.9c4.5 0 8.7 2.1 11.4 5.7l16.3 21.7c2.1 2.9 5.5 4.5 9.1 4.5c8.4 0 13.9-8.9 10.1-16.4l-1.1-2.3c-3.5-7 0-15.5 7.5-18l21.2-7.1c7.6-2.5 12.7-9.6 12.7-17.6c0-10.3 8.3-18.6 18.6-18.6H400c8.8 0 16 7.2 16 16s-7.2 16-16 16H379.3c-7.2 0-14.2 2.9-19.3 8l-4.7 4.7c-2.1 2.1-3.3 5-3.3 8c0 6.2 5.1 11.3 11.3 11.3h11.3c6 0 11.8 2.4 16 6.6l6.5 6.5c1.8 1.8 2.8 4.3 2.8 6.8s-1 5-2.8 6.8l-7.5 7.5C386 262 384 266.9 384 272s2 10 5.7 13.7L408 304c10.2 10.2 24.1 16 38.6 16H454c6.5-20.2 10-41.7 10-64c0-111.4-87.6-202.4-197.7-207.7zm172 307.9c-3.7-2.6-8.2-4.1-13-4.1c-6 0-11.8-2.4-16-6.6L396 332c-7.7-7.7-18-12-28.9-12c-9.7 0-19.2-3.5-26.6-9.8L314 287.4c-11.6-9.9-26.4-15.4-41.7-15.4H251.4c-12.6 0-25 3.7-35.5 10.7L188.5 301c-17.8 11.9-28.5 31.9-28.5 53.3v3.2c0 17 6.7 33.3 18.7 45.3l16 16c8.5 8.5 20 13.3 32 13.3H248c13.3 0 24 10.7 24 24c0 2.5 .4 5 1.1 7.3c71.3-5.8 132.5-47.6 165.2-107.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM187.3 100.7c-6.2-6.2-16.4-6.2-22.6 0l-32 32c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l32-32c6.2-6.2 6.2-16.4 0-22.6z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        
+                        <h3 className="text-2xl font-bold mb-4">Environmental Studies</h3>
+                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
+                            Developing sustainable solutions for climate change, resource management, and ecological preservation.
+                        </p>
+                        
+                        <div className="domain-card-footer">
+                            <span className="domain-badge-white">35 Centers</span>
+                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
+                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                    
+                    {/* Domain Card 4 */}
+                    <div className="folder-tab folder-tab-light group">
+                        <div className="domain-icon-light">
+                            <i className="text-2xl text-brand-blue inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path fill="currentColor" d="M248 0h16c13.3 0 24 10.7 24 24V34.7C368.4 48.1 431.9 111.6 445.3 192H448c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h2.7C80.1 111.6 143.6 48.1 224 34.7V24c0-13.3 10.7-24 24-24zM64 288h64V416h40V288h64V416h48V288h64V416h40V288h64V420.3c.6 .3 1.2 .7 1.7 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512H32c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1V288z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        
+                        <h3 className="text-2xl font-bold mb-4">History & Humanities</h3>
+                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
+                            Preserving cultural heritage and analyzing historical contexts to inform contemporary societal debates.
+                        </p>
+                        
+                        <div className="domain-card-footer">
+                            <span className="domain-badge-white">50 Centers</span>
+                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
+                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                    
+                    {/* Domain Card 5 */}
+                    <div className="folder-tab folder-tab-light group">
+                        <div className="domain-icon-light">
+                            <i className="text-2xl text-brand-blue inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path fill="currentColor" d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5-12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        
+                        <h3 className="text-2xl font-bold mb-4">Economics</h3>
+                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
+                            Analyzing global markets, behavioral economics, and policy impacts on socioeconomic development.
+                        </p>
+                        
+                        <div className="domain-card-footer">
+                            <span className="domain-badge-white">19 Centers</span>
+                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
+                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                    
+                    {/* Domain Card 6 - CTA */}
+                    <div className="domain-card-cta group">
+                        <div className="domain-icon-cta">
+                            <i className="text-2xl text-brand-blue inline-flex">
+                                <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                    <path fill="currentColor" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"></path>
+                                </svg>
+                            </i>
+                        </div>
+                        <h3 className="text-xl font-bold mb-2">View All Domains</h3>
+                        <p className="text-ui-muted text-sm">Explore our complete directory of 15+ research areas.</p>
+                    </div>
+                    
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ResearchDomains;
\ No newline at end of file
diff --git a/app/components/research/ResearchHero.tsx b/app/components/research/ResearchHero.tsx
new file mode 100644
index 0000000..290ed8f
--- /dev/null
+++ b/app/components/research/ResearchHero.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const ResearchHero = () => {
+    const router = useRouter();
+    return (
+        <section id="research-hero">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                <div className="flex flex-col lg:flex-row gap-12 items-center">
+
+                    {/* --- CỘT TRÁI --- */}
+                    <div className="w-full lg:w-1/2 hero-left">
+
+                        {/* Label: gạch ngang + "Research Hub" */}
+                        <div className="hero-label">
+                            <span className="hero-label-line"></span>
+                            <span className="hero-label-text">Research Hub</span>
+                        </div>
+
+                        {/* Heading */}
+                        <h1>
+                            Pioneering <br />
+                            <span>Discovery</span>
+                        </h1>
+
+                        {/* Description */}
+                        <p className="hero-desc">
+                            Explore our cutting-edge research domains, active projects, and interdisciplinary centers driving innovation in liberal arts and sciences.
+                        </p>
+
+                        {/* Buttons */}
+                        <div className="hero-buttons">
+                            <button className="r-btn-primary" onClick={() => router.push('/research/search')}>
+                                Browse Projects <i className="fa-solid fa-arrow-right text-sm"></i>
+                            </button>
+                            <button className="r-btn-outline">
+                                View Publications
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* --- CỘT PHẢI: Visual composition --- */}
+                    <div className="w-full lg:w-1/2 relative">
+                        <div className="relative w-full aspect-square max-w-[600px] mx-auto">
+
+                            {/* Glow nền */}
+                            <div className="absolute inset-0 bg-brand-light rounded-full blur-3xl opacity-50"></div>
+
+                            {/* Main image card */}
+                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-white rounded-[32px] border border-ui-border shadow-2xl overflow-hidden z-10">
+                                <img
+                                    className="w-full h-full object-cover"
+                                    src="https://storage.googleapis.com/uxpilot-auth.appspot.com/11d578de27-837b09c2ea77020bcb48.png"
+                                    alt="Research laboratory"
+                                />
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+                                <div className="absolute bottom-0 left-0 p-6 w-full text-white">
+                                    <div className="flex items-center gap-2 mb-2">
+                                        <span className="px-3 py-1 text-white text-xs font-bold rounded-full" style={{ backgroundColor: 'var(--r-accent)' }}>
+                                            Featured
+                                        </span>
+                                    </div>
+                                    <h3 className="text-xl font-bold mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Cognitive Sciences Lab</h3>
+                                    <p className="text-sm opacity-90" style={{ fontFamily: 'Inter, sans-serif' }}>Exploring the intersection of AI and human psychology.</p>
+                                </div>
+                            </div>
+
+                            {/* Floating stat card 1 — Publications */}
+                            <div className="r-stat-card" style={{ top: '10%', right: '5%' }}>
+                                <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--r-blue-light)', color: 'var(--r-blue)' }}>
+                                    <i className="fa-solid fa-book-open text-xl"></i>
+                                </div>
+                                <div>
+                                    <p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>12k+</p>
+                                    <p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Publications</p>
+                                </div>
+                            </div>
+
+                            {/* Floating stat card 2 — Active Projects */}
+                            <div className="r-stat-card" style={{ bottom: '15%', left: '0%' }}>
+                                <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#f0fdf4', color: '#16a34a' }}>
+                                    <i className="fa-solid fa-flask text-xl"></i>
+                                </div>
+                                <div>
+                                    <p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>340</p>
+                                    <p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Active Projects</p>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ResearchHero;
diff --git a/app/components/research/ResearchResources.tsx b/app/components/research/ResearchResources.tsx
new file mode 100644
index 0000000..cea555a
--- /dev/null
+++ b/app/components/research/ResearchResources.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+// Khối chứa 2 banner: Research Guidance và Publication Repository
+const ResearchResources = () => {
+    return (
+        <section id="research-quick-links">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    
+                    {/* --- Banner 1: Guidance Link --- */}
+                    <a href="#" className="resource-card group">
+                        <div className="resource-card-glow"></div>
+                        <div className="relative z-10 flex items-start gap-6">
+                            <div className="resource-icon">
+                                <i className="text-3xl text-brand-blue inline-flex">
+                                    <svg className="w-8 h-8" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
+                                    </svg>
+                                </i>
+                            </div>
+                            <div>
+                                <h3 className="text-2xl font-bold text-ui-text mb-2 group-hover:text-brand-blue transition-colors">
+                                    Research Guidance
+                                </h3>
+                                <p className="text-ui-muted leading-relaxed mb-4">
+                                    Access comprehensive resources, ethical guidelines, grant application support, and methodological frameworks for your research journey.
+                                </p>
+                                <span className="resource-link">
+                                    Access Portal 
+                                    <i className="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
+                                </span>
+                            </div>
+                        </div>
+                    </a>
+
+                    {/* --- Banner 2: Repository Link --- */}
+                    <a href="#" className="resource-card group">
+                        <div className="resource-card-glow"></div>
+                        <div className="relative z-10 flex items-start gap-6">
+                            <div className="resource-icon">
+                                <i className="text-3xl text-brand-blue inline-flex">
+                                    <svg className="w-8 h-8" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                        <path fill="currentColor" d="M0 96C0 43 43 0 96 0h96V190.7c0 13.4 15.5 20.9 26 12.5L272 160l54 43.2c10.5 8.4 26 .9 26-12.5V0h32 32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32z"></path>
+                                    </svg>
+                                </i>
+                            </div>
+                            <div>
+                                <h3 className="text-2xl font-bold text-ui-text mb-2 group-hover:text-brand-blue transition-colors">
+                                    Publication Repository
+                                </h3>
+                                <p className="text-ui-muted leading-relaxed mb-4">
+                                    Browse, search, and request access to thousands of peer-reviewed papers, dissertations, and datasets produced by ULP scholars.
+                                </p>
+                                <span className="resource-link">
+                                    Search Repository 
+                                    <i className="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
+                                </span>
+                            </div>
+                        </div>
+                    </a>
+
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ResearchResources;
\ No newline at end of file
diff --git a/app/components/research/ResearchSearch.tsx b/app/components/research/ResearchSearch.tsx
new file mode 100644
index 0000000..09fb4b7
--- /dev/null
+++ b/app/components/research/ResearchSearch.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const ResearchSearch = () => {
+    const [query, setQuery] = useState('');
+    const [activeFilter, setActiveFilter] = useState('Researchers');
+    const filters = ['Researchers', 'Labs', 'Projects', 'Institutes'];
+    const router = useRouter();
+
+    const handleSearch = () => {
+        const params = new URLSearchParams({ q: query, type: activeFilter });
+        router.push(`/research/search?${params.toString()}`);
+    };
+
+    return (
+        <div className="max-w-5xl mx-auto mb-10" style={{ padding: '0 1rem' }}>
+
+            {/* Search bar */}
+            <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                    <i className="fa-solid fa-magnifying-glass" style={{ color: '#9ca3af' }}></i>
+                </div>
+                <input
+                    type="text"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                    placeholder="Search across researchers, labs, projects, and disciplines..."
+                    style={{
+                        width: '100%',
+                        paddingLeft: '3rem',
+                        paddingRight: '8rem',
+                        paddingTop: '1rem',
+                        paddingBottom: '1rem',
+                        backgroundColor: '#ffffff',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: '1rem',
+                        boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
+                        fontSize: '1rem',
+                        color: '#374151',
+                        outline: 'none',
+                        transition: 'border-color 0.2s, box-shadow 0.2s',
+                        boxSizing: 'border-box',
+                    }}
+                    onFocus={(e) => {
+                        e.target.style.borderColor = '#263c6f';
+                        e.target.style.boxShadow = '0 0 0 2px rgba(38,60,111,0.15)';
+                    }}
+                    onBlur={(e) => {
+                        e.target.style.borderColor = '#e5e7eb';
+                        e.target.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.05)';
+                    }}
+                />
+                <div className="absolute flex items-center" style={{ top: '0.5rem', bottom: '0.5rem', right: '0.5rem' }}>
+                    <button
+                        onClick={handleSearch}
+                        style={{
+                            backgroundColor: '#263c6f',
+                            color: '#ffffff',
+                            padding: '0.5rem 1.5rem',
+                            borderRadius: '0.75rem',
+                            fontSize: '0.875rem',
+                            fontWeight: 500,
+                            border: 'none',
+                            cursor: 'pointer',
+                            height: '100%',
+                            transition: 'opacity 0.2s',
+                        }}
+                        onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.9')}
+                        onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
+                    >
+                        Search
+                    </button>
+                </div>
+            </div>
+
+            {/* Filter pills */}
+            <div className="flex gap-3 mt-4 px-2" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
+                <span style={{ fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.25rem' }}>
+                    Filters:
+                </span>
+                {filters.map((filter) => (
+                    <button
+                        key={filter}
+                        onClick={() => setActiveFilter(filter)}
+                        style={{
+                            fontSize: '0.75rem',
+                            fontWeight: 500,
+                            padding: '0.25rem 0.75rem',
+                            borderRadius: '9999px',
+                            border: 'none',
+                            cursor: 'pointer',
+                            transition: 'background-color 0.2s',
+                            backgroundColor: activeFilter === filter ? 'rgba(38,60,111,0.1)' : '#f3f4f6',
+                            color: activeFilter === filter ? '#263c6f' : '#4b5563',
+                        }}
+                        onMouseEnter={(e) => {
+                            if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#e5e7eb';
+                        }}
+                        onMouseLeave={(e) => {
+                            if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#f3f4f6';
+                        }}
+                    >
+                        {filter}
+                    </button>
+                ))}
+            </div>
+
+        </div>
+    );
+};
+
+export default ResearchSearch;
diff --git a/app/components/research/search/ResearchSearchHeader.tsx b/app/components/research/search/ResearchSearchHeader.tsx
new file mode 100644
index 0000000..80ec3d7
--- /dev/null
+++ b/app/components/research/search/ResearchSearchHeader.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const FILTERS = ['Researchers', 'Labs', 'Projects', 'Institutes'];
+
+const ResearchSearchHeader = () => {
+    const [query, setQuery] = useState('');
+    const [activeFilter, setActiveFilter] = useState('Researchers');
+    const router = useRouter();
+
+    const handleSearch = () => {
+        const params = new URLSearchParams({ q: query, type: activeFilter });
+        router.push(`/research/search?${params.toString()}`);
+    };
+
+    return (
+        <section id="repo-header">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+
+                {/* Title row */}
+                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-8 w-full">
+                    <div className="flex-1 max-w-3xl">
+                        <h1>Research Search</h1>
+                        <p>Search across researchers, labs, active projects, and institutes.</p>
+                    </div>
+                    <div className="flex gap-3 shrink-0">
+                        <button className="pub-btn-outline" onClick={() => router.back()}>
+                            <i className="fa-solid fa-arrow-left"></i>
+                            Back to Research
+                        </button>
+                    </div>
+                </div>
+
+                {/* Search bar */}
+                <div className="pub-search-bar">
+                    <span className="pub-search-icon">
+                        <i className="fa-solid fa-magnifying-glass"></i>
+                    </span>
+                    <input
+                        type="text"
+                        placeholder="Search researchers, labs, projects, and disciplines..."
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                    />
+                    <div className="pub-search-btn-wrap">
+                        <button className="pub-btn-primary" onClick={handleSearch}>Search</button>
+                    </div>
+                </div>
+
+                {/* Filter tabs */}
+                <div className="flex flex-wrap items-center gap-3 mt-5">
+                    <span className="text-xs font-bold uppercase tracking-widest" style={{ color: 'var(--pub-muted)' }}>
+                        Filter by:
+                    </span>
+                    {FILTERS.map((f) => (
+                        <button
+                            key={f}
+                            onClick={() => setActiveFilter(f)}
+                            className="pub-btn-outline"
+                            style={activeFilter === f ? {
+                                backgroundColor: 'var(--pub-blue-light)',
+                                color: 'var(--pub-blue)',
+                                borderColor: 'transparent',
+                            } : {}}
+                        >
+                            {f}
+                        </button>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+};
+
+export default ResearchSearchHeader;
diff --git a/app/components/research/search/ResearchSearchResults.tsx b/app/components/research/search/ResearchSearchResults.tsx
new file mode 100644
index 0000000..d4460a8
--- /dev/null
+++ b/app/components/research/search/ResearchSearchResults.tsx
@@ -0,0 +1,177 @@
+'use client';
+
+import React, { useState } from 'react';
+
+const SORT_OPTIONS = ['Relevance', 'Newest First', 'Most Active', 'Alphabetical'];
+
+const RESULTS = [
+    {
+        type: 'Project',
+        badgeClass: 'pub-badge-open',
+        badgeIcon: 'fa-flask',
+        badgeLabel: 'Active Project',
+        statusClass: 'pub-badge-peer',
+        statusLabel: 'Environmental Studies',
+        title: 'Urban Microclimate Modeling',
+        lead: 'Dr. Alan Turing',
+        updated: 'Updated 2 days ago',
+        center: 'Institute for Climate Research',
+        desc: 'Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning and satellite data.',
+        tags: ['Climate', 'Machine Learning', 'Urban Studies'],
+        progress: 65,
+    },
+    {
+        type: 'Lab',
+        badgeClass: 'pub-badge-institutional',
+        badgeIcon: 'fa-building-user',
+        badgeLabel: 'Research Lab',
+        statusClass: 'pub-badge-peer',
+        statusLabel: 'Cognitive Science',
+        title: 'Cognitive Sciences Lab',
+        lead: 'Prof. Marie Curie',
+        updated: 'Updated 1 week ago',
+        center: 'Center for Digital Humanities',
+        desc: 'Exploring the intersection of artificial intelligence and human psychology, with a focus on decision-making processes and behavioral modeling.',
+        tags: ['AI', 'Psychology', 'Neuroscience'],
+        progress: null,
+    },
+    {
+        type: 'Project',
+        badgeClass: 'pub-badge-request',
+        badgeIcon: 'fa-gavel',
+        badgeLabel: 'Data Collection',
+        statusClass: 'pub-badge-peer',
+        statusLabel: 'Law & Policy',
+        title: 'Digital Rights in the EU Framework',
+        lead: 'Dr. Elena Rostova',
+        updated: 'Updated 1 week ago',
+        center: 'Institute for Advanced European Studies',
+        desc: 'A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties across the EU.',
+        tags: ['Digital Rights', 'EU Law', 'Privacy'],
+        progress: 30,
+    },
+];
+
+const ResearchSearchResults = () => {
+    const [isSortOpen, setIsSortOpen] = useState(false);
+    const [selectedSort, setSelectedSort] = useState('Relevance');
+
+    return (
+        <div className="pub-results">
+
+            {/* Toolbar */}
+            <div className="pub-results-toolbar">
+                <p className="pub-results-count">
+                    Showing <strong>1–10</strong> of <strong>340</strong> results
+                </p>
+                <div className="pub-sort-wrap">
+                    <label>Sort by:</label>
+                    <div className="pub-sort-dropdown">
+                        <button
+                            className={`pub-sort-dropdown-btn ${isSortOpen ? 'open' : ''}`}
+                            onClick={() => setIsSortOpen(!isSortOpen)}
+                        >
+                            <span>{selectedSort}</span>
+                            <i className="fa-solid fa-chevron-down"></i>
+                        </button>
+                        {isSortOpen && (
+                            <div className="pub-sort-dropdown-menu">
+                                {SORT_OPTIONS.map((opt) => (
+                                    <div
+                                        key={opt}
+                                        className={`pub-sort-dropdown-option ${selectedSort === opt ? 'selected' : ''}`}
+                                        onClick={() => { setSelectedSort(opt); setIsSortOpen(false); }}
+                                    >
+                                        {opt}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Result cards */}
+            <div className="pub-card-list">
+                {RESULTS.map((item, idx) => (
+                    <div key={idx} className="pub-card">
+                        <div className="pub-card-top">
+                            <h3 className="pub-card-title">
+                                <a href="#">{item.title}</a>
+                            </h3>
+                            <div className="pub-badges">
+                                <span className={`pub-badge ${item.badgeClass}`}>
+                                    <i className={`fa-solid ${item.badgeIcon}`}></i> {item.badgeLabel}
+                                </span>
+                                <span className="pub-badge pub-badge-peer">{item.statusLabel}</span>
+                            </div>
+                        </div>
+
+                        <div className="pub-card-meta">
+                            <div className="pub-meta-item">
+                                <i className="fa-solid fa-user"></i>
+                                <strong>{item.lead}</strong>
+                            </div>
+                            <div className="pub-meta-item">
+                                <i className="fa-regular fa-clock"></i> {item.updated}
+                            </div>
+                            <div className="pub-meta-item">
+                                <i className="fa-solid fa-building-columns"></i> {item.center}
+                            </div>
+                        </div>
+
+                        <p className="pub-card-abstract">{item.desc}</p>
+
+                        <div className="pub-keywords">
+                            <span className="pub-keywords-label">Tags:</span>
+                            {item.tags.map((tag) => (
+                                <span key={tag} className="pub-keyword-tag">{tag}</span>
+                            ))}
+                        </div>
+
+                        {item.progress !== null && (
+                            <div style={{ marginBottom: '1rem' }}>
+                                <div className="flex justify-between text-xs mb-1" style={{ color: 'var(--pub-muted)' }}>
+                                    <span>Progress</span>
+                                    <span style={{ fontWeight: 600, color: 'var(--pub-text)' }}>{item.progress}%</span>
+                                </div>
+                                <div style={{ width: '100%', height: '6px', backgroundColor: 'var(--pub-bg)', borderRadius: '9999px' }}>
+                                    <div style={{ width: `${item.progress}%`, height: '6px', backgroundColor: 'var(--pub-blue)', borderRadius: '9999px' }}></div>
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="pub-card-actions">
+                            <button className="pub-action-btn pub-action-btn-primary">
+                                <i className="fa-solid fa-arrow-right"></i> View Details
+                            </button>
+                            <button className="pub-action-btn pub-action-btn-secondary">
+                                <i className="fa-regular fa-bookmark"></i> Save
+                            </button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Pagination */}
+            <div className="pub-pagination">
+                <button className="pub-page-btn" disabled>
+                    <i className="fa-solid fa-arrow-left"></i> Previous
+                </button>
+                <div className="pub-page-numbers">
+                    <button className="pub-page-num active">1</button>
+                    <button className="pub-page-num">2</button>
+                    <button className="pub-page-num">3</button>
+                    <span className="pub-page-ellipsis">...</span>
+                    <button className="pub-page-num">34</button>
+                </div>
+                <button className="pub-page-btn">
+                    Next <i className="fa-solid fa-arrow-right"></i>
+                </button>
+            </div>
+
+        </div>
+    );
+};
+
+export default ResearchSearchResults;
diff --git a/app/components/research/search/ResearchSearchSidebar.tsx b/app/components/research/search/ResearchSearchSidebar.tsx
new file mode 100644
index 0000000..cc961c9
--- /dev/null
+++ b/app/components/research/search/ResearchSearchSidebar.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import React, { useState } from 'react';
+
+const DOMAINS = ['Law & Policy (42)', 'Cognitive Science (28)', 'Environmental Studies (35)', 'History & Humanities (50)', 'Economics (19)'];
+const STATUSES = ['Active', 'Data Collection', 'Review', 'Completed'];
+const TYPES = ['Researchers', 'Labs', 'Projects', 'Institutes'];
+
+const AccordionSection = ({
+    title,
+    open,
+    onToggle,
+    children,
+}: {
+    title: string;
+    open: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+}) => (
+    <div className="pub-accordion-item">
+        <button
+            className={`pub-accordion-trigger ${open ? 'open' : ''}`}
+            onClick={onToggle}
+        >
+            {title}
+            <i className="fa-solid fa-chevron-down"></i>
+        </button>
+        <div className={`pub-accordion-body ${open ? 'open' : ''}`}>
+            {children}
+        </div>
+    </div>
+);
+
+const ResearchSearchSidebar = () => {
+    const [isDomainOpen, setIsDomainOpen] = useState(true);
+    const [isStatusOpen, setIsStatusOpen] = useState(true);
+    const [isTypeOpen, setIsTypeOpen] = useState(true);
+
+    return (
+        <aside className="pub-sidebar">
+            <div className="pub-sidebar-inner">
+
+                <div className="pub-sidebar-header">
+                    <h2>
+                        <i className="fa-solid fa-filter"></i> Filters
+                    </h2>
+                    <button className="pub-clear-btn">Clear All</button>
+                </div>
+
+                <div className="pub-accordion">
+
+                    {/* Research Domain */}
+                    <AccordionSection title="Research Domain" open={isDomainOpen} onToggle={() => setIsDomainOpen(!isDomainOpen)}>
+                        <div className="pub-filter-list">
+                            {DOMAINS.map((d, i) => (
+                                <label key={d} className="pub-filter-label">
+                                    <input type="checkbox" className="pub-checkbox" defaultChecked={i === 0} />
+                                    <span>{d}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </AccordionSection>
+
+                    {/* Project Status */}
+                    <AccordionSection title="Project Status" open={isStatusOpen} onToggle={() => setIsStatusOpen(!isStatusOpen)}>
+                        <div className="pub-filter-list">
+                            {STATUSES.map((s) => (
+                                <label key={s} className="pub-filter-label">
+                                    <input type="checkbox" className="pub-checkbox" />
+                                    <span>{s}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </AccordionSection>
+
+                    {/* Type */}
+                    <AccordionSection title="Type" open={isTypeOpen} onToggle={() => setIsTypeOpen(!isTypeOpen)}>
+                        <div className="pub-filter-list">
+                            {TYPES.map((t) => (
+                                <label key={t} className="pub-filter-label">
+                                    <input type="checkbox" className="pub-checkbox" />
+                                    <span>{t}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </AccordionSection>
+
+                </div>
+            </div>
+        </aside>
+    );
+};
+
+export default ResearchSearchSidebar;
diff --git a/app/contact/contact.json b/app/contact/contact.json
deleted file mode 100644
index 7b77f13..0000000
--- a/app/contact/contact.json
+++ /dev/null
@@ -1,89 +0,0 @@
-{
-  "title": "Liên Hệ Với Chúng Tôi",
-  "subtitle": "Chúng tôi luôn sẵn sàng hỗ trợ bạn 24/7",
-  "contactInfo": {
-    "address": {
-      "label": "Địa chỉ",
-      "value": "123 Nguyễn Huệ, Quận 1, TP.HCM",
-      "icon": "📍"
-    },
-    "phone": {
-      "label": "Điện thoại",
-      "value": "+84 28 1234 5678",
-      "icon": "📞"
-    },
-    "email": {
-      "label": "Email",
-      "value": "info@visaservice.com",
-      "icon": "✉️"
-    },
-    "hours": {
-      "label": "Giờ làm việc",
-      "value": "Thứ 2 - Thứ 6: 8:00 - 18:00\nThứ 7: 8:00 - 12:00",
-      "icon": "🕒"
-    }
-  },
-  "offices": [
-    {
-      "name": "Văn Phòng TP.HCM",
-      "address": "123 Nguyễn Huệ, Quận 1, TP.HCM",
-      "phone": "+84 28 1234 5678",
-      "email": "hcm@visaservice.com"
-    },
-    {
-      "name": "Văn Phòng Hà Nội",
-      "address": "456 Hoàn Kiếm, Hà Nội",
-      "phone": "+84 24 1234 5678",
-      "email": "hanoi@visaservice.com"
-    },
-    {
-      "name": "Văn Phòng Đà Nẵng",
-      "address": "789 Hải Châu, Đà Nẵng",
-      "phone": "+84 236 1234 567",
-      "email": "danang@visaservice.com"
-    }
-  ],
-  "formFields": [
-    {
-      "name": "fullName",
-      "label": "Họ và tên",
-      "type": "text",
-      "required": true,
-      "placeholder": "Nhập họ và tên của bạn"
-    },
-    {
-      "name": "email",
-      "label": "Email",
-      "type": "email",
-      "required": true,
-      "placeholder": "example@email.com"
-    },
-    {
-      "name": "phone",
-      "label": "Số điện thoại",
-      "type": "tel",
-      "required": true,
-      "placeholder": "+84 xxx xxx xxx"
-    },
-    {
-      "name": "service",
-      "label": "Dịch vụ quan tâm",
-      "type": "select",
-      "required": true,
-      "options": [
-        "Tư vấn visa",
-        "Chuẩn bị hồ sơ",
-        "Đặt vé máy bay",
-        "Tour trọn gói",
-        "Khác"
-      ]
-    },
-    {
-      "name": "message",
-      "label": "Tin nhắn",
-      "type": "textarea",
-      "required": false,
-      "placeholder": "Mô tả chi tiết nhu cầu của bạn..."
-    }
-  ]
-}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index cd1f004..7001ebe 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,237 +1,13 @@
-"use client";
-
-import { useState, useEffect, FormEvent } from "react";
-import { ContactData } from "./types";
-import Breadcrumb from "../components/Breadcrumb";
-
-export default function ContactPage() {
-  const [contactData, setContactData] = useState<ContactData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    address: "",
-    date: "",
-    message: "",
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<{
-    type: "success" | "error" | null;
-    message: string;
-  }>({ type: null, message: "" });
-
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-
-  // Fetch contact data from CMS
-  useEffect(() => {
-    const fetchContactData = async () => {
-      try {
-        const response = await fetch(`${apiUrl}/api/contact`, { cache: 'no-store' });
-        if (response.ok) {
-          const data = await response.json();
-          setContactData(data);
-        }
-      } catch (error) {
-        console.error("Error fetching contact data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchContactData();
-  }, [apiUrl]);
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-    setSubmitStatus({ type: null, message: "" });
-
-    try {
-      const response = await fetch(`${apiUrl}/api/contact/submit`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(formData),
-      });
-
-      const data = await response.json();
-
-      if (response.ok && data.success) {
-        setSubmitStatus({
-          type: "success",
-          message: data.message || "Thank you! We will contact you soon.",
-        });
-        setFormData({
-          name: "",
-          email: "",
-          phone: "",
-          address: "",
-          date: "",
-          message: "",
-        });
-      } else {
-        setSubmitStatus({
-          type: "error",
-          message: data.error || "Something went wrong. Please try again.",
-        });
-      }
-    } catch (error) {
-      console.error("Submit error:", error);
-      setSubmitStatus({
-        type: "error",
-        message: "Network error. Please check your connection and try again.",
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="loading-wrapper" style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
-  // Default values if API fails
-  const hero = contactData?.hero || { title: "Contact Us", backgroundImage: "/assets/img/inner-page/breadcrumb.jpg" };
-  const contactCards = contactData?.contactCards || [];
-  const map = contactData?.map || { embedUrl: "" };
-  const form = contactData?.form || {
-    heading: "Send Us Message",
-    description: "Have questions? Send us a message today.",
-    fields: [],
-    submitButton: { text: "SEND MESSAGE", icon: "fa-solid fa-arrow-right", buttonClass: "theme-btn style-2" }
-  };
+import ContactHero from "../components/contact/ContactHero";
+import DepartmentDirectory from "../components/contact/DepartmentDirectory";
+import ContactSplit from "../components/contact/ContactSplit";
 
+export default function ContactUsPage() {
   return (
-    <>
-      {/* Breadcrumb-Wrapper Section Start */}
-      <Breadcrumb title={hero.title} current={hero.title} />
-
-      {/* Contact Icon Section Start */}
-      <section className="contact-us-section-3 section-padding fix">
-        <div className="container">
-          <div className="row g-4">
-            {contactCards.map((card, index) => (
-              <div className="col-xl-4 col-lg-6 col-md-6" key={index}>
-                <div className="contact-icon-item">
-                  <div className="icon">
-                    <i className={card.iconType}></i>
-                  </div>
-                  <div className="content">
-                    <p>{card.title}</p>
-                    <h6>
-                      {card.content.map((line, i) => (
-                        <span key={i}>
-                          {card.type === "email" ? (
-                            <a href={`mailto:${line}`}>{line}</a>
-                          ) : card.type === "phone" ? (
-                            <a href={`tel:${line.replace(/\s/g, "")}`}>{line}</a>
-                          ) : (
-                            line
-                          )}
-                          {i < card.content.length - 1 && <br />}
-                        </span>
-                      ))}
-                    </h6>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Contact Section Start */}
-      <section className="contact-section-3 section-padding fix pt-0">
-        <div className="container">
-          <div className="contact-from-wrapper">
-            <h5 className="text-center">{form.heading}</h5>
-            <p className="text-center mt-3 mb-5">&quot;{form.description}&quot;</p>
-
-            {/* Status Message */}
-            {submitStatus.type && (
-              <div
-                className={`alert ${submitStatus.type === "success" ? "alert-success" : "alert-danger"
-                  } text-center mb-4`}
-              >
-                {submitStatus.message}
-              </div>
-            )}
-
-            <div className="row g-4">
-              <div className="col-xl-12">
-                <form onSubmit={handleSubmit} className="contact-form-items">
-                  <div className="row g-4">
-                    {form.fields.map((field, index) => (
-                      <div className={field.colClass || "col-lg-12"} key={index}>
-                        <div className="form-clt">
-                          <span>{field.label}{field.required && " *"}</span>
-                          {field.type === "textarea" ? (
-                            <textarea
-                              name={field.name}
-                              value={formData[field.name as keyof typeof formData] || ""}
-                              onChange={handleChange}
-                              placeholder={field.placeholder}
-                              required={field.required}
-                            ></textarea>
-                          ) : (
-                            <input
-                              type={field.type}
-                              name={field.name}
-                              value={formData[field.name as keyof typeof formData] || ""}
-                              onChange={handleChange}
-                              placeholder={field.placeholder}
-                              required={field.required}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                    <div className="col-lg-4">
-                      <button
-                        type="submit"
-                        className={form.submitButton.buttonClass}
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting ? "SENDING..." : form.submitButton.text}
-                        <i className={form.submitButton.icon}></i>
-                      </button>
-                    </div>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Map Section Start */}
-      {map.embedUrl && (
-        <div className="map-section section-padding pt-0">
-          <div className="map-items">
-            <div className="googpemap">
-              <iframe
-                src={map.embedUrl}
-                style={{ border: 0 }}
-                allowFullScreen
-                loading="lazy"
-              ></iframe>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
+    <main className="contact-page min-h-screen bg-gray-50 pb-20">
+      <ContactHero />
+      <DepartmentDirectory />
+      <ContactSplit />
+    </main>
   );
 }
diff --git a/app/contact/types.ts b/app/contact/types.ts
deleted file mode 100644
index 8bdffd5..0000000
--- a/app/contact/types.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export interface ContactCard {
-    type: string;
-    title: string;
-    content: string[];
-    iconType: string;
-}
-
-export interface ContactHero {
-    title: string;
-    backgroundImage: string;
-}
-
-export interface ContactMap {
-    embedUrl: string;
-}
-
-export interface ContactFormField {
-    name: string;
-    label: string;
-    type: string;
-    placeholder: string;
-    required: boolean;
-    colClass: string;
-}
-
-export interface ContactSubmitButton {
-    text: string;
-    icon: string;
-    buttonClass: string;
-}
-
-export interface ContactForm {
-    heading: string;
-    description: string;
-    fields: ContactFormField[];
-    submitButton: ContactSubmitButton;
-}
-
-export interface ContactData {
-    hero: ContactHero;
-    contactCards: ContactCard[];
-    map: ContactMap;
-    form: ContactForm;
-}
diff --git a/app/globals.css b/app/globals.css
index 22cc726..d360863 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,15 +1,22 @@
 @import "tailwindcss";
-
-/* Mobile Menu Styles */
 @import "./components/layout/Header/mobile-menu.css";
-
-.collapse {
-    visibility: visible !important;
-}
-
-.collapse.show {
-    visibility: visible;
-}
-
-/* Header Responsive Styles */
 @import "./components/layout/Header/header-responsive.css";
+@theme {
+  --color-brand-blue: #1b254b;
+  
+  --color-brand-light: #f8fbff;
+
+  --color-ui-muted: #6b7280;
+  --color-ui-border: #e5e7eb;
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+
+  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
+}
+
+@layer components {
+  .bento-item {
+    @apply border border-[--color-ui-border] bg-white;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 547fd3f..ce11f84 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import "./globals.css";
 
 import Header from "./components/layout/Header/Header";
 import Footer from "./components/layout/Footer/Footer";
@@ -9,9 +8,10 @@ import MouseCursor from "./components/MouseCursor";
 import Script from "next/script";
 
 export const metadata: Metadata = {
-  title: "H.A.I Learning",
-  description: "H.A.I Learning",
+  title: "ULDP",
+  description: "ULDP",
 };
+import "./globals.css";
 
 export default function RootLayout({
   children,
diff --git a/app/page.tsx b/app/page.tsx
index a7caf9f..955e344 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,10 @@
 import HeroSection from './components/home/HeroSection';
-import WhyChooseUs from './components/home/WhyChooseUs';
-import VisaSolutions from './components/home/VisaSolutions';
-import VisaCountries from './components/home/VisaCountries';
-import Testimonials from './components/home/Testimonials';
-import VideoGallery from './components/home/VideoGallery';
-import FAQSection from './components/home/FAQSection';
-import Achievements from './components/home/Achievements';
-import Partners from './components/home/Partners';
-import BlogPreview from './components/home/BlogPreview';
+import QuickLinksGrid from './components/home/QuickLinksGrid'; 
 import localHomeData from './home.json';
 import { getCmsImageUrl } from '@/utils/image';
 import { fetchHomeData } from '@/api';
 
+
 // Force dynamic rendering - không cache
 export const dynamic = 'force-dynamic';
 
@@ -37,16 +30,8 @@ export default async function Home() {
 
   return (
     <>
-      <HeroSection data={data.hero} />
-      <WhyChooseUs data={data.whyChooseUs} />
-      <VisaSolutions data={data.visaSolutions} />
-      <VisaCountries data={data.visaCountries} />
-      <Testimonials data={data.testimonials} />
-      <VideoGallery data={data.videoGallery} />
-      <FAQSection data={data.faq} />
-      <Achievements data={data.achievements} />
-      <Partners data={data.partners} />
-      <BlogPreview data={data.blogPreview} />
+      <HeroSection/>
+      <QuickLinksGrid/>
     </>
   );
 }
diff --git a/app/partnership/page.tsx b/app/partnership/page.tsx
new file mode 100644
index 0000000..678c17b
--- /dev/null
+++ b/app/partnership/page.tsx
@@ -0,0 +1,18 @@
+import "./partnership.css";
+import MainIntroBlock from "../components/partnership/MainIntroBlock";
+import NetworkHighlightBlock from "../components/partnership/NetworkHighlightBlock";
+import CollaborateCTA from "../components/partnership/CollaborateCTA";
+
+export default function PartnershipPage() {
+  return (
+    <main className="partnership-page min-h-screen bg-gray-50">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8 py-20">
+        <div className="grid-bento min-h-[600px]">
+          <MainIntroBlock />
+          <NetworkHighlightBlock />
+        </div>
+      </div>
+      <CollaborateCTA />
+    </main>
+  );
+}
diff --git a/app/partnership/partnership.css b/app/partnership/partnership.css
new file mode 100644
index 0000000..550cb9a
--- /dev/null
+++ b/app/partnership/partnership.css
@@ -0,0 +1,91 @@
+/* ============================================
+   Partnership Page — Scoped CSS
+   ============================================ */
+
+/* ---------- Grid ---------- */
+.partnership-page .grid-bento {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+/* ---------- Bento item ---------- */
+.partnership-page .bento-item {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+}
+
+/* Card xanh đậm override bento-item */
+.partnership-page .ps-highlight-card {
+  background-color: #1a365d !important;
+  border-color: #1a365d !important;
+}
+
+/* ---------- Typography — thay thế h1/h2/h3 ---------- */
+.partnership-page .ps-heading,
+#collaborate-cta .ps-heading {
+  font-size: clamp(2.5rem, 5vw, 4.5rem);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.partnership-page .ps-subheading,
+#collaborate-cta .ps-subheading {
+  font-size: clamp(1.75rem, 3vw, 2.25rem);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.partnership-page .ps-form-title,
+#collaborate-cta .ps-form-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+/* ---------- Color tokens ---------- */
+
+.partnership-page .bg-brand-blue,
+#collaborate-cta .bg-brand-blue       { background-color: #1b254b; }
+
+.partnership-page .text-brand-blue,
+#collaborate-cta .text-brand-blue     { color: #1b254b; }
+
+.partnership-page .bg-brand-accent,
+#collaborate-cta .bg-brand-accent     { background-color: #3b82f6; }
+
+.partnership-page .text-brand-accent,
+#collaborate-cta .text-brand-accent   { color: #3b82f6; }
+
+.partnership-page .bg-brand-light,
+#collaborate-cta .bg-brand-light      { background-color: #f8fbff; }
+
+.partnership-page .text-brand-light,
+#collaborate-cta .text-brand-light    { color: #f8fbff; }
+
+.partnership-page .bg-brand-hover,
+#collaborate-cta .bg-brand-hover      { background-color: #2d3a8c; }
+
+.partnership-page .hover\:bg-brand-hover:hover,
+#collaborate-cta .hover\:bg-brand-hover:hover { background-color: #2d3a8c; }
+
+.partnership-page .text-ui-muted,
+#collaborate-cta .text-ui-muted       { color: #6b7280; }
+
+.partnership-page .text-ui-text,
+#collaborate-cta .text-ui-text        { color: #111827; }
+
+.partnership-page .border-ui-border,
+#collaborate-cta .border-ui-border    { border-color: #e5e7eb; }
+
+.partnership-page .bg-ui-bg,
+#collaborate-cta .bg-ui-bg            { background-color: #f9fafb; }
+
+.partnership-page .hover\:shadow-md:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Explore Directory button */
+.partnership-page .ps-explore-btn:hover {
+  box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
+}
diff --git a/app/publications/page.tsx b/app/publications/page.tsx
new file mode 100644
index 0000000..0e54db4
--- /dev/null
+++ b/app/publications/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PublicationHeader from '@/app/components/publications/PublicationHeader';
+import PublicationSidebar from '@/app/components/publications/PublicationSidebar';
+import PublicationResults from '@/app/components/publications/PublicationResults';
+
+export default function PublicationsPage() {
+    return (
+        <div className="pub-wrapper">
+            <PublicationHeader />
+            <section id="repo-content">
+                <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                    <div className="pub-layout">
+                        <PublicationSidebar />
+                        <PublicationResults />
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/app/research/page.tsx b/app/research/page.tsx
new file mode 100644
index 0000000..5fdf105
--- /dev/null
+++ b/app/research/page.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Metadata } from 'next';
+import ResearchHero from '@/app/components/research/ResearchHero';
+import ResearchSearch from '@/app/components/research/ResearchSearch';
+import ResearchDomains from '@/app/components/research/ResearchDomains';
+import ProjectsAndCenters from '@/app/components/research/ProjectsAndCenters';
+import ResearchResources from '@/app/components/research/ResearchResources';
+
+export const metadata: Metadata = {
+    title: 'Research Hub | Liberal University',
+    description: 'Explore our cutting-edge research domains, active projects, and funding calls.',
+};
+
+export default function ResearchPage() {
+    return (
+        <div className="research-wrapper">
+            <ResearchHero />
+            <ResearchSearch />
+            <ResearchDomains />
+            <ProjectsAndCenters />
+            <ResearchResources />
+        </div>
+    );
+}
diff --git a/app/research/search/page.tsx b/app/research/search/page.tsx
new file mode 100644
index 0000000..8344233
--- /dev/null
+++ b/app/research/search/page.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Metadata } from 'next';
+import ResearchSearchHeader from '@/app/components/research/search/ResearchSearchHeader';
+import ResearchSearchSidebar from '@/app/components/research/search/ResearchSearchSidebar';
+import ResearchSearchResults from '@/app/components/research/search/ResearchSearchResults';
+
+export const metadata: Metadata = {
+    title: 'Search Research | Liberal University',
+    description: 'Search across researchers, labs, projects, and institutes.',
+};
+
+export default function ResearchSearchPage() {
+    return (
+        <div className="pub-wrapper">
+            <ResearchSearchHeader />
+            <section id="repo-content">
+                <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+                    <div className="pub-layout">
+                        <ResearchSearchSidebar />
+                        <ResearchSearchResults />
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/package.json b/package.json
index 735f72e..b434911 100644
--- a/package.json
+++ b/package.json
@@ -13,18 +13,19 @@
   "dependencies": {
     "axios": "^1.13.4",
     "next": "16.1.6",
+    "postcss": "^8.5.9",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "sass": "^1.98.0",
-    "tailwindcss": "^4",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5"
   }
 }
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 1030cd5..a008f28 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -15,26 +15,30 @@ Version: 1.0.0
 01. Variables & Mixins
 02. Typography
 03. Buttons
-04. About 
-05. Animation 
-06. Brand 
-07. Contact
-08. Cta
-09. Faq
-10. Feature
-11. Footer
-12. Header
-13. Helping
-14. Hero
-15. Marquee
-16. Meanmenu
-17. News
-18. Preloader
-19. Pricing
-20. Section
-21. Service
-22. Testimonial
-23. Visa
+04. About +
+05.  Accreditation +
+06. Animation 
+07. Brand 
+08. Contact +
+09. Cta
+10. Faq
+11. Feature
+12. Footer
+13. Header
+14. Helping
+15. Hero
+16  Home +
+17. Marquee
+18. Meanmenu
+19. News
+20. Preloader
+21. Pricing
+22. Publication +
+23. Research +
+24. Section
+25. Service
+26. Testimonial
+27. Visa
 
 
 --------------------------------------------------------------
@@ -147,7 +151,7 @@ input {
   color: var(--white);
 }
 
-h1,
+/* h1,
 h2,
 h3,
 h4,
@@ -158,7 +162,7 @@ h6 {
   padding: 0;
   color: var(--header);
   transition: all 0.4s ease-in-out;
-}
+} */
 
 h1 {
   font-size: 72px;
@@ -287,254 +291,975 @@ span {
   margin: 0px;
 }
 
-.about-wrapper .about-image {
-  max-width: 375px;
-  position: relative;
-  z-index: 9;
+/* ============================================================
+   ABOUT PAGE
+   ============================================================ */
+
+.about-hero {
+    padding: 80px 0;
+    background-color: #f8fbff;
+    position: relative;
+    overflow: hidden;
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-image {
-    max-width: initial;
-  }
+
+.about-hero__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
-.about-wrapper .about-image img {
-  width: 100%;
-  height: 100%;
-  border-radius: 16px;
+
+.about-hero__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
 }
-.about-wrapper .about-image .about-image-2 {
-  position: absolute;
-  bottom: -170px;
-  right: -238px;
+
+.about-hero__badge-line {
+    display: inline-block;
+    width: 2rem;
+    height: 2px;
+    background: #1b254b;
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-image .about-image-2 {
-    max-width: 250px;
-    right: 0;
-    bottom: 0;
-  }
+
+.about-hero__badge-text {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #6b7280;
 }
-.about-wrapper .about-image .bg-shape {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: 0;
+
+.about-hero__title {
+    font-size: clamp(2rem, 4vw, 3.5rem);
+    font-weight: 700;
+    color: #1b254b;
+    line-height: 1.15;
+    margin: 0;
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-image .bg-shape {
-    display: none;
-  }
+
+.about-hero__title span {
+    color: var(--theme, #E13833);
 }
-.about-wrapper .about-image .bg-shape img {
-  width: initial;
-  height: initial;
+
+.about-hero__desc {
+    font-size: 1.05rem;
+    color: #6b7280;
+    line-height: 1.7;
+    max-width: 36rem;
+    margin: 0;
 }
-.about-wrapper .about-image .plane-shape {
-  position: absolute;
-  left: -38px;
-  bottom: -163px;
-  z-index: -1;
+
+.about-hero__actions {
+    padding-top: 0.5rem;
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-image .plane-shape {
-    display: none;
-  }
+
+.about-hero__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.875rem 2rem;
+    background-color: #1b254b;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 1rem;
+    border-radius: 0.375rem;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+    transition: background-color 0.2s ease;
 }
-.about-wrapper .about-image .plane-shape img {
-  width: initial;
-  height: initial;
+
+.about-hero__btn:hover {
+    background-color: #151c3a;
 }
-.about-wrapper .about-image .top-shape {
-  position: absolute;
-  right: -200px;
-  top: 0;
+
+/* Image side */
+.about-hero__image-wrap {
+    position: relative;
+    border-radius: 1rem;
+    overflow: visible;
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-image .top-shape {
-    display: none;
-  }
+
+.about-hero__image {
+    width: 100%;
+    height: auto;
+    border-radius: 1rem;
+    object-fit: cover;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
+    display: block;
 }
-.about-wrapper .about-image .top-shape img {
-  width: initial;
-  height: initial;
+
+/* Badge card overlay */
+.about-hero__badge-card {
+    position: absolute;
+    bottom: -1.5rem;
+    left: -1.5rem;
+    background: #ffffff;
+    padding: 1.25rem 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e5e7eb;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
-.about-wrapper .about-content .text {
-  margin-top: 24px;
-  padding-left: 40px;
-  border-left: 3px solid var(--border-2);
-  margin-bottom: 30px;
+
+@media (max-width: 767px) {
+    .about-hero__badge-card {
+        display: none;
+    }
 }
-@media (max-width: 1399px) {
-  .about-wrapper .about-content .text {
-    border-left: none;
-    padding-left: 0;
-  }
+
+.about-hero__badge-icon {
+    width: 3rem;
+    height: 3rem;
+    background: #f8fbff;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    color: #1b254b;
+    flex-shrink: 0;
 }
-.about-wrapper .about-content .about-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid rgba(203, 204, 207, 0.24);
-  padding-top: 24px;
+
+.about-hero__badge-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin: 0;
 }
+
+.about-hero__badge-label {
+    font-size: 0.8rem;
+    color: #6b7280;
+    margin: 0;
+}
+
 @media (max-width: 991px) {
-  .about-wrapper .about-content .about-item {
-    flex-wrap: wrap;
-    gap: 30px;
-  }
-}
-.about-wrapper .about-content .about-item .content span {
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--header);
-  display: inline-block;
-  margin-bottom: 5px;
-}
-.about-wrapper .about-content .about-item .content span img {
-  margin-right: 8px;
-}
-.about-wrapper .about-content .list {
-  border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-  padding: 24px 0 32px;
-  margin-bottom: 48px;
-}
-@media (max-width: 1399px) {
-  .about-wrapper .about-content .list {
-    margin-bottom: 30px;
-    padding: 24px 0 30px;
-  }
-}
-.about-wrapper .about-content .list li:not(:last-child) {
-  margin-bottom: 10px;
-}
-@media (max-width: 1399px) {
-  .about-wrapper .about-content .list li {
-    font-size: 14px;
-  }
-}
-.about-wrapper .about-content .list li i {
-  color: var(--theme-2);
-  margin-right: 8px;
+    .about-hero {
+        padding: 80px 0 60px;
+    }
+
+    .about-hero__image-wrap {
+        margin-top: 3rem;
+    }
 }
 
-.about-section {
-  position: relative;
-  z-index: 9;
-}
-.about-section .top-shape {
-  position: absolute;
-  right: 0;
-  top: -50px;
-  z-index: -1;
-}
-@media (max-width: 1399px) {
-  .about-section .top-shape {
-    display: none;
-  }
+/* ------------------------------------------------------------
+   Mission & Values In About Page
+   ------------------------------------------------------------ */
+.about-mission {
+    padding: 80px 0;
+    background-color: #f8f8f9;
+    border-top: 1px solid #e5e7eb;
 }
 
-.about-wrapper-3 .about-content .text {
-  margin-top: 20px;
-  max-width: 616px;
-  border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-  padding-bottom: 24px;
-  margin-bottom: 30px;
+.about-mission__header {
+    max-width: 48rem;
+    margin: 0 auto 4rem;
 }
-.about-wrapper-3 .about-content .about-list-item {
-  display: flex;
-  gap: 32px;
+
+.about-mission__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
 }
-@media (max-width: 1399px) {
-  .about-wrapper-3 .about-content .about-list-item {
-    flex-wrap: wrap;
-    gap: 25px;
-  }
+
+.about-mission__badge-line {
+    display: inline-block;
+    width: 2rem;
+    height: 2px;
+    background: #E13833;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box {
-  height: 256px;
-  width: 214px;
-  border-radius: 16px;
-  position: relative;
-  text-align: center;
+
+.about-mission__badge-text {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #6b7280;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs {
-  height: 200px;
-  width: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0a4ebd;
-  border-radius: 16px;
+
+.about-mission__title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 1rem;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar {
-  position: relative;
+
+.about-mission__subtitle {
+    font-size: 1.05rem;
+    color: #6b7280;
+    line-height: 1.7;
+    margin: 0;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar strong {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 28px;
-  font-weight: bold;
-  color: var(--white);
+
+.about-mission__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box h6 {
-  color: var(--white);
-  font-weight: 500;
-  font-size: 14px;
+
+@media (max-width: 991px) {
+    .about-mission__grid {
+        grid-template-columns: 1fr;
+    }
 }
-.about-wrapper-3 .about-content .about-list-item .list-item .list {
-  margin-bottom: 48px;
+
+.about-mission__card {
+    background: #ffffff;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+    transition: box-shadow 0.2s ease;
 }
-.about-wrapper-3 .about-content .about-list-item .list-item .list li {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--header);
-  font-family: "Space Grotesk", serif;
+
+.about-mission__card:hover {
+    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 }
-@media (max-width: 1399px) {
-  .about-wrapper-3 .about-content .about-list-item .list-item .list li {
-    font-size: 16px;
-  }
+
+.about-mission__icon-wrap {
+    width: 3.5rem;
+    height: 3.5rem;
+    background: #f8fbff;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    color: #1b254b;
+    margin-bottom: 1.5rem;
+    border-top: 4px solid transparent;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 }
-.about-wrapper-3 .about-content .about-list-item .list-item .list li:not(:last-child) {
-  margin-bottom: 15px;
+
+.about-mission__card:hover .about-mission__icon-wrap {
+    background-color: #1b254b;
+    color: #ffffff;
+    border-top-color: #E13833;
 }
-.about-wrapper-3 .about-content .about-list-item .list-item .list li i {
-  margin-right: 8px;
-  color: var(--theme-2);
+
+.about-mission__card-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
 }
-.about-wrapper-3 .about-image img {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
+
+.about-mission__card-desc {
+    font-size: 0.95rem;
+    color: #6b7280;
+    line-height: 1.7;
+    margin: 0;
 }
-.about-wrapper-3 .about-image.tp-clip-anim {
-  width: 100%;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  overflow: hidden;
-  position: relative;
+
+/* ------------------------------------------------------------
+   Why Paris In About Page
+   ------------------------------------------------------------ */
+.why-paris {
+    padding: 80px 0;
+    background: #ffffff;
 }
-.about-wrapper-3 .about-image.tp-clip-anim .tp-anim-img {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
+
+.why-paris__image-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
 }
-.about-wrapper-3 .about-image.tp-clip-anim .mask {
-  background-size: cover;
-  background-position: center;
-  transform: scale(1.005);
+
+.why-paris__image-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
-.about-wrapper-3 .about-image.tp-clip-anim > * {
-  grid-area: 1/1/2/2;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
+
+.why-paris__image-col--offset {
+    padding-top: 2rem;
 }
 
+.why-paris__img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    display: block;
+}
+
+.why-paris__img--short { height: 12rem; }
+.why-paris__img--tall  { height: 16rem; }
+
+.why-paris__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    padding-left: 2rem;
+}
+
+@media (max-width: 991px) {
+    .why-paris__content {
+        padding-left: 0;
+        margin-bottom: 2.5rem;
+    }
+}
+
+.why-paris__title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin: 0;
+}
+
+.why-paris__desc {
+    font-size: 1.05rem;
+    color: #6b7280;
+    line-height: 1.7;
+    margin: 0;
+}
+
+.why-paris__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.why-paris__list-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    color: #1b254b;
+    font-size: 0.95rem;
+}
+
+.why-paris__check {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: #f8fbff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #1b254b;
+    font-size: 0.65rem;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.why-paris__btn {
+    display: inline-block;
+    margin-top: 0.5rem;
+    padding: 0.625rem 1.5rem;
+    background: #f8fbff;
+    color: #1b254b;
+    font-weight: 600;
+    font-size: 0.95rem;
+    border-radius: 0.375rem;
+    border: 1px solid #e5e7eb;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.why-paris__btn:hover {
+    background-color: #e5e7eb;
+}
+
+/* ------------------------------------------------------------
+   Leadership Message In About Page
+   ------------------------------------------------------------ */
+.about-message {
+    padding: 80px 0;
+    background: #ffffff;
+}
+
+.about-message__header {
+    margin-bottom: 2rem;
+}
+
+.about-message__title {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 1rem;
+}
+
+.about-message__divider {
+    width: 5rem;
+    height: 4px;
+    background: #E13833;
+    border-radius: 999px;
+}
+
+.about-message__body p {
+    color: #6b7280;
+    line-height: 1.8;
+    margin-bottom: 1.25rem;
+}
+
+.about-message__quote {
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: #1b254b !important;
+    line-height: 1.7;
+}
+
+.about-message__author {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: #f8f8f9;
+    border-radius: 1rem;
+    border: 1px solid #e5e7eb;
+}
+
+.about-message__avatar {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid #E13833;
+    flex-shrink: 0;
+}
+
+.about-message__avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.about-message__author-name {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin: 0 0 0.25rem;
+}
+
+.about-message__author-role {
+    font-size: 0.875rem;
+    color: #E13833;
+    font-weight: 500;
+    margin: 0;
+}
+
+.about-message__quote-icon {
+    font-size: 3rem;
+    color: #1b254b;
+    opacity: 0.15;
+    margin-left: auto;
+}
+
+/* Sidebar */
+.about-message__sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    position: sticky;
+    top: 7rem;
+}
+
+.about-message__sidebar-card {
+    background: #f8f8f9;
+    padding: 2rem;
+    border-radius: 1.5rem;
+    border: 1px solid #e5e7eb;
+}
+
+.about-message__sidebar-card h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.about-message__sidebar-card p {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin-bottom: 1.25rem;
+}
+
+.about-message__sidebar-card--primary {
+    background: #1b254b;
+}
+
+.about-message__sidebar-card--primary h3,
+.about-message__sidebar-card--primary p {
+    color: #ffffff;
+}
+
+.about-message__sidebar-card--primary p {
+    color: rgba(255,255,255,0.75);
+}
+
+.about-message__sidebar-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background: #ffffff;
+    color: #1b254b;
+    padding: 0.75rem 1.5rem;
+    border-radius: 999px;
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: background 0.2s;
+}
+
+.about-message__sidebar-link:hover { background: #f3f4f6; }
+
+.about-message__sidebar-icon {
+    width: 3rem;
+    height: 3rem;
+    background: #ffffff;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    color: #1b254b;
+    margin-bottom: 1rem;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+
+.about-message__sidebar-text-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #1b254b;
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
+.about-message__sidebar-text-link:hover { text-decoration: underline; }
+
+.about-message__sidebar-outline-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    border: 2px solid #1b254b;
+    color: #1b254b;
+    padding: 0.75rem 1.5rem;
+    border-radius: 999px;
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: all 0.2s;
+}
+
+.about-message__sidebar-outline-link:hover {
+    background: #1b254b;
+    color: #ffffff;
+}
+
+/* ------------------------------------------------------------
+   Leadership Board In About Page
+   ------------------------------------------------------------ */
+.about-leadership {
+    padding: 80px 0;
+    background: #f8f8f9;
+}
+
+.about-leadership__header {
+    margin-bottom: 3rem;
+}
+
+.about-leadership__title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.about-leadership__subtitle {
+    color: #6b7280;
+    font-size: 1.05rem;
+    margin: 0;
+}
+
+.about-leadership__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+}
+
+@media (max-width: 991px) {
+    .about-leadership__grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 575px) {
+    .about-leadership__grid { grid-template-columns: 1fr; }
+}
+
+.about-leadership__card {
+    background: #ffffff;
+    border-radius: 0.75rem;
+    border: 1px solid #e5e7eb;
+    overflow: hidden;
+    transition: box-shadow 0.2s;
+}
+
+.about-leadership__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
+
+.about-leadership__photo-wrap {
+    height: 16rem;
+    overflow: hidden;
+    background: #f3f4f6;
+}
+
+.about-leadership__photo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.about-leadership__card:hover .about-leadership__photo { transform: scale(1.05); }
+
+.about-leadership__info {
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.about-leadership__name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.25rem;
+}
+
+.about-leadership__role {
+    font-size: 0.875rem;
+    color: #E13833;
+    font-weight: 500;
+    margin-bottom: 0.75rem;
+}
+
+.about-leadership__socials {
+    display: flex;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.about-leadership__social-link {
+    color: #6b7280;
+    font-size: 1rem;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.about-leadership__social-link:hover { color: #1b254b; }
+
+/* ------------------------------------------------------------
+   Campus In About Page
+   ------------------------------------------------------------ */
+.about-campus {
+    padding: 80px 0;
+    background: #f8f8f9;
+}
+
+.about-campus__header {
+    margin-bottom: 3rem;
+}
+
+.about-campus__title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.about-campus__subtitle {
+    color: #6b7280;
+    max-width: 40rem;
+    margin: 0 auto;
+}
+
+.about-campus__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+@media (max-width: 991px) {
+    .about-campus__grid { grid-template-columns: 1fr; }
+}
+
+.about-campus__card {
+    background: #ffffff;
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    transition: box-shadow 0.2s;
+}
+
+.about-campus__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
+
+.about-campus__img-wrap {
+    height: 12rem;
+    overflow: hidden;
+}
+
+.about-campus__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.about-campus__card:hover .about-campus__img { transform: scale(1.05); }
+
+.about-campus__body {
+    padding: 2rem;
+}
+
+.about-campus__tag {
+    display: inline-block;
+    padding: 0.2rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.about-campus__tag--blue { background: #eff6ff; color: #1b254b; }
+.about-campus__tag--yellow { background: #fefce8; color: #854d0e; }
+.about-campus__tag--green { background: #f0fdf4; color: #166534; }
+
+.about-campus__card-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.about-campus__card-desc {
+    font-size: 0.875rem;
+    color: #6b7280;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.about-campus__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #1b254b;
+    font-weight: 500;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: gap 0.2s;
+}
+
+.about-campus__link:hover { gap: 0.75rem; }
+
+/* ------------------------------------------------------------
+   History Timeline In About Page
+   ------------------------------------------------------------ */
+.about-timeline {
+    padding: 80px 0;
+    background: #1b254b;
+    color: #ffffff;
+}
+
+.about-timeline__header { margin-bottom: 3rem; }
+
+.about-timeline__title {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: 700;
+    color: #ffffff;
+    margin-bottom: 0.75rem;
+}
+
+.about-timeline__subtitle { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; }
+
+.about-timeline__track {
+    max-width: 44rem;
+    margin: 0 auto;
+    position: relative;
+    padding: 1rem 0;
+}
+
+/* Vertical line chạy giữa track */
+.about-timeline__line {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    margin-left: -1px;
+    background: rgba(100,160,255,0.3);
+}
+
+.about-timeline__item {
+    display: flex;
+    margin-bottom: 3.5rem;
+    width: 100%;
+    position: relative;
+}
+
+.about-timeline__item:last-child { margin-bottom: 0; }
+
+/* Content chiếm nửa trái hoặc phải */
+.about-timeline__content {
+    width: calc(50% - 1.5rem);
+}
+
+/* Dot nằm absolute giữa line */
+.about-timeline__dot-wrap {
+    position: absolute;
+    left: 50%;
+    top: 0.3rem;
+    transform: translateX(-50%);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Spacer chiếm nửa còn lại */
+.about-timeline__spacer {
+    width: calc(50% - 1.5rem);
+}
+
+/* Left: content bên trái, text align right */
+.about-timeline__item--left .about-timeline__content {
+    text-align: right;
+    order: 1;
+    margin-right: 3rem;
+}
+.about-timeline__item--left .about-timeline__dot-wrap { order: 2; }
+.about-timeline__item--left .about-timeline__spacer   { order: 3; }
+
+/* Right: spacer bên trái, content bên phải */
+.about-timeline__item--right .about-timeline__spacer   { order: 1; }
+.about-timeline__item--right .about-timeline__dot-wrap { order: 2; }
+.about-timeline__item--right .about-timeline__content  {
+    text-align: left;
+    order: 3;
+    margin-left: 3rem;
+}
+
+.about-timeline__dot {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: transparent;
+    border: 2px solid #74b3ff;
+    box-shadow: 0 0 0 4px rgba(116,179,255,0.15);
+    flex-shrink: 0;
+}
+
+.about-timeline__year {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #ffffff;
+    margin-bottom: 0.25rem;
+    line-height: 1;
+}
+
+.about-timeline__event {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #74b3ff;
+    margin-bottom: 0.5rem;
+}
+
+.about-timeline__desc {
+    font-size: 0.875rem;
+    color: rgba(255,255,255,0.65);
+    line-height: 1.6;
+    margin: 0;
+    max-width: 18rem;
+}
+
+.about-timeline__item--left .about-timeline__desc  { margin-left: auto; }
+.about-timeline__item--right .about-timeline__desc { margin-right: auto; }
+
+@media (max-width: 767px) {
+    .about-timeline__line { left: 0.75rem; }
+    .about-timeline__item { flex-direction: column; align-items: flex-start; padding-left: 2.5rem; }
+    .about-timeline__item--left .about-timeline__content,
+    .about-timeline__item--right .about-timeline__content { text-align: left; padding: 0; order: 2; }
+    .about-timeline__item--left .about-timeline__desc,
+    .about-timeline__item--right .about-timeline__desc { margin: 0; max-width: 100%; }
+    .about-timeline__dot-wrap { position: absolute; left: 0; top: 0.25rem; order: 1; }
+    .about-timeline__spacer { display: none; }
+}
+/*
+----------------------------------------------------------
+  End About Page
+----------------------------------------------------------
+*/
+
+/*
+-----------------------------------------------
+  Accreditation Page
+-----------------------------------------------
+*/
+
+/* Typography — dùng div thay h1/h2/h3 */
+.accreditation-page .acc-heading {
+  font-size: clamp(2.5rem, 5vw, 3.75rem);
+  line-height: 1.15;
+}
+
+.accreditation-page .acc-section-title {
+  font-size: 1.875rem;
+  line-height: 1.3;
+}
+
+.accreditation-page .acc-card-title {
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
+
+/* ---------- Color tokens ---------- */
+.accreditation-page .text-brand-blue    { color: #1b254b; }
+.accreditation-page .bg-brand-blue      { background-color: #1b254b; }
+.accreditation-page .bg-brand-light     { background-color: #f8fbff; }
+.accreditation-page .bg-brand-accent    { background-color: #3b82f6; }
+.accreditation-page .text-brand-accent  { color: #3b82f6; }
+.accreditation-page .text-ui-text       { color: #111827; }
+.accreditation-page .text-ui-muted      { color: #6b7280; }
+.accreditation-page .bg-ui-bg           { background-color: #f9fafb; }
+.accreditation-page .border-ui-border   { border-color: #e5e7eb; }
+
+/* ---------- Shadow tokens ---------- */
+.accreditation-page .shadow-soft {
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
+}
+.accreditation-page .shadow-hover,
+.accreditation-page .hover\:shadow-hover:hover {
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
+}
+
+/* ---------- Border radius fix ---------- */
+.accreditation-page .rounded-\[24px\] { border-radius: 24px !important; }
+.accreditation-page .rounded-lg       { border-radius: 8px !important; }
+.accreditation-page .rounded-md       { border-radius: 6px !important; }
+
+/* Mesh background gradient */
+.accreditation-page .mesh-bg {
+  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 40%, #ffffff 100%);
+}
+
+/* rounded-xl fix */
+.accreditation-page .rounded-xl { border-radius: 12px !important; }
+/*
+-----------------------------------------------
+  End Accreditation Page
+-----------------------------------------------
+*/
+
+
 @-webkit-keyframes rippleOne {
   70% {
     -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
@@ -1422,339 +2147,172 @@ span {
   opacity: 1;
 }
 
-.contact-wrapper-2 {
-  display: flex;
-  align-items: center;
-  gap: 325px;
-}
-@media (max-width: 1399px) {
-  .contact-wrapper-2 {
-    flex-wrap: wrap;
-    gap: 30px;
-  }
-}
-.contact-wrapper-2 .contact-from-box {
-  padding: 60px 48px;
-  background-color: var(--theme-2);
-  border-radius: 24px;
-  width: 644px;
-}
-@media (max-width: 1399px) {
-  .contact-wrapper-2 .contact-from-box {
-    padding: 30px;
-  }
-}
-.contact-wrapper-2 .contact-from-box h3 {
-  color: var(--white);
-  font-size: 32px;
-  text-transform: uppercase;
-  margin-bottom: 30px;
-  text-align: center;
-}
-@media (max-width: 1399px) {
-  .contact-wrapper-2 .contact-from-box h3 {
-    font-size: 25px;
-    margin-bottom: 20px;
-  }
-}
-@media (max-width: 575px) {
-  .contact-wrapper-2 .contact-from-box h3 {
-    font-size: 20px;
-  }
-}
-.contact-wrapper-2 .contact-from-box .form-clt input, .contact-wrapper-2 .contact-from-box .form-clt textarea {
-  width: 100%;
-  outline: none;
-  border: none;
-  background: transparent;
-  padding: 16px 0;
-  font-weight: 400;
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.7);
-  line-height: 1;
-  border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-}
-.contact-wrapper-2 .contact-from-box .form-clt input::placeholder, .contact-wrapper-2 .contact-from-box .form-clt textarea::placeholder {
-  color: rgba(255, 255, 255, 0.7);
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select {
-  width: 100% !important;
+/*
+-----------------------------------------------
+   Contact Page
+-----------------------------------------------
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
+
+/* Reset heading override từ main.css */
+.contact-page h1,
+.contact-page h2,
+.contact-page h3,
+.contact-page h4 {
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  margin: 0;
   padding: 0;
-  padding-bottom: 10px;
-  padding-top: 20px;
-  font-size: 16px;
-  border-radius: 0;
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 400;
-  width: initial;
-  border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select::after {
-  right: 0;
-  width: 10px;
-  height: 8px;
-  border-bottom: 2px solid transparent;
-  border-right: 2px solid transparent;
-  margin-top: 0;
-  background-color: rgba(255, 255, 255, 0.7);
-  clip-path: polygon(100% 0, 49% 100%, 0 0);
-  -webkit-transform: rotate(0eg);
-  transform: rotate(0deg);
-  top: 36%;
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select .list {
-  width: 100%;
-  background-color: var(--bg);
-  top: 60%;
-  font-size: 16px;
-  color: var(--header);
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select .focus {
-  background-color: transparent;
-  font-weight: 400;
-  color: var(--text);
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select .option {
-  border: none;
-}
-.contact-wrapper-2 .contact-from-box .form-clt .nice-select .option:hover {
-  background-color: transparent;
-}
-.contact-wrapper-2 .contact-from-box .contact-btn {
-  margin-top: 48px;
-  text-align: center;
-  margin-bottom: 48px;
-}
-@media (max-width: 1399px) {
-  .contact-wrapper-2 .contact-from-box .contact-btn {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-}
-.contact-wrapper-2 .contact-from-box .contact-btn .theme-btn {
-  color: var(--white);
-}
-.contact-wrapper-2 .contact-from-box .contact-btn .theme-btn:hover {
-  border: 1px solid var(--theme);
-}
-.contact-wrapper-2 .contact-from-box h5 {
-  font-weight: 500;
-  color: var(--white);
-  margin-bottom: 10px;
-}
-.contact-wrapper-2 .contact-from-box h2 {
-  font-size: 40px;
-  border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-  padding-bottom: 10px;
-  margin-bottom: 5px;
-}
-@media (max-width: 1399px) {
-  .contact-wrapper-2 .contact-from-box h2 {
-    font-size: 25px;
-  }
-}
-@media (max-width: 575px) {
-  .contact-wrapper-2 .contact-from-box h2 {
-    font-size: 20px;
-  }
-}
-.contact-wrapper-2 .contact-from-box h2 a {
-  color: var(--white);
-}
-.contact-wrapper-2 .contact-from-box p {
-  color: rgba(255, 255, 255, 0.7);
-}
-.contact-wrapper-2 .video-btn {
-  width: 88px;
-  height: 88px;
-  line-height: 88px;
-  text-align: center;
-  background-color: var(--theme);
-  color: var(--white);
-  position: relative;
-  font-size: 16px;
-  border-radius: 100px;
-  z-index: 999;
-  display: inline-block;
-}
-@media (max-width: 991px) {
-  .contact-wrapper-2 .video-btn {
-    margin-left: 30px;
-  }
-}
-@media (max-width: 575px) {
-  .contact-wrapper-2 .video-btn {
-    width: 70px;
-    height: 70px;
-    line-height: 70px;
-    margin-left: 15px;
-  }
-}
-.contact-wrapper-2 .video-btn::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  content: "";
-  width: 120px;
-  height: 120px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(225, 56, 51, 0.24);
-  border-radius: 100%;
-  border: 2px solid var(--white);
-}
-@media (max-width: 575px) {
-  .contact-wrapper-2 .video-btn::before {
-    width: 100px;
-    height: 100px;
-  }
 }
 
-.contact-section-2 {
-  background-attachment: fixed;
+/* Typography */
+.contact-page .contact-heading {
+  font-family: 'Playfair Display', serif;
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.15;
 }
 
-.contact-from-wrapper {
-  background-color: var(--bg);
-  border-radius: 16px;
-  padding: 48px;
-}
-@media (max-width: 1399px) {
-  .contact-from-wrapper {
-    padding: 30px;
-  }
-}
-.contact-from-wrapper .form-clt {
-  position: relative;
-}
-.contact-from-wrapper .form-clt span {
-  color: var(--header);
-  font-size: 18px;
-  font-weight: 500;
-  font-family: "Space Grotesk", serif;
-  margin-bottom: 10px;
-  display: inline-block;
-}
-.contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea {
-  width: 100%;
-  border: none;
-  outline: none;
-  background: var(--white);
-  color: var(--text);
-  border-radius: 100px;
-  padding: 18px 20px;
-}
-@media (max-width: 767px) {
-  .contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea {
-    padding: 14px 20px;
-  }
-}
-@media (max-width: 575px) {
-  .contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea {
-    padding: 12px 18px;
-  }
-}
-.contact-from-wrapper .form-clt input::placeholder, .contact-from-wrapper .form-clt textarea::placeholder {
-  color: var(--text);
-}
-.contact-from-wrapper .form-clt textarea {
-  padding-bottom: 100px;
-  resize: none;
-  border-radius: 40px;
-}
-.contact-from-wrapper .cheak-list-item {
-  margin-top: 30px;
-  margin-bottom: 48px;
-}
-@media (max-width: 1399px) {
-  .contact-from-wrapper .cheak-list-item {
-    margin-bottom: 30px;
-  }
-}
-.contact-from-wrapper .cheak-list-item .cheak-list {
-  display: flex;
-  align-items: center;
-  gap: 80px;
-  margin-bottom: 24px;
-}
-@media (max-width: 1399px) {
-  .contact-from-wrapper .cheak-list-item .cheak-list {
-    flex-wrap: wrap;
-    gap: 22px;
-  }
-}
-.contact-from-wrapper .cheak-list-item .cheak-list .form-check {
-  flex-basis: 200px;
-}
-.contact-from-wrapper .cheak-list-item .cheak-list .form-check-label {
-  font-size: 18px;
-  color: var(--header);
-  font-weight: 500;
-  font-family: "Space Grotesk", serif;
-}
-.contact-from-wrapper .cheak-list-item .cheak-list .form-check .form-check-input {
-  float: left;
-  transform: translateY(0px);
-  border-radius: 100px;
-  border: 1px solid var(--text);
-  background-color: var(--white);
-}
-.contact-from-wrapper .cheak-list-item .cheak-list .form-check .form-check-input:checked {
-  background-color: var(--theme-2);
-  border: 1px solid var(--theme-2);
-}
-.contact-from-wrapper .theme-btn {
-  width: 100%;
-}
-.contact-from-wrapper .theme-btn.style-2 {
-  width: initial;
+.contact-page .contact-card-title {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
-.contact-icon-item {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  background-color: var(--bg);
-  border-radius: 16px;
-  padding: 30px;
+.contact-page .contact-form-title {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.2;
 }
-@media (max-width: 991px) {
-  .contact-icon-item {
-    flex-wrap: wrap;
-  }
+
+.contact-page .contact-pin-title {
+  font-family: 'Playfair Display', serif;
+  font-size: 0.875rem;
+  font-weight: 700;
 }
-.contact-icon-item .icon {
-  width: 64px;
-  height: 64px;
-  line-height: 64px;
-  text-align: center;
-  border-radius: 100px;
-  background-color: var(--header);
-  color: var(--white);
-  transition: all 0.4s ease-in-out;
-  font-size: 20px;
+
+/* Color token: --primary */
+.contact-page .text-primary,
+.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); }
+
+.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; }
+
+.contact-page .border-primary { border-color: rgb(38, 60, 111); }
+
+.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); }
+.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); }
+
+/* group-hover bg-primary */
+.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; }
+.contact-page .group:hover .group-hover\:text-white { color: #fff; }
+
+/* Color token: --dark */
+.contact-page .text-dark { color: #111827; }
+
+/* bg-white/5, /10 */
+.contact-page .bg-white\/5  { background-color: rgba(255,255,255,0.05); }
+.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); }
+
+/* border-white/20, /50 */
+.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
+.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); }
+
+/* text-white/80, /90 */
+.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); }
+.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); }
+
+/* bg-white/95 */
+.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); }
+
+/* border-t border-white/20 */
+.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
+
+/* rounded fixes — main.css có thể reset border-radius */
+.contact-page .rounded-\[16px\]  { border-radius: 16px !important; }
+.contact-page .rounded-\[24px\]  { border-radius: 24px !important; }
+.contact-page .rounded-\[12px\]  { border-radius: 12px !important; }
+.contact-page .rounded-full      { border-radius: 9999px !important; }
+.contact-page .rounded-\[12px\]  { border-radius: 12px !important; }
+
+/* button reset */
+.contact-page button,
+.contact-page input,
+.contact-page select,
+.contact-page textarea {
+  font-size: inherit;
 }
-.contact-icon-item .content p {
-  margin-bottom: 5px;
+
+/* Send Message button */
+.contact-page .bg-primary.rounded-\[12px\] {
+  border-radius: 12px !important;
+  background-color: rgb(38, 60, 111) !important;
 }
-.contact-icon-item .content h6 {
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 144%;
+
+.contact-page .bg-primary.rounded-\[12px\]:hover {
+  background-color: rgba(38, 60, 111, 0.9) !important;
 }
-.contact-icon-item:hover .icon {
-  background-color: var(--theme);
+
+/* Icon color fix */
+.contact-page .text-primary i,
+.contact-page i.text-primary,
+.contact-page .text-primary svg,
+.contact-page svg.text-primary {
+  color: rgb(38, 60, 111) !important;
 }
 
+/* Icon box bg-blue-50 */
+.contact-page .bg-blue-50 {
+  background-color: rgb(239, 246, 255) !important;
+}
+
+/* blue-100 border */
+.contact-page .border-blue-100 {
+  border-color: rgb(219, 234, 254) !important;
+}
+
+/* info box bg-blue-50 text-primary */
+.contact-page .bg-blue-50.rounded-\[12px\] {
+  background-color: rgb(239, 246, 255) !important;
+}
+
+/* Icon box hover — đổi icon sang trắng khi hover card */
+.contact-page .group:hover .group-hover\:text-white i,
+.contact-page .group:hover .group-hover\:text-white svg {
+  color: #ffffff !important;
+}
+
+/* Form inputs border-radius và placeholder */
+.contact-page input,
+.contact-page select,
+.contact-page textarea {
+  border-radius: 12px !important;
+}
+
+.contact-page input::placeholder,
+.contact-page textarea::placeholder {
+  color: #9ca3af !important;
+}
+
+/* contact-form-title size */
+.contact-page .contact-form-title {
+  font-size: 2rem !important;
+}
+
+/* Consent checkbox alignment */
+.contact-page .custom-checkbox {
+  margin-top: 2px !important;
+  flex-shrink: 0;
+}
+/*
+-----------------------------------------------
+End Contact Page
+-----------------------------------------------
+*/
+
 .map-items .googpemap iframe {
   width: 100%;
   height: 724px;
@@ -4248,6 +4806,526 @@ span {
   color: var(--header);
 }
 
+/* ============================================================
+   HOME PAGE — shared styles
+   ============================================================ */
+
+/* ------------------------------------------------------------
+   Hero Section In Home Page
+   ------------------------------------------------------------ */
+.hero-home {
+    position: relative;
+    width: 100%;
+    height: 560px;
+    background-color: #1b254b;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.hero-home__overlay {
+    position: absolute;
+    inset: 0;
+    opacity: 0.2;
+}
+
+.hero-home__bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    mix-blend-mode: overlay;
+}
+
+.hero-home__gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #1b254b, rgba(27, 37, 75, 0.9), transparent);
+}
+
+.hero-home__container {
+    position: relative;
+    z-index: 2;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .hero-home__container {
+        padding: 0 2rem;
+    }
+}
+
+.hero-home__content {
+    max-width: 42rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Badge */
+.hero-home__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(4px);
+    width: fit-content;
+}
+
+.hero-home__badge-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: #60a5fa;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.hero-home__badge-text {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #bfdbfe;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Title */
+.hero-home__title {
+    font-size: 3rem;
+    font-weight: 700;
+    color: #ffffff;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0;
+}
+
+@media (min-width: 1024px) {
+    .hero-home__title {
+        font-size: 3.75rem;
+    }
+}
+
+/* Description */
+.hero-home__desc {
+    font-size: 1.125rem;
+    color: #bfdbfe;
+    line-height: 1.7;
+    max-width: 36rem;
+    margin: 0;
+}
+
+/* Actions */
+.hero-home__actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding-top: 1rem;
+}
+
+/* Buttons */
+.hero-home__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    border: none;
+}
+
+.hero-home__btn--primary {
+    background: #ffffff;
+    color: #1b254b;
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+}
+
+.hero-home__btn--primary:hover {
+    background: #f9fafb;
+}
+
+.hero-home__btn--secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(4px);
+}
+
+.hero-home__btn--secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* ------------------------------------------------------------
+   Research Impact Section In Home Page
+   ------------------------------------------------------------ */
+.research-impact {
+    padding: 80px 0;
+    background-color: #f8fbff;
+}
+
+.research-impact__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.research-impact__title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin: 0;
+}
+
+.research-impact__year {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #6b7280;
+    background: #e5e7eb;
+    padding: 4px 12px;
+    border-radius: 999px;
+}
+
+.research-impact__stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+@media (max-width: 991px) {
+    .research-impact__stats {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 575px) {
+    .research-impact__stats {
+        grid-template-columns: 1fr;
+    }
+}
+
+.research-impact__stat-card {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.research-impact__stat-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #6b7280;
+    margin-bottom: 0.5rem;
+}
+
+.research-impact__stat-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+}
+
+.research-impact__stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1b254b;
+    line-height: 1;
+}
+
+.research-impact__stat-trend {
+    font-size: 0.78rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 999px;
+}
+
+.research-impact__stat-trend--up {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.research-impact__stat-trend--down {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.research-impact__stat-trend--stable {
+    background: #e5e7eb;
+    color: #374151;
+}
+
+.research-impact__stat-sub {
+    font-size: 0.8rem;
+    color: #9ca3af;
+    margin: 0;
+}
+
+.research-impact__charts {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+}
+
+@media (max-width: 767px) {
+    .research-impact__charts {
+        grid-template-columns: 1fr;
+    }
+}
+
+.research-impact__chart-card {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.research-impact__chart-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1b254b;
+    margin-bottom: 0.25rem;
+}
+
+.research-impact__chart-sub {
+    font-size: 0.8rem;
+    color: #9ca3af;
+    margin-bottom: 1.25rem;
+}
+
+.research-impact__bar-chart {
+    display: flex;
+    align-items: flex-end;
+    gap: 1.5rem;
+    height: 160px;
+    padding-top: 1rem;
+}
+
+.research-impact__bar-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.research-impact__bar {
+    width: 100%;
+    border-radius: 6px 6px 0 0;
+    min-height: 8px;
+    transition: height 0.4s ease;
+}
+
+.research-impact__bar--journals {
+    background: #1b254b;
+}
+
+.research-impact__bar--conferences {
+    background: #74c0fc;
+}
+
+.research-impact__bar-label {
+    font-size: 0.78rem;
+    color: #6b7280;
+    font-weight: 500;
+}
+
+.research-impact__donut-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.research-impact__donut {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    -webkit-mask: radial-gradient(circle, transparent 40%, black 41%);
+    mask: radial-gradient(circle, transparent 40%, black 41%);
+}
+
+.research-impact__legend {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.research-impact__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+}
+
+.research-impact__legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.research-impact__legend-label {
+    color: #374151;
+    flex: 1;
+}
+
+.research-impact__legend-value {
+    font-weight: 600;
+    color: #1b254b;
+}
+
+/* ------------------------------------------------------------
+   Quick Links Grid In Home Page
+   ------------------------------------------------------------ */
+.quick-links {
+    padding: 80px 0;
+    background: #ffffff;
+}
+
+.quick-links__header {
+    margin-bottom: 3rem;
+}
+
+.quick-links__title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.quick-links__subtitle {
+    color: #6b7280;
+    max-width: 40rem;
+    margin: 0 auto;
+}
+
+.quick-links__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+}
+
+@media (max-width: 991px) {
+    .quick-links__grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 575px) {
+    .quick-links__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.quick-links__card {
+    display: flex;
+    flex-direction: column;
+    background: #f8fbff;
+    padding: 2rem;
+    border-radius: 1.5rem;
+    border: 1px solid transparent;
+    text-decoration: none;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+    cursor: pointer;
+}
+
+.quick-links__card:hover {
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+    border-color: #e5e7eb;
+}
+
+.quick-links__icon-wrap {
+    width: 3.5rem;
+    height: 3.5rem;
+    background: #ffffff;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    color: #1b254b;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    transition: transform 0.2s ease;
+}
+
+.quick-links__card:hover .quick-links__icon-wrap {
+    transform: scale(1.1);
+}
+
+.quick-links__card-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1b254b;
+    margin-bottom: 0.75rem;
+}
+
+.quick-links__card-desc {
+    font-size: 0.875rem;
+    color: #6b7280;
+    line-height: 1.6;
+    flex: 1;
+    margin-bottom: 1.5rem;
+}
+
+.quick-links__card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.quick-links__cta {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #1b254b;
+}
+
+.quick-links__arrow {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: #1b254b;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.quick-links__card:hover .quick-links__arrow {
+    opacity: 1;
+}
+/*
+------------------------------------------------------
+  End Home Page
+------------------------------------------------------
+*/
+
 .sticky {
   position: fixed !important;
   top: 0 !important;
@@ -5041,599 +6119,6 @@ html.lenis, html.lenis body {
     transform: scale(1);
   }
 }
-.hero-1 {
-  margin: 0 40px;
-  border-radius: 32px;
-  position: relative;
-  z-index: 9;
-}
-@media (max-width: 1399px) {
-  .hero-1 {
-    margin: 0 30px;
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-}
-@media (max-width: 991px) {
-  .hero-1 {
-    padding-top: 80px;
-    padding-bottom: 0;
-  }
-}
-@media (max-width: 575px) {
-  .hero-1 {
-    margin: 0 15px;
-  }
-}
-.hero-1 .pagi-item {
-  right: 60px;
-  top: 345px;
-  position: absolute;
-  z-index: 999;
-}
-@media (max-width: 1600px) {
-  .hero-1 .pagi-item {
-    top: 310px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-1 .pagi-item {
-    display: none;
-  }
-}
-.hero-1 .pagi-item .dot-number {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.hero-1 .pagi-item .dot-number .swiper-pagination-bullet {
-  background: none !important;
-  width: auto !important;
-  height: auto !important;
-  margin: 0 !important;
-  transition: all 0.4s ease-in-out;
-}
-.hero-1 .pagi-item .dot-number .swiper-pagination-bullet-active .dot-num span {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 700;
-  transition: all 0.4s ease-in-out;
-}
-.hero-1 .pagi-item .dot-number .dot-num {
-  transition: all 0.4s ease-in-out;
-}
-.hero-1 .pagi-item .dot-number .dot-num span {
-  font-size: 18px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.5);
-  transition: all 0.4s ease-in-out;
-}
-.hero-1 .left-shape {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-@media (max-width: 1399px) {
-  .hero-1 .left-shape {
-    display: none;
-  }
-}
-.hero-1 .hero-shape {
-  position: absolute;
-  z-index: -1;
-  right: 10px;
-  bottom: 0;
-  margin-right: 0;
-}
-@media (max-width: 1600px) {
-  .hero-1 .hero-shape {
-    max-width: 660px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-1 .hero-shape {
-    display: none;
-    max-width: initial;
-  }
-}
-.hero-1 .hero-shape img {
-  width: 100%;
-  height: 100%;
-}
-.hero-1 .top-shape {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-@media (max-width: 1399px) {
-  .hero-1 .top-shape {
-    display: none;
-  }
-}
-.hero-1 .top-shape img {
-  width: 100%;
-  height: 100%;
-}
-.hero-1 .right-shape {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-@media (max-width: 1399px) {
-  .hero-1 .right-shape {
-    display: none;
-  }
-}
-.hero-1 .container-fluid {
-  padding: 0 124px;
-}
-@media (max-width: 1899px) {
-  .hero-1 .container-fluid {
-    padding: 0 70px;
-  }
-}
-@media (max-width: 1600px) {
-  .hero-1 .container-fluid {
-    padding: 0 50px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-1 .container-fluid {
-    padding: 0 30px;
-  }
-}
-@media (max-width: 575px) {
-  .hero-1 .container-fluid {
-    padding: 0 15px;
-  }
-}
-.hero-1 .hero-content h6 {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--white);
-  margin-bottom: 20px;
-  line-height: 1;
-  padding: 8px 16px;
-  border-radius: 100px;
-  display: inline-block;
-  position: relative;
-  background-color: var(--bg-2);
-}
-.hero-1 .hero-content h1 {
-  color: var(--white);
-  text-transform: uppercase;
-  margin-bottom: 15px;
-}
-.hero-1 .hero-content h1 .video-btn {
-  width: 64px;
-  height: 64px;
-  line-height: 64px;
-  display: inline-block;
-  background-color: var(--theme);
-  color: var(--white);
-  text-align: center;
-  border-radius: 50%;
-  font-size: 20px;
-  margin-left: 60px;
-  position: relative;
-  z-index: 1;
-  transform: translateY(-15px);
-}
-@media (max-width: 1600px) {
-  .hero-1 .hero-content h1 .video-btn {
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-1 .hero-content h1 .video-btn {
-    display: none;
-  }
-}
-.hero-1 .hero-content h1 .video-btn::before {
-  position: absolute;
-  content: "";
-  background: rgba(203, 204, 207, 0.24);
-  width: 48px;
-  height: 1px;
-  left: -57px;
-  top: 30px;
-}
-.hero-1 .hero-content h1 .video-btn::after {
-  content: "";
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  right: -10px;
-  bottom: -10px;
-  border: 10px solid rgba(255, 255, 255, 0.12);
-  border-radius: 50%;
-  z-index: -1;
-}
-.hero-1 .hero-content p {
-  max-width: 671px;
-  color: rgba(255, 255, 255, 0.8);
-  padding-left: 30px;
-  border-left: 2px solid var(--white);
-  opacity: 0.8;
-}
-@media (max-width: 1399px) {
-  .hero-1 .hero-content p {
-    border-left: none;
-    padding-left: 0;
-  }
-}
-.hero-1 .hero-content .hero-button {
-  display: flex;
-  align-items: center;
-  gap: 35px;
-  margin-top: 50px;
-}
-@media (max-width: 1399px) {
-  .hero-1 .hero-content .hero-button {
-    margin-top: 30px;
-    flex-wrap: wrap;
-    gap: 25px;
-  }
-}
-.hero-1 .hero-content .hero-button .theme-btn {
-  background-color: var(--white);
-}
-.hero-1 .hero-content .hero-button .theme-btn:hover {
-  background-color: var(--theme);
-  border: 1px solid var(--theme);
-}
-.hero-1 .hero-content .hero-button .theme-btn.style-2 {
-  border: 1px solid var(--border-2);
-  background-color: transparent;
-  color: var(--white);
-}
-.hero-1 .hero-content .hero-button .theme-btn.style-2 i {
-  background-color: var(--white);
-  color: var(--header);
-}
-.hero-1 .hero-content .hero-button .theme-btn.style-2:hover {
-  background-color: var(--theme);
-  color: var(--white);
-  border: 1px solid var(--theme);
-}
-.hero-1 .hero-image {
-  margin-top: 20px;
-  margin-right: -140px;
-  position: relative;
-  z-index: 9;
-}
-@media (max-width: 1399px) {
-  .hero-1 .hero-image {
-    margin-right: 0;
-  }
-}
-.hero-1 .hero-image img {
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transform: translateY(50px);
-  transition: all 0.8s ease-in-out;
-}
-.hero-1 .swiper-slide-active .hero-image img {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.hero-2 {
-  position: relative;
-}
-@media (max-width: 1399px) {
-  .hero-2 {
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-}
-@media (max-width: 991px) {
-  .hero-2 {
-    padding-top: 80px;
-    padding-bottom: 0;
-  }
-}
-.hero-2 .shape {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-@media (max-width: 1399px) {
-  .hero-2 .shape {
-    display: none;
-  }
-}
-.hero-2 .container-fluid {
-  padding: 0 65px;
-}
-@media (max-width: 1600px) {
-  .hero-2 .container-fluid {
-    padding: 0 50px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-2 .container-fluid {
-    padding: 0 40px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-2 .container-fluid {
-    padding: 0 30px;
-  }
-}
-@media (max-width: 575px) {
-  .hero-2 .container-fluid {
-    padding: 0 15px;
-  }
-}
-.hero-2::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background: linear-gradient(279deg, rgba(21, 26, 38, 0.88) 34.84%, rgba(21, 26, 38, 0) 84.02%);
-}
-.hero-2 .hero-image {
-  margin-top: 30px;
-  position: relative;
-  margin-left: -75px;
-}
-@media (max-width: 1399px) {
-  .hero-2 .hero-image {
-    margin-left: 0;
-    margin-top: 0;
-  }
-}
-.hero-2 .hero-image img {
-  width: 100%;
-  height: 100%;
-}
-.hero-2 .hero-content {
-  position: relative;
-  z-index: 999;
-}
-.hero-2 .hero-content h6 {
-  color: var(--white);
-  font-size: 18px;
-  font-weight: 500;
-  letter-spacing: 6px;
-  text-transform: uppercase;
-  margin-bottom: 20px;
-}
-.hero-2 .hero-content h1 {
-  color: var(--white);
-  text-transform: uppercase;
-  margin-bottom: 20px;
-}
-.hero-2 .hero-content p {
-  color: var(--white);
-  max-width: 800px;
-  padding-left: 24px;
-  border-left: 3px solid var(--white);
-}
-@media (max-width: 1399px) {
-  .hero-2 .hero-content p {
-    border-left: none;
-    padding-left: 0;
-  }
-}
-.hero-2 .hero-content .hero-button {
-  display: flex;
-  align-items: center;
-  gap: 35px;
-  margin-top: 50px;
-}
-@media (max-width: 1399px) {
-  .hero-2 .hero-content .hero-button {
-    flex-wrap: wrap;
-    gap: 25px;
-  }
-}
-.hero-2 .hero-content .hero-button .theme-btn {
-  background-color: var(--white);
-}
-.hero-2 .hero-content .hero-button .theme-btn:hover {
-  background-color: var(--theme);
-  border: 1px solid var(--theme);
-}
-.hero-2 .hero-content .hero-button .theme-btn.style-2 {
-  border: 1px solid var(--border-2);
-  background-color: transparent;
-  color: var(--white);
-}
-.hero-2 .hero-content .hero-button .theme-btn.style-2 i {
-  background-color: var(--white);
-  color: var(--header);
-}
-.hero-2 .hero-content .hero-button .theme-btn.style-2:hover {
-  background-color: var(--theme);
-  color: var(--white);
-  border: 1px solid var(--theme);
-}
-
-.hero-3 {
-  position: relative;
-  z-index: 9;
-}
-@media (max-width: 1399px) {
-  .hero-3 {
-    margin: 0 30px;
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-}
-@media (max-width: 991px) {
-  .hero-3 {
-    padding-top: 80px;
-    padding-bottom: 0;
-  }
-}
-@media (max-width: 575px) {
-  .hero-3 {
-    margin: 0 15px;
-  }
-}
-.hero-3 .pagi-item {
-  right: 60px;
-  bottom: 120px;
-  position: absolute;
-  z-index: 999;
-}
-@media (max-width: 1399px) {
-  .hero-3 .pagi-item {
-    display: none;
-  }
-}
-.hero-3 .pagi-item .dot-number {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.hero-3 .pagi-item .dot-number .swiper-pagination-bullet {
-  background: none !important;
-  width: auto !important;
-  height: auto !important;
-  margin: 0 !important;
-  transition: all 0.4s ease-in-out;
-}
-.hero-3 .pagi-item .dot-number .swiper-pagination-bullet-active .dot-num span {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 700;
-  transition: all 0.4s ease-in-out;
-}
-.hero-3 .pagi-item .dot-number .dot-num {
-  transition: all 0.4s ease-in-out;
-}
-.hero-3 .pagi-item .dot-number .dot-num span {
-  font-size: 18px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.5);
-  transition: all 0.4s ease-in-out;
-}
-.hero-3 .hero-shape {
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  top: 0;
-}
-@media (max-width: 1600px) {
-  .hero-3 .hero-shape {
-    max-width: 660px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-3 .hero-shape {
-    display: none;
-    max-width: initial;
-  }
-}
-.hero-3 .hero-shape img {
-  width: 100%;
-  height: 100%;
-}
-.hero-3 .container-fluid {
-  padding: 0 124px;
-}
-@media (max-width: 1899px) {
-  .hero-3 .container-fluid {
-    padding: 0 70px;
-  }
-}
-@media (max-width: 1600px) {
-  .hero-3 .container-fluid {
-    padding: 0 50px;
-  }
-}
-@media (max-width: 1399px) {
-  .hero-3 .container-fluid {
-    padding: 0 30px;
-  }
-}
-@media (max-width: 575px) {
-  .hero-3 .container-fluid {
-    padding: 0 15px;
-  }
-}
-.hero-3 .hero-content h6 {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--theme);
-  margin-bottom: 20px;
-}
-.hero-3 .hero-content h1 {
-  color: var(--white);
-  text-transform: uppercase;
-  margin-bottom: 15px;
-}
-.hero-3 .hero-content p {
-  max-width: 772px;
-  color: rgba(255, 255, 255, 0.8);
-  opacity: 0.8;
-}
-.hero-3 .hero-content .hero-button {
-  display: flex;
-  align-items: center;
-  gap: 35px;
-  margin-top: 50px;
-}
-@media (max-width: 1399px) {
-  .hero-3 .hero-content .hero-button {
-    margin-top: 30px;
-    flex-wrap: wrap;
-    gap: 25px;
-  }
-}
-.hero-3 .hero-content .hero-button .theme-btn {
-  background-color: var(--white);
-}
-.hero-3 .hero-content .hero-button .theme-btn:hover {
-  background-color: var(--theme);
-  border: 1px solid var(--theme);
-}
-.hero-3 .hero-content .hero-button .theme-btn.style-2 {
-  border: 1px solid var(--border-2);
-  background-color: transparent;
-  color: var(--white);
-}
-.hero-3 .hero-content .hero-button .theme-btn.style-2 i {
-  background-color: var(--white);
-  color: var(--header);
-}
-.hero-3 .hero-content .hero-button .theme-btn.style-2:hover {
-  background-color: var(--theme);
-  color: var(--white);
-  border: 1px solid var(--theme);
-}
-.hero-3 .hero-image {
-  margin-top: 20px;
-  position: relative;
-  z-index: 9;
-}
-@media (max-width: 1399px) {
-  .hero-3 .hero-image {
-    margin-right: 0;
-  }
-}
-.hero-3 .hero-image img {
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transform: translateY(50px);
-  transition: all 0.8s ease-in-out;
-}
-.hero-3 .swiper-slide-active .hero-image img {
-  opacity: 1;
-  transform: translateY(0);
-}
-
 .mean-container a.meanmenu-reveal {
   display: none;
 }
@@ -7168,6 +7653,1541 @@ html.lenis, html.lenis body {
   transform: translateY(-10px);
 }
 
+/*
+---------------------------------------------------------------
+   PUBLICATIONS PAGE
+---------------------------------------------------------------
+*/
+
+/* --- Local CSS Variables (override globals for this page) --- */
+.pub-wrapper {
+  --pub-blue:        #263c6f;
+  --pub-blue-hover:  #1d2e55;
+  --pub-blue-light:  #f0f4f8;
+  --pub-border:      #e5e7eb;
+  --pub-text:        #111827;
+  --pub-muted:       #6b7280;
+  --pub-bg:          #f9fafb;
+  --pub-accent:      #3b82f6;
+
+  background-color: var(--pub-bg);
+  width: 100%;
+}
+
+/*
+---------------------------------------------------------------
+   SEARCH HEADER SECTION In Publications Page
+---------------------------------------------------------------
+*/
+.pub-wrapper #repo-header {
+  width: 100%;
+  background-color: #ffffff;
+  border-bottom: 1px solid var(--pub-border);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.pub-wrapper #repo-header h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: var(--pub-text);
+  letter-spacing: -0.025em;
+  margin-bottom: 0.5rem;
+  line-height: 2.5rem;
+}
+
+.pub-wrapper #repo-header p {
+  color: var(--pub-muted);
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+/* Search bar */
+.pub-wrapper .pub-search-bar {
+  position: relative;
+  width: 100%;
+  border-radius: 0.75rem;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+}
+
+.pub-wrapper .pub-search-bar input {
+  display: block;
+  width: 100%;
+  padding: 1rem 8rem 1rem 3rem;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.75rem;
+  font-size: 1.125rem;
+  color: var(--pub-text);
+  background-color: #ffffff;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.pub-wrapper .pub-search-bar input::placeholder {
+  color: var(--pub-muted);
+}
+
+.pub-wrapper .pub-search-bar input:focus {
+  border-color: var(--pub-blue);
+  box-shadow: 0 0 0 2px rgba(38, 60, 111, 0.15);
+}
+
+.pub-wrapper .pub-search-bar .pub-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  color: var(--pub-muted);
+  font-size: 1.125rem;
+  pointer-events: none;
+}
+
+.pub-wrapper .pub-search-bar .pub-search-btn-wrap {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+}
+
+/*
+---------------------------------------------------------------
+   BUTTONS In Publications Page
+--------------------------------------------------------------- 
+*/
+.pub-wrapper .pub-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--pub-blue);
+  color: #ffffff;
+  border: 1px solid var(--pub-blue);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.pub-wrapper .pub-btn-primary:hover {
+  background-color: var(--pub-blue-hover);
+  color: #ffffff;
+}
+
+.pub-wrapper .pub-btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: #ffffff;
+  color: var(--pub-text);
+  border: 1px solid var(--pub-border);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+  text-decoration: none;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+}
+
+.pub-wrapper .pub-btn-outline:hover {
+  border-color: var(--pub-blue);
+  color: var(--pub-blue);
+}
+
+/*
+---------------------------------------------------------------
+   MAIN CONTENT LAYOUT In Publications Page
+---------------------------------------------------------------
+*/
+.pub-wrapper #repo-content {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.pub-wrapper .pub-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .pub-wrapper .pub-layout {
+    flex-direction: row;
+  }
+}
+
+/*
+---------------------------------------------------------------
+   SIDEBAR In Publications Page
+---------------------------------------------------------------   
+*/
+.pub-wrapper .pub-sidebar {
+  width: 100%;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1024px) {
+  .pub-wrapper .pub-sidebar {
+    width: 20rem; /* 320px */
+    min-width: 20rem;
+    max-width: 20rem;
+  }
+}
+
+.pub-wrapper .pub-sidebar-inner {
+  background-color: #ffffff;
+  border-radius: 0.75rem;
+  border: 1px solid var(--pub-border);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  padding: 1.25rem;
+  position: sticky;
+  top: 7rem; /* below fixed header */
+  height: fit-content;
+}
+
+.pub-wrapper .pub-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--pub-border);
+}
+
+.pub-wrapper .pub-sidebar-header h2 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--pub-text);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.pub-wrapper .pub-sidebar-header h2 i {
+  color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-sidebar-header .pub-clear-btn {
+  font-size: 0.875rem;
+  color: var(--pub-accent);
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: none;
+}
+
+.pub-wrapper .pub-sidebar-header .pub-clear-btn:hover {
+  text-decoration: underline;
+}
+
+/* Accordion */
+.pub-wrapper .pub-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.pub-wrapper .pub-accordion-item {
+  /* no extra styles needed */
+}
+
+.pub-wrapper .pub-accordion-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--pub-text);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 0.75rem;
+}
+
+.pub-wrapper .pub-accordion-trigger i {
+  font-size: 0.75rem;
+  color: var(--pub-muted);
+  transition: transform 0.3s ease;
+}
+
+.pub-wrapper .pub-accordion-trigger.open i {
+  transform: rotate(180deg);
+}
+
+.pub-wrapper .pub-accordion-body {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+  max-height: 0;
+  opacity: 0;
+}
+
+.pub-wrapper .pub-accordion-body.open {
+  max-height: 600px;
+  opacity: 1;
+}
+
+.pub-wrapper .pub-accordion-body .pub-filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Filter checkbox labels */
+.pub-wrapper .pub-filter-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.pub-wrapper .pub-filter-label span {
+  font-size: 0.875rem;
+  color: var(--pub-text);
+  transition: color 0.15s;
+}
+
+.pub-wrapper .pub-filter-label:hover span {
+  color: var(--pub-blue);
+}
+
+/* Custom checkbox */
+.pub-wrapper .pub-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1.15em;
+  height: 1.15em;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.25em;
+  background-color: #ffffff;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.pub-wrapper .pub-checkbox::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: transform 120ms ease-in-out;
+  background-color: #ffffff;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+.pub-wrapper .pub-checkbox:checked {
+  background-color: var(--pub-blue);
+  border-color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-checkbox:checked::before {
+  transform: scale(1);
+}
+
+/* Year range inputs */
+.pub-wrapper .pub-year-range {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.pub-wrapper .pub-year-range input {
+  width: 50%;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--pub-text);
+  background-color: #ffffff;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.pub-wrapper .pub-year-range input:focus {
+  border-color: var(--pub-blue);
+}
+
+/* 
+-----------------------------------------------------------------
+   RESULTS AREA In Publications Page
+-----------------------------------------------------------------
+*/
+.pub-wrapper .pub-results {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Results toolbar */
+.pub-wrapper .pub-results-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--pub-border);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .pub-wrapper .pub-results-toolbar {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.pub-wrapper .pub-results-count {
+  font-size: 0.875rem;
+  color: var(--pub-text);
+}
+
+.pub-wrapper .pub-results-count strong {
+  font-weight: 700;
+}
+
+.pub-wrapper .pub-sort-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.pub-wrapper .pub-sort-wrap label {
+  font-size: 0.875rem;
+  color: var(--pub-muted);
+  white-space: nowrap;
+}
+
+.pub-wrapper .pub-sort-select {
+  border: 1px solid var(--pub-border);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--pub-text);
+  background-color: #ffffff;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  min-width: 140px;
+}
+
+.pub-wrapper .pub-sort-select:focus,
+.pub-wrapper .pub-sort-select:hover {
+  border-color: var(--pub-blue);
+}
+
+/* Sort dropdown (custom React dropdown) */
+.pub-wrapper .pub-sort-dropdown {
+  position: relative;
+}
+
+.pub-wrapper .pub-sort-dropdown-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  color: var(--pub-text);
+  cursor: pointer;
+  min-width: 140px;
+  transition: border-color 0.2s;
+  outline: none;
+}
+
+.pub-wrapper .pub-sort-dropdown-btn:hover,
+.pub-wrapper .pub-sort-dropdown-btn.open {
+  border-color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-sort-dropdown-btn i {
+  font-size: 0.625rem;
+  color: var(--pub-muted);
+  transition: transform 0.3s;
+}
+
+.pub-wrapper .pub-sort-dropdown-btn.open i {
+  transform: rotate(180deg);
+}
+
+.pub-wrapper .pub-sort-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+  z-index: 50;
+  overflow: hidden;
+  padding: 0.25rem 0;
+}
+
+.pub-wrapper .pub-sort-dropdown-option {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  color: var(--pub-text);
+}
+
+.pub-wrapper .pub-sort-dropdown-option:hover {
+  background-color: #f9fafb;
+}
+
+.pub-wrapper .pub-sort-dropdown-option.selected {
+  background-color: var(--pub-blue-light);
+  color: var(--pub-blue);
+  font-weight: 600;
+}
+
+/*
+---------------------------------------------------------------
+   PUBLICATION CARD In Publications Page
+---------------------------------------------------------------
+*/
+.pub-wrapper .pub-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pub-wrapper .pub-card {
+  background-color: #ffffff;
+  border-radius: 0.75rem;
+  border: 1px solid var(--pub-border);
+  padding: 1.5rem;
+  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
+  cursor: default;
+}
+
+.pub-wrapper .pub-card:hover {
+  border-color: var(--pub-blue);
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+}
+
+/* Card top row: title + badges */
+.pub-wrapper .pub-card-top {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+  .pub-wrapper .pub-card-top {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.pub-wrapper .pub-card-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--pub-text);
+  line-height: 1.4;
+  margin: 0;
+  transition: color 0.2s;
+}
+
+.pub-wrapper .pub-card:hover .pub-card-title {
+  color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-card-title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.pub-wrapper .pub-card-title a:hover {
+  color: var(--pub-blue);
+}
+
+/* Badges */
+.pub-wrapper .pub-badges {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.pub-wrapper .pub-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.pub-wrapper .pub-badge-open {
+  background-color: #f0fdf4;
+  color: #15803d;
+  border-color: #bbf7d0;
+}
+
+.pub-wrapper .pub-badge-peer {
+  background-color: var(--pub-blue-light);
+  color: var(--pub-blue);
+  border-color: rgba(38, 60, 111, 0.2);
+}
+
+.pub-wrapper .pub-badge-institutional {
+  background-color: #fefce8;
+  color: #a16207;
+  border-color: #fde68a;
+}
+
+.pub-wrapper .pub-badge-request {
+  background-color: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+
+/* Card meta row */
+.pub-wrapper .pub-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1.5rem;
+  font-size: 0.875rem;
+  color: var(--pub-muted);
+  margin-bottom: 1rem;
+}
+
+.pub-wrapper .pub-card-meta .pub-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pub-wrapper .pub-card-meta .pub-meta-item strong {
+  color: var(--pub-text);
+  font-weight: 500;
+}
+
+/* Card abstract */
+.pub-wrapper .pub-card-abstract {
+  font-size: 0.875rem;
+  color: var(--pub-muted);
+  line-height: 1.625;
+  margin-bottom: 1rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Keywords */
+.pub-wrapper .pub-keywords {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.pub-wrapper .pub-keywords-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--pub-muted);
+}
+
+.pub-wrapper .pub-keyword-tag {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  background-color: #f3f4f6;
+  color: #4b5563;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}
+
+/* Card actions */
+.pub-wrapper .pub-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--pub-border);
+  flex-wrap: wrap;
+}
+
+.pub-wrapper .pub-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s;
+  text-decoration: none;
+}
+
+.pub-wrapper .pub-action-btn-primary {
+  color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-action-btn-primary:hover {
+  color: var(--pub-blue-hover);
+}
+
+.pub-wrapper .pub-action-btn-secondary {
+  color: var(--pub-muted);
+  margin-left: 1rem;
+}
+
+.pub-wrapper .pub-action-btn-secondary:hover {
+  color: var(--pub-text);
+}
+
+/*
+---------------------------------------------------------------
+   PAGINATION In Publications Page
+---------------------------------------------------------------
+*/
+.pub-wrapper .pub-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--pub-border);
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+  gap: 1rem;
+}
+
+.pub-wrapper .pub-page-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--pub-border);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: #ffffff;
+  color: var(--pub-text);
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.pub-wrapper .pub-page-btn:hover:not(:disabled) {
+  border-color: var(--pub-blue);
+  color: var(--pub-blue);
+}
+
+.pub-wrapper .pub-page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #f9fafb;
+}
+
+.pub-wrapper .pub-page-numbers {
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+@media (min-width: 768px) {
+  .pub-wrapper .pub-page-numbers {
+    display: flex;
+  }
+}
+
+.pub-wrapper .pub-page-num {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: #ffffff;
+  color: var(--pub-text);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.pub-wrapper .pub-page-num:hover {
+  background-color: #f3f4f6;
+}
+
+.pub-wrapper .pub-page-num.active {
+  background-color: var(--pub-blue);
+  color: #ffffff;
+  cursor: default;
+}
+
+.pub-wrapper .pub-page-ellipsis {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pub-muted);
+  font-size: 0.875rem;
+}
+
+/*
+----------------------------------------------------------------
+  End Publications Page
+----------------------------------------------------------------
+*/
+
+/* 
+---------------------------------------------------------------
+   RESEARCH PAGE
+---------------------------------------------------------------
+*/
+
+/* --- Local CSS Variables --- */
+.research-wrapper {
+  --r-blue:        #263c6f;
+  --r-blue-hover:  #1d2e55;
+  --r-blue-light:  #f0f4f8;
+  --r-accent:      #3b82f6;
+  --r-border:      #e5e7eb;
+  --r-text:        #111827;
+  --r-muted:       #6b7280;
+  --r-bg:          #f9fafb;
+  --r-white:       #ffffff;
+  --r-shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
+  --r-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+
+  width: 100%;
+  background-color: var(--r-bg);
+}
+
+/*
+---------------------------------------------------------------
+   HERO SECTION In Research Page
+---------------------------------------------------------------
+*/
+.research-wrapper #research-hero {
+  width: 100%;
+  background-color: var(--r-bg);
+  border-bottom: 1px solid var(--r-border);
+  padding-top: 3rem;
+  padding-bottom: 4rem;
+  font-family: 'Inter', sans-serif;
+}
+
+/* Label row: gạch ngang + text "Research Hub" */
+.research-wrapper #research-hero .hero-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.research-wrapper #research-hero .hero-label-line {
+  display: block;
+  width: 2rem;
+  height: 2.5px;
+  background-color: var(--r-accent);
+  flex-shrink: 0;
+}
+
+.research-wrapper #research-hero .hero-label-text {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--r-blue);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-family: 'Inter', sans-serif;
+}
+
+/* Heading */
+.research-wrapper #research-hero h1 {
+  font-family: 'Inter', sans-serif;
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--r-text);
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+  margin: 0;
+}
+
+@media (min-width: 1024px) {
+  .research-wrapper #research-hero h1 {
+    font-size: 4.5rem;
+  }
+}
+
+.research-wrapper #research-hero h1 span {
+  color: var(--r-blue);
+}
+
+/* Paragraph */
+.research-wrapper #research-hero .hero-desc {
+  font-family: 'Inter', sans-serif;
+  font-size: 1.125rem;
+  color: var(--r-muted);
+  line-height: 1.625;
+  max-width: 36rem;
+  margin: 0;
+}
+
+/* Left column spacing */
+.research-wrapper #research-hero .hero-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Button row */
+.research-wrapper #research-hero .hero-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* Hero buttons */
+.research-wrapper .r-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background-color: var(--r-blue);
+  color: var(--r-white);
+  border: none;
+  border-radius: 9999px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+  text-decoration: none;
+}
+
+.research-wrapper .r-btn-primary:hover {
+  background-color: var(--r-blue-hover);
+  color: var(--r-white);
+}
+
+.research-wrapper .r-btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background-color: var(--r-white);
+  color: var(--r-text);
+  border: 1px solid var(--r-border);
+  border-radius: 9999px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  text-decoration: none;
+}
+
+.research-wrapper .r-btn-outline:hover {
+  background-color: #f9fafb;
+  color: var(--r-text);
+}
+
+/* Hero floating stat cards */
+.research-wrapper .r-stat-card {
+  position: absolute;
+  background-color: var(--r-white);
+  border-radius: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--r-border);
+  box-shadow: var(--r-shadow-hover);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.research-wrapper .r-stat-card p {
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* ---------------------------------------------------------------
+   RESEARCH DOMAINS SECTION In Research Page
+   --------------------------------------------------------------- */
+.research-wrapper #research-domains {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background-color: var(--r-white);
+}
+
+.research-wrapper #research-domains h2 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--r-text);
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .research-wrapper #research-domains h2 {
+    font-size: 2.25rem;
+  }
+}
+
+.research-wrapper #research-domains > div > div:first-child p {
+  color: var(--r-muted);
+  max-width: 42rem;
+  margin: 0 auto;
+}
+
+/* Domain card — folder tab shape */
+.research-wrapper .folder-tab {
+  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
+  padding: 2rem;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 1.5rem;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.research-wrapper .folder-tab:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--r-shadow-hover);
+}
+
+/* Blue variant (first card) */
+.research-wrapper .folder-tab-blue {
+  background-color: var(--r-blue);
+  color: var(--r-white);
+}
+
+.research-wrapper .folder-tab-blue h3 {
+  color: var(--r-white);
+}
+
+.research-wrapper .folder-tab-blue p {
+  color: rgba(255,255,255,0.8);
+}
+
+/* Light variant */
+.research-wrapper .folder-tab-light {
+  background-color: var(--r-blue-light);
+  color: var(--r-text);
+  border: 1px solid var(--r-border);
+}
+
+/* CTA card (dashed border) */
+.research-wrapper .domain-card-cta {
+  border-radius: 1.5rem;
+  padding: 2rem;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 2px dashed var(--r-border);
+  background-color: var(--r-bg);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.research-wrapper .domain-card-cta:hover {
+  border-color: var(--r-blue);
+}
+
+.research-wrapper .domain-card-cta h3 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--r-text);
+  margin-bottom: 0.5rem;
+}
+
+.research-wrapper .domain-card-cta p {
+  font-size: 0.875rem;
+  color: var(--r-muted);
+  margin: 0;
+}
+
+/* Domain card icon box */
+.research-wrapper .domain-icon-blue {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 1rem;
+  background-color: rgba(255,255,255,0.2);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+  border: 1px solid rgba(255,255,255,0.3);
+  flex-shrink: 0;
+}
+
+.research-wrapper .domain-icon-light {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 1rem;
+  background-color: var(--r-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+  border: 1px solid var(--r-border);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  flex-shrink: 0;
+}
+
+.research-wrapper .domain-card-cta .domain-icon-cta {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 9999px;
+  background-color: var(--r-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  transition: transform 0.2s;
+}
+
+.research-wrapper .domain-card-cta:hover .domain-icon-cta {
+  transform: scale(1.1);
+}
+
+/* Domain card footer row */
+.research-wrapper .domain-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.research-wrapper .domain-badge-white {
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: var(--r-white);
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--r-border);
+  color: var(--r-blue);
+}
+
+.research-wrapper .domain-badge-glass {
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: rgba(255,255,255,0.2);
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  color: var(--r-white);
+}
+
+/* ---------------------------------------------------------------
+   PROJECTS & CENTERS SECTION In Research Page
+   --------------------------------------------------------------- */
+.research-wrapper #projects-centers {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background-color: var(--r-bg);
+  border-top: 1px solid var(--r-border);
+  border-bottom: 1px solid var(--r-border);
+}
+
+.research-wrapper #projects-centers h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--r-text);
+  margin: 0;
+}
+
+/* Project item card */
+.research-wrapper .project-card {
+  background-color: var(--r-white);
+  border-radius: 1.25rem;
+  padding: 1.5rem;
+  border: 1px solid var(--r-border);
+  box-shadow: var(--r-shadow-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: flex-start;
+  transition: box-shadow 0.25s ease;
+}
+
+.research-wrapper .project-card:hover {
+  box-shadow: var(--r-shadow-hover);
+}
+
+@media (min-width: 640px) {
+  .research-wrapper .project-card {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.research-wrapper .project-icon {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid var(--r-border);
+}
+
+.research-wrapper .project-icon-blue  { background-color: var(--r-blue-light); border-color: var(--r-border); }
+.research-wrapper .project-icon-purple { background-color: #faf5ff; border-color: #e9d5ff; }
+.research-wrapper .project-icon-orange { background-color: #fff7ed; border-color: #fed7aa; }
+
+/* Status badges */
+.research-wrapper .badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.research-wrapper .badge-active     { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
+.research-wrapper .badge-collection { background-color: #fefce8; color: #a16207; border-color: #fde68a; }
+.research-wrapper .badge-review     { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
+
+/* Progress bar */
+.research-wrapper .progress-bar-track {
+  width: 8rem;
+  background-color: var(--r-bg);
+  border-radius: 9999px;
+  height: 0.375rem;
+}
+
+.research-wrapper .progress-bar-fill {
+  height: 0.375rem;
+  border-radius: 9999px;
+}
+
+.research-wrapper .progress-fill-blue   { background-color: var(--r-blue); }
+.research-wrapper .progress-fill-accent { background-color: var(--r-accent); }
+
+/* ---------------------------------------------------------------
+   FUNDING CALLS (right column) In Research Page
+   --------------------------------------------------------------- */
+.research-wrapper .funding-card {
+  background-color: var(--r-white);
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  border: 1px solid var(--r-border);
+  box-shadow: var(--r-shadow-soft);
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.25s ease;
+}
+
+.research-wrapper .funding-card:hover {
+  box-shadow: var(--r-shadow-hover);
+}
+
+.research-wrapper .funding-item {
+  padding: 1.25rem;
+  background-color: var(--r-bg);
+  border-radius: 1rem;
+  border: 1px solid var(--r-border);
+  transition: border-color 0.2s;
+}
+
+.research-wrapper .funding-item:hover {
+  border-color: var(--r-accent);
+}
+
+.research-wrapper .funding-item h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--r-text);
+  margin: 0 0 0.75rem 0;
+}
+
+.research-wrapper .funding-label-urgent {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: #ef4444;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.research-wrapper .funding-label-internal {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--r-blue);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.research-wrapper .funding-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.research-wrapper .funding-due {
+  font-size: 0.75rem;
+  color: var(--r-muted);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.research-wrapper .funding-link {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--r-blue);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.research-wrapper .funding-link:hover {
+  color: var(--r-blue-hover);
+}
+
+.research-wrapper .funding-view-all {
+  width: 100%;
+  margin-top: 1.5rem;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--r-border);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--r-text);
+  background-color: var(--r-white);
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+}
+
+.research-wrapper .funding-view-all:hover {
+  border-color: var(--r-blue);
+  color: var(--r-blue);
+}
+
+/* ---------------------------------------------------------------
+   RESEARCH RESOURCES (Quick Links) In Research Page
+   --------------------------------------------------------------- */
+.research-wrapper #research-quick-links {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background-color: var(--r-white);
+}
+
+.research-wrapper .resource-card {
+  display: block;
+  background-color: var(--r-bg);
+  border-radius: 1.5rem;
+  padding: 2rem;
+  border: 1px solid var(--r-border);
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  transition: border-color 0.2s;
+}
+
+.research-wrapper .resource-card:hover {
+  border-color: var(--r-accent);
+}
+
+.research-wrapper .resource-card-glow {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 16rem;
+  height: 16rem;
+  background-color: var(--r-blue-light);
+  border-radius: 9999px;
+  filter: blur(64px);
+  opacity: 0.5;
+  transform: translateY(-50%) translateX(25%);
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+
+.research-wrapper .resource-card:hover .resource-card-glow {
+  opacity: 0.8;
+}
+
+.research-wrapper .resource-icon {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 1rem;
+  background-color: var(--r-white);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  border: 1px solid var(--r-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.research-wrapper .resource-card:hover .resource-icon {
+  transform: scale(1.05);
+}
+
+.research-wrapper .resource-card h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--r-text);
+  margin-bottom: 0.5rem;
+  transition: color 0.2s;
+}
+
+.research-wrapper .resource-card:hover h3 {
+  color: var(--r-blue);
+}
+
+.research-wrapper .resource-card p {
+  color: var(--r-muted);
+  line-height: 1.625;
+  margin-bottom: 1rem;
+}
+
+.research-wrapper .resource-link {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--r-blue);
+  gap: 0.5rem;
+}
+
+/* ---------------------------------------------------------------
+   COLLABORATION CTA SECTION In Research Page
+   --------------------------------------------------------------- */
+.research-wrapper #collaboration-cta {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  background-color: var(--r-blue);
+  position: relative;
+  overflow: hidden;
+}
+
+.research-wrapper #collaboration-cta h2 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: var(--r-white);
+  letter-spacing: -0.025em;
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .research-wrapper #collaboration-cta h2 { font-size: 3rem; }
+}
+
+@media (min-width: 1024px) {
+  .research-wrapper #collaboration-cta h2 { font-size: 3.75rem; }
+}
+
+.research-wrapper #collaboration-cta p {
+  font-size: 1.25rem;
+  color: var(--r-blue-light);
+  opacity: 0.9;
+  line-height: 1.625;
+  max-width: 42rem;
+  margin: 0 auto 2.5rem;
+  font-weight: 300;
+}
+
+.research-wrapper .cta-btn-white {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background-color: var(--r-white);
+  color: var(--r-blue);
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+  text-decoration: none;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .research-wrapper .cta-btn-white { width: auto; }
+}
+
+.research-wrapper .cta-btn-white:hover {
+  background-color: #f9fafb;
+  color: var(--r-blue);
+}
+
+.research-wrapper .cta-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background-color: transparent;
+  color: var(--r-white);
+  border: 2px solid rgba(255,255,255,0.3);
+  border-radius: 0.75rem;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  text-decoration: none;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .research-wrapper .cta-btn-ghost { width: auto; }
+}
+
+.research-wrapper .cta-btn-ghost:hover {
+  background-color: rgba(255,255,255,0.1);
+  color: var(--r-white);
+}
+
+/*
+---------------------------------------------------------------
+  End Research Page
+---------------------------------------------------------------
+*/
+
 .section-title {
   position: relative;
   z-index: 99;
diff --git a/public/assets/img/logo/Logo_HaiLearning.jpg b/public/assets/img/logo/Logo_HaiLearning.jpg
deleted file mode 100644
index 7014168..0000000
Binary files a/public/assets/img/logo/Logo_HaiLearning.jpg and /dev/null differ
diff --git a/public/assets/img/logo/Logo_ULDP.png b/public/assets/img/logo/Logo_ULDP.png
new file mode 100644
index 0000000..1cadbe8
Binary files /dev/null and b/public/assets/img/logo/Logo_ULDP.png differ
diff --git a/public/assets/img/logo/black-logo.svg b/public/assets/img/logo/black-logo.svg
deleted file mode 100644
index ec35168..0000000
--- a/public/assets/img/logo/black-logo.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="159" height="48" viewBox="0 0 159 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M41.3036 18.9806C41.604 18.9074 41.9089 18.8663 42.2184 18.8572C42.5279 18.8389 42.8237 18.8297 43.1059 18.8297C43.3699 18.8297 43.6839 18.8526 44.048 18.8983C44.4213 18.9349 44.7489 19.0034 45.0311 19.104L45.195 19.3372L40.0337 37.7143C39.5513 37.7692 39.0142 37.8057 38.4226 37.824C37.8309 37.8514 37.2665 37.8652 36.7295 37.8652C35.9466 37.8652 35.3322 37.7372 34.8862 37.4812C34.4401 37.2252 34.1124 36.7223 33.9031 35.9726L29.3016 19.3509C29.6749 19.1863 30.0708 19.0446 30.4895 18.9257C30.9174 18.8069 31.3589 18.7474 31.814 18.7474C32.433 18.7474 32.9154 18.912 33.2613 19.2412C33.6072 19.5703 33.8712 20.096 34.0533 20.8183L36.2516 28.9097C36.3972 29.4309 36.5337 29.9749 36.6612 30.5417C36.7886 31.0994 36.907 31.6617 37.0162 32.2286C37.1254 32.7863 37.2256 33.3303 37.3166 33.8606C37.3439 34.0069 37.3757 34.0983 37.4122 34.1349C37.4577 34.1714 37.5214 34.1897 37.6033 34.1897L41.3036 18.9806Z" fill="black"/>
-<path d="M48.0401 18.9806C48.3678 18.9166 48.732 18.8754 49.1325 18.8572C49.5421 18.8389 49.8743 18.8297 50.1292 18.8297C50.4114 18.8297 50.7437 18.8389 51.126 18.8572C51.5174 18.8754 51.8815 18.9166 52.2183 18.9806V37.7143C51.8815 37.7783 51.5174 37.8194 51.126 37.8377C50.7437 37.856 50.4114 37.8652 50.1292 37.8652C49.8743 37.8652 49.5421 37.856 49.1325 37.8377C48.732 37.8194 48.3678 37.7783 48.0401 37.7143V18.9806Z" fill="black"/>
-<path d="M55.2672 36.0823C55.3218 35.488 55.5039 34.9029 55.8134 34.3269C56.132 33.7509 56.4915 33.2892 56.892 32.9417C57.6658 33.408 58.5396 33.824 59.5136 34.1897C60.4876 34.5554 61.4571 34.7383 62.4219 34.7383C63.2594 34.7383 63.8693 34.5417 64.2516 34.1486C64.6339 33.7463 64.8251 33.3029 64.8251 32.8183C64.8251 32.4709 64.7113 32.1052 64.4837 31.7212C64.2652 31.328 63.7691 30.9714 62.9954 30.6514L59.7048 29.2663C58.576 28.7909 57.643 28.16 56.9057 27.3737C56.1775 26.5874 55.8134 25.5452 55.8134 24.2469C55.8134 23.1223 56.1047 22.1349 56.6872 21.2846C57.2698 20.4343 58.0572 19.7714 59.0494 19.296C60.0507 18.8206 61.1658 18.5829 62.3946 18.5829C63.669 18.5829 64.866 18.7474 65.9857 19.0766C67.1053 19.4057 68.0201 19.7577 68.7301 20.1326C68.6937 20.7269 68.5481 21.3074 68.2932 21.8743C68.0383 22.432 67.7106 22.8983 67.3101 23.2732C66.6092 22.9349 65.799 22.6286 64.8797 22.3543C63.9603 22.08 63.1365 21.9429 62.4083 21.9429C61.5981 21.9429 61.0065 22.1303 60.6333 22.5052C60.2691 22.88 60.0871 23.2777 60.0871 23.6983C60.0871 24.0823 60.2145 24.4206 60.4694 24.7132C60.7334 24.9966 61.1703 25.2663 61.7802 25.5223L65.1254 26.9212C65.9902 27.2777 66.7275 27.7257 67.3374 28.2652C67.9564 28.7954 68.4252 29.4034 68.7438 30.0892C69.0715 30.7657 69.2353 31.5017 69.2353 32.2972C69.2353 33.3943 68.9713 34.3817 68.4434 35.2594C67.9245 36.1372 67.1371 36.832 66.0812 37.344C65.0344 37.856 63.7191 38.112 62.1352 38.112C61.0247 38.112 59.8504 37.9383 58.6125 37.5909C57.3836 37.2343 56.2685 36.7314 55.2672 36.0823Z" fill="black"/>
-<path d="M76.7523 18.9806C77.0891 18.9349 77.4896 18.8983 77.9539 18.8709C78.4181 18.8434 78.8232 18.8297 79.1691 18.8297C79.5059 18.8297 79.9064 18.8434 80.3706 18.8709C80.844 18.8983 81.2445 18.944 81.5722 19.008L87.4844 37.44C87.1931 37.6046 86.8199 37.728 86.3648 37.8103C85.9096 37.9017 85.4818 37.9474 85.0813 37.9474C84.4259 37.9474 83.9116 37.7966 83.5384 37.4949C83.1652 37.184 82.8511 36.5806 82.5963 35.6846L80.5072 28.3749C80.2887 27.5977 80.0384 26.7017 79.7562 25.6869C79.4831 24.672 79.2374 23.7212 79.0189 22.8343H78.855C78.7185 23.5749 78.5182 24.4252 78.2543 25.3852C77.9994 26.336 77.7673 27.168 77.5579 27.8812L74.6359 37.7417C74.3811 37.8057 74.1034 37.8469 73.803 37.8652C73.5027 37.8834 73.1932 37.8926 72.8746 37.8926C72.556 37.8926 72.201 37.8697 71.8095 37.824C71.4181 37.7783 71.0995 37.7097 70.8538 37.6183L70.7036 37.3989L76.7523 18.9806ZM76.9981 33.7097C76.8707 33.7097 76.7159 33.7097 76.5339 33.7097C76.3518 33.7006 76.1697 33.696 75.9877 33.696C75.8147 33.6869 75.6645 33.6823 75.5371 33.6823H73.3661L74.6496 30.4046H76.5475C76.6749 30.4046 76.8251 30.4046 76.9981 30.4046C77.171 30.3954 77.344 30.3909 77.5169 30.3909C77.6899 30.3817 77.8355 30.3772 77.9539 30.3772H80.0429C80.1704 30.3772 80.3206 30.3817 80.4935 30.3909C80.6665 30.3909 80.8394 30.3954 81.0124 30.4046C81.1853 30.4046 81.3355 30.4046 81.463 30.4046H83.4292L84.4805 33.6823H82.3232C82.1957 33.6823 82.041 33.6869 81.8589 33.696C81.6769 33.696 81.4948 33.7006 81.3128 33.7097C81.1398 33.7097 80.9896 33.7097 80.8622 33.7097H76.9981Z" fill="black"/>
-<path d="M88.069 19.2274C88.3876 19.0903 88.7426 18.976 89.134 18.8846C89.5254 18.7932 89.9077 18.7474 90.2809 18.7474C91.0092 18.7474 91.5371 18.9074 91.8648 19.2274C92.2016 19.5383 92.4383 20.1417 92.5748 21.0377L93.8037 28.4297C93.9038 29.0057 94.004 29.632 94.1041 30.3086C94.2042 30.9852 94.2952 31.6389 94.3772 32.2697C94.4682 32.8914 94.5365 33.4217 94.582 33.8606C94.6002 34.0343 94.6229 34.1394 94.6502 34.176C94.6867 34.2034 94.7504 34.2172 94.8414 34.2172L97.2036 19.3509C97.6132 19.2777 98.0592 19.2274 98.5417 19.2C99.0241 19.1634 99.4656 19.1452 99.8661 19.1452C100.294 19.1452 100.745 19.1634 101.218 19.2C101.7 19.2274 102.137 19.2777 102.529 19.3509L104.713 33.8606C104.741 34.0343 104.772 34.1394 104.809 34.176C104.854 34.2034 104.918 34.2172 105 34.2172C105.055 33.7052 105.127 33.1109 105.218 32.4343C105.31 31.7577 105.41 31.0629 105.519 30.3497C105.628 29.6366 105.733 28.9829 105.833 28.3886L107.458 18.9806C107.767 18.9166 108.086 18.8754 108.414 18.8572C108.741 18.8389 109.046 18.8297 109.328 18.8297C109.647 18.8297 109.984 18.8526 110.339 18.8983C110.694 18.944 111.012 19.0126 111.295 19.104L111.499 19.3509L107.84 37.6869C107.367 37.7417 106.789 37.7829 106.106 37.8103C105.432 37.8469 104.823 37.8652 104.276 37.8652C103.657 37.8652 103.111 37.76 102.638 37.5497C102.165 37.3394 101.864 36.8137 101.737 35.9726L100.754 29.8423C100.59 28.7909 100.43 27.6846 100.276 26.5234C100.13 25.3623 100.012 24.3292 99.9207 23.424H99.7159C99.6067 24.3292 99.4701 25.3623 99.3063 26.5234C99.1424 27.6754 98.9695 28.7817 98.7874 29.8423L97.4766 37.6869C96.976 37.7417 96.4071 37.7829 95.7699 37.8103C95.1418 37.8469 94.5456 37.8652 93.9812 37.8652C93.3167 37.8652 92.7478 37.76 92.2744 37.5497C91.8102 37.3394 91.4962 36.8092 91.3323 35.9589L88.069 19.2274Z" fill="black"/>
-<path d="M118.115 18.9806C118.451 18.9349 118.852 18.8983 119.316 18.8709C119.78 18.8434 120.185 18.8297 120.531 18.8297C120.868 18.8297 121.269 18.8434 121.733 18.8709C122.206 18.8983 122.607 18.944 122.934 19.008L128.847 37.44C128.555 37.6046 128.182 37.728 127.727 37.8103C127.272 37.9017 126.844 37.9474 126.444 37.9474C125.788 37.9474 125.274 37.7966 124.901 37.4949C124.527 37.184 124.213 36.5806 123.958 35.6846L121.869 28.3749C121.651 27.5977 121.401 26.7017 121.118 25.6869C120.845 24.672 120.6 23.7212 120.381 22.8343H120.217C120.081 23.5749 119.88 24.4252 119.617 25.3852C119.362 26.336 119.13 27.168 118.92 27.8812L115.998 37.7417C115.743 37.8057 115.466 37.8469 115.165 37.8652C114.865 37.8834 114.555 37.8926 114.237 37.8926C113.918 37.8926 113.563 37.8697 113.172 37.824C112.78 37.7783 112.462 37.7097 112.216 37.6183L112.066 37.3989L118.115 18.9806ZM118.36 33.7097C118.233 33.7097 118.078 33.7097 117.896 33.7097C117.714 33.7006 117.532 33.696 117.35 33.696C117.177 33.6869 117.027 33.6823 116.899 33.6823H114.728L116.012 30.4046H117.91C118.037 30.4046 118.187 30.4046 118.36 30.4046C118.533 30.3954 118.706 30.3909 118.879 30.3909C119.052 30.3817 119.198 30.3772 119.316 30.3772H121.405C121.533 30.3772 121.683 30.3817 121.856 30.3909C122.029 30.3909 122.202 30.3954 122.375 30.4046C122.548 30.4046 122.698 30.4046 122.825 30.4046H124.791L125.843 33.6823H123.685C123.558 33.6823 123.403 33.6869 123.221 33.696C123.039 33.696 122.857 33.7006 122.675 33.7097C122.502 33.7097 122.352 33.7097 122.224 33.7097H118.36Z" fill="black"/>
-<path d="M133.41 29.4172H137.588V37.7143C137.251 37.7783 136.892 37.8194 136.51 37.8377C136.136 37.856 135.809 37.8652 135.526 37.8652C135.272 37.8652 134.939 37.856 134.53 37.8377C134.12 37.8194 133.747 37.7783 133.41 37.7143V29.4172ZM138.954 18.9806C139.245 18.9166 139.532 18.8754 139.814 18.8572C140.096 18.8389 140.374 18.8297 140.647 18.8297C141.002 18.8297 141.361 18.8526 141.725 18.8983C142.09 18.944 142.413 19.0172 142.695 19.1177L142.859 19.3509L137.37 32.448H133.683L128.14 19.4743C128.513 19.264 128.922 19.0949 129.369 18.9669C129.815 18.8297 130.256 18.7612 130.693 18.7612C131.285 18.7612 131.74 18.8937 132.058 19.1589C132.377 19.424 132.655 19.8537 132.891 20.448L134.311 23.9863C134.53 24.5532 134.744 25.1612 134.953 25.8103C135.162 26.4594 135.358 27.1406 135.54 27.8537H135.69C135.809 27.4057 135.941 26.9486 136.086 26.4823C136.232 26.016 136.382 25.5589 136.537 25.1109C136.701 24.6629 136.86 24.2423 137.015 23.8492L138.954 18.9806Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9978 43.3281C20.5208 32.8971 19.5204 21.9194 15.1533 12.1223C23.8314 8.6219 33.1615 7.04718 42.5022 7.50735C42.9362 8.94698 43.3244 10.3982 43.667 11.8579L52.0194 13.536H26.0885V48L24.9804 43.2663C22.6597 43.4062 20.329 43.4278 17.9978 43.3281Z" fill="#E13833"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6248 38.3511C16.4941 29.4258 12.9019 20.9574 7.20915 13.925C14.6893 8.28785 23.296 4.34155 32.437 2.35731C33.2346 3.64812 33.9906 4.96162 34.7036 6.29676C27.8434 6.78015 21.0798 8.33535 14.6725 10.9201L13.4273 11.422L13.9753 12.6516C17.5633 20.7015 18.8148 29.6527 17.6248 38.3511Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8945 37.5263C12.4621 29.6575 6.98999 22.8108 0 17.7315C5.77315 10.3418 13.0689 4.29249 21.3877 0C22.4075 0.960982 23.3973 1.94993 24.3567 2.9658C17.8737 5.22498 11.7596 8.48472 6.24812 12.6389L4.91621 13.6421L5.9665 14.9398C11.251 21.4667 14.663 29.2764 15.8945 37.5263Z" fill="#E13833"/>
-<path d="M106.782 37.571C108.845 36.9354 111.436 36.0416 113.189 35.1346C110.17 36.4323 109.294 34.9161 109.188 34.3865C108.114 35.1346 107.105 35.8563 106.242 36.4786C105.675 36.8891 106.116 37.7763 106.782 37.571Z" fill="black"/>
-<path d="M132.938 27.1765L141.27 20.3638C141.27 20.3638 138.6 22.8002 138.534 24.0317C138.237 24.3826 132.938 27.1765 132.938 27.1765Z" fill="black"/>
-<path d="M132.964 25.1771C132.964 25.1771 139.048 21.0458 140.683 19.5098C138.646 21.0259 137.908 20.8736 137.38 20.6551C134.23 23.8596 132.964 25.1771 132.964 25.1771Z" fill="black"/>
-<path d="M121.106 34.9095C121.106 34.9095 126.84 31.5528 128.442 30.4405C127.862 30.8775 126.893 32.1222 126.834 32.9432L121.106 34.9095Z" fill="black"/>
-<path d="M152.133 21.6416C151.724 19.0265 151.328 16.5503 150.926 13.9682C150.676 14.1735 150.471 14.339 150.274 14.5045C148.791 15.7956 147.149 16.8284 145.304 17.5236C144.677 17.7553 144.111 17.7487 143.524 17.3779C142.39 16.6562 141.223 15.9876 140.07 15.2924C140.498 14.7296 140.979 14.5376 141.639 14.6171C142.548 14.723 143.471 14.7495 144.387 14.7561C144.664 14.7561 145.007 14.6568 145.218 14.478C148.428 11.7503 151.618 9.00272 154.809 6.24852C155.685 5.49376 156.7 5.11638 157.847 5.14286C158.843 5.16272 159.258 5.79831 158.836 6.70534C158.619 7.17541 158.263 7.61238 157.88 7.96328C156.944 8.82397 155.969 9.63169 154.993 10.446C154.723 10.6711 154.585 10.9029 154.558 11.2736C154.347 13.9947 154.09 16.7092 153.892 19.4303C153.846 20.0328 153.649 20.4764 153.148 20.814C152.818 21.0325 152.541 21.304 152.133 21.6416Z" fill="black"/>
-<path d="M143.32 10.2275C144.064 9.57872 144.585 8.75114 145.785 8.92989C146.991 9.11527 148.224 9.12189 149.45 9.20796C149.549 9.21458 149.654 9.23445 149.858 9.26093C148.949 10.0289 148.118 10.7373 147.274 11.4325C147.195 11.4987 147.037 11.5384 146.938 11.5053C145.818 11.1544 144.704 10.7903 143.59 10.4196C143.504 10.4063 143.445 10.3269 143.32 10.2275Z" fill="black"/>
-</svg>
diff --git a/public/assets/img/logo/white-logo.svg b/public/assets/img/logo/white-logo.svg
deleted file mode 100644
index 486d3ee..0000000
--- a/public/assets/img/logo/white-logo.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="159" height="48" viewBox="0 0 159 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M41.3036 18.9806C41.604 18.9074 41.9089 18.8663 42.2184 18.8572C42.5279 18.8389 42.8237 18.8297 43.1059 18.8297C43.3699 18.8297 43.6839 18.8526 44.048 18.8983C44.4212 18.9349 44.7489 19.0034 45.0311 19.104L45.195 19.3372L40.0337 37.7143C39.5513 37.7692 39.0142 37.8057 38.4226 37.824C37.8309 37.8514 37.2665 37.8652 36.7295 37.8652C35.9466 37.8652 35.3322 37.7372 34.8862 37.4812C34.4401 37.2252 34.1124 36.7223 33.9031 35.9726L29.3016 19.3509C29.6749 19.1863 30.0708 19.0446 30.4895 18.9257C30.9174 18.8069 31.3589 18.7474 31.814 18.7474C32.433 18.7474 32.9154 18.912 33.2613 19.2411C33.6072 19.5703 33.8712 20.096 34.0533 20.8183L36.2516 28.9097C36.3972 29.4309 36.5337 29.9749 36.6612 30.5417C36.7886 31.0994 36.907 31.6617 37.0162 32.2286C37.1254 32.7863 37.2256 33.3303 37.3166 33.8606C37.3439 34.0069 37.3757 34.0983 37.4122 34.1349C37.4577 34.1714 37.5214 34.1897 37.6033 34.1897L41.3036 18.9806Z" fill="white"/>
-<path d="M48.0401 18.9806C48.3678 18.9166 48.732 18.8754 49.1325 18.8572C49.5421 18.8389 49.8743 18.8297 50.1292 18.8297C50.4114 18.8297 50.7437 18.8389 51.126 18.8572C51.5174 18.8754 51.8815 18.9166 52.2183 18.9806V37.7143C51.8815 37.7783 51.5174 37.8194 51.126 37.8377C50.7437 37.856 50.4114 37.8652 50.1292 37.8652C49.8743 37.8652 49.5421 37.856 49.1325 37.8377C48.732 37.8194 48.3678 37.7783 48.0401 37.7143V18.9806Z" fill="white"/>
-<path d="M55.2672 36.0823C55.3218 35.488 55.5039 34.9029 55.8134 34.3269C56.132 33.7509 56.4915 33.2892 56.892 32.9417C57.6658 33.408 58.5396 33.824 59.5136 34.1897C60.4876 34.5554 61.4571 34.7383 62.4219 34.7383C63.2594 34.7383 63.8693 34.5417 64.2516 34.1486C64.6339 33.7463 64.8251 33.3029 64.8251 32.8183C64.8251 32.4709 64.7113 32.1052 64.4837 31.7212C64.2652 31.328 63.7691 30.9714 62.9954 30.6514L59.7048 29.2663C58.576 28.7909 57.643 28.16 56.9057 27.3737C56.1775 26.5874 55.8134 25.5452 55.8134 24.2469C55.8134 23.1223 56.1047 22.1349 56.6872 21.2846C57.2698 20.4343 58.0572 19.7714 59.0494 19.296C60.0507 18.8206 61.1658 18.5829 62.3946 18.5829C63.669 18.5829 64.866 18.7474 65.9857 19.0766C67.1053 19.4057 68.0201 19.7577 68.7301 20.1326C68.6937 20.7269 68.5481 21.3074 68.2932 21.8743C68.0383 22.432 67.7106 22.8983 67.3101 23.2732C66.6092 22.9349 65.799 22.6286 64.8797 22.3543C63.9603 22.08 63.1365 21.9429 62.4083 21.9429C61.5981 21.9429 61.0065 22.1303 60.6333 22.5052C60.2691 22.88 60.0871 23.2777 60.0871 23.6983C60.0871 24.0823 60.2145 24.4206 60.4694 24.7132C60.7334 24.9966 61.1703 25.2663 61.7802 25.5223L65.1255 26.9212C65.9902 27.2777 66.7275 27.7257 67.3374 28.2652C67.9564 28.7954 68.4252 29.4034 68.7438 30.0892C69.0715 30.7657 69.2353 31.5017 69.2353 32.2972C69.2353 33.3943 68.9713 34.3817 68.4434 35.2594C67.9245 36.1372 67.1371 36.832 66.0812 37.344C65.0344 37.856 63.7191 38.112 62.1352 38.112C61.0247 38.112 59.8504 37.9383 58.6124 37.5909C57.3836 37.2343 56.2685 36.7314 55.2672 36.0823Z" fill="white"/>
-<path d="M76.7523 18.9806C77.0891 18.9349 77.4896 18.8983 77.9539 18.8709C78.4181 18.8434 78.8232 18.8297 79.1691 18.8297C79.5059 18.8297 79.9064 18.8434 80.3707 18.8709C80.844 18.8983 81.2445 18.944 81.5722 19.008L87.4844 37.44C87.1931 37.6046 86.8199 37.728 86.3648 37.8103C85.9096 37.9017 85.4818 37.9474 85.0813 37.9474C84.4259 37.9474 83.9116 37.7966 83.5384 37.4949C83.1652 37.184 82.8511 36.5806 82.5963 35.6846L80.5072 28.3749C80.2887 27.5977 80.0384 26.7017 79.7562 25.6869C79.4831 24.672 79.2374 23.7212 79.0189 22.8343H78.855C78.7185 23.5749 78.5182 24.4252 78.2543 25.3852C77.9994 26.336 77.7673 27.168 77.5579 27.8812L74.6359 37.7417C74.3811 37.8057 74.1034 37.8469 73.803 37.8652C73.5026 37.8834 73.1932 37.8926 72.8746 37.8926C72.556 37.8926 72.201 37.8697 71.8095 37.824C71.4181 37.7783 71.0995 37.7097 70.8538 37.6183L70.7036 37.3989L76.7523 18.9806ZM76.9981 33.7097C76.8707 33.7097 76.7159 33.7097 76.5339 33.7097C76.3518 33.7006 76.1697 33.696 75.9877 33.696C75.8147 33.6869 75.6645 33.6823 75.5371 33.6823H73.3661L74.6496 30.4046H76.5475C76.6749 30.4046 76.8251 30.4046 76.9981 30.4046C77.171 30.3954 77.344 30.3909 77.5169 30.3909C77.6899 30.3817 77.8355 30.3772 77.9539 30.3772H80.0429C80.1704 30.3772 80.3206 30.3817 80.4935 30.3909C80.6665 30.3909 80.8394 30.3954 81.0124 30.4046C81.1853 30.4046 81.3355 30.4046 81.463 30.4046H83.4292L84.4805 33.6823H82.3232C82.1957 33.6823 82.041 33.6869 81.8589 33.696C81.6769 33.696 81.4948 33.7006 81.3128 33.7097C81.1398 33.7097 80.9896 33.7097 80.8622 33.7097H76.9981Z" fill="white"/>
-<path d="M88.069 19.2274C88.3876 19.0903 88.7426 18.976 89.134 18.8846C89.5254 18.7932 89.9077 18.7474 90.2809 18.7474C91.0092 18.7474 91.5371 18.9074 91.8648 19.2274C92.2016 19.5383 92.4383 20.1417 92.5748 21.0377L93.8037 28.4297C93.9038 29.0057 94.004 29.632 94.1041 30.3086C94.2042 30.9852 94.2952 31.6389 94.3772 32.2697C94.4682 32.8914 94.5365 33.4217 94.582 33.8606C94.6002 34.0343 94.6229 34.1394 94.6502 34.176C94.6867 34.2034 94.7504 34.2172 94.8414 34.2172L97.2036 19.3509C97.6132 19.2777 98.0592 19.2274 98.5417 19.2C99.0241 19.1634 99.4656 19.1452 99.8661 19.1452C100.294 19.1452 100.745 19.1634 101.218 19.2C101.7 19.2274 102.137 19.2777 102.529 19.3509L104.713 33.8606C104.741 34.0343 104.772 34.1394 104.809 34.176C104.854 34.2034 104.918 34.2172 105 34.2172C105.055 33.7052 105.127 33.1109 105.218 32.4343C105.31 31.7577 105.41 31.0629 105.519 30.3497C105.628 29.6366 105.733 28.9829 105.833 28.3886L107.458 18.9806C107.767 18.9166 108.086 18.8754 108.414 18.8572C108.741 18.8389 109.046 18.8297 109.328 18.8297C109.647 18.8297 109.984 18.8526 110.339 18.8983C110.694 18.944 111.012 19.0126 111.295 19.104L111.499 19.3509L107.84 37.6869C107.367 37.7417 106.789 37.7829 106.106 37.8103C105.432 37.8469 104.823 37.8652 104.276 37.8652C103.657 37.8652 103.111 37.76 102.638 37.5497C102.165 37.3394 101.864 36.8137 101.737 35.9726L100.754 29.8423C100.59 28.7909 100.43 27.6846 100.276 26.5234C100.13 25.3623 100.012 24.3292 99.9207 23.424H99.7159C99.6067 24.3292 99.4701 25.3623 99.3063 26.5234C99.1424 27.6754 98.9695 28.7817 98.7874 29.8423L97.4766 37.6869C96.976 37.7417 96.4071 37.7829 95.7699 37.8103C95.1418 37.8469 94.5456 37.8652 93.9812 37.8652C93.3167 37.8652 92.7478 37.76 92.2744 37.5497C91.8102 37.3394 91.4962 36.8092 91.3323 35.9589L88.069 19.2274Z" fill="white"/>
-<path d="M118.115 18.9806C118.451 18.9349 118.852 18.8983 119.316 18.8709C119.78 18.8434 120.185 18.8297 120.531 18.8297C120.868 18.8297 121.269 18.8434 121.733 18.8709C122.206 18.8983 122.607 18.944 122.934 19.008L128.847 37.44C128.555 37.6046 128.182 37.728 127.727 37.8103C127.272 37.9017 126.844 37.9474 126.444 37.9474C125.788 37.9474 125.274 37.7966 124.901 37.4949C124.527 37.184 124.213 36.5806 123.958 35.6846L121.869 28.3749C121.651 27.5977 121.401 26.7017 121.118 25.6869C120.845 24.672 120.6 23.7212 120.381 22.8343H120.217C120.081 23.5749 119.88 24.4252 119.617 25.3852C119.362 26.336 119.13 27.168 118.92 27.8812L115.998 37.7417C115.743 37.8057 115.466 37.8469 115.165 37.8652C114.865 37.8834 114.555 37.8926 114.237 37.8926C113.918 37.8926 113.563 37.8697 113.172 37.824C112.78 37.7783 112.462 37.7097 112.216 37.6183L112.066 37.3989L118.115 18.9806ZM118.36 33.7097C118.233 33.7097 118.078 33.7097 117.896 33.7097C117.714 33.7006 117.532 33.696 117.35 33.696C117.177 33.6869 117.027 33.6823 116.899 33.6823H114.728L116.012 30.4046H117.91C118.037 30.4046 118.187 30.4046 118.36 30.4046C118.533 30.3954 118.706 30.3909 118.879 30.3909C119.052 30.3817 119.198 30.3772 119.316 30.3772H121.405C121.533 30.3772 121.683 30.3817 121.856 30.3909C122.029 30.3909 122.202 30.3954 122.375 30.4046C122.548 30.4046 122.698 30.4046 122.825 30.4046H124.791L125.843 33.6823H123.685C123.558 33.6823 123.403 33.6869 123.221 33.696C123.039 33.696 122.857 33.7006 122.675 33.7097C122.502 33.7097 122.352 33.7097 122.224 33.7097H118.36Z" fill="white"/>
-<path d="M133.41 29.4172H137.588V37.7143C137.251 37.7783 136.892 37.8194 136.51 37.8377C136.136 37.856 135.809 37.8652 135.526 37.8652C135.272 37.8652 134.939 37.856 134.53 37.8377C134.12 37.8194 133.747 37.7783 133.41 37.7143V29.4172ZM138.954 18.9806C139.245 18.9166 139.532 18.8754 139.814 18.8572C140.096 18.8389 140.374 18.8297 140.647 18.8297C141.002 18.8297 141.361 18.8526 141.725 18.8983C142.09 18.944 142.413 19.0172 142.695 19.1177L142.859 19.3509L137.37 32.448H133.683L128.14 19.4743C128.513 19.264 128.922 19.0949 129.368 18.9669C129.815 18.8297 130.256 18.7612 130.693 18.7612C131.285 18.7612 131.74 18.8937 132.058 19.1589C132.377 19.424 132.655 19.8537 132.891 20.448L134.311 23.9863C134.53 24.5532 134.744 25.1612 134.953 25.8103C135.162 26.4594 135.358 27.1406 135.54 27.8537H135.69C135.809 27.4057 135.941 26.9486 136.086 26.4823C136.232 26.016 136.382 25.5589 136.537 25.1109C136.701 24.6629 136.86 24.2423 137.015 23.8492L138.954 18.9806Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9978 43.3281C20.5208 32.8971 19.5204 21.9194 15.1533 12.1223C23.8314 8.6219 33.1615 7.04718 42.5022 7.50735C42.9362 8.94698 43.3244 10.3982 43.667 11.8579L52.0194 13.536H26.0885V48L24.9804 43.2663C22.6597 43.4062 20.329 43.4278 17.9978 43.3281Z" fill="#E13833"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6248 38.3511C16.4941 29.4258 12.9019 20.9574 7.20915 13.925C14.6893 8.28785 23.296 4.34155 32.437 2.35731C33.2346 3.64812 33.9906 4.96162 34.7036 6.29676C27.8434 6.78015 21.0798 8.33535 14.6725 10.9201L13.4273 11.422L13.9753 12.6516C17.5633 20.7015 18.8148 29.6527 17.6248 38.3511Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8945 37.5263C12.4621 29.6575 6.98999 22.8108 0 17.7315C5.77315 10.3418 13.0689 4.29249 21.3877 0C22.4075 0.960982 23.3973 1.94993 24.3567 2.9658C17.8737 5.22498 11.7596 8.48472 6.24812 12.6389L4.91621 13.6421L5.9665 14.9398C11.251 21.4667 14.663 29.2764 15.8945 37.5263Z" fill="#E13833"/>
-<path d="M106.782 37.571C108.845 36.9354 111.436 36.0416 113.189 35.1346C110.17 36.4323 109.294 34.9161 109.188 34.3865C108.114 35.1346 107.105 35.8563 106.242 36.4786C105.675 36.8891 106.116 37.7763 106.782 37.571Z" fill="white"/>
-<path d="M132.938 27.1765L141.27 20.3638C141.27 20.3638 138.6 22.8002 138.534 24.0317C138.237 24.3826 132.938 27.1765 132.938 27.1765Z" fill="white"/>
-<path d="M132.964 25.1771C132.964 25.1771 139.048 21.0458 140.683 19.5098C138.646 21.0259 137.908 20.8736 137.38 20.6551C134.23 23.8596 132.964 25.1771 132.964 25.1771Z" fill="white"/>
-<path d="M121.106 34.9095C121.106 34.9095 126.84 31.5528 128.442 30.4405C127.862 30.8775 126.893 32.1222 126.834 32.9432L121.106 34.9095Z" fill="white"/>
-<path d="M152.133 21.6416C151.724 19.0265 151.328 16.5503 150.926 13.9682C150.676 14.1735 150.471 14.339 150.274 14.5045C148.791 15.7956 147.149 16.8284 145.304 17.5236C144.677 17.7553 144.111 17.7487 143.524 17.3779C142.39 16.6562 141.223 15.9876 140.07 15.2924C140.498 14.7296 140.979 14.5376 141.639 14.6171C142.548 14.723 143.471 14.7495 144.387 14.7561C144.664 14.7561 145.007 14.6568 145.218 14.478C148.428 11.7503 151.618 9.00272 154.809 6.24852C155.685 5.49376 156.701 5.11638 157.847 5.14286C158.843 5.16272 159.258 5.79831 158.836 6.70534C158.619 7.17541 158.263 7.61238 157.88 7.96328C156.944 8.82397 155.969 9.63169 154.993 10.446C154.723 10.6711 154.585 10.9029 154.558 11.2736C154.347 13.9947 154.09 16.7092 153.892 19.4303C153.846 20.0328 153.649 20.4764 153.148 20.814C152.818 21.0325 152.541 21.304 152.133 21.6416Z" fill="white"/>
-<path d="M143.32 10.2275C144.064 9.57872 144.585 8.75114 145.785 8.92989C146.991 9.11527 148.224 9.12189 149.45 9.20796C149.549 9.21458 149.654 9.23445 149.858 9.26093C148.949 10.0289 148.118 10.7373 147.274 11.4325C147.195 11.4987 147.037 11.5384 146.938 11.5053C145.818 11.1544 144.704 10.7903 143.59 10.4196C143.504 10.4063 143.445 10.3269 143.32 10.2275Z" fill="white"/>
-</svg>
diff --git a/public/assets/scss/_about.scss b/public/assets/scss/_about.scss
deleted file mode 100644
index f5745b9..0000000
--- a/public/assets/scss/_about.scss
+++ /dev/null
@@ -1,280 +0,0 @@
-.about-wrapper {
-
-    .about-image {
-        max-width: 375px;
-        position: relative;
-        z-index: 9;
-
-        @include breakpoint (max-xxl) {
-            max-width: initial;
-        }
-        
-        img {
-            @include imgw;
-            border-radius: 16px;
-        }
-
-        .about-image-2 {
-            position: absolute;
-            bottom: -170px;
-            right: -238px;
-
-             @include breakpoint (max-xxl) {
-               max-width: 250px;
-               right: 0;
-               bottom: 0;
-            }
-        }
-
-        .bg-shape {
-            position: absolute;
-            z-index: -1;
-            top: 0;
-            left: 0;
-            right: 0;
-
-             @include breakpoint (max-xxl) {
-               display: none;
-            }
-
-            img {
-                width: initial;
-                height: initial;
-            }
-        }
-
-        .plane-shape {
-            position: absolute;
-            left: -38px;
-            bottom: -163px;
-            z-index: -1;
-
-            @include breakpoint (max-xxl) {
-               display: none;
-            }
-
-             img {
-                width: initial;
-                height: initial;
-            }
-        }
-
-        .top-shape {
-            position: absolute;
-            right: -200px;
-            top: 0;
-
-            @include breakpoint (max-xxl) {
-               display: none;
-            }
-
-            img {
-                width: initial;
-                height: initial;
-            }
-        }
-    }
-
-    .about-content {
-        .text {
-            margin-top: 24px;
-            padding-left: 40px;
-            border-left: 3px solid $border-color-2;
-            margin-bottom: 30px;
-
-             @include breakpoint (max-xxl) {
-               border-left: none;
-               padding-left: 0;
-            }
-        }
-
-        .about-item {
-            @include flex;
-            justify-content: space-between;
-            border-top: 1px solid rgba(203, 204, 207, 0.24);
-            padding-top: 24px;
-
-             @include breakpoint (max-lg) {
-              flex-wrap: wrap;
-              gap: 30px;
-            }
-
-            .content {
-                span {
-                    font-size: 20px;
-                    font-weight: 500;
-                    color: $header-color;
-                    display: inline-block;
-                    margin-bottom: 5px;
-
-                    img {
-                        margin-right: 8px;
-                    }
-                }
-            }
-        }
-
-        .list {
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding: 24px 0 32px;
-            margin-bottom: 48px;
-
-            @include breakpoint (max-xxl) {
-               margin-bottom: 30px;
-               padding: 24px 0 30px;
-            }
-
-            li {
-                &:not(:last-child) {
-                    margin-bottom: 10px;
-                }
-
-                @include breakpoint (max-xxl) {
-                   font-size: 14px;
-                }
-
-                i {
-                    color: $theme-color-2;
-                    margin-right: 8px;
-                }
-            }
-        }
-    }
-}
-
-.about-section {
-    position: relative;
-    z-index: 9;
-
-    .top-shape {
-        position: absolute;
-        right: 0;
-        top: -50px;
-        z-index: -1;
-
-        @include breakpoint (max-xxl) {
-              display: none;
-          }
-    }
-}
-
-.about-wrapper-3 {
-
-    .about-content {
-        .text {
-            margin-top: 20px;
-            max-width: 616px;
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding-bottom: 24px;
-            margin-bottom: 30px;
-        }
-
-        .about-list-item {
-           display: flex;
-           gap: 32px;
-
-           @include breakpoint (max-xxl) {
-             flex-wrap: wrap;
-             gap: 25px;
-           }
-
-            .loading-box {
-                height: 256px;
-                width: 214px;
-                border-radius: 16px;
-                position: relative;
-                text-align: center;
-
-                .loading-boxs {
-                    height: 200px;
-                    width: 200px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background: #0a4ebd;
-                    border-radius: 16px;
-
-                    .circle-bar {
-                      position: relative;
-
-                    strong {
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        font-size: 28px;
-                        font-weight: bold;
-                        color: $white;
-                    }
-                }
-            }
-
-            h6 {
-                color: $white;
-                font-weight: 500;
-                font-size: 14px;
-            }
-           }
-
-           .list-item {
-
-             .list {
-                 margin-bottom: 48px;
-
-                    li {
-                        font-size: 18px;
-                        font-weight: 500;
-                        color: $header-color;
-                        font-family: $heading-font;
-
-                        @include breakpoint (max-xxl) {
-                            font-size: 16px;
-                        }
-
-                        &:not(:last-child) {
-                            margin-bottom: 15px;
-                        }
-
-                        i {
-                            margin-right: 8px;
-                            color: $theme-color-2;
-                        }
-                    }
-                }
-           }
-        }
-    }
-
-    .about-image {
-        img {
-            @include imgw;
-            border-radius: 8px;
-        }
-
-        &.tp-clip-anim {
-    width: 100%;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    overflow: hidden;
-    position: relative;
-    & .tp-anim-img {
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    & .mask {
-        background-size: cover;
-        background-position: center;
-        transform: scale(1.005);
-    }
-    >* {
-        grid-area: 1 / 1 / 2 / 2;
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
-    }
-       }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_animation.scss b/public/assets/scss/_animation.scss
deleted file mode 100644
index 538c28f..0000000
--- a/public/assets/scss/_animation.scss
+++ /dev/null
@@ -1,915 +0,0 @@
-
-//>>>>> Video Animation Start <<<<<//
-@-webkit-keyframes rippleOne {
-    70% {
-        -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
-        box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
-        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
-    }
-}
-
-@keyframes rippleOne {
-    70% {
-        -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
-        box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
-        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
-    }
-}
-//>>>>> Video Animation End <<<<<//
-
-
-
-//>>>>> Circle Animation Start <<<<<//
-@keyframes cir36 {
-    100%{
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes rounded {
-    50%{
-        transform: rotate(15deg);
-    }
-}
-
-//>>>>> Circle Animation End <<<<<//
-
-@keyframes up-down {
-	0% {
-	  transform: translateY(10px);
-	}
-  
-	100% {
-	  transform: translateY(-10px);
-	}
-  }
-
-
-//>>>>> Preloader Animation Start <<<<<//
- @-webkit-keyframes spinner {
-	to {
-		-webkit-transform: rotateZ(360deg);
-		transform: rotateZ(360deg);
-	}
-}
-
-@keyframes spinner {
-	to {
-		-webkit-transform: rotateZ(360deg);
-		transform: rotateZ(360deg);
-	}
-}
-
-@-webkit-keyframes letters-loading {
-	0%,
-	75%,
-	100% {
-		opacity: 0;
-		transform: rotateY(-90deg);
-	}
-	25%,
-	50% {
-		opacity: 1;
-		transform: rotateY(0deg);
-	}
-}
-
-@keyframes letters-loading {
-	0%,
-	75%,
-	100% {
-		opacity: 0;
-		transform: rotateY(-90deg);
-	}
-	25%,
-	50% {
-		opacity: 1;
-		transform: rotateY(0deg);
-	}
-}
-
-//>>>>> Preloader Animation Start <<<<<//
-@keyframes loaderspin {
-	0% {
-	  transform: translate(-50%, -50%) rotate(0deg);
-	}
-	100% {
-	  transform: translate(-50%, -50%) rotate(360deg);
-	}
-}
-
-
-@keyframes tpswing{
-	0% {
-    -webkit-transform: rotate(20deg);
-    -ms-transform:rotate(20deg);
-    transform: rotate(20deg);
-	}
-    100% { 
-      -webkit-transform: rotate(0deg);
-      -ms-transform:rotate(0deg);
-      transform: rotate(0deg);
-	}
-}
-
-
-@keyframes width {
-	0% {
-	  width: 0%;
-	}
-	100% {
-	  width: 100%;
-	}
-}
-
-@-webkit-keyframes width {
-	0% {
-		width: 0%;
-	  }
-	  100% {
-		width: 100%;
-	}
-}
-
-@-webkit-keyframes loaderspin {
-0% {
-	transform: translate(-50%, -50%) rotate(0deg);
-}
-100% {
-	transform: translate(-50%, -50%) rotate(360deg);
-}
-}
-
-@keyframes loaderpulse {
-0% {
-	transform: scale(1);
-}
-100% {
-	transform: scale(1.2);
-}
-}
-//>>>>> Preloader Animation End <<<<<//
-
-//animation
-@keyframes rounded {
-    50%{
-        transform: rotate(20deg);
-    }
-}
-
-@keyframes cir36 {
-	100% {
-			  transform: rotate(360deg);
-	}
-}
-
-.float-bob-y {
-	-webkit-animation-name: float-bob-y;
-	animation-name: float-bob-y;
-	-webkit-animation-duration: 3s;
-	animation-duration: 3s;
-	-webkit-animation-iteration-count: infinite;
-	animation-iteration-count: infinite;
-	-webkit-animation-timing-function: linear;
-	animation-timing-function: linear;
-}
-  
-  @-webkit-keyframes float-bob-y {
-	0% {
-	  -webkit-transform: translateY(-30px);
-	  transform: translateY(-30px);
-	}
-	50% {
-	  -webkit-transform: translateY(-10px);
-	  transform: translateY(-10px);
-	}
-	100% {
-	  -webkit-transform: translateY(-30px);
-	  transform: translateY(-30px);
-	}
-}
-
-  @keyframes float-bob-y {
-	0% {
-	  -webkit-transform: translateY(-30px);
-	  transform: translateY(-30px);
-	}
-	50% {
-	  -webkit-transform: translateY(-10px);
-	  transform: translateY(-10px);
-	}
-	100% {
-	  -webkit-transform: translateY(-30px);
-	  transform: translateY(-30px);
-	}
-}
-  
-.float-bob-x {
-	-webkit-animation-name: float-bob-x;
-	animation-name: float-bob-x;
-	-webkit-animation-duration: 3s;
-	animation-duration: 3s;
-	-webkit-animation-iteration-count: infinite;
-	animation-iteration-count: infinite;
-	-webkit-animation-timing-function: linear;
-	animation-timing-function: linear;
-}
-  
-  @-webkit-keyframes float-bob-x {
-	0% {
-	  -webkit-transform: translateX(-0px);
-	  transform: translateX(30px);
-	}
-	50% {
-	  -webkit-transform: translateX(10px);
-	  transform: translateX(10px);
-	}
-	100% {
-	  -webkit-transform: translateX(30px);
-	  transform: translateX(30px);
-	}
-}
-
-  @keyframes float-bob-x {
-	0% {
-	  -webkit-transform: translateX(30px);
-	  transform: translateX(30px);
-	}
-	50% {
-	  -webkit-transform: translateX(10px);
-	  transform: translateX(10px);
-	}
-	100% {
-	  -webkit-transform: translateX(30px);
-	  transform: translateX(30px);
-	}
-}
-
-@keyframes bounce-x {
-	0% {
-	  -webkit-transform: translateX(0);
-			  transform: translateX(0);
-	}
-	50% {
-	  -webkit-transform: translateX(30px);
-			  transform: translateX(30px);
-	}
-	100% {
-	  -webkit-transform: translateX(0);
-			  transform: translateX(0);
-	}
-}
-
-.bounce-x {
-	-webkit-animation: bounce-x 7s infinite linear;
-	animation: bounce-x 7s infinite linear;
-}
-
-@keyframes criss-cross-left {
-	0% {
-	  left: -20px;
-	}
-	50% {
-	  left: 50%;
-	  width: 20px;
-	  height: 20px;
-	}
-	100% {
-	  left: 50%;
-	  width: 375px;
-	  height: 375px;
-	}
-  }
-  @keyframes criss-cross-right {
-	0% {
-	  right: -20px;
-	}
-	50% {
-	  right: 50%;
-	  width: 20px;
-	  height: 20px;
-	}
-	100% {
-	  right: 50%;
-	  width: 375px;
-	  height: 375px;
-	}
-  }
-
-@keyframes rotated2 {
-	0% {
-	  transform: rotate(0);
-	}
-	100% {
-	  transform: rotate(-360deg);
-	}
-}
-
-@keyframes wave {
-	0% {transform: translateX(0);}
-	50% {transform: translateX(-25%);}
-	100% {transform: translateX(-50%);}
-}
-
-@keyframes zoom {
-    0%{
-        transform:scale(.5);
-    }
-    50%{
-        transform: scale(1);
-    }
-    100%{
-        transform: scale( .5);     
-    }
-}
-
-@keyframes translateY2 {
-	0% {
-    -webkit-transform: translateY(-30px);
-    -moz-transform: translateY(-30px);
-    -ms-transform: translateY(-30px);
-    -o-transform: translateY(-30px);
-    transform: translateY(-30px);
-  }
-  100% {
-    -webkit-transform: translateY(20px);
-    -moz-transform: translateY(20px);
-    -ms-transform: translateY(20px);
-    -o-transform: translateY(20px);
-    transform: translateY(20px);
-  }
-}
-
-@keyframes translateX2{
-	0% {
-    -webkit-transform: translateX(-30px);
-    -moz-transform: translateX(-30px);
-    -ms-transform: translateX(-30px);
-    -o-transform: translateX(-30px);
-    transform: translateX(-30px);
-  }
-  100% {
-    -webkit-transform: translatXY(20px);
-    -moz-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    -o-transform: translateX(20px);
-    transform: translateX(20px);
-  }
-}
-
-@keyframes moving {
-    0% {
-  
-      transform: translatey(0px);
-    }
-    20%{
-        transform: translateX(-50px);
-    }
-    50% {
-      transform: translatey(-40px);
-    }
-  
-    100% {
-      transform: translatey(0px);
-    }
-  }
-
-
-  /*img-animation**********************/
-.img-custom-anim-right {
-	animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
-	opacity: 0;
-}
-
-@keyframes img-anim-right {
-	0% {
-		transform: translateX(5%);
-		clip-path: inset(0 0 0 100%);
-		opacity: 0;
-	}
-
-	100% {
-		transform: translateX(0);
-		clip-path: inset(0 0 0 0);
-		opacity: 1;
-	}
-}
-
-.img-custom-anim-left {
-	animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
-	opacity: 0;
-}
-
-@keyframes img-anim-left {
-	0% {
-		transform: translateX(-5%);
-		clip-path: inset(0 100% 0 0);
-		opacity: 0;
-	}
-
-	100% {
-		transform: translateX(0);
-		clip-path: inset(0 0 0 0);
-		opacity: 1;
-	}
-}
-
-.img-custom-anim-top {
-	animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
-	opacity: 0;
-}
-
-@keyframes img-anim-top {
-	0% {
-		transform: translateY(-5%);
-		clip-path: inset(0 0 100% 0);
-		opacity: 0;
-	}
-
-	100% {
-		transform: translateY(0);
-		clip-path: inset(0 0 0 0);
-		opacity: 1;
-	}
-}
-
-@keyframes slideInLeft {
-	to {
-	  opacity: 1;
-	  transform: translateX(0);
-	}
-  }
-
-  @keyframes slideInRight {
-	to {
-	  opacity: 1;
-	  transform: translateX(0);
-	}
-  }
-  @keyframes shine {
-	0% {
-	  left: -100%;
-	}
-	50% {
-	  left: 100%;
-	}
-	100% {
-	  left: 100%;
-	}
-  }
-
- 
-  .animation-infinite {
-	animation: ShapeAnim 80s linear infinite;
-	height: 30px;
-	width: 100%;
-	background-repeat: repeat;
-	overflow: hidden;
-  }
-  
-
-  .img-custom-anim-bottom {
-	animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
-	opacity: 0;
-}
-
-@keyframes img-anim-bottom {
-    0% {
-      transform: translateY(5%);
-      clip-path: inset(100% 0 0 0);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      clip-path: inset(0 0 0 0);
-      opacity: 1;
-    }
-  }
-
-
-  @keyframes sparkle {
-	0% { opacity: 0; transform: scale(0.5); }
-	50% { opacity: 1; transform: scale(1.5); }
-	100% { opacity: 0; transform: scale(0.5); }
-  }
-
-
-  @keyframes borderAnim {
-	0% {
-		width: 0;
-	}
-	100% {
-		width: 44px; 
-	}
-}
-
-@keyframes slideInLeft {
-	to {
-	  opacity: 1;
-	  transform: translateX(0);
-	}
-  }
-  
-  @keyframes slideInRight {
-	to {
-	  opacity: 1;
-	  transform: translateX(0);
-	}
-  }
-  @keyframes shine {
-	0% {
-	  left: -100%;
-	}
-	50% {
-	  left: 100%;
-	}
-	100% {
-	  left: 100%;
-	}
-  }
-
-
-  @keyframes strokeColorChange1 {
-	0% {
-	  -webkit-text-stroke-color: rgba(202, 210, 210, 0.10);
-	}
-	25% {
-	  -webkit-text-stroke-color: rgba(202, 210, 210, 0.10);
-	}
-	50% {
-	  -webkit-text-stroke-color: rgba(194, 223, 147, 0.10);
-	}
-	75% {
-	  -webkit-text-stroke-color: rgba(227, 87, 43, 0.10);
-	}
-	100% {
-		-webkit-text-stroke-color: rgba(194, 223, 147, 0.10);
-	}
-  }
-
-  @keyframes shake {
-  0%, 100% {
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  10%, 30%, 50%, 70%, 90% {
-    -webkit-transform: translateX(-5px);
-    -ms-transform: translateX(-5px);
-    transform: translateX(-5px);
-  }
-
-  20%, 40%, 60%, 80% {
-    -webkit-transform: translateX(5px);
-    -ms-transform: translateX(5px);
-    transform: translateX(5px);
-  }
-}
-
-
-@keyframes rotateBorder {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-// This is for Progress bar animation also has a js code
-@keyframes animate-positive {
-    0% {
-        width: 0;
-    }
-}
-
-@keyframes scroll {
-	0% {
-		transform: translateX(0);
-	}
-	100% {
-		transform: translateX(-100%);
-	}
-}
-
-@keyframes scrolly {
-	0% {
-		transform: translateY(0);
-	}
-	100% {
-		transform: translateY(-60%);
-	}
-}
-
-@keyframes scrolls {
-	0% {
-		transform: translateX(0);
-	}
-	100% {
-		transform: translateX(100%);
-	}
-}
-
-@keyframes scroll-left-to-right-loop {
-  0% {
-    transform: translateX(-50%);
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-
-@-webkit-keyframes zoomOut {
-    from {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
-        -webkit-transform: scale3d(.3, .3, .3);
-        transform: scale3d(.3, .3, .3);
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes zoomOut {
-    from {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
-        -webkit-transform: scale3d(.3, .3, .3);
-        transform: scale3d(.3, .3, .3);
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-.zoomOut {
-    -webkit-animation-name: zoomOut;
-    animation-name: zoomOut;
-}
-
-.img_left_animation {
-    animation: left-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
-    opacity: 0
-}
-@keyframes left-animation {
-    0% {
-        clip-path: inset(0 100% 0 0);
-        opacity: 0
-    }
-    100% {
-        clip-path: inset(0 0 0 0);
-        opacity: 1
-    }
-}
-
-.img_right_animation {
-    animation: right-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
-    opacity: 0
-}
-@keyframes right-animation {
-    0% {
-        clip-path: inset(0 0 0 100%);
-        opacity: 0
-    }
-    100% {
-        clip-path: inset(0 0 0 0);
-        opacity: 1
-    }
-}
-.img_top_animation {
-    animation: top-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
-    opacity: 0
-}
-@keyframes top-animation {
-    0% {
-        clip-path: inset(0 0 100% 0);
-        opacity: 0
-    }
-    100% {
-        clip-path: inset(0 0 0 0);
-        opacity: 1
-    }
-}
-.img_bottom_animation {
-    animation: bottom-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
-    opacity: 0
-}
-@keyframes bottom-animation {
-    0% {
-        clip-path: inset(100% 0 0 0);
-        opacity: 0
-    }
-    100% {
-        clip-path: inset(0 0 0 0);
-        opacity: 1
-    }
-}
-
-
-@keyframes circle {
-  0% {
-    transform: scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(30);
-    opacity: 0;
-  }
-}
-
-@keyframes icon-bounce {
-  0%, 100%, 20%, 50%, 80% {
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-  40% {
-    -webkit-transform: translateY(-10px);
-    transform: translateY(-10px);
-  }
-  60% {
-    -webkit-transform: translateY(-5px);
-    transform: translateY(-5px);
-  }
-}
-
-@-webkit-keyframes slideInLeft {
-    0% {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-@keyframes slideInLeft {
-    0% {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.slideInLeft {
-    -webkit-animation-name: slideInLeft;
-    animation-name: slideInLeft;
-}
-
-@-webkit-keyframes slideInRight {
-    0% {
-        -webkit-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-@keyframes slideInRight {
-    0% {
-        -webkit-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.slideInRight {
-    -webkit-animation-name: slideInRight;
-    animation-name: slideInRight;
-}
-
-@-webkit-keyframes slideInUp {
-    0% {
-        -webkit-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-@keyframes slideInUp {
-    0% {
-        -webkit-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.slideInUp {
-    -webkit-animation-name: slideInUp;
-    animation-name: slideInUp;
-}
-
-@-webkit-keyframes slideInDown {
-    0% {
-        -webkit-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-@keyframes slideInDown {
-    0% {
-        -webkit-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-        visibility: visible;
-    }
-
-    100% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.slideInDown {
-    -webkit-animation-name: slideInDown;
-    animation-name: slideInDown;
-}
-
-.zoom_in {
-    transform: scale(0.5);
-    
-}
-
-.fade_up,
-.fade_down,
-.zoom_in,
-.zoom_out {
-    opacity: 0;
-    transition: all 2s;
-}
-
-.show {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}    
-
-
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(.8, .8, .8);
-            transform: scale3d(.8, .8, .8);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
diff --git a/public/assets/scss/_brand.scss b/public/assets/scss/_brand.scss
deleted file mode 100644
index db08a03..0000000
--- a/public/assets/scss/_brand.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.brand-wrapper {
-
-    .brand-item {
-        border-top: 1px solid rgba(203, 204, 207, 0.72);
-        border-bottom: 1px solid rgba(203, 204, 207, 0.72);
-        text-align: center;
-        height: 116px;
-        position: relative;
-        
-         &::before {
-            @include before;
-            background-color: rgba(203, 204, 207, 0.72);
-            width: 1px;
-            left: 0;
-        }
-
-         &::after {
-            position: absolute;
-            content: "";
-            top: 0;
-            bottom: 0;
-            background-color: rgba(203, 204, 207, 0.72);
-            width: 1px;
-            right: 0;
-        }
-
-        .brand-image {
-            position: relative;
-            padding: 30px 0;
-
-            &::before {
-                @include before;
-                background-color: rgba(203, 204, 207, 0.72);
-                width: 1px;
-                left: 0;
-                height: 100px;
-
-                @include breakpoint (max-xl) {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    &.style-1 {
-
-        .brand-item {
-            height: 102px;
-
-            .brand-image {
-                text-align: center;
-                filter: grayscale(100%);
-                @include transition;
-                opacity: .4;
-
-                &:hover {
-                    filter: initial;
-                    opacity: 1;
-                }
-            }
-
-            .swiper-slide.swiper-slide-active{
-                .brand-image {
-                    filter: initial;
-                    opacity: 1;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_buttons.scss b/public/assets/scss/_buttons.scss
deleted file mode 100644
index 004806d..0000000
--- a/public/assets/scss/_buttons.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.theme-btn {
-    background: transparent;
-    color: $header-color;
-    display: inline-block;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 6px 6px 6px 24px;
-    border-radius: 55px;
-    line-height: 1;
-    text-transform: uppercase;
-    -webkit-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
-    position: relative;
-    z-index: 1;
-    font-family: "Space Grotesk", sans-serif;
-    border: 1px solid $border-color;
-
-    @include breakpoint (max-sm) {
-        padding: 2px 4px 2px 24px;
-    }
-
-    i {
-        width: 48px;
-        height: 48px;
-        line-height: 48px;
-        text-align: center;
-        background-color: $theme-color;
-        color: $white;
-        margin-left: 20px;
-        @include transition;
-        border-radius: 50%;
-    }
-
-    &:hover {
-        background-color: $theme-color;
-        color: $white;
-
-        i {
-            background-color: $white;
-            color: $header-color;
-        }
-    }
-}
-
-.link-btn {
-    color: $theme-color-2;
-    // text-transform: capitalize;
-    font-weight: 500;
-    font-family: "Space Grotesk", sans-serif;
-
-    i {
-        margin-left: 8px;
-    }
-
-    &:hover {
-        color: $theme-color;
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_contact.scss b/public/assets/scss/_contact.scss
deleted file mode 100644
index 54705ad..0000000
--- a/public/assets/scss/_contact.scss
+++ /dev/null
@@ -1,362 +0,0 @@
-.contact-wrapper-2 {
-    @include flex;
-    gap: 325px;
-
-    @include breakpoint (max-xxl) {
-        flex-wrap: wrap;
-        gap: 30px;
-    }
-
-    .contact-from-box {
-        padding: 60px 48px;
-        background-color: $theme-color-2;
-        border-radius: 24px;
-        width: 644px;
-
-        @include breakpoint (max-xxl) {
-           padding: 30px;
-        }
-
-        h3 {
-            color: $white;
-            font-size: 32px;
-            text-transform: uppercase;
-            margin-bottom: 30px;
-            text-align: center;
-
-            @include breakpoint (max-xxl) {
-               font-size: 25px;
-               margin-bottom: 20px;
-            }
-
-            @include breakpoint (max-sm) {
-               font-size: 20px;
-            }
-        }
-
-        .form-clt {
-
-             input,textarea {
-                width: 100%;
-                outline: none;
-                border: none;
-                background: transparent;
-                padding: 16px 0;
-                font-weight: 400;
-                font-size: 16px;
-                color: rgba(255, 255, 255, 0.7);
-                line-height: 1;
-                border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-
-                &::placeholder {
-                    color: rgba(255, 255, 255, 0.7);
-                }
-            }
-
-            .nice-select {
-                width: 100% !important;
-                padding: 0;
-                padding-bottom: 10px;
-                padding-top: 20px;
-                font-size: 16px;
-                // text-transform: capitalize;
-                border-radius: 0;
-                background-color: transparent;
-                border: none;
-                box-shadow: none;
-                font-size: 16px;
-                color: rgba(255, 255, 255, 0.7);
-                font-weight: 400;
-                width: initial;
-                border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-    
-                &::after {
-                    right: 0;
-                    width: 10px;
-                    height: 8px;
-                    border-bottom: 2px solid transparent;
-                    border-right: 2px solid transparent;
-                    margin-top: 0;
-                    background-color: rgba(255, 255, 255, 0.7);
-                    clip-path: polygon(100% 0, 49% 100%, 0 0);
-                    -webkit-transform: rotate(0eg);   
-                    transform: rotate(0deg); 
-                    top: 36%;
-                }
-    
-                .list {
-                    width: 100%;
-                    background-color: $bg-color;
-                    top: 60%;
-                    font-size: 16px;
-                    color: $header-color;
-                }
-    
-                .focus {
-                    background-color: transparent;
-                    font-weight: 400;
-                    color: $text-color;
-                }
-    
-                .option {
-                    border: none;
-    
-                    &:hover {
-                        background-color: transparent;
-                    }
-                }
-            }
-        }
-
-        .contact-btn {
-            margin-top: 48px;
-            text-align: center;
-            margin-bottom: 48px;
-
-            @include breakpoint (max-xxl) {
-              margin-top: 30px;
-               margin-bottom: 30px;
-            }
-
-            .theme-btn {
-                color: $white;
-
-                &:hover {
-                    border: 1px solid $theme-color;
-                }
-            }
-        }
-
-        h5 {
-            font-weight: 500;
-            color: $white;
-            margin-bottom: 10px;
-        }
-
-        h2 {
-            font-size: 40px;
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding-bottom: 10px;
-            margin-bottom: 5px;
-
-             @include breakpoint (max-xxl) {
-               font-size: 25px;
-            }
-
-            @include breakpoint (max-sm) {
-               font-size: 20px;
-            }
-
-            a {
-                 color: $white;
-            }
-        }
-
-        p {
-            color: rgba(255, 255, 255, 0.7);
-        }
-    }
-
-    .video-btn {
-        width: 88px;
-        height: 88px;
-        line-height: 88px;
-        text-align: center;
-        background-color: $theme-color;
-        color: $white;
-        position: relative;
-        font-size: 16px;
-        border-radius: 100px;
-        z-index: 999;
-        display: inline-block;
-
-         @include breakpoint (max-lg) {
-            margin-left: 30px;
-        }
-
-         @include breakpoint (max-sm) {
-            width: 70px;
-            height: 70px;
-            line-height: 70px;
-            margin-left: 15px;
-        }
-
-        &::before {
-            @include before;
-            width: 120px;
-            height: 120px;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            background: rgba(225, 56, 51, 0.24);
-            border-radius: 100%;
-            border: 2px solid $white;
-
-             @include breakpoint (max-sm) {
-                width: 100px;
-                height: 100px;
-            }
-        }
-    }
-}
-
-.contact-section-2 {
-    background-attachment: fixed;
-}
-
-.contact-from-wrapper {
-    background-color: $bg-color;
-    border-radius: 16px;
-    padding: 48px;
-
-     @include breakpoint (max-xxl) {
-        padding: 30px;
-    }
-
-    .form-clt {
-        position: relative;
-
-        span {
-            color: $header-color;
-            font-size: 18px;
-            font-weight: 500;
-            font-family: $heading-font;
-            margin-bottom: 10px;
-            display: inline-block;
-        }
-
-        input,textarea {
-            width: 100%;
-            border: none;
-            outline: none;
-            background: $white;
-            color: $text-color;
-            border-radius: 100px;
-            padding: 18px 20px;
-
-            @include breakpoint (max-md){
-                padding: 14px 20px;
-            }
-
-            @include breakpoint (max-sm){
-                padding: 12px 18px;
-            }
-
-            &::placeholder {
-                color: $text-color;
-            }
-        }
-
-        textarea {
-            padding-bottom: 100px;
-            resize: none;
-            border-radius: 40px;
-        }
-    }
-
-    .cheak-list-item {
-        margin-top: 30px;
-        margin-bottom: 48px;
-
-         @include breakpoint (max-xxl) {
-           margin-bottom: 30px;
-        }
-
-        .cheak-list {
-            @include flex;
-            gap: 80px;
-            margin-bottom: 24px;
-
-             @include breakpoint (max-xxl) {
-              flex-wrap: wrap;
-              gap: 22px;
-            } 
-
-            .form-check {
-                flex-basis: 200px;
-            }
-
-            .form-check-label {
-                font-size: 18px;
-                color: $header-color;
-                font-weight: 500;
-                font-family: $heading-font;
-            }
-            .form-check .form-check-input {
-                float: left;
-                transform: translateY(0px);
-                border-radius: 100px;
-                border: 1px solid $text-color;
-                background-color: $white;
-            }
-            .form-check .form-check-input:checked {
-                background-color: $theme-color-2;
-                border: 1px solid $theme-color-2;
-            }
-        }
-    }
-
-    .theme-btn {
-        width: 100%;
-
-        &.style-2 {
-            width: initial;
-        }
-    }
-}
-
-.contact-icon-item {
-    @include flex;
-    gap: 24px;
-    background-color: $bg-color;
-    border-radius: 16px;
-    padding: 30px;
-
-    @include breakpoint (max-lg) {
-        flex-wrap: wrap;
-    }
-
-    .icon {
-        width: 64px;
-        height: 64px;
-        line-height: 64px;
-        text-align: center;
-        border-radius: 100px;
-        background-color: $header-color;
-        color: $white;
-        @include transition;
-        font-size: 20px;
-    }
-
-    .content {
-
-        p {
-            margin-bottom: 5px;
-        }
-
-        h6 {
-            font-size: 18px;
-            font-weight: 500;
-            line-height: 144%;
-        }
-    }
-
-     &:hover {
-        .icon {
-            background-color: $theme-color;
-        }
-    }
-}
-
-.map-items {
-    .googpemap {
-        iframe {
-            width: 100%;
-            height: 724px;
-
-            @include breakpoint (max-sm){
-                height: 400px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_cta.scss b/public/assets/scss/_cta.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/public/assets/scss/_faq.scss b/public/assets/scss/_faq.scss
deleted file mode 100644
index efd0678..0000000
--- a/public/assets/scss/_faq.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-.faq-wrapper {
-
-    .faq-content {
-        .text {
-            max-width: 505px;
-            margin-top: 24px;
-            margin-bottom: 48px;
-        }
-    }
-
-    .faq-items {
-        position: relative;
-        z-index: 9;
-
-        .accordion {
-            .accordion-item {
-                border: none;
-
-            h5 {
-                button {
-                line-height: 1;
-                font-weight: 600;
-                padding: 29px 30px;
-                color: $header-color;
-
-                cursor: pointer;
-
-                    @include breakpoint(max-sm) {
-                        font-size: 18px;
-                        line-height: 1.6;
-                        padding: 22px 20px;
-                    }
-                }
-            }
-
-            .accordion-body {
-                padding: 20px 30px;
-                background-color: $white;
-                box-shadow: 8px 8px 32px 0 rgba(0, 72, 180, 0.08);
-                backdrop-filter: blur(5px);
-
-                p {
-                    font-size: 16px;
-                    line-height: 24px;
-                    font-weight: 400;
-
-                    @include breakpoint(max-sm) {
-                        width: 100%;
-                        font-size: 14px;
-                        line-height: 28px;
-                    }
-                }
-            }
-        }
-
-        .accordion-button {
-            background-color: $white;
-            color: $header-color;
-            box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
-            backdrop-filter: blur(5px);
-
-            &::after {
-                content: "\f324";
-                font-family: "Font Awesome 6 Pro";
-                background: transparent;
-                font-weight: 900;
-                transition: all 0.3s ease-in-out !important;
-                color: $theme-color-2;
-            }
-
-            &:not(.collapsed) {
-                background-color: $white;
-                box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
-                backdrop-filter: blur(5px);
-                color: $header-color;
-
-                &::after {
-                    content: "\f322";
-                    font-family: "Font Awesome 6 Pro";
-                    background: transparent;
-                    font-weight: 900;
-                    color: $theme-color;
-                    transform: rotate(0);
-                }
-            }
-         }
-      }
-    }
-}
-
-.faq-section {
-    border-top: 1px solid rgba(203, 204, 207, 0.24);
-}
\ No newline at end of file
diff --git a/public/assets/scss/_feature.scss b/public/assets/scss/_feature.scss
deleted file mode 100644
index e719e15..0000000
--- a/public/assets/scss/_feature.scss
+++ /dev/null
@@ -1,1036 +0,0 @@
-.feature-wrapper {
-
-    .feature-content {
-        .text {
-            color: $white;
-            opacity: 0.8;
-            margin-top: 24px;
-        }
-
-        .feature-list-item {
-            @include flex;
-            justify-content: space-between;
-            border-top: 1px solid rgba(203, 204, 207, 0.32);
-            padding-top: 30px;
-            margin-top: 24px;
-            margin-bottom: 48px;
-
-            @include breakpoint (max-xxl) {
-                gap: 10px;
-                margin-bottom: 30px;
-            }
-
-             @include breakpoint (max-lg) {
-                flex-wrap: wrap;
-                gap: 10px;
-            }
-
-            .list {
-                li {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: $white;
-
-                    @include breakpoint (max-xxl) {
-                        font-size: 14px;
-                    }
-
-                    &:not(:last-child) {
-                        margin-bottom: 10px;
-                    }
-
-                    i {
-                        width: 22px;
-                        height: 22px;
-                        line-height: 22px;
-                        text-align: center;
-                        border-radius: 50px;
-                        color: $theme-color-2;
-                        transform: rotate(-45deg);
-                        background-color: $white;
-                        margin-right: 8px;
-                    }
-                }
-            }
-        }
-
-        .theme-btn {
-            color: $white;
-
-            &:hover {
-                border: 1px solid $theme-color;
-            }
-        }
-    }
-
-    .feature-image {
-        margin-left: 30px;
-        position: relative;
-
-        h6 {
-            font-size: 16px;
-            font-weight: 500;
-            padding: 6.948px 10.423px;
-            border-radius: 83.381px;
-            background: rgba(255, 255, 255, 0.12);
-            backdrop-filter: blur(43.42761993408203px);
-            color: $white;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-
-            @include breakpoint (max-sm) {
-               font-size: 14px;
-            }
-        }
-
-        @include breakpoint (max-xxl) {
-            margin-left: 0;
-        }
-
-        img {
-            @include imgw;
-            animation: spin 15s linear infinite;
-        }
-    }
-}
-
-.feature-section {
-    margin: 0 20px;
-    border-radius: 32px;
-
-    @include breakpoint (max-sm) {
-        margin: 0 15px;
-    }
-}
-
-.video-section {
-    border-radius: 24px;
-    position: relative;
-    margin: 0 20px;
-    margin-bottom: 25px;
-    margin-top: 120px;
-
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 24px;
-        background: linear-gradient(
-        75deg,
-        #182960 -2.93%,
-        rgba(0, 72, 180, 0.24) 98.99%
-        );
-        z-index: 1; 
-        pointer-events: none;
-  }
-
-    .video-bg {
-        width: 100%;
-        height: 672px;
-        border-radius: 40px;
-        object-fit: cover;
-        position: relative;
-        border-radius: 24px;
-
-         @include breakpoint (max-xxl) {
-            height: 550px;
-        }
-
-        @include breakpoint (max-lg) {
-            height: 450px;
-        }
-
-        @include breakpoint (max-sm) {
-            height: 350px;
-        }
-    }
-
-     @include breakpoint (max-xxl) {
-        margin-bottom: 0;
-        overflow: hidden;
-        margin-top: 100px;
-    }
-
-     @include breakpoint (max-lg) {
-        margin-top: 80px;
-    }
-
-    .text-image {
-        position: absolute;
-        left: -10px;
-        right: -18px;
-        bottom: -30px;
-        z-index: -1;
-
-          @include breakpoint (max-xxl) {
-            display: none;
-        }
-
-        img{
-            @include imgw;
-        }
-    }
-
-    .text-image-2 {
-        position: absolute;
-        left: -11px;
-        right: -20px;
-        bottom: 0;
-        z-index: 9;
-
-        @include breakpoint (max-xxl) {
-            display: none;
-        }
-
-        img{
-            @include imgw;
-        }
-    }
-}
-
-.video-content {
-    position: absolute;
-    top: 172px;
-    z-index: 999;
-
-    h2 {
-        font-size: 100px;
-        font-weight: 700;
-        color: $white;
-        text-transform: uppercase;
-        border-left: 6px solid $theme-color-2;
-        padding-left: 30px;
-
-         @include breakpoint (max-xxl) {
-            font-size: 60px;
-        }
-
-         @include breakpoint (max-lg) {
-            font-size: 50px;
-        }
-
-         @include breakpoint (max-md) {
-            font-size: 40px;
-        }
-
-        @include breakpoint (max-sm) {
-            font-size: 30px;
-        }
-    }
-
-    .shape {
-        position: absolute;
-        z-index: -1;
-        left: -85px;
-        top: -27px;
-
-         @include breakpoint (max-xxxl) {
-            left: 0;
-        }
-
-         @include breakpoint (max-xxl) {
-            display: none;
-        }
-    }
-}
-
-.counter-section {
-    margin: 0 20px;
-    position: relative;
-    border-radius: 32px;
-    background-attachment: fixed;
-
-    @include breakpoint (max-sm) {
-        margin: 0 15px;
-    }
-
-    .shape {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-
-         @include breakpoint (max-xxxl) {
-           display: none;
-        }
-    }
-}
-
-.counter-wrapper {
-    border-top: 1px solid rgba(203, 204, 207, 0.24);
-    margin-top: 48px;
-
-    @include breakpoint (max-xxl) {
-       margin-top: 30px;
-    }
-
-    .counter-main-item {
-        @include flex;
-        justify-content: space-between;
-
-        @include breakpoint (max-xxl) {
-           padding-bottom: 30px;
-        }
-
-         @include breakpoint (max-lg) {
-           flex-wrap: wrap;
-        }
-        
-        .counter-item {
-            text-align: center;
-            padding-top: 48px;
-            padding-bottom: 48px;
-            width: 330px;
-
-             @include breakpoint (max-xxl) {
-                width: initial;
-                padding-top: 30px;
-                padding-bottom: 0;
-            }
-
-            &.style-2 {
-                border-right: 1px solid rgba(203, 204, 207, 0.24);
-                padding-right: 9px;
-                padding-left: 10px;
-
-                @include breakpoint (max-xxl) {
-                    border-right: none;
-                    padding-left: 0;
-                    padding-right: 0;
-                }
-            }
-
-            h2 {
-                -webkit-text-stroke-width: 2px;
-                -webkit-text-stroke-color: $white;
-                font-size: 72px;
-                color: transparent;
-                @include transition;
-            }
-
-            h5 {
-                color: $white;
-                margin-bottom: 100px;
-
-                @include breakpoint (max-xxl) {
-                    margin-bottom: 30px;
-                }
-            }
-
-            p {
-                opacity: 0.88;
-                color: $white;
-                max-width: 330px;
-
-                @include breakpoint (max-xxl) {
-                    max-width: initial;
-                    font-size: 14px;
-                }
-
-                 @include breakpoint (max-lg) {
-                    max-width: 330px;
-                }
-            }
-
-            &:hover {
-                h2 {
-                    color: $white !important;
-                    -webkit-text-stroke: initial !important;
-                }
-            }
-        }
-    }
-}
-
-.visa-consultency-item {
-    text-align: center;
-
-    .image {
-        margin-bottom: 24px;
-         transition: 0.3s;
-    }
-
-    h6 {
-        text-transform: uppercase;
-        font-weight: 500;
-        color: $theme-color;
-        margin-top: 10px;
-    }
-
-    &:hover {
-        .image {
-            img {
-                animation: zoomIn 0.5s linear;
-            }
-        }
-    }
-}
-
-.feature-wrapper-2 {
-
-    .feature-image {
-        img {
-            @include imgw;
-        }
-
-         &.tp-clip-anim {
-            width: 100%;
-            display: grid;
-            align-items: center;
-            justify-items: center;
-            overflow: hidden;
-            position: relative;
-            & .tp-anim-img {
-                opacity: 0;
-                width: 100%;
-                height: 100%;
-            }
-
-            & .mask {
-                background-size: cover;
-                background-position: center;
-                transform: scale(1.005);
-            }
-            >* {
-                grid-area: 1 / 1 / 2 / 2;
-                width: 100%;
-                height: 100%;
-                max-height: 100%;
-            }
-       }
-    }
-
-    .feature-content {
-        margin-left: 30px;
-
-        @include breakpoint (max-lg) {
-           margin-left: 0;
-        }
-
-        .text {
-            margin-top: 24px;
-        }
-
-        .feature-count {
-            @include flex;
-            gap: 24px;
-            border-top: 1px solid rgba(203, 204, 207, 0.24);
-            margin-top: 24px;
-            padding-top: 24px;
-            margin-bottom: 48px;
-
-             @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-                 margin-bottom: 30px;
-            }
-
-            .content {
-
-                .count-image {
-                    img {
-                        @include imgw;
-                    }
-                }
-
-                h5 {
-                    font-weight: 500;
-                }
-            }
-
-            .list {
-                li {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: $header-color;
-                    font-family: $heading-font;
-
-                    @include breakpoint (max-xxl) {
-                        font-size: 16px;
-                    }
-
-                    &:not(:last-child) {
-                        margin-bottom: 15px;
-                    }
-
-                    i {
-                        margin-right: 8px;
-                        color: $theme-color-2;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.choose-us-wrapper-2 {
-
-    .choose-us-image {
-        margin-right: 40px;
-        
-        img {
-            @include imgw;
-        }
-
-         &.tp-clip-anim {
-            width: 100%;
-            display: grid;
-            align-items: center;
-            justify-items: center;
-            overflow: hidden;
-            position: relative;
-            & .tp-anim-img {
-                opacity: 0;
-                width: 100%;
-                height: 100%;
-            }
-
-            & .mask {
-                background-size: cover;
-                background-position: center;
-                transform: scale(1.005);
-            }
-            >* {
-                grid-area: 1 / 1 / 2 / 2;
-                width: 100%;
-                height: 100%;
-                max-height: 100%;
-            }
-       }
-    }
-
-    .feature-content {
-        margin-right: 20px;
-
-        @include breakpoint (max-xxl) {
-            margin-right: 0;
-        }
-
-        .text {
-            margin-top: 24px;
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding-bottom: 16px;
-            margin-bottom: 8px;
-        }
-
-        .choose-us-box {
-            @include flex;
-            gap: 16px;
-            padding: 16px 24px;
-            border: 1px solid $white;
-            @include transition;
-            border-radius: 12px;
-            margin-top: 24px;
-            background-color: $white;
-
-            @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-            }
-
-            .icon {
-                width: 80px;
-                height: 80px;
-                line-height: 80px;
-                text-align: center;
-                border-radius: 100px;
-                background-color: $bg-color;
-            }
-
-            .content {
-                h5 {
-                    margin-bottom: 5px;
-                }
-
-               p {
-                  max-width: 500px;
-               }
-            }
-
-            &:hover {
-                border: 1px solid $theme-color;
-            }
-        }
-
-        .theme-btn {
-            margin-top: 48px;
-        }
-    }
-}
-
-.destination-offer-wrapper-3 {
-    margin-top: 60px;
-
-    @include breakpoint (max-sm) {
-       margin-top: 30px;
-    }
-
-    .destination-offer-item {
-        border-radius: 16px;
-
-        .choose-us-image {
-            img {
-                @include imgw;
-                border-top-left-radius: 16px;
-                border-top-right-radius: 16px;
-            }
-        }
-
-        .choose-us-content {
-            padding: 16px 17px 24px;
-            background-color: $bg-color;
-
-            .icon-item {
-                @include flex;
-                border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-                gap: 12px;
-                padding-bottom: 12px;
-                margin-bottom: 10px;
-
-                h5 {
-                     a {
-                        background-position: 0 95%;
-                        background-repeat: no-repeat;
-                        background-size: 0% 2px;
-                        display: inline;
-
-                        &:hover {
-                            color: $theme-color;
-                            background-size: 100% 2px;
-                            background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.destination-offer-section {
-    position: relative;
-    z-index: 9;
-
-    .bg-image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: -1;
-
-        &::before {
-            @include before;
-            background: rgb(4 4 5 / 87%);
-        }
-    }
-}
-
-.choose-us-wrapper-3 {
-
-    .choose-us-left-item {
-        @include flex;
-        gap: 0;
-
-        @include breakpoint (max-xxl) {
-           flex-wrap: wrap;
-           gap: 30px;
-        }
-
-        .left-item {
-            .choose-us-image {
-                img {
-                    @include breakpoint (max-xxl) {
-                        @include imgw;
-                    }
-                }
-            }
-
-            .caller-item {
-                @include flex;
-                gap: 12px;
-                padding: 21px 45px;
-                background-color: $header-color;
-                width: 311px;
-                border-bottom-left-radius: 100px;
-                margin-top: 30px;
-
-                .icon {
-                    width: 48px;
-                    height: 48px;
-                    line-height: 48px;
-                    border-radius: 100px;
-                    text-align: center;
-                    background-color: $white;
-                    color: $theme-color;
-                }
-
-                .content {
-                    span {
-                        opacity: 0.8;
-                        color: $white;
-                    }
-
-                    h5 {
-                        a {
-                            color: $theme-color;
-                        }
-                    }
-                }
-            }
-        }
-
-        .right-item {
-            .count-box {
-                padding: 20px 24px;
-                background-color: $theme-color-2;
-                border-top-right-radius: 100px;
-                @include flex;
-                gap: 4px;
-                width: 308px;
-                margin-bottom: 30px;
-                margin-left: -24px;
-
-                 @include breakpoint (max-xxl) {
-                   margin-left: 0;
-                }
-
-                h2 {
-                    color: $white;
-                }
-
-                h5 {
-                    color: $white;
-                }
-            }
-
-            .choose-image {
-                img {
-                    @include breakpoint (max-xxl) {
-                        @include imgw;
-                    }
-                }
-            }
-        }
-    }
-
-    .choose-us-content {
-
-        .text {
-            margin-top: 20px;
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding-bottom: 24px;
-            margin-bottom: 24px;
-        }
-
-        .nav {
-            display: flex;
-            gap: 30px;
-            margin-bottom: 30px;
-        
-        li {
-            font-size: 20px;
-            font-weight: 500;
-           
-            @include breakpoint (max-xl) {
-              font-size: 16px;
-            }
-           
-           .nav-link{
-            color: $header-color;
-            @include transition;
-            padding: 16px 32px;
-            border-radius: 100px;
-            line-height: 1;
-            border: 1px solid rgba(203, 204, 207, 0.24);
-
-            &.active {
-                position: relative;
-                background-color: $theme-color-2;
-                color: $white;
-             }
-           }
-        }
-      }
-
-      .content {
-        margin-top: 16px;
-
-        .list-item {
-            @include flex;
-            gap: 50px;
-            margin-top: 20px;
-            margin-bottom: 50px;
-
-             @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-                gap: 10px;
-                margin-bottom: 30px;
-            }
-
-            .list {
-                li {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: $header-color;
-                    font-family: $heading-font;
-
-                     @include breakpoint (max-xxl) {
-                        font-size: 16px;
-                    }
-
-                    &:not(:last-child) {
-                        margin-bottom: 10px;
-                    }
-
-                    i {
-                        margin-right: 10px;
-                    }
-                }
-            }
-        }
-      }
-    }
-}
-
-.intro-image {
-    margin-top: 30px;
-    border-radius: 24px;
-    
-    img {
-        @include imgw;
-        border-radius: 24px;
-    }
-
-    &.tp-clip-anim {
-        width: 100%;
-        display: grid;
-        align-items: center;
-        justify-items: center;
-        overflow: hidden;
-        position: relative;
-        & .tp-anim-img {
-            opacity: 0;
-            width: 100%;
-            height: 100%;
-        }
-
-        & .mask {
-            background-size: cover;
-            background-position: center;
-            transform: scale(1.005);
-        }
-        >* {
-            grid-area: 1 / 1 / 2 / 2;
-            width: 100%;
-            height: 100%;
-            max-height: 100%;
-        }
-    }
-}
-
-.appointment-wrapper {
-
-    .appointment-content {
-        h5 {
-            margin-top: 80px;
-
-            @include breakpoint (max-xxl) {
-                margin-top: 30px;
-            }
-        }
-    }
-
-   .calendar {
-        background: #f9f9f9;
-        padding: 20px;
-        border-radius: 15px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        width: 640px;
-
-         @include breakpoint (max-xxl) {
-           width: initial;
-           overflow-x: scroll;
-        }
-
-    .calendar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 15px;
-
-        h2 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        }
-
-        button {
-        background: $theme-color-2;
-        color: $white;
-        border: none;
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        font-size: 16px;
-        }
-    }
-
-    .days {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        text-align: center;
-        font-weight: 700;
-        color: $header-color;
-        margin-bottom: 10px;
-    }
-
-    .dates {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        gap: 5px;
-        text-align: center;
-
-        div {
-            width: 70px;
-            height: 70px;
-            line-height: 70px;
-            border-radius: 50%;
-            background: $white;
-            font-size: 20px;
-            font-weight: 700;
-
-            @include breakpoint (max-xxl) {
-                width: 50px;
-                height: 50px;
-                line-height: 50px;
-                font-size: 16px;
-            }
-        }
-
-        .highlight {
-            background: $theme-color-2 !important;
-            color: $white;
-            font-weight: bold;
-        }
-
-        div.active-date {
-            background: $theme-color-2;
-            color: $white;
-            font-weight: bold;
-        }
-     }
-  } 
-}
-
-.cooming-soon-content {
-    text-align: center;
-
-    h2 {
-        margin-top: 24px;
-        margin-bottom: 20px;
-    }
-
-    p {
-        max-width: 744px;
-        margin: 0 auto;
-    }
-
-     form {
-        max-width: 664px;
-        width: 100%;
-        text-align: center;
-        margin: 0 auto;
-    }
-
-        .form-clt {
-            position: relative;
-            margin-top: 48px;
-
-             @include breakpoint (max-xxl) {
-                margin-top: 30px;
-            }
-
-            input {
-                width: 100%;
-                outline: none;
-                border: none;
-                background-color: $bg-color;
-                color: $text-color;
-                line-height: 1;
-                padding: 25px 0px 25px 25px;
-                border-radius: 100px;
-                max-width: 664px;
-
-                @include breakpoint (max-xxl) {
-                    padding: 20px 0px 20px 10px;
-                    font-size: 14px;
-                }
-
-                @include breakpoint (max-lg) {
-                    padding: 20px 0px 20px 10px;
-                    font-size: 14px;
-                }
-
-                    @include breakpoint (max-sm) {
-                    font-size: 14px;
-                }
-
-                &::placeholder {
-                    color: $text-color;
-                }
-            }
-
-            .theme-btn {
-                position: absolute;
-                top: 4px;
-                right: 4px;
-                bottom: 4px;
-                text-transform: uppercase;
-                border: 1px solid rgba(203, 204, 207, 0.24);
-                background-color: $bg-color;
-
-                @include breakpoint (max-xxl){
-                    right: 0;
-                    top: 0;
-                    bottom: 0;
-                    padding: 2px 4px 2px 12px;
-                    font-size: 14px;
-
-                    i {
-                        margin-left: 10px;
-                    }
-                }
-
-                &:hover {
-                    color: $white;
-                    background-color: $theme-color;
-                }
-            }
-        } 
-
-    .social-icon {
-        @include flex;
-        gap: 12px;
-        justify-content: center;
-        margin-top: 40px;
-
-         @include breakpoint (max-xxl) {
-            margin-top: 30px;
-        }
-
-        a {
-            width: 44px;
-            height: 44px;
-            line-height: 44px;
-            text-align: center;
-            border-radius: 100px;
-            background-color: $bg-color;
-            color: $header-color;
-            display: inline-block;
-
-            &:hover {
-               background-color: $theme-color;
-               color: $white;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_footer.scss b/public/assets/scss/_footer.scss
deleted file mode 100644
index d73f4a0..0000000
--- a/public/assets/scss/_footer.scss
+++ /dev/null
@@ -1,683 +0,0 @@
-
-.footer-wrapper {
-
-    .footer-item {
-        padding: 100px 0;
-        position: relative;
-        text-align: center;
-
-         @include breakpoint (max-lg) {
-           padding: 80px 0;
-        }
-
-        h2 {
-            font-size: 30px;
-            color: $white;
-
-             @include breakpoint (max-sm) {
-                font-size: 25px;
-            }
-
-            a {
-                color: $white;
-            }
-
-            &.text {
-                font-size: 24px;
-            }
-        }
-
-        .footer-list-item {
-            @include flex;
-            justify-content: space-between;
-            border-radius: 136px;
-            background: rgba(255, 255, 255, 0.08);
-            backdrop-filter: blur(62px);
-            padding: 20px 24px;
-            margin-top: 80px;
-
-             @include breakpoint (max-xxl) {
-                margin-top: 30px;
-                padding: 20px;
-            }
-
-             @include breakpoint (max-lg) {
-                border-radius: 0;
-                flex-wrap: wrap;
-                gap: 20px;
-            }
-
-            .footer-list {
-                @include flex;
-                gap: 40px;
-
-                 @include breakpoint (max-xxl) {
-                    gap: 20px;
-                }
-
-                @include breakpoint (max-sm) {
-                    flex-wrap: wrap;
-                    gap: 15px;
-                }
-
-                li {
-                    font-weight: 500;
-                    font-family: $heading-font;
-                    text-transform: uppercase;
-
-                    a {
-                        color: $white;
-
-                        &:hover {
-                            color: $theme-color;
-                        }
-                    }
-                }
-            }
-
-            .social-icon {
-                @include flex;
-                gap: 12px;
-
-                a {
-                    width: 40px;
-                    height: 40px;
-                    line-height: 40px;
-                    text-align: center;
-                    border-radius: 100px;
-                    backdrop-filter: blur(46px);
-                    background-color: $bg-color-2;
-                    color: $white;
-                    display: inline-block;
-
-                    &:hover {
-                    background-color: $theme-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-.footer-section {
-    margin: 0 30px;
-    border-radius: 32px;
-
-     @include breakpoint (max-sm) {
-       margin: 0 15px;
-    }
-}
-
-.footer-bottom {
-    padding: 24px 0;
-    text-align: center;
-
-    .footer-wrapper {
-        @include flex;
-        justify-content: center;
-        gap: 100px;
-
-        @include breakpoint (max-xxl) {
-            flex-wrap: wrap;
-            gap: 20px;
-        }
-
-        @include breakpoint (max-sm) {
-            justify-content: start;
-        }
-
-        p {
-            color: $header-color;
-
-            span {
-                color: $theme-color;
-                text-transform: uppercase;
-            }
-        }
-
-        .bottom-list {
-            @include flex;
-            gap: 40px;
-
-             @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-                gap: 20px;
-            }
-
-            @include breakpoint (max-sm) {
-                justify-content: center;
-            }
-
-            li {
-                a {
-                    &:hover {
-                        color: $theme-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.footer-widget-wrapper-2 {
-    padding: 70px 0 90px;
-
-    @include breakpoint (max-lg) {
-        padding: 50px 0 80px;
-    }
-
-    .single-footer-widget {
-        margin-top: 30px;
-
-        .widget-title {
-            margin-bottom: 24px;
-
-            h3 {
-                color: $white;
-                text-transform: uppercase;
-            }
-        }
-
-        .footer-content {
-            p {
-                max-width: 502px;
-                color: rgba(255, 255, 255, 0.7);
-
-                 @include breakpoint (max-xxl) {
-                    font-size: 14px;
-                }
-
-                @include breakpoint (max-lg) {
-                    font-size: 16px;
-                }
-            }
-
-            .social-icon {
-                @include flex;
-                gap: 20px;
-                margin-top: 50px;
-
-                @include breakpoint (max-xxl) {
-                    margin-top: 30px;
-                    gap: 13px;
-                }
-
-                 @include breakpoint (max-lg) {
-                    gap: 16px;
-                }
-
-                span {
-                    display: inline-block;
-                    margin-right: 4px;
-                    color: $white;
-                    font-weight: 500;
-                    text-transform: uppercase;
-                    font-family: $heading-font;
-
-                     @include breakpoint (max-xxl) {
-                       font-size: 14px;
-                    }
-
-                     @include breakpoint (max-lg) {
-                       font-size: 16px;
-                    }
-                }
-
-                a {
-                    font-size: 20px;
-                    color: $theme-color;
-
-                    &:hover {
-                        color: $theme-color-2;
-                    }
-                }
-            }
-        }
-
-        .list {
-            li {
-                @include transition;
-                font-weight: 400;
-
-                &:not(:last-child){
-                    margin-bottom: 20px;
-                }
-
-                a {
-                    color: rgba(255, 255, 255, 0.7);
-                }
-
-                &:hover {
-                    margin-left: 5px;
-
-                    a {
-                        color: $theme-color;
-                    }
-                }
-            }
-        }
-
-        .contact-item {
-            li {
-                display: flex;
-                align-items: start;
-                color: rgba(255, 255, 255, 0.7);
-                gap: 8px;
-
-                &.style-2 {
-                    @include flex;
-                }
-
-                &:not(:last-child) {
-                    margin-bottom: 20px;
-                }
-
-                a {
-                    color: rgba(255, 255, 255, 0.7);
-                }
-
-                i {
-                    color: $theme-color;
-                }
-            }
-        }
-    }
-}
-
-.footer-section-2 {
-    position: relative;
-    z-index: 9;
-
-    .shape {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: -1;
-    }
-}
-
-.footer-newsletter {
-    @include flex;
-    justify-content: space-between;
-    margin-top: 100px;
-    padding: 32px 48px;
-    background-color: $theme-color-2;
-    border-radius: 16px;
-
-    @include breakpoint (max-xxl) {
-        flex-wrap: wrap;
-        gap: 20px;
-        padding: 30px;
-        margin-top: 80px;
-    }
-
-    .newsletter-content {
-        h3 {
-            color: $white;
-        }
-
-        p {
-            color: rgba(255, 255, 255, 0.7);
-        }
-    }
-
-    form {
-        max-width: 587px;
-        width: 100%;
-    }
-
-     .form-clt {
-        position: relative;
-
-        .input-icon {
-            top: 50%;
-            left: 25px;
-            transform: translateY(-50%);
-            position: absolute;
-
-            @include breakpoint (max-sm) {
-              top: 23%;
-            }
-        }
-
-        input {
-            width: 100%;
-            outline: none;
-            border: none;
-            background-color: $white;
-            color: $text-color;
-            line-height: 1;
-            padding: 25px 0px 25px 60px;
-            border-radius: 100px;
-            max-width: 587px;
-
-             @include breakpoint (max-lg) {
-                padding: 20px 0px 20px 60px;
-            }
-
-            &::placeholder {
-                color: $text-color;
-            }
-        }
-
-         .theme-btn {
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            bottom: 4px;
-            text-transform: uppercase;
-            border: 1px solid rgba(203, 204, 207, 0.24);
-
-            @include breakpoint (max-xxs){
-                position: static;
-                margin-top: 20px;
-                color: $white;
-            }
-        }
-     } 
-}
-
-.fotter-bootom-2  {
-    border-top: 1px solid rgba(203, 204, 207, 0.24);
-    padding: 20px 0;
-
-     .footer-wrapper {
-        @include flex;
-        justify-content: center;
-        gap: 100px;
-
-        @include breakpoint (max-xxl) {
-            flex-wrap: wrap;
-            gap: 20px;
-        }
-
-        @include breakpoint (max-sm) {
-            justify-content: start;
-        }
-
-        p {
-            color: $white;
-
-             @include breakpoint (max-sm) {
-                text-align: center;
-            }
-
-
-            span {
-                color: $theme-color;
-                text-transform: uppercase;
-            }
-        }
-
-        .bottom-list {
-            @include flex;
-            gap: 40px;
-
-             @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-                gap: 20px;
-            }
-
-            @include breakpoint (max-sm) {
-                justify-content: center;
-            }
-
-            li {
-                a {
-                    color: $white;
-
-                    &:hover {
-                        color: $theme-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-.footer-widget-wrapper-3 {
-    padding: 70px 0 100px;
-    position: relative;
-
-     @include breakpoint (max-xxl) {
-       padding: 70px 0 100px;
-    }
-
-     @include breakpoint (max-lg) {
-       padding: 50px 0 80px;
-    }
-
-    &::before {
-        position: absolute;
-        content: "";
-        width: 1px;
-        height: 424px;
-        left: 600px;
-        background-color: rgba(203, 204, 207, 0.24);
-        top: 0;
-        bottom: 0;
-
-        @include breakpoint (max-xxl) {
-            display: none;
-        }
-    }
-
-    .single-footer-widget {
-        margin-top: 30px;
-
-        .widget-title {
-            margin-bottom: 24px;
-
-            h3 {
-                color: $white;
-                text-transform: uppercase;
-            }
-        }
-
-        .footer-content {
-            h3 {
-                color: $white;
-                margin-bottom: 10px;
-            }
-
-            p {
-                color: $white;
-                opacity: 0.7;
-                max-width: 551px;
-                margin-bottom: 30px;
-            }
-
-             form {
-                max-width: 551px;
-                width: 100%;
-            }
-
-            .form-clt {
-                position: relative;
-
-                input {
-                    width: 100%;
-                    outline: none;
-                    border: none;
-                    background-color: $white;
-                    color: $text-color;
-                    line-height: 1;
-                    padding: 25px 0px 25px 25px;
-                    border-radius: 100px;
-                    max-width: 551px;
-
-                    @include breakpoint (max-xxl) {
-                        padding: 20px 0px 20px 10px;
-                        font-size: 14px;
-                    }
-
-                    @include breakpoint (max-lg) {
-                        padding: 20px 0px 20px 10px;
-                        font-size: 14px;
-                    }
-
-                     @include breakpoint (max-sm) {
-                        font-size: 14px;
-                    }
-
-                    &::placeholder {
-                        color: $text-color;
-                    }
-                }
-
-                .theme-btn {
-                    position: absolute;
-                    top: 4px;
-                    right: 4px;
-                    bottom: 4px;
-                    text-transform: uppercase;
-                    border: 1px solid rgba(203, 204, 207, 0.24);
-                    background-color: $bg-color;
-
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                    }
-
-                    @include breakpoint (max-xxl){
-                        right: 0;
-                        top: 0;
-                        bottom: 0;
-                        padding: 2px 4px 2px 12px;
-                        font-size: 14px;
-
-                         i {
-                            margin-left: 10px;
-                         }
-                    }
-                }
-            } 
-
-            h6 {
-                color: $white;
-                margin-top: 15px;
-
-                span {
-                    color: $theme-color;
-                    text-transform: uppercase;
-                    font-size: 18px;
-                    font-weight: 400;
-                }
-            }
-        }
-
-        .contact-content {
-            p {
-                color: $white;
-                opacity: 0.7;
-                margin-bottom: 24px;
-            }
-
-            h3 {
-                color: $white;
-            }
-
-            .contact-list {
-                margin-top: 16px;
-
-                li {
-                    @include flex;
-                    gap: 32px;
-
-                    a {
-                        color: $white;
-                        opacity: 0.7;
-                    }
-                }
-            }
-        }
-
-        .list {
-            li {
-                @include transition;
-                font-weight: 400;
-
-                &:not(:last-child){
-                    margin-bottom: 20px;
-                }
-
-                a {
-                    color: rgba(255, 255, 255, 0.7);
-                }
-
-                &:hover {
-                    margin-left: 5px;
-
-                    a {
-                        color: $theme-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.footer-top-item {
-    @include flex;
-    justify-content: space-between;
-    border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-
-
-     @include breakpoint (max-lg) {
-        flex-wrap: wrap;
-        gap: 30Px;
-        padding-bottom: 10px;
-    }
-
-    .footer-logo {
-        background-color: $theme-color-2;
-        padding: 18px 30px;
-    }
-
-    .top-list {
-        @include flex;
-        gap: 40px;
-
-         @include breakpoint (max-xxl) {
-            gap: 20Px;
-        }
-
-        @include breakpoint (max-lg) {
-            flex-wrap: wrap;
-            gap: 15Px;
-        }
-
-        li {
-            a {
-                font-weight: 500;
-                text-transform: uppercase;
-                color: $white;
-
-                &:hover {
-                    color: $theme-color;
-                }
-            }
-        }
-    }
-
-    .social-item {
-        @include flex;
-        gap: 12px;
-
-        a {
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
-            background-color: $theme-color-2;
-            border-radius: 100px;
-            color: $white;
-            text-align: center;
-
-            &:hover {
-                background-color: $theme-color;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss
deleted file mode 100644
index f6c8d71..0000000
--- a/public/assets/scss/_header.scss
+++ /dev/null
@@ -1,1264 +0,0 @@
-.header-top-section {
-	background-color: $theme-color-2;
-	position: relative;
-	z-index: 999;
-
-	@include breakpoint (max-xxl) {
-		display: none;
-	}
-
-	&::before {
-		@include before;
-		background-color: $theme-color;
-		left: 0;
-		right: initial;
-		width: 337px;
-		z-index: -1;
-	}
-
-	.container-fluid {
-		padding: 0 40px;
-
-		@include breakpoint (max-xxl) {
-			padding: 0 40px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-	}
-}
-
-.header-top-wrapper {
-	@include flex;
-	justify-content: space-between;
-	padding: 10px 0;
-
-	.header-left {
-
-		.list {
-			@include flex;
-			gap: 60px;
-
-			li {
-				color: rgba(255, 255, 255, 0.7);
-
-				a {
-					color: rgba(255, 255, 255, 0.7);
-				}
-
-				i {
-					margin-right: 12px;
-					color: $theme-color;
-				}
-
-				&.style-2 {
-					color: $white;
-
-					i {
-						color: $white;
-					}
-
-					span {
-						font-size: 18px;
-						color: $white;
-						display: inline-block;
-						margin-right: 12px;
-					}
-				}
-			}
-		}
-	}
-
-	.header-right {
-		@include flex;
-		gap: 45px;
-
-		.flag-wrap {
-			position: relative;
-			width: 130px;
-			z-index: 9;
-
-			@include breakpoint (max-xxl) {
-				display: none;
-			}
-
-			i {
-				color: $white;
-			}
-			
-			.nice-select {
-				background: transparent;
-				border: none;
-				text-align: center;
-				margin: 0 auto;
-				position: relative;
-				z-index: 999;
-				padding: 10px 7px 10px 58px;
-
-				span{
-					font-size: 14px;
-					font-weight: 500;
-					// text-transform: capitalize;
-					color: $white;
-				}
-
-				.list {
-					li {
-						color: $header-color; 
-					}
-				}
-
-				&::after {
-					border-bottom: 2px solid $white;
-					border-right: 2px solid $white;  
-					height: 8px;
-					margin-top: -6px;
-					width: 8px;   
-					right: 3px;           
-				}
-			}
-
-			.flag {
-				position: absolute;
-				top: 10px;
-				left: 32px;
-				z-index: 1;
-
-				@include breakpoint(max-md){
-					display: none
-				}
-
-			}
-		}
-
-		.social-item {
-			@include flex;
-			gap: 12px;
-
-			a {
-				width: 32px;
-				height: 32px;
-				line-height: 32px;
-				background-color: #153888;
-				backdrop-filter: blur(46px);
-				border-radius: 100px;
-				color: $white;
-				text-align: center;
-
-				&:hover {
-					background-color: $theme-color;
-				}
-			}
-		}
-	}
-}
-
-.header-top-section-2 {
-	position: relative;
-	background-color: $header-color;
-	
-	.container-fluid {
-		padding: 0 100px;
-
-		@include breakpoint (max-xl4) {
-			padding: 0 70px;
-		}
-
-		@include breakpoint (max-xxxl) {
-			padding: 0 50px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-	}
-}
-
-.header-top-wrapper-2 {
-	padding: 10px 0;
-	@include flex;
-	justify-content: space-between;
-
-	@include breakpoint (max-xxl) {
-		display: none;
-	}
-
-	.header-left {
-		@include flex;
-		gap: 32px;
-
-		span {
-			color: rgba(255, 255, 255, 0.7);
-			border-radius: 88px;
-			background: rgba(255, 255, 255, 0.12);
-			backdrop-filter: blur(58px);
-			padding: 5px 8px;
-			line-height: 1;
-
-			a {
-				color: rgba(255, 255, 255, 0.7);
-			}
-		}
-	}
-
-	.social-item {
-		@include flex;
-		gap: 12px;
-
-		a {
-			width: 40px;
-			height: 40px;
-			line-height: 40px;
-			background-color: #153888;
-			backdrop-filter: blur(46px);
-			border-radius: 100px;
-			color: $white;
-			text-align: center;
-
-			&:hover {
-				background-color: $theme-color;
-			}
-		}
-	}
-}
-
-.header-top-section-3 {
-	background-color: $header-color;
-	position: relative;
-	z-index: 999;
-
-	@include breakpoint (max-xxl) {
-		display: none;
-	}
-
-	&::before {
-		@include before;
-		background-color: $theme-color-2;
-		left: 0;
-		right: initial;
-		width: 337px;
-		z-index: -1;
-
-		@include breakpoint (max-xxxl) {
-			width: 300px;
-		}
-	}
-
-	.container-fluid {
-		padding: 0 100px;
-
-		@include breakpoint (max-xl4) {
-			padding: 0 70px;
-		}
-
-		@include breakpoint (max-xxxl) {
-			padding: 0 50px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-	}
-}
-
-.header-top-wrapper-3 {
-	@include flex;
-	justify-content: space-between;
-	padding: 10px 0;
-
-	.left-item {
-		margin-left: 280px;
-
-		.social-item {
-			@include flex;
-			gap: 12px;
-
-			a {
-				width: 40px;
-				height: 40px;
-				line-height: 40px;
-				background-color: #153888;
-				backdrop-filter: blur(46px);
-				border-radius: 100px;
-				color: $white;
-				text-align: center;
-
-				&:hover {
-					background-color: $theme-color;
-				}
-			}
-		}
-	}
-
-	.header-right {
-
-		.list {
-			@include flex;
-			gap: 60px;
-
-			li {
-				color: rgba(255, 255, 255, 0.7);
-
-				a {
-					color: rgba(255, 255, 255, 0.7);
-				}
-
-				i {
-					margin-right: 12px;
-					color: $theme-color;
-				}
-			}
-		}
-	}
-}
-
-//>>>>> Header Main Start <<<<<//
-.menu-thumb {
-	@include breakpoint (max-xl){
-		display: none !important;
-	}
-}
-
-.header-main {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10px 0;
-
-	.main-menu {
-		ul {
-			margin-bottom: 0;
-
-			li {
-				position: relative;
-				list-style: none;
-				display: inline-block;
-				margin-inline-end: 50px;
-
-				@include breakpoint (max-xl) {
-					margin-inline-end: 30px;
-				}
-	
-			&:last-child {
-				margin-inline-end: 0;
-			}
-	
-			a {
-				display: inline-block;
-				font-size: 16px;
-				font-weight: 500;
-				color:  $header-color;
-				padding: 20px 0;
-				text-align: left;
-				position: relative;
-				text-transform: uppercase;
-				@include transition;
-
-				i {
-					margin-left: 4px;
-                    font-size: 14px;
-				}
-	
-				&:hover {
-					color: $theme-color-2;
-				}
-	
-			}
-			.submenu {
-				position: absolute;
-				top: 115%;
-				inset-inline-start: 0;
-				min-width: 260px;
-				padding: 20px 0;
-				z-index: 99999;
-				visibility: hidden;
-				opacity: 0;
-				transform-origin: top center;
-				color: $header-color;
-				transform: scaleY(0) translateZ(100px);
-				@include transition;
-				border-top: 6px solid $theme-color;
-				background-color: $white;
-				  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-
-				li {
-					display: block;
-					width: 100%;
-					margin: 0;
-					
-	
-					a {
-						position: relative;
-						z-index: 11;
-						font-size: 16px;
-						font-weight: 500;
-						letter-spacing: -0.34px;
-						color: $header-color;
-						line-height: 38px;
-   						padding: 0px 0px 0px 32px;
-                        padding-right: 22px;
-						width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-
-						&::before {
-							content: "";
-							position: absolute;
-							width: 0px;
-							height: 2px;
-							background: $theme-color;
-							left: 14px;
-							bottom: 18px;
-							transition: all 0.4s ease-in-out;
-						}
-
-						&:hover {
-							color: $theme-color-2;
-						}
-					}
-					&:last-child {
-						a {
-							border: none;
-						}
-					}
-					.submenu {
-						inset-inline-start: 100%;
-						top: 0;
-						visibility: hidden;
-						opacity: 0;
-					}
-					&:hover {
-						>a {
-							color: $theme-color !important;
-							margin-left: 10px;
-
-							&::before {
-								width: 10px;
-							}
-
-							&::after {
-								color: $theme-color;
-							}
-						}
-						>.submenu {
-							-webkit-transform: translateY(1);
-							-moz-transform: translateY(1);
-							-ms-transform: translateY(1);
-							-o-transform: translateY(1);
-							transform: translateY(1);
-							visibility: visible;
-							opacity: 1;
-						}
-					}
-				}
-				li.has-dropdown {
-					>a {
-						&::after {
-							position: absolute;
-							top: 50%;
-							inset-inline-end: 25px;
-							-webkit-transform: translateY(-50%);
-							-moz-transform: translateY(-50%);
-							-ms-transform: translateY(-50%);
-							-o-transform: translateY(-50%);
-							transform: translateY(-50%);
-							color: $theme-color;
-						}
-					}
-				}
-			}
-
-			.has-homemenu {
-				width: 800px;
-				padding: 30px 30px 10px 30px;
-				opacity: 0;
-				left: -250px;
-				visibility: hidden;
-				padding: 30px 30px 10px 30px;
-                background-color: $white;
-			
-				.homemenu-items {
-					@include flex;
-					gap: 30px;
-					justify-content: space-between;
-
-					@include breakpoint (max-lg){
-						flex-wrap: wrap;
-					}
-
-					.homemenu {
-						position: relative;
-						.homemenu-thumb {
-							position: relative;
-	
-							.demo-button {
-								position: absolute;
-								top: 50%;
-								left: 50%;
-								transform: translate(-50%, -50%);
-								opacity: 0;
-								visibility: hidden;
-								@include transition;
-								margin-top: 20px;
-								width: 100%;
-   								 padding: 0 12px;
-
-								@include breakpoint (max-xxl){
-									.theme-btn {
-										font-size: 14px;
-										min-width: 140px;
-									}
-								}
-	
-								.theme-btn {
-									background-color: $white;
-									padding-right: 0;
-									font-size: 16px;
-									font-weight: 500;
-									padding: 6px 6px 6px 24px;
-
-									&:hover {
-										background-color: $theme-color;
-										color: $white;
-									}
-								}
-							}
-	
-							&::before {
-								background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
-								background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
-								background-repeat: no-repeat;
-								background-size: cover;
-								background-position: center;
-								width: 100%;
-								height: 100%;
-								position: absolute;
-								left: 0;
-								top: 0;
-								overflow: hidden;
-								opacity: 0;
-								-webkit-transition: all 0.3s ease-in-out;
-								transition: all 0.3s ease-in-out;
-								content: "";
-							}
-							&:hover{
-	
-								&::before {
-									visibility: visible;
-									opacity: 1;
-								}
-	
-								.demo-button {
-									opacity: 1;
-									visibility: visible;
-									margin-top: 0;
-								}
-								& .homemenu-btn {
-									opacity: 1;
-									visibility: visible;
-									bottom: 50%;
-									transform: translateY(50%);
-								}
-							}
-							img {
-								width: 100%;
-							}
-						}
-	
-						.homemenu-title {
-							text-align: center;
-							margin: 15px auto;
-							display: inline-block;
-							font-size: 16px;
-                            font-weight: 600;
-                            color: $header-color;
-						}
-					}
-				}
-			}
-			
-			&:hover {
-				>a {
-					color:  $theme-color-2;
-
-					&::after {
-						color:  $theme-color;
-					}
-				}
-				>.submenu {
-					visibility: visible;
-					opacity: 1;
-					transform: scaleY(1) translateZ(0px);
-				}
-			  }
-			}
-		}
-	}
-
-	.header-right {
-		gap: 30px;
-
-		@include breakpoint (max-xxl){
-			gap: 20px;
-		}
-
-		.search-toggler {
-			width: 40px;
-			height: 40px;
-			line-height: 40px;
-			text-align: center;
-			color: $theme-color;
-			border-radius: 100px;
-			border: 1px solid $theme-color;
-			font-size: 16px;
-		}
-
-		.header-button {
-			@include breakpoint (max-xxl){
-				display: none;
-			}
-			.theme-btn {
-
-				&::before {
-					background-color: $white;
-				}
-
-				&:hover {
-					color: $header-color;
-				}
-			}
-		}
-
-		.sidebar__toggle {
-			cursor: pointer;
-			font-size: 20px;
-			color: $header-color;
-		}
-	}
-}
-
-.header-1 {
-
-	.container-fluid {
-		padding: 0 40px;
-
-		@include breakpoint (max-xxl) {
-			padding: 0 50px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-	}
-
-	.header-left {
-		@include flex;
-		gap: 120px;
-
-		 @include breakpoint (max-xxxl) {
-			gap: 50px;
-		}
-	}
-
-	.header-right {
-		.header-call-item {
-			@include flex;
-			gap: 60px;
-
-			.theme-btn {
-				padding: 4px 4px 4px 24px;
-
-				@include breakpoint (max-xxl) {
-					display: none;
-				}
-			}
-		}
-	}
-
-	&.header-2 {
-		z-index: 9999;
-		position: relative;
-
-		&::before {
-			@include before;
-			background-color: $theme-color;
-			left: 0;
-			right: initial;
-			width: 337px;
-			z-index: -1;
-
-			@include breakpoint (max-xxxl) {
-				width: 235px;
-			}
-
-			@include breakpoint (max-xxl) {
-				width: 100%;
-			}
-		}
-
-		&::after {
-			background-color: $theme-color;
-			right: 0;
-			position: absolute;
-			content: "";
-			top: 0;
-			bottom: 0;
-			height: 100%;
-			width: 420px;
-			z-index: -1;
-
-			@include breakpoint (max-xxxl) {
-				width: 350px;
-			}
-
-			@include breakpoint (max-xxl) {
-				display: none;
-			}
-		}
-		
-		.container-fluid {
-			padding: 0 100px;
-
-			@include breakpoint (max-xl4) {
-				padding: 0 70px;
-			}
-
-			@include breakpoint (max-xxxl) {
-				padding: 0 50px;
-			}
-
-			@include breakpoint (max-xxl) {
-				padding: 0 30px;
-			}
-
-			@include breakpoint (max-sm) {
-				padding: 0 15px;
-			}
-		}
-
-		.header-left {
-			.logo {
-				.header-logo {
-					display: none;
-				}
-			}
-		}
-
-		.header-right {
-
-			.header-call-item {
-
-				.theme-btn {
-					color: $white;
-
-					@include breakpoint (max-xxl) {
-						display: none;
-					}
-
-					i {
-						background-color: $white;
-						color: $header-color;
-					}
-				}
-
-				.sidebar__toggle {
-					color: $white;
-				}
-			}
-		}
-	}
-
-	&.header-3 {
-		position: relative;
-
-		&::before {
-			@include before;
-			background-color: $theme-color-2;
-			left: 0;
-			right: initial;
-			width: 337px;
-			z-index: -1;
-
-			@include breakpoint (max-xxxl) {
-				width: 300px;
-			}
-
-			@include breakpoint (max-xxl) {
-				display: none;
-			}
-		}
-
-		.container-fluid {
-			padding: 0 100px;
-
-			@include breakpoint (max-xl4) {
-				padding: 0 70px;
-			}
-
-			@include breakpoint (max-xxxl) {
-				padding: 0 50px;
-			}
-
-			@include breakpoint (max-xxl) {
-				padding: 0 30px;
-			}
-
-			@include breakpoint (max-sm) {
-				padding: 0 15px;
-			}
-		}
-
-		.logo {
-			position: absolute;
-			left: 100px;
-			top: -15px;
-    		z-index: 999;
-
-			@include breakpoint (max-xxl){
-				display: none;
-			}
-		}
-
-		.header-main {
-			padding-left: 280px;
-
-			@include breakpoint (max-xxl){
-				padding-left: 0;
-			}
-
-			.header-left {
-				@include breakpoint (max-xxl){
-					.logo-2 {
-						display: block !important;
-					}
-				}
-			}
-
-			.header-right {
-
-				.header-call-item {
-					.icon-item {
-						@include flex;
-						gap: 12px;
-
-						@include breakpoint (max-xxl){
-							display: none;
-						}
-
-						i {
-							color: $header-color;
-							font-size: 30px;
-						}
-
-						.content {
-							h6 {
-								margin-bottom: 5px;
-							}
-							span {
-								font-size: 18px;
-								
-								a {
-									color: $header-color;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-//>>>>> Header 01 Start <<<<<//
-
-
-//>>>>> Sticky Start <<<<</
-.sticky {
-	position: fixed !important;
-	top: 0 !important;
-	left: 0;
-	width: 100%;
-	z-index: 99999;
-	transition: all 0.9s;
-    background-color: $white;
-	-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
-	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
-	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-
-	&.header-1 {
-		.header-main {
-			.header-right {
-				.header-button {
-					.theme-btn {
-						&::before {
-							background-color: $theme-color;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.header-2 {
-		&::before {
-			display: none;
-		}
-
-		&::after {
-			display: none;
-		}
-
-		.header-main {
-			.header-left {
-
-				.logo {
-					.header-logo {
-						display: block;
-					}
-					.header-logo-2 {
-						display: none;
-					}
-				}
-			}
-
-			.header-right {
-				.header-call-item {
-					.theme-btn {
-						color: $header-color;
-
-						&:hover {
-							color: $white;
-						}
-					}
-
-					.sidebar__toggle {
-						color: $header-color;
-					}
-				}
-			}
-		}
-	}
-
-	&.header-3 {
-
-		.logo {
-			display: none;
-		}
-
-		&::before {
-			display: none;
-		}
-
-		.header-main {
-			padding-left: 0;
-
-			.header-left {
-				.logo-2 {
-					display: block !important;
-				}
-			}
-		}
-	}
-}
-
-//>>>>> Offcanvas Start <<<<<//
-
-
-.offcanvas__info {
-	background: $white none repeat scroll 0 0;
-	border-left: 2px solid  $theme-color;
-	position: fixed;
-	right: 0;
-	top: 0;
-	width: 450px;
-	height: 100%;
-	-webkit-transform: translateX(calc(100% + 80px));
-	-moz-transform: translateX(calc(100% + 80px));
-	-ms-transform: translateX(calc(100% + 80px));
-	-o-transform: translateX(calc(100% + 80px));
-	transform: translateX(calc(100% + 80px));
-	-webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
-	-moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
-	transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
-	z-index: 9999999;
-	overflow-y: scroll;
-	overscroll-behavior-y: contain;
-	scrollbar-width: none;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-.offcanvas__info.info-open {
-	opacity: 1;
-	-webkit-transform: translateX(0);
-	-moz-transform: translateX(0);
-	-ms-transform: translateX(0);
-	-o-transform: translateX(0);
-	transform: translateX(0);
-}
-
-.offcanvas__wrapper {
-	position: relative;
-	height: 100%;
-	padding: 30px 30px;
-
-	.offcanvas__content {
-		.text {
-			color: $black;
-		}
-
-		.offcanvas__close {
-			width: 45px;
-			height: 45px;
-			line-height: 45px;
-			text-align: center;
-			border-radius: 50%;
-			background-color: $theme-color;
-			position: relative;
-			z-index: 9;
-			cursor: pointer;
-
-			i {
-				color: $white;
-			}
-		}
-
-		.offcanvas__contact {
-			margin-top: 20px;
-
-            h4 {
-                margin-bottom: 20px;
-
-				@include breakpoint (max-sm) {
-					display: none;
-				}
-            }
-
-			ul {
-				margin-top: 0;
-
-				@include breakpoint (max-sm) {
-					display: none;
-				}
-
-				li {
-					font-size: 20px;
-					font-weight: 600;
-					// text-transform: capitalize;
-
-					@include breakpoint (max-sm) {
-						font-size: 14px;
-					}
-
-					&:not(:last-child){
-						margin-bottom: 30px;
-
-						@include breakpoint (max-sm) {
-							margin-bottom: 20px;
-						}
-					}
-
-					a {
-						color: $black;
-					}
-					.offcanvas__contact-icon {
-						margin-right: 20px;
-
-						i {
-							color: $theme-color;
-						}
-					}
-				}
-			}
-
-			span {
-				text-transform: initial;
-			}
-
-			.header-button {
-				
-				.theme-btn {
-					width: 100%;
-					padding: 20px 40px;
-					text-transform: capitalize !important;
-				}
-			}
-
-			.social-icon {
-                margin-top: 30px;
-                gap: 10px;
-
-                a {
-                    width: 45px;
-                    height: 45px;
-                    line-height: 45px;
-                    border-radius: 100%;
-                    text-align: center;
-                    font-size: 16px;
-                    display: block;
-                    background: transparent;
-                    color: #000;
-                    -webkit-transition: all .4s ease-in-out;
-                    transition: all .4s ease-in-out;
-                    text-align: center;
-                    border: 1px solid $border-color;
-
-					@include breakpoint (max-sm) {
-					display: none;
-				}
-
-
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                    }
-                }
-            }
-		}
-	}
-}
-
-.offcanvas__overlay {
-	position: fixed;
-	height: 100%;
-	width: 100%;
-	background: #151515;
-	z-index: 900;
-	top: 0;
-	opacity: 0;
-	visibility: hidden;
-	right: 0;
-}
-
-.offcanvas__overlay.overlay-open {
-	opacity: 0.8;
-	visibility: visible;
-}
-
-@media (max-width:450px) {
-	.offcanvas__info {
-		width: 300px;
-	}
-}
-
-@media (max-width: 575px) {
-	.offcanvas__wrapper {
-		padding: 20px;
-	}
-}
-
-
-
-.breadcrumb-wrapper {
-	border-radius: 32px;
-	margin:  0 48px;
-	position: relative;
-	overflow: hidden;
-
-	@include breakpoint (max-xxl) {
-		margin: 0 30px;
-	}
-
-
-	@include breakpoint (max-sm) {
-		margin: 0 15px;
-	}
-
-	.shape {
-		position: absolute;
-		left: 0;
-		bottom: 0;
-
-		@include breakpoint (max-xxl) {
-			display: none;
-		}
-	}
-
-	.page-heading {
-		padding: 120px 0;
-
-		@include breakpoint (max-xxl) {
-			padding: 100px 0;
-		}
-
-		@include breakpoint (max-lg) {
-			padding: 80px 0;
-		}
-
-		.breadcrumb-title {
-			color: $white;
-			text-align: center;
-			text-transform: uppercase;
-		}
-
-		.breadcrumb-list {
-			@include flex;
-			gap: 8px;
-			margin-top: 24px;
-			justify-content: center;
-
-			li {
-				color: $white;
-
-				a {
-					color: rgba(255, 255, 255, 0.7);
-				}
-			}
-		}
-	}
-}
-
-.error-item {
-
-	.error-image {
-
-		img  {
-			@include imgw;
-		}
-	}
-
-	.error-content {
-		text-align: center;
-		margin-top: 48px;
-
-		@include breakpoint (max-xxl) {
-			margin-top: 30px;
-		}
-
-		h2 {
-			margin-bottom: 20px;
-		}
-
-		p {
-			max-width: 793px;
-			margin: 0 auto;
-		}
-
-		.theme-btn {
-			margin-top: 48px;
-
-			@include breakpoint (max-xxl) {
-				margin-top: 30px;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/public/assets/scss/_helping.scss b/public/assets/scss/_helping.scss
deleted file mode 100644
index bded791..0000000
--- a/public/assets/scss/_helping.scss
+++ /dev/null
@@ -1,501 +0,0 @@
-
-//page scroll bar add
-::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-/* Track */
-::-webkit-scrollbar-track {
-	box-shadow: inset 0 0 5px $bg-color; 
-	border-radius: 5px;
-}
-/* Handle */
-::-webkit-scrollbar-thumb {
-	background: $theme-color;
-	border-radius: 10px;
-}
-//page scroll bar add
-
-//Basic Code Start
-.fix {
-  overflow: hidden;
-}
-
-.ralt{
- position: relative;
-}
-
-//Basic Code End
-
-//Video Css Start
-.ripple {
-  position: relative;
-
-  &::before,&::after {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 50px;
-      height: 50px;
-      -webkit-transform: translateX(-50%) translateY(-50%);
-      transform: translateX(-50%) translateY(-50%);
-      border-radius: 50%;
-      box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
-      -webkit-animation: rippleOne 3s infinite;
-      animation: rippleOne 3s infinite;
-  }
-
-  &::before {
-      -webkit-animation-delay: 0.9s;
-      animation-delay: 0.9s;
-      content: "";
-      position: absolute;
-      right: 0;
-      bottom: 0;
-  }
-
-  &::after {
-      -webkit-animation-delay: 0.6s;
-      animation-delay: 0.6s;
-      content: "";
-      position: absolute;
-      right: 0;
-      bottom: 0;
-  }
-}
-//Video Css End
-
-.array-buttons {
-  @include flex;
-  gap: 20px;
-
-  @include breakpoint (max-xl) {
-    flex-wrap: wrap;
-  }
-
-  .array-prev {
-     width: 110px;
-     height: 48px;
-     line-height: 45px;
-     text-align: center;
-     background-color: transparent;
-     color: $header-color;
-     @include transition;
-     border-radius: 100px;
-     border: 1px solid $header-color;
-     font-weight: 600;
-
-     i {
-       margin-left: 5px;
-       transform: rotate(45deg);
-     }
-
-    &:hover {
-       background: $theme-color-2;
-       color: $header-color;
-       border: 1px solid $theme-color-2;
-    }
-  }
-  
-  .array-next {
-     width: 110px;
-     height: 48px;
-     line-height: 45px;
-     text-align: center;
-     background-color: $theme-color-2;
-     color: $header-color;
-     @include transition;
-     border-radius: 100px;
-     font-weight: 600;
-     text-transform: uppercase;
-
-     
-     i {
-       margin-left: 5px;
-       transform: rotate(-45deg);
-     }
-   
-      &:hover {
-         background: $header-color;
-         color: $white;
-      }
-   }
-}
-
-.array-buttons-2 {
-  @include flex;
-  gap: 20px;
-
-  @include breakpoint (max-xl) {
-    flex-wrap: wrap;
-  }
-
-  .array-prev {
-     width: 42px;
-     height: 42px;
-     line-height: 42px;
-     text-align: center;
-     background-color: $header-color;
-     color: #00E5FF;
-     @include transition;
-     border-radius: 100%;
-
-    &:hover {
-       background: $theme-color;
-       color: $white;
-    }
-  }
-  
-  .array-next {
-      width: 42px;
-      height: 42px;
-      line-height: 42px;
-      border-radius: 100%;
-      text-align: center;
-      background: #2ADDC8;
-      color: $header-color;
-      @include transition;
-  
-      &:hover {
-         background: $theme-color;
-         color: $white;
-      }
-   }
-}
-
-.array-buttons-4 {
-  @include flex;
-  gap: 20px;
-
-  @include breakpoint (max-xl) {
-    flex-wrap: wrap;
-  }
-
-  .array-prev {
-     width: 45px;
-     height: 45px;
-     line-height: 45px;
-     text-align: center;
-     background: $bg-color;
-     color: $white;
-     @include transition;
-     border-radius: 100%;
-
-  }
-  
-  .array-next {
-      width: 45px;
-      height: 45px;
-      line-height: 45px;
-      border: 1px solid rgba(65, 65, 65, 1);
-      border-radius: 100%;
-      text-align: center;
-      background: transparent;
-      color: $white;
-      @include transition;
-  
-      &:hover {
-         background: $bg-color;
-         border: 1px none;
-         color: $white;
-      }
-   }
-}
-//pagination default
-
-//pagination default
-
-.swiper-dot {
-  text-align: center;
-  margin-top: 30px;
-
-  .swiper-pagination-bullet {
-      width: 10px;
-      height: 10px;
-      transition: 0.6s;
-      border-radius: 30px;
-      background-color: $theme-color-2;
-      opacity: 1;
-      position: relative;
-      &:not(:last-child){
-        margin-right: 15px;
-      }
-  }
-  .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      background-color: $theme-color;
-      transition: 0.6s;
-      position: relative;
-      width: 10px;
-      height: 10px;
-      border-radius: 30px;
-
-      &::before {
-        @include before;
-        width: 10px;
-        height: 10px;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-         border-radius: 30px;
-      }
-  }
-
-}
-
-.swiper-dot-2 {
-  text-align: center;
-  margin-top: 30px;
-
-  .swiper-pagination-bullet {
-      width: 16px;
-      height: 16px;
-      transition: 0.6s;
-      border-radius: 30px;
-      background-color: transparent;
-      border: 2px solid $header-color;
-      opacity: 1;
-      position: relative;
-      &:not(:last-child){
-        margin-right: 15px;
-      }
-  }
-  .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      border: 2px solid $header-color;
-      transition: 0.6s;
-      position: relative;
-      width: 16px;
-      height: 16px;
-      border-radius: 30px;
-
-      &::before {
-        @include before;
-        width: 10px;
-        height: 10px;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-         border-radius: 30px;
-      }
-  }
-
-}
-
-.bg-cover {
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-  background-position: center;
-}
-
-.slide-transtion {
-	-webkit-transition-timing-function: linear;
-	transition-timing-function: linear;
-}
-.brand-slide-element {
-	width: auto;
-	display: inline-block;
-}
-
-
-.page-nav-wrap {
-  margin-top: 60px;
-
-  @include breakpoint (max-xl) {
-    margin-top: 30px;
-  }
-
-  ul {
-      li {
-          display: inline-block;
-
-          .page-numbers {
-              &.current {
-                  background: linear-gradient(180deg, #1539EE 0%, #2ADDC8 100%);
-                  color: $white;
-                  border-radius: 10px;
-              }
-
-              display: inline-block;
-              width: 40px;
-              height: 40px;
-              line-height: 40px;
-              text-align: center;
-              background-color: transparent;
-              border: 1px solid $theme-color-2;
-              color: $header-color;
-              @include transition;
-              border-radius: 10px;
-              font-weight: 600;
-              transition: all 0.3s ease-in-out;
-              margin: 0 2px;
-
-              &.style-2 {
-                display: inline-block;
-                width: 40px;
-                height: 40px;
-                line-height: 40px;
-                text-align: center;
-                background-color: $theme-color-2;
-                color: $white;
-                @include transition;
-                border-radius: 10px;
-                border: 1px solid $header-color;
-                font-weight: 600;
-                transition: all 0.3s ease-in-out;
-               
-              }
-
-              @media (max-width: 767px) {
-                  margin-top: 10px;
-                  width: 40px;
-                  height: 40px;
-                  line-height: 40px;
-                  font-size: 14px;
-              }
-
-              i {
-                  margin-top: 2px;
-                  color: $white;
-                  @include transition;
-              }
-
-              &:hover {
-                  background: $theme-color-2;
-                  color: $white;
-                  border: 1px solid $theme-color-2;
-
-                  i {
-                    color: $white;
-                  }
-              }
-          }
-      }
-  }
-}
-
-
-
-
-
-.sticky-style {
-  position: sticky !important;
-  top: 100px;
-}
-
-
-.custom-container {
-  max-width: 1700px;
-  margin: 0 auto;
-}
-
-
-
-.bw-img-anim-left,
-.bw-img-anim-right {
-  transition: clip-path 0.5s ease-out;
-}
-
-
-.split-text {
-	overflow: hidden;
-	position: relative;
-}
-
-.split-text .line {
-	overflow: hidden;
-	display: none;
-}
-
-html.lenis, html.lenis body {
-	height: auto;
-}
-
-.smooth-content {
-	position: relative;
-}
-
-.lenis.lenis-smooth {
-	scroll-behavior: auto !important;
-}
-
-
-//>>>>> Nice Select Css Start <<<<<//
-.nice-select {
-  background-color: transparent;
-  width: unset;
-  outline: none;
-  // border-bottom: 2px solid $border-color !important;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-
-.nice-select .current {
-  margin-right: 12px;
-}
-
-.nice-select.open .list {
-  background: $bg-color;
-  margin-top: 16px;
-  width: 100%;
-  // text-transform: capitalize;
-  color: $text-color;
-}
-
-.nice-select .option.selected.focus {
-  background: $bg-color;
-  outline: none;
-  color: $text-color;
-  // text-transform: capitalize;
-  font-weight: 500;
-  font-size: 14px;
-  border: none;
-}
-
-.nice-select .option {
-  border: none;
-}
-
-.nice-select .option:hover {
-  background: transparent;
-}
-
-//>>>>> Nice Select Css End <<<<<//
-
-.p-relative {
-  position: relative;
-}
-
-.tp-clip-anim {
-  position: relative;
-  overflow: hidden;
-
-  .mask {
-    position: absolute;
-    inset: 0;
-    background-size: cover;
-    background-position: center;
-    transform: scale(1.1);
-    opacity: 0;
-    animation: reveal 1s forwards;
-  }
-
-  // delay for each slice
-  @for $i from 1 through 9 {
-    .mask-#{$i} {
-      clip-path: inset(0 #{(9 - $i) * 11.1%} 0 #{($i - 1) * 11.1%});
-      animation-delay: #{$i * 0.1}s;
-    }
-  }
-}
-
-@keyframes reveal {
-  from {
-    opacity: 0;
-    transform: scale(1.2);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
diff --git a/public/assets/scss/_hero.scss b/public/assets/scss/_hero.scss
deleted file mode 100644
index 2fb0e14..0000000
--- a/public/assets/scss/_hero.scss
+++ /dev/null
@@ -1,622 +0,0 @@
-.hero-1 {
-    margin: 0 40px;
-    border-radius: 32px;
-    position: relative;
-    z-index: 9;
-
-    @include breakpoint (max-xxl) {
-         margin: 0 30px;
-         padding-top: 100px;
-         padding-bottom: 100px;
-    }
-
-     @include breakpoint (max-lg) {
-        padding-top: 80px;
-        padding-bottom: 0;
-    }
-
-    @include breakpoint (max-sm) {
-        margin: 0 15px;
-    }
-
-    .pagi-item {
-        right: 60px;
-        top: 345px;
-        position: absolute;
-        z-index: 999;
-
-         @include breakpoint (max-xxxl) {
-            top: 310px;
-        }
-
-        @include breakpoint (max-xxl) {
-            display: none;
-        }
-
-         .dot-number {
-            @include flex;
-            gap: 20px;
-            
-            .swiper-pagination-bullet {
-                background: none !important; 
-                width: auto !important;
-                height: auto !important;
-                margin: 0 !important;
-                @include transition;
-            }
-
-            .swiper-pagination-bullet-active {
-                .dot-num {
-                    span {
-                        color: $white;
-                        font-size: 32px;
-                        font-weight: 700;
-                        @include transition;
-                    }
-                }
-            }
-
-            .dot-num {
-                @include transition;
-                
-                span {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: rgba(255, 255, 255, 0.50);
-                    @include transition;
-                }
-            }
-        }
-    }
-   
-    .left-shape {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-
-         @include breakpoint (max-xxl) {
-           display: none;
-        }
-    }
-
-    .hero-shape {
-        position: absolute;
-        z-index: -1;
-        right: 10px;
-        bottom: 0;
-        margin-right: 0;
-
-        @include breakpoint (max-xxxl) {
-           max-width: 660px;
-        }
-
-         @include breakpoint (max-xxl) {
-           display: none;
-           max-width: initial;
-        }
-
-         img {
-            @include imgw;
-        }
-    }
-
-    .top-shape {
-        position: absolute;
-        top: 0;
-        right: 0;
-
-         @include breakpoint (max-xxl) {
-           display: none;
-        }
-
-        img {
-            @include imgw;
-        }
-    }
-
-    .right-shape {
-        position: absolute;
-        right: 0;
-        top: 0;
-
-         @include breakpoint (max-xxl) {
-           display: none;
-        }
-    }
-
-    .container-fluid {
-        padding: 0 124px;
-
-         @include breakpoint (max-xl4) {
-			padding: 0 70px;
-		}
-
-        @include breakpoint (max-xxxl) {
-			padding: 0 50px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-    }
-
-    .hero-content {
-        h6 {
-            font-size: 18px;
-            font-weight: 500;
-            color: $white;
-            margin-bottom: 20px;
-            line-height: 1;
-            padding: 8px 16px;
-            border-radius: 100px;
-            display: inline-block;
-            position: relative;
-            background-color: $bg-color-2;
-        }
-
-        h1 {
-            color: $white;
-            text-transform: uppercase;
-            margin-bottom: 15px;
-
-            .video-btn {
-                width: 64px;
-                height: 64px;
-                line-height: 64px;
-                display: inline-block;
-                background-color: $theme-color;
-                color: $white;
-                text-align: center;
-                border-radius: 50%;
-                font-size: 20px;
-                margin-left: 60px;
-                position: relative;
-                z-index: 1;
-                transform: translateY(-15px);
-
-                 @include breakpoint (max-xxxl) {
-                    width: 50px;
-                    height: 50px;
-                    line-height: 50px;
-                }
-
-                @include breakpoint (max-xxl) {
-                    display: none;
-                }
-
-                &::before {
-                    position: absolute;
-                    content: "";
-                    background: rgba(203, 204, 207, 0.24);
-                    width: 48px;
-                    height: 1px;
-                    left: -57px;
-                    top: 30px;
-                }
-
-               &::after {
-                    content: "";
-                    position: absolute;
-                    top: -10px;  
-                    left: -10px;
-                    right: -10px;
-                    bottom: -10px;
-                    border: 10px solid rgba(255, 255, 255, 0.12);
-                    border-radius: 50%;
-                    z-index: -1;
-                }
-            }
-        }
-
-        p {
-            max-width: 671px;
-            color: rgba(255, 255, 255, 0.8);
-            padding-left: 30px;
-            border-left: 2px solid $white;
-            opacity: 0.8;
-
-             @include breakpoint (max-xxl) {
-                border-left: none;
-                padding-left: 0;
-            }
-        }
-
-        .hero-button {
-            @include flex;
-            gap: 35px;
-            margin-top: 50px;
-
-            @include breakpoint (max-xxl) {
-                margin-top: 30px;
-                flex-wrap: wrap;
-                gap: 25px;
-            }
-
-            .theme-btn {
-                background-color: $white;
-
-                &:hover {
-                    background-color: $theme-color;
-                    border: 1px solid $theme-color;
-                }
-                
-                &.style-2 {
-                    border: 1px solid $border-color-2;
-                    background-color: transparent;
-                    color: $white;
-
-                    i {
-                        background-color: $white;
-                        color: $header-color;
-                    }
-
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                        border: 1px solid $theme-color;
-                    }
-                }
-            }
-        }
-    }
-
-    .hero-image {
-        margin-top: 20px;
-        margin-right: -140px;
-        position: relative;
-        z-index: 9;
-
-        @include breakpoint (max-xxl) {
-            margin-right: 0;
-        }
-
-        img {
-            @include imgw;
-             opacity: 0;
-             transform: translateY(50px);
-             transition: all 0.8s ease-in-out;
-        }
-    }
-
-    .swiper-slide-active {
-
-        .hero-image {
-            img {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}
-
-.hero-2 {
-    position: relative;
-
-     @include breakpoint (max-xxl) {
-       padding-top: 100px;
-       padding-bottom: 100px;
-     }
-
-     @include breakpoint (max-lg) {
-       padding-top: 80px;
-       padding-bottom: 0;
-     }
-
-    .shape {
-        position: absolute;
-        left: 0;
-        top: 0;
-
-         @include breakpoint (max-xxl) {
-			display: none;
-		}
-    }
-
-    .container-fluid {
-        padding: 0 65px;
-
-         @include breakpoint (max-xxxl) {
-			padding: 0 50px;
-		}
-
-        @include breakpoint (max-xxl) {
-			padding: 0 40px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-    }
-
-    &::before {
-        @include  before;
-        background: 
-        linear-gradient(279deg, rgba(21, 26, 38, 0.88) 34.84%, rgba(21, 26, 38, 0) 84.02%);
-    }
-
-    .hero-image {
-        margin-top: 30px;
-        position: relative;
-        margin-left: -75px;
-
-         @include breakpoint (max-xxl) {
-			margin-left: 0;
-            margin-top: 0;
-		}
-
-        img {
-            @include imgw;
-        }
-    }
-
-    .hero-content {
-        position: relative;
-        z-index: 999;
-
-        h6 {
-            color: $white;
-            font-size: 18px;
-            font-weight: 500;
-            letter-spacing: 6px;
-            text-transform: uppercase;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            color: $white;
-            text-transform: uppercase;
-            margin-bottom: 20px;
-        }
-
-        p {
-            color: $white;
-            max-width: 800px;
-            padding-left: 24px;
-            border-left: 3px solid $white;
-
-             @include breakpoint (max-xxl) {
-                border-left: none;
-                padding-left: 0;
-            }
-        }
-
-        .hero-button {
-            @include flex;
-            gap: 35px;
-            margin-top: 50px;
-
-            @include breakpoint (max-xxl) {
-                flex-wrap: wrap;
-                gap: 25px;
-            }
-
-            .theme-btn {
-                background-color: $white;
-
-                &:hover {
-                    background-color: $theme-color;
-                    border: 1px solid $theme-color;
-                }
-                
-                &.style-2 {
-                    border: 1px solid $border-color-2;
-                    background-color: transparent;
-                    color: $white;
-
-
-                    i {
-                        background-color: $white;
-                        color: $header-color;
-                    }
-
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                        border: 1px solid $theme-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.hero-3 {
-    position: relative;
-    z-index: 9;
-
-    @include breakpoint (max-xxl) {
-         margin: 0 30px;
-         padding-top: 100px;
-         padding-bottom: 100px;
-    }
-
-     @include breakpoint (max-lg) {
-        padding-top: 80px;
-        padding-bottom: 0;
-    }
-
-    @include breakpoint (max-sm) {
-        margin: 0 15px;
-    }
-
-    .pagi-item {
-        right: 60px;
-        bottom: 120px;
-        position: absolute;
-        z-index: 999;
-
-        @include breakpoint (max-xxl) {
-            display: none;
-        }
-
-         .dot-number {
-            @include flex;
-            gap: 20px;
-            
-            .swiper-pagination-bullet {
-                background: none !important; 
-                width: auto !important;
-                height: auto !important;
-                margin: 0 !important;
-                @include transition;
-            }
-
-            .swiper-pagination-bullet-active {
-                .dot-num {
-                    span {
-                        color: $white;
-                        font-size: 32px;
-                        font-weight: 700;
-                        @include transition;
-                    }
-                }
-            }
-
-            .dot-num {
-                @include transition;
-                
-                span {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: rgba(255, 255, 255, 0.50);
-                    @include transition;
-                }
-            }
-        }
-    }
-   
-
-    .hero-shape {
-        position: absolute;
-        z-index: -1;
-        left: 0;
-        top: 0;
-
-        @include breakpoint (max-xxxl) {
-           max-width: 660px;
-        }
-
-         @include breakpoint (max-xxl) {
-           display: none;
-           max-width: initial;
-        }
-
-         img {
-            @include imgw;
-        }
-    }
-
-    .container-fluid {
-        padding: 0 124px;
-
-         @include breakpoint (max-xl4) {
-			padding: 0 70px;
-		}
-
-        @include breakpoint (max-xxxl) {
-			padding: 0 50px;
-		}
-
-		@include breakpoint (max-xxl) {
-			padding: 0 30px;
-		}
-
-		@include breakpoint (max-sm) {
-			padding: 0 15px;
-		}
-    }
-
-    .hero-content {
-        h6 {
-            font-size: 18px;
-            font-weight: 500;
-            color: $theme-color;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            color: $white;
-            text-transform: uppercase;
-            margin-bottom: 15px;
-        }
-
-        p {
-            max-width: 772px;
-            color: rgba(255, 255, 255, 0.8);
-            opacity: 0.8;
-        }
-
-        .hero-button {
-            @include flex;
-            gap: 35px;
-            margin-top: 50px;
-
-            @include breakpoint (max-xxl) {
-                margin-top: 30px;
-                flex-wrap: wrap;
-                gap: 25px;
-            }
-
-            .theme-btn {
-                background-color: $white;
-
-                &:hover {
-                    background-color: $theme-color;
-                    border: 1px solid $theme-color;
-                }
-                
-                &.style-2 {
-                    border: 1px solid $border-color-2;
-                    background-color: transparent;
-                    color: $white;
-
-                    i {
-                        background-color: $white;
-                        color: $header-color;
-                    }
-
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                        border: 1px solid $theme-color;
-                    }
-                }
-            }
-        }
-    }
-
-    .hero-image {
-        margin-top: 20px;
-        position: relative;
-        z-index: 9;
-
-        @include breakpoint (max-xxl) {
-            margin-right: 0;
-        }
-
-        img {
-            @include imgw;
-             opacity: 0;
-             transform: translateY(50px);
-             transition: all 0.8s ease-in-out;
-        }
-    }
-
-    .swiper-slide-active {
-
-        .hero-image {
-            img {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_marquee.scss b/public/assets/scss/_marquee.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/public/assets/scss/_meanmenu.scss b/public/assets/scss/_meanmenu.scss
deleted file mode 100644
index 319faeb..0000000
--- a/public/assets/scss/_meanmenu.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-.mean-container a.meanmenu-reveal {
-	display: none;
-  }
-  
-  .mean-container .mean-nav {
-	background: none;
-	margin-top: 0;
-  }
-  
-  .mean-container .mean-bar {
-	padding: 0;
-	min-height: auto;
-	background: none;
-	background: none;
-  }
-  
-  .mean-container .mean-nav > ul {
-	padding: 0;
-	margin: 0;
-	width: 100%;
-	list-style-type: none;
-	display: block !important;
-  }
-  
-  .mean-container a.meanmenu-reveal {
-	display: none !important;
-  }
-  
-  .mean-container .mean-nav ul li a {
-	display: block;
-	width: 100%;
-	padding: 10px 0;
-	color: $black;
-	font-size: 16px;
-	font-weight: 600;
-	line-height: 2;
-	font-weight: 700;
-	// text-transform: capitalize;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.20) !important;
-	border: none;
-
-	&:hover {
-		color: $theme-color-2;
-	}
-  }
-
-
-  .mean-container .mean-nav ul li .submenu li a {
-	border-bottom: none !important;
-	font-size: 14px;
-	padding: 6px 0;
-	color: $header-color;
-  }
-
-  .mean-container .mean-nav ul li a:last-child {
-	border-bottom: 0;
-  }
-  .mean-container .mean-nav ul li a:hover {
-	color: $theme-color;
-  }
-  
-  .mean-container .mean-nav ul li a.mean-expand {
-	margin-top: 5px;
-	padding: 0 !important;
-  }
-  
-  .mean-container .mean-nav ul li > a > i {
-	display: none;
-  }
-  
-  .mean-container .mean-nav ul li > a.mean-expand i {
-	display: inline-block;
-	font-size: 18px;
-  }
-  
-  .mean-container .mean-nav > ul > li:first-child > a {
-	border-top: 0;
-  }
-  
-  .mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
-	transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	-o-transform: rotate(45deg);
-	@include transition;
-  }
-  
-  .mean-container .mean-nav ul li .mega-menu li a {
-	height: 200px;
-	width: 100%;
-	padding: 0;
-	border-top: 0;
-	margin-bottom: 20px;
-  }
\ No newline at end of file
diff --git a/public/assets/scss/_mixins.scss b/public/assets/scss/_mixins.scss
deleted file mode 100644
index 5eca375..0000000
--- a/public/assets/scss/_mixins.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@mixin breakpoint($point) {
-    @if $point==xsmall {
-        @media (min-width: 450px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xxsmall {
-        @media (max-width:450px) {
-            @content ;
-        }
-    }
-    @if $point==xxs {
-        @media (min-width: 470px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xxs {
-        @media (max-width:470px) {
-            @content ;
-        }
-    }
-    @if $point==xs {
-        @media (min-width: 500px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xs {
-        @media (max-width: 500px) {
-            @content ;
-        }
-    }
-    @if $point==sm {
-        @media (min-width: 576px) {
-            @content ;
-        }
-    }
-    @else if $point==max-sm {
-        @media (max-width: 575px) {
-            @content ;
-        }
-    }
-    @else if $point==md {
-        @media (min-width: 768px) {
-            @content ;
-        }
-    }
-    @else if $point==max-md {
-        @media (max-width: 767px) {
-            @content ;
-        }
-    }
-    @else if $point==lg {
-        @media (min-width: 992px) {
-            @content ;
-        }
-    }
-    @else if $point==max-lg {
-        @media (max-width: 991px) {
-            @content ;
-        }
-    }
-    @else if $point==xl {
-        @media (min-width: 1200px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xl {
-        @media (max-width: 1199px) {
-            @content ;
-        }
-    }
-    @else if $point==xxl {
-        @media (min-width: 1400px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xxl {
-        @media (max-width: 1399px) {
-            @content ;
-        }
-    }
-    @else if $point==xxxl {
-        @media (min-width: 1600px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xxxl {
-        @media (max-width: 1600px) {
-            @content ;
-        }
-    }
-    @else if $point==xl4 {
-        @media (min-width: 1899px) {
-            @content ;
-        }
-    }
-    @else if $point==max-xl4 {
-        @media (max-width: 1899px) {
-            @content ;
-        }
-    }
-}
-
-@mixin before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-}
-
-
-@mixin flex {
-	display: flex;
-	align-items: center;
-}
-@mixin transition {
-	transition: all 0.4s ease-in-out;
-}
-
-@mixin imgw {
-	width: 100%;
-	height: 100%;
-}
-
-
-
diff --git a/public/assets/scss/_news.scss b/public/assets/scss/_news.scss
deleted file mode 100644
index e33ee02..0000000
--- a/public/assets/scss/_news.scss
+++ /dev/null
@@ -1,886 +0,0 @@
-.news-card-item {
-    margin-top: 30px;
-    background-color: $bg-color;
-    border-radius: 16px;
-
-    .news-image {
-        position: relative;
-        border-top-left-radius: 16px;
-        border-top-right-radius: 16px;
-        overflow: hidden;
-
-        span {
-            border-radius: 100px;
-            background-color: $white;
-            color: $header-color;
-            font-size: 14px;
-            font-weight: 400;
-            padding: 4px 12px;
-            position: absolute;
-            top: 16px;
-            left: 16px;
-            z-index: 999;
-        }
-
-        .news-layer-wrapper {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            transition: 0.5s;
-
-            .news-layer-image {
-                width: 25%;
-                height: 100%;
-                transition: 0.5s;
-                background-size: cover;
-
-                &:nth-child(1){
-                    background-position: 0;
-                    transition-delay: 0;
-                }
-
-                &:nth-child(2){
-                    background-position: 33.33%;
-                    transition-delay: 0.1s;
-                }
-
-                &:nth-child(3){
-                    background-position: 66.66%;
-                    transition-delay: 0.2s;
-                }
-
-                &:nth-child(4){
-                    background-position: 100%;
-                    transition-delay: 0.3s;
-                }
-            }
-        }
-    
-        img {
-            @include imgw;
-            border-top-left-radius: 16px;
-            border-top-right-radius: 16px;
-             transform: scale(1.02);
-            transition: all 1.5s ease-out;
-        }
-    }
-
-    .news-content {
-        padding: 16px 24px 30px;
-
-        .list {
-            @include flex;
-            gap: 24px;
-            margin-bottom: 10px;
-        }
-
-        h3 {
-            a {
-                  background-position: 0 95%;
-                  background-repeat: no-repeat;
-                  background-size: 0% 2px;
-                  display: inline;
-
-                  &:hover {
-                      color: $theme-color;
-                      background-size: 100% 2px;
-                      background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                  }
-              }
-        }
-
-        .news-bottom {
-            @include flex;
-            justify-content: space-between;
-            border-top: 1px solid rgba(203, 204, 207, 0.24);
-            padding-top: 24px;
-            margin-top: 16px;
-
-            .info-item {
-                @include flex;
-                gap: 8px;
-            }
-        }
-    }
-
-    &:hover {
-        .news-image {
-
-            .news-layer-wrapper {
-                .news-layer-image {
-                    transform: translateY(-100%);
-                }
-            }
-            
-            img {
-                -webkit-transform: scale3d(1.1, 1.1, 1);
-                transform: scale3d(1.1, 1.1, 1);
-            }
-        }
-    }
-}
-
-.news-main-item {
-    border-radius: 16px;
-    background-color: $bg-color;
-    padding: 30px;
-    @include flex;
-    justify-content: space-between;
-    margin-top: 30px;
-
-    @include breakpoint (max-xxl) {
-        flex-wrap: wrap;
-        gap: 30px;
-    }
-
-    .news-left-content {
-        h2 {
-           sup {
-             font-size: 32px;
-             top: auto;
-
-              @include breakpoint (max-lg) {
-                font-size: 30px;
-             }
-
-              @include breakpoint (max-lg) {
-                font-size: 25px;
-             }
-           }
-
-            span {
-                font-size: 16px;
-                font-weight: 400;
-            }
-        }
-
-        h3 {
-
-            @include breakpoint (max-xl) {
-               br {
-                  display: none;
-               }
-           }
-            a {
-                  background-position: 0 95%;
-                  background-repeat: no-repeat;
-                  background-size: 0% 2px;
-                  display: inline;
-
-                  &:hover {
-                      color: $theme-color;
-                      background-size: 100% 2px;
-                      background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                  }
-              }
-        }
-
-        .news-post {
-            @include flex;
-            justify-content: space-between;
-            margin-top: 30px;
-
-             @include breakpoint (max-lg) {
-                flex-wrap: wrap;
-                gap: 20px;
-             }
-
-            span {
-                text-transform: uppercase;
-                font-weight: 500;
-                color: $header-color;
-            }
-        }
-    }
-
-    .news-right-content {
-        @include flex;
-        gap: 30px;
-
-         @include breakpoint (max-lg) {
-            flex-wrap: wrap;
-            gap: 20px;
-       }
-
-        .news-image {
-            overflow: hidden;
-            transition: scale 0.4s ease, transform 0.4s ease;
-
-            @include breakpoint (max-lg) {
-                flex-basis: 100%;
-             }
-
-            img {
-                @include imgw;
-                border-radius: 16px;
-            }
-        }
-
-        .content {
-            p {
-                max-width: 388px;
-                margin-bottom: 30px;
-            }
-
-            .theme-btn {
-                padding: 2px 4px 2px 24px;
-            }
-        }
-    }
-}
-
-.news-card-items-3 {
-    @include flex;
-    border-radius: 16px;
-    background-color: $white;
-    margin-top: 30px;
-
-     @include breakpoint (max-xxl) {
-       flex-wrap: wrap;
-       gap: 30px;
-       padding: 10px;
-    }
-
-     @include breakpoint (max-lg) {
-       flex-wrap: initial;
-       gap: 30px;
-       padding: 0;
-    }
-
-    @include breakpoint (max-md) {
-       flex-wrap: wrap;
-       gap: 30px;
-       padding: 10px;
-    }
-
-    .news-image {
-
-         @include breakpoint (max-xxl) {
-          flex-basis: 100%;
-        }
-
-         @include breakpoint (max-lg) {
-          flex-basis: initial;
-        }
-
-        @include breakpoint (max-sm) {
-          flex-basis: 100%;
-        }
-
-        img {
-            border-top-left-radius: 16px;
-            border-bottom-left-radius: 16px;
-
-             @include breakpoint (max-xxl) {
-               @include imgw;
-               border-radius: 16px;
-            }
-
-             @include breakpoint (max-lg) {
-               width: initial;
-               height: initial;
-                border-top-left-radius: 16px;
-                border-bottom-left-radius: 16px;
-            }
-
-            @include breakpoint (max-sm) {
-               @include imgw;
-               border-radius: 16px;
-            }
-        }
-    }
-
-    .news-content {
-        padding: 25px 25px 25px 30px;
-
-         @include breakpoint (max-lg) {
-          padding: 0 25px;
-        }
-
-        h3 {
-            a {
-                  background-position: 0 95%;
-                  background-repeat: no-repeat;
-                  background-size: 0% 2px;
-                  display: inline;
-
-                  &:hover {
-                      color: $theme-color;
-                      background-size: 100% 2px;
-                      background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                  }
-              }
-        }
-
-        .info-item {
-            @include flex;
-            gap: 26px;
-            margin-top: 15px;
-            margin-bottom: 25px;
-
-             @include breakpoint (max-lg) {
-                  flex-wrap: wrap;
-                  gap: 10px;
-             }
-
-            .info-image {
-                @include flex;
-                gap: 8px;
-
-                h6 {
-                    font-weight: 500;
-                    text-transform: uppercase;
-                }
-            }
-        }
-
-        .theme-btn {
-            border: none;
-            padding: 0;
-
-            &:hover {
-                background-color: transparent;
-                color: $theme-color;
-
-                i {
-                    background-color: $header-color;
-                    color: $white;
-                }
-            }
-        }
-    }
-}
-
-.news-standard-wrapper {
-
-    .news-standard-post {
-        margin-bottom: 30px;
-
-        .news-image {
-            img {
-                @include imgw;
-                border-radius: 16px;
-            }
-        }
-
-        .news-content {
-            margin-top: 24px;
-
-            .news-list {
-                @include flex;
-                gap: 40px;
-                margin-bottom: 16px;
-
-                @include breakpoint (max-xxl) {
-                    flex-wrap: wrap;
-                    gap: 10px;
-                }
-
-                li {
-                    i {
-                        margin-right: 8px;
-                    }
-                }
-            }
-
-            h3 {
-                margin-bottom: 10px;
-
-                a {
-                    background-position: 0 95%;
-                    background-repeat: no-repeat;
-                    background-size: 0% 2px;
-                    display: inline;
-
-                    &:hover {
-                        color: $theme-color;
-                        background-size: 100% 2px;
-                        background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                    }
-                }
-            }
-
-            p {
-                margin-bottom: 40px;
-
-                @include breakpoint (max-xxl) {
-                    margin-bottom: 30px;
-                }
-            }
-
-            .theme-btn {
-                padding: 4px 4px 4px 24px;
-            }
-        }
-    }
-}
-
-.main-sideber {
-
-    .news-sideber-box {
-        padding: 30px;
-        background-color: $bg-color;
-        border-radius: 16px;
-        margin-bottom: 32px;
-
-        .wid-title {
-            border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-            padding-bottom: 16px;
-            margin-bottom: 24px;
-        }
-
-        .search-widget {
-            form {
-                width: 100%;
-                position: relative;
-        
-                input {
-                    background-color: $white;
-                    font-size: 16px;
-                    font-weight: 400;
-                    padding: 16px 20px;
-                    width: 100%;
-                    border: none;
-                    color: $text-color;
-                    border-radius: 100px;
-                }
-        
-                button {
-                    position: absolute;
-                    right: 3px;
-                    top: 3px;
-                    bottom: 3px;
-                    width: 50px;
-                    height: 50px;
-                    line-height: 50px;
-                    border-radius: 100px;
-                    font-size: 16px;
-                    background-color: $theme-color;
-                    color: $white;
-                    text-align: center;
-                    transition: all .3s ease-in-out;
-                    
-                    &:hover {
-                        background-color: $header-color;
-                    }
-                }
-            }
-        }
-
-        .news-widget-categories {
-            ul {
-                li {
-                    @include flex;
-                    justify-content: space-between;
-                    font-size: 16px;
-                    font-weight: 400;
-                    background-color: $white;
-                    @include transition;
-                    border-radius: 100px;
-                    line-height: 1;
-                    padding: 20px;
-                    position: relative;
-
-                    @include breakpoint (max-xxl) {
-                        font-size: 14px;
-                    }
-                    
-                    i {
-                        margin-right: 5px;
-                        color: $theme-color-2;
-                    }
-
-                    &::before {
-                        content: "";
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 0%;
-                        height: 100%;
-                        background: $theme-color; 
-                        z-index: 0;
-                        transition: width 0.5s ease;
-                        border-radius: 100px;
-                    }
-
-                    a {
-                        color: $header-color;
-                    }
-
-                    span {
-                        @include transition;
-                        color: $header-color;
-                    }
-
-                    &:not(:last-child){
-                        margin-bottom: 20px;
-                    }
-
-                    &:hover {
-                         &::before {
-                            width: 100%;
-                        }
-
-                        i {
-                            color: $white;
-                        }
-
-                        a {
-                            color: $white;
-                            position: relative;
-                            z-index: 999;
-                        }
-
-                        span {
-                            color: $white;
-                            position: relative;
-                            z-index: 999;
-                        }
-                    }
-                }
-            }
-        }
-
-        .recent-post-area {
-            .recent-items {
-                @include flex;
-                gap: 20px;
-
-                &:not(:last-child){
-                    margin-bottom: 20px;
-                }
-
-                .recent-thumb {
-                    img {
-                        border-radius: 8px;
-                    }
-                }
-
-                .recent-content {
-                    h6 {
-                        margin-bottom: 10px;
-                        line-height: 133%;
-                        font-weight: 500;
-                        font-size: 18px;
-                        display: -webkit-box;
-                        -webkit-line-clamp: 2;
-                        -webkit-box-orient: vertical;
-                        overflow: hidden;
-
-                        @include breakpoint (max-xxl) {
-                        font-size: 15px;
-                    }
-
-                        a {
-                            &:hover {
-                                color: $theme-color;
-                            }
-                        }
-                    }
-
-                    ul {
-                        li {
-                            color: $text-color;
-                        }
-                    }
-                }
-            }
-        }
-
-        .tagcloud {
-            a {
-                display: inline-block;
-                padding: 12px 11px;
-                line-height: 1;
-                font-size: 16px;
-                font-weight: 400;
-                background: $white;
-                border-radius: 100px;
-                margin-right: 5px;
-                // text-transform: capitalize;
-                margin-bottom: 10px;
-                color: $text-color;
-                @include transition;
-                position: relative;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 0%;
-                    height: 100%;
-                    background: $theme-color; 
-                    border-radius: 100px;
-                    z-index: 0;
-                    transition: width 0.5s ease;
-                }
-
-                &:last-child {
-                    margin-right: 0;            
-                }
-                
-                &:hover {
-                   color: $white;
-                   z-index: 999;
-                   position: relative;
-
-                    &::before {
-                        width: 100%;
-                        z-index: -1;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.news-details-wrapper {
-
-    .news-details-post {
-
-        .news-details-image {
-            img {
-                @include imgw;
-                border-radius: 16px;
-            }
-        }
-
-        .details-content {
-            margin-top: 24px;
-
-            .news-list {
-                @include flex;
-                gap: 40px;
-                margin-bottom: 16px;
-
-                @include breakpoint (max-xxl) {
-                    flex-wrap: wrap;
-                    gap: 10px;
-                }
-
-                li {
-                    i {
-                        margin-right: 8px;
-                    }
-                }
-            }
-
-            h2 {
-                font-size: 40px;
-                margin-bottom: 10px;
-
-                @include breakpoint (max-xxl) {
-                    font-size: 20px;
-                }
-            }
-
-            .thumb {
-                img {
-                    width: 410px;
-                    height: 264px;
-                    object-fit: cover;
-                    border-radius: 16px;
-                }
-            }
-
-            .sideber {
-                background-color: $theme-color-2;
-                padding: 24px 30px;
-                margin-top: 24px;
-                margin-bottom: 24px;
-                border-radius: 8px;
-
-                h5 {
-                    color: $white;
-                    font-weight: 500;
-
-                    @include breakpoint (max-xxl) {
-                        font-size: 16px;
-                    }
-                }
-            }
-
-             .tag-share-wrap {
-                
-                .tagcloud {
-
-                    span {
-                        font-size: 20px;
-                        font-weight: 600;
-                        display: inline-block;
-                        margin-right: 8px;
-                        color: $header-color;
-                        font-family: $heading-font;
-                    }
-
-                    a {
-                        display: inline-block;
-                        padding: 12px 26px;
-                        line-height: 1;
-                        background: $bg-color;
-                        margin-right: 8px;
-                        // text-transform: capitalize;
-                        color: $text-color;
-                        font-weight: 400;
-                        @include transition;
-                        border-radius: 30px;
-                        
-                        @include breakpoint (max-xl){
-                            padding: 10px 18px;
-                        }
-
-                        @include breakpoint (max-xl){
-                            margin-bottom: 15px;;
-                        }
-
-                        &:hover {
-                            background-color: $theme-color;
-                            color: $white;
-                        }
-                    }
-                }
-
-                .social-share {
-                    
-                    a {
-                        font-size: 16px;
-                        color: $header-color;
-                        display: inline-block;
-                        width: 36px;
-                        height: 36px;
-                        border-radius: 100px;
-                        line-height: 36px;
-                        text-align: center;
-                        background-color: $bg-color;
-
-                        &:not(:last-child){
-                            margin-right: 10px;
-                        }
-
-                        &:hover {
-                            color: $white;
-                            background-color: $theme-color;
-                        }
-                    }
-                }
-            }
-
-             .comments-area {
-                margin-top: 40px;
-                border-top: 1px solid rgba(203, 204, 207, 0.24);
-                margin-top: 48px;
-                padding-top: 30px;
-                margin-bottom: 48px;
-                border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-
-                @include breakpoint (max-xxl) {
-                    margin-bottom: 30px;
-                }
-            
-                .comments-heading {
-                    margin-bottom: 30px;
-
-                    @include breakpoint (max-sm){
-                      margin-bottom: 20px;
-                    }
-                }
-
-                .news-single-comment {
-
-                    @include breakpoint (max-sm){
-                        flex-wrap: wrap;
-                        gap: 20px;
-                    }
-
-                    .image {
-                        img {
-                            border-radius: 12px;
-                        }
-                    }
-
-                    .content {
-                        .head {
-                            .con {
-                                h4 {
-                                    margin-bottom: 5px;
-                                }
-                            }
-
-                            .reply {
-                                font-weight: 500;
-                                font-size: 16px;
-                                color: $theme-color;
-                                padding: 6px 14px;
-                                text-transform: uppercase;
-                                color: $white;
-                                background-color: $header-color;
-                                border-radius: 100px;
-
-                                &:hover {
-                                    background-color: $theme-color;
-                                }
-                            }
-                        }
-                    }
-
-                    &.style-2 {
-                       margin-left: 90px;
-
-                        @include breakpoint (max-xxl){
-                            margin-left: 0;
-                        }
-                    }
-                }
-            }
-
-            .form-clt {
-                position: relative;
-
-                span {
-                    color: $header-color;
-                    font-size: 18px;
-                    font-weight: 500;
-                    font-family: $heading-font;
-                    margin-bottom: 10px;
-                    display: inline-block;
-                }
-
-                input,textarea {
-                    width: 100%;
-                    border: none;
-                    outline: none;
-                    background: $bg-color;
-                    color: $text-color;
-                    border-radius: 100px;
-                    padding: 18px 20px;
-
-                    @include breakpoint (max-md){
-                        padding: 14px 20px;
-                    }
-
-                    @include breakpoint (max-sm){
-                        padding: 12px 18px;
-                    }
-
-                    &::placeholder {
-                        color: $text-color;
-                    }
-                }
-
-                textarea {
-                    padding-bottom: 100px;
-                    resize: none;
-                    border-radius: 40px;
-                }
-            }
-
-            .theme-btn {
-                width: 100%;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_preloader.scss b/public/assets/scss/_preloader.scss
deleted file mode 100644
index cd1350e..0000000
--- a/public/assets/scss/_preloader.scss
+++ /dev/null
@@ -1,446 +0,0 @@
-.preloader {
-    align-items: center;
-    cursor: default;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 9999999;
-
-    .animation-preloader {
-        z-index: 1000;
-
-        .spinner {
-            animation: spinner 1s infinite linear;
-            border-radius: 50%;
-            border: 3px solid rgba(0, 0, 0, 0.2);
-            border-top-color: $theme-color;
-            height: 9em;
-            margin: 0 auto 3.5em auto;
-            width: 9em;
-
-            @media (max-width: 767px) {
-                width: 7.5em;
-                height: 7.5em;
-                margin: 0 auto 1.5em auto;
-            }
-        }
-
-        .txt-loading {
-            font: bold 5em $heading-font, $body-font;
-            text-align: center;
-            user-select: none;
-
-            @media (max-width: 767px) {
-                font-size: 2.5em;
-            }
-
-            .letters-loading {
-                color: $theme-color;
-                position: relative;
-
-                &:nth-child(2):before {
-                    animation-delay: 0.2s;
-                }
-
-                &:nth-child(3):before {
-                    animation-delay: 0.4s;
-                }
-
-                &:nth-child(4):before {
-                    animation-delay: 0.6s;
-                }
-
-                &:nth-child(5):before {
-                    animation-delay: 0.8s;
-                }
-
-                &:nth-child(6):before {
-                    animation-delay: 1s;
-                }
-
-                &:nth-child(7):before {
-                    animation-delay: 1.2s;
-                }
-
-                &:nth-child(8):before {
-                    animation-delay: 1.4s;
-                }
-
-                &::before {
-                    animation: letters-loading 4s infinite;
-                    color: $header-color;
-                    content: attr(data-text-preloader);
-                    left: 0;
-                    opacity: 0;
-                    font-family: $heading-font;
-                    position: absolute;
-                    top: -3px;
-                    transform: rotateY(-90deg);
-                }
-            }
-        }
-    }
-
-    p {
-        font-size: 15px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 8px;
-        color: $theme-color;
-    }
-
-    .loader {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        font-size: 0;
-        z-index: 1;
-        pointer-events: none;
-
-        .row {
-            height: 100%;
-        }
-
-        .loader-section {
-            padding: 0px;
-
-            .bg {
-                background-color: $bg-color;
-                height: 100%;
-                left: 0;
-                width: 100%;
-                transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-            }
-        }
-    }
-
-    &.loaded {
-        .animation-preloader {
-            opacity: 0;
-            transition: 0.3s ease-out;
-        }
-
-        .loader-section {
-            .bg {
-                width: 0;
-                transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
-            }
-        }
-    }
-}
-
-
-
-
-
-
-.back-to-top {
-    background-color: $theme-color;
-    width: 50px;
-    height: 50px;
-    line-height: 40px;
-    border-radius: 100px;
-    color: $white;
-    font-size: 16px;
-    position: fixed;
-    display: inline-block;
-    z-index: 9999;
-    right: 30px;
-    bottom: 30px;
-    @include transition;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(20px);
-
-    @include breakpoint (max-sm) {
-        display: none;
-    }
-    
-    &:hover {
-        background-color: $white;
-        color: $theme-color-2;
-    }
-    
-    &.show {
-        opacity: 1;
-        visibility: visible;
-        transform: translate(0);
-    }
-}
-
-
-
-.cursor-outer {
-	-webkit-margin-start: -12px;
-	margin-inline-start: -12px;
-	margin-top: -12px;
-	width: 30px;
-	height: 30px;
-	border: 1px solid $theme-color;
-	background-color: $theme-color;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	z-index: 10000000;
-	opacity: 0.34;
-	-webkit-transition: all 0.4s ease-out 0s;
-	transition: all 0.4s ease-out 0s;
-}
-.cursor-outer.cursor-hover {
-	opacity: 0.14;
-}
-.cursor-outer.cursor-big {
-	opacity: 0;
-}
-.mouseCursor {
-	position: fixed;
-	top: 0;
-	inset-inline-start: 0;
-	inset-inline-end: 0;
-	bottom: 0;
-	pointer-events: none;
-	border-radius: 50%;
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
-	visibility: hidden;
-	text-align: center;
-}
-.mouseCursor.cursor-big {
-	width: 20px;
-	height: 20px;
-	-webkit-margin-start: -12px;
-	margin-inline-start: -12px;
-	margin-top: -12px;
-}
-.cursor-inner {
-	-webkit-margin-start: -3px;
-	margin-inline-start: -3px;
-	margin-top: -3px;
-	width: 10px;
-	height: 10px;
-	z-index: 10000001;
-	background-color: $theme-color;
-	opacity: 1;
-	-webkit-transition: all 0.24s ease-out 0s;
-	transition: all 0.24s ease-out 0s;
-	span {
-		color: $text-color;
-		line-height: 60px;
-		opacity: 0;
-		text-transform: uppercase;
-		letter-spacing: 1px;
-		font-size: 12px;
-	}
-}
-.cursor-inner.cursor-big {
-	span {
-		opacity: 1;
-	}
-}
-.cursor-inner.cursor-hover {
-	-webkit-margin-start: -10px;
-	margin-inline-start: -10px;
-	margin-top: -10px;
-	width: 30px;
-	height: 30px;
-	background-color: $theme-color;
-	border: 1px solid #686363;
-	opacity: 0;
-}
-
-
-
-.search-popup {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: -2;
-    -webkit-transition: all 1s ease;
-    -khtml-transition: all 1s ease;
-    -moz-transition: all 1s ease;
-    -ms-transition: all 1s ease;
-    -o-transition: all 1s ease;
-    transition: all 1s ease;
-}
-
-.search-popup__overlay {
-    position: fixed;
-    width: 224vw;
-    height: 224vw;
-    top: calc(90px - 112vw);
-    right: calc(50% - 112vw);
-    z-index: 3;
-    display: block;
-    -webkit-border-radius: 50%;
-    -khtml-border-radius: 50%;
-    -moz-border-radius: 50%;
-    -ms-border-radius: 50%;
-    -o-border-radius: 50%;
-    border-radius: 50%;
-    -webkit-transform: scale(0);
-    -khtml-transform: scale(0);
-    -moz-transform: scale(0);
-    -ms-transform: scale(0);
-    -o-transform: scale(0);
-    transform: scale(0);
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transition: transform 0.8s ease-in-out;
-    -khtml-transition: transform 0.8s ease-in-out;
-    -moz-transition: transform 0.8s ease-in-out;
-    -ms-transition: transform 0.8s ease-in-out;
-    -o-transition: transform 0.8s ease-in-out;
-    transition: transform 0.8s ease-in-out;
-    transition-delay: 0s;
-    transition-delay: 0.3s;
-    -webkit-transition-delay: 0.3s;
-    background-color: #000000;
-    opacity: 0.7;
-    cursor: url(../../assets/img/close.png), auto;
-}
-
-@media (max-width: 767px) {
-    .search-popup__overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        transform: none;
-        width: 100%;
-        height: 100%;
-        border-radius: 0;
-        transform: translateY(-110%);
-    }
-}
-
-.search-popup__content {
-    position: fixed;
-    width: 0;
-    max-width: 560px;
-    padding: 30px 15px;
-    left: 50%;
-    top: 50%;
-    opacity: 0;
-    z-index: 3;
-    -webkit-transform: translate(-50%, -50%);
-    -khtml-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
-    transition-delay: 0s, 0.8s, 0s;
-    transition-delay: 0s, 0.4s, 0s;
-    transition-delay: 0.2s;
-    -webkit-transition-delay: 0.2s;
-}
-
-.search-popup__form {
-    position: relative;
-}
-
-.search-popup__form input[type=search],
-.search-popup__form input[type=text] {
-    width: 100%;
-    height: 66px;
-    border: none;
-    outline: none;
-    padding-left: 20px;
-    background-color: $white;
-    font-size: 16px;
-    font-weight: 400;
-    color: $text-color;
-    transition: all 500ms ease;
-}
-
-.search-popup__form input[type=search]:focus,
-.search-popup__form input[type=text]:focus {
-    color: $header-color;
-}
-
-.search-popup__form .search-btn {
-    padding: 0;
-    width: 66px;
-    height: 66px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: -1px;
-    border-radius: 0;
-    font-size: 20px;
-    color: $white;
-    background-color: $theme-color;
-    @include transition;
-
-    &:hover {
-        background-color: $black;
-    }
-}
-
-.search-popup__form .eolexi-btn svg {
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-}
-
-.search-popup.active {
-    z-index: 9999;
-}
-
-.search-popup.active .search-popup__overlay {
-    top: auto;
-    bottom: calc(90px - 112vw);
-    -webkit-transform: scale(1);
-    -khtml-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-    transform: scale(1);
-    transition-delay: 0s;
-    -webkit-transition-delay: 0s;
-    opacity: 0.7;
-    -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-    -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-    -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-    -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-    -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-    transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
-}
-
-@media (max-width: 767px) {
-    .search-popup.active .search-popup__overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        transform: none;
-        width: 100%;
-        height: 100%;
-        border-radius: 0;
-        transform: translateY(0%);
-    }
-}
-
-.search-popup.active .search-popup__content {
-    width: 100%;
-    opacity: 1;
-    transition-delay: 0.7s;
-    -webkit-transition-delay: 0.7s;
-}
-
diff --git a/public/assets/scss/_pricing.scss b/public/assets/scss/_pricing.scss
deleted file mode 100644
index 6a2861d..0000000
--- a/public/assets/scss/_pricing.scss
+++ /dev/null
@@ -1,309 +0,0 @@
-/* Pricing Section */
-.pricing-wrapper-2 {
-
-  .pricing-content {
-    position: relative;
-    z-index: 9;
-
-    .pricing-text {
-      margin-top: 25px;
-      max-width: 548px;
-    }
-
-    .nav {
-      background-color: $white;
-      border-radius: 24.5px;
-      padding: 10px 20px;
-      margin-top: 40px;
-      border: none;
-
-      @include breakpoint (max-xxl) {
-       margin-top: 15px;
-     }
-
-      .nav-tabs {
-        border-bottom: 0;
-        display: flex;
-      }
-
-      .nav-link {
-        font-size: 16px;
-        font-weight: 700;
-        text-transform: uppercase;
-        border: 0;
-        border-radius: 0;
-        padding: 0 40px;
-        position: relative;
-        background: transparent;
-        z-index: 2;
-        color: $text-color;
-        margin-bottom: 0;
-
-        &::before {
-          content: "";
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%) translateX(50%);
-          background: $theme-color;
-          width: 43px;
-          height: 22px;
-          border-radius: 20px;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          right: -18px;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 17px;
-          height: 17px;
-          border-radius: 50%;
-          background: $white;
-          z-index: 1;
-        }
-
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-
-          &::after,
-          &::before {
-            display: none;
-          }
-        }
-
-        &.active {
-          color: $theme-color-2;
-
-          &::after {
-            right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .pricing-right-items {
-    display: flex;
-    align-items: center;
-
-    .pricing-box-items {
-      max-width: 417px;
-      width: 100%;
-      border-radius: 20px;
-      background: $header-color;
-      padding: 40px;
-
-       @include breakpoint (max-xxl) {
-         padding: 30px;
-      }
-
-      @include breakpoint (max-sm) {
-        padding: 25px;
-      }
-
-      .pricing-header {
-        position: relative;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-        padding-bottom: 35px;
-        position: relative;
-        z-index: 9;
-        margin-bottom: 32px;
-
-        .sub-texts {
-            top: 40px;
-            right: 0;
-            position: absolute;
-            font-size: 24px;
-            font-weight: 700;
-            color: $white;
-
-             @include breakpoint (max-sm) {
-                font-size: 20px;
-            }
-        }
-
-        h2 {
-            font-size: 72px;
-            font-weight: 700;
-            line-height: 1;
-            color: $white;
-            
-            @include breakpoint (max-sm) {
-                font-size: 50px;
-            }
-
-            sup {
-                font-size: 32px;
-                font-weight: 700;
-                top: -1.5em;
-                margin-right: -10px;
-
-                @include breakpoint (max-sm) {
-                    top: -0.5em;
-                }
-            }
-
-            sub {
-                font-size: 20px;
-                font-weight: 600;
-                // text-transform: capitalize;
-                margin-left: -10px;
-            }
-        }
-     }
-
-      .theme-btn {
-        background: $theme-color;
-        color: $white;
-        border: none;
-        @include flex;
-        justify-content: space-between;
-
-        i {
-            background-color: $white;
-            color: $header-color;
-        }
-
-        &:hover {
-            background-color: $white;
-            color: $header-color;
-
-            i {
-                background-color: $theme-color;
-                color: $white;
-            }
-        }
-      }
-
-      ul  {
-        margin-top: 24px;
-
-        li {
-            color: $white;
-
-            &:not(:last-child) {
-                margin-bottom: 15px;
-            }
-
-            @include breakpoint (max-sm) {
-                font-size: 14px;
-            }
-
-            i {
-               color: $theme-color-2;
-               margin-right: 8px;
-
-               @include breakpoint (max-sm) {
-                    margin-right: 5px;
-                }
-            }
-        }
-      }
-
-      &.style-2 {
-        margin-left: -32%;
-        z-index: -1;
-        border-radius: 20px;
-        background: $white;
-
-        @media (max-width: 767px) {
-          margin-left: -70%;
-        }
-
-        .pricing-header {
-
-            .sub-texts {
-                color: $header-color;
-            }
-        }
-        
-        .theme-btn {
-           width: 100%;
-           background-color: transparent;
-           border: 1px solid rgba(203, 204, 207, 0.24);
-           color: $header-color;
-
-           i {
-             background-color: $theme-color;
-             color: $white;
-           }
-        }
-
-        ul {
-          li {
-             color: $text-color;
-          }
-        }
-      }
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-
-.pricing-card-items-3 {
-   border-radius: 16px;
-   background-color: $white;
-   backdrop-filter: blur(24px);
-   padding: 40px 48px;
-   margin-top: 30px;
-    @include transition;
-
-    @include breakpoint (max-xl) {
-        padding: 30px;
-    }
-
-   .pricing-header {
-      border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-      padding-bottom: 16px;
-      margin-bottom: 24px;
-
-      h6 {
-        text-transform: uppercase;
-        font-weight: 500;
-        margin-bottom: 10px;
-      }
-
-      h2 {
-        color: $theme-color-2;
-      }
-   }
-
-   .pricing-list-box {
-      padding: 24px;
-      background-color: $bg-color;
-      margin-bottom: 30px;
-      border-radius: 16px;
-
-      li {
-        color: $header-color;
-
-        &:not(:last-child) {
-          margin-bottom: 15px;
-        }
-
-          i {
-            color: $theme-color-2;
-            margin-right: 12px;
-          }
-      }
-   }
-
-   .theme-btn {
-      width: 100%;
-      @include flex;
-      justify-content: space-between;
-   }
-
-   &:hover {
-      transform: translateY(-10px);
-   }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_section.scss b/public/assets/scss/_section.scss
deleted file mode 100644
index 30249ea..0000000
--- a/public/assets/scss/_section.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-
-//>>>>> Section Title Start <<<<<//
-
-.section-title {
-	position: relative;
-	z-index: 99;
-	margin-bottom: 30px;
-
-	@include breakpoint (max-md){
-		margin-bottom: 0;
-	}
-
-	.sub-title {
-		font-size: 18px;
-		font-weight: 500;
-		color: $theme-color-2;
-		font-family: $heading-font;
-		margin-bottom: 20px;
-		// text-transform: capitalize;
-		line-height: 1;
-		padding: 8px 16px;
-		border-radius: 100px;
-		display: inline-block;
-		position: relative;
-		background-color: $bg-color;
-
-		&.bg-2 {
-			background-color: $bg-color-2;
-			color: $white;
-		}
-	}
-
-	.sub-title-2 {
-		color: $theme-color-2;
-		text-transform: uppercase;
-		font-size: 18px;
-		font-weight: 500;
-		font-family: $heading-font;
-		margin-bottom: 20px;
-		display: inline-block;
-
-		&.theme {
-			color: $theme-color;
-		}
-	}
-
-	h2 {
-		text-transform: uppercase;
-
-		span {
-			text-transform: uppercase;
-			color: $theme-color;
-		}
-	}
-}
-
-
-.section-title-area	{
-	@include flex;
-	justify-content: space-between;
-	position: relative;
-	z-index: 9;
-	margin-bottom: 30px;
-	
-	.section-title {
-		margin-bottom: 0;
-	}
-	
-	@include breakpoint (max-lg) {
-		flex-wrap: wrap;
-		// justify-content: center;
-		// text-align: center;
-		gap: 30px;
-	}
-
-	@include breakpoint (max-md){
-		margin-bottom: 0;
-	}
-
-	p {
-		max-width: 523px;
-	}
-}
-//>>>>> Section Title End <<<<<//
-
-//>>>>> Basic Css Start <<<<<//
-
-.center {
-	text-align: center;
-	margin: 0 auto;
-}
-
-.section-bg {
-	background-color: $bg-color-2;
-}
-
-.section-bg-1 {
-	background-color: $bg-color;
-}
-
-.section-bg-2 {
-	background-color: #F7F7F7;
-}
-
-.header-bg {
-	background-color: $header-color;
-}
-
-
-.footer-bg-2 {
-	background-color: #151A26;
-}
-
-.section-padding {
-	padding: 120px 0;
-
-	@include breakpoint(max-xl){
-		padding: 100px 0;
-	}
-
-	@include breakpoint(max-lg){
-		padding: 80px 0;
-	}
-}
-//>>>>> Basic Css End <<<<<//
-
diff --git a/public/assets/scss/_service.scss b/public/assets/scss/_service.scss
deleted file mode 100644
index b21b702..0000000
--- a/public/assets/scss/_service.scss
+++ /dev/null
@@ -1,673 +0,0 @@
-.service-wrapper {
-    border-radius: 16px;
-    @include transition;
-    padding: 30px 0;
-
-    &.active {
-       
-
-         @include breakpoint (max-xxl) {
-           margin-top: 30px;
-        }
-    }
-
-    .service-item {
-        @include flex;
-        justify-content: space-between;
-        position: relative;
-
-         @include breakpoint (max-xxxl) {
-           flex-wrap: wrap;
-           gap: 30px;
-        }
-
-        .image-hover {
-            width: 324px;
-            height: 196px;
-            position: absolute;
-            top: 50%;
-            inset-inline-start: 0;
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position-x: 75%;
-            opacity: 0;
-            transition: opacity 0.3s, transform 0.4s ease-out;
-            overflow: hidden;
-            pointer-events: none;
-            z-index: 2;
-            visibility: hidden;
-            border-radius: 10px;
-        }
-
-        .left-item {
-            @include flex;
-            gap: 100px;
-
-             @include breakpoint (max-xxxl) {
-                  gap: 30px;
-              }
-
-            .number {
-                font-size: 20px;
-                font-weight: 700;
-            }
-
-             h3 {
-                a {
-                    background-position: 0 95%;
-                    background-repeat: no-repeat;
-                    background-size: 0% 2px;
-                    display: inline;
-
-                    &:hover {
-                        color: $theme-color;
-                        background-size: 100% 2px;
-                        background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                    }
-                }
-            }
-        }
-
-        .right-item {
-            @include flex;
-            position: relative;
-
-            p {
-                max-width: 503px;
-            }
-
-            .service-btn {
-                font-weight: 500;
-                color: $theme-color;
-                font-family: $heading-font;
-                // text-transform: capitalize;
-                opacity: 0;
-                visibility: hidden;
-                transition: all 0.3s ease;
-                @include transition;
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                right: 0;
-                opacity: 0;
-
-                 @include breakpoint (max-sm) {
-                    display: none;
-                }
-                
-                i {
-                    margin-left: 5px;
-                }
-            }
-        }
-    }
-
-    &:hover {
-        background-color: $bg-color;
-
-        .service-item {
-
-            .image-hover {
-                opacity: 1;
-                visibility: visible;
-            }
-
-            .right-item {
-                align-items: center; 
-
-                p {
-                    margin-right: 80px;
-
-                     @include breakpoint (max-sm) {
-                        margin-right: 0;
-                    }
-                }
-
-                .service-btn {
-                    opacity: 1;
-                    visibility: visible;
-                }
-            }
-        }
-    }
-}
-
-.service-wrapper-2 {
-    border-radius: 16px;
-    border: 1px solid rgba(203, 204, 207, 0.24);
-    margin-top: 48px;
-
-    .service-box-item {
-        border-right: 1px solid rgba(203, 204, 207, 0.24);
-         padding: 30px;
-         position: relative;
-          height: 100%;
-          overflow: hidden;
-
-         &::before {
-            @include before;
-            background: $white;
-            z-index: 3;
-            transition: all 0.3s ease-out;
-        }
-
-          .service-image {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: hidden;
-            transition: all 0.1s ease-out;
-    
-            img {
-                @include imgw;
-                object-fit: cover;
-                object-position: center center;
-            }
-    
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(0deg, rgba(21, 26, 38, 0.80) 0%, rgba(21, 26, 38, 0.80) 100%);
-            }
-        }
-
-        h2 {
-            font-size: 56px;
-            -webkit-text-stroke-width: 1px;
-            -webkit-text-stroke-color: $text-color;
-            color: transparent;
-            margin-bottom: 190px;
-            z-index: 999;
-            position: relative;
-        }
-
-        h3 {
-            z-index: 999;
-            position: relative;
-
-            a {
-                  background-position: 0 95%;
-                  background-repeat: no-repeat;
-                  background-size: 0% 2px;
-                  display: inline;
-                  color: $header-color;
-
-                  &:hover {
-                      color: $theme-color;
-                      background-size: 100% 2px;
-                      background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                  }
-              }
-        }
-
-         &:hover {
-            border: none;
-
-            &::before {
-                transform: translate(100%,-100%);
-            }
-            
-            h2 {
-                color: $theme-color !important;
-                -webkit-text-stroke: initial !important;
-                z-index: 999;
-                position: relative;
-            }
-
-            h3 {
-                z-index: 999;
-                position: relative;
-
-                a {
-                    color: $white;
-                }
-            }
-
-            .service-image {
-                opacity: 1;
-            }
-        }
-    }
-}
-
-.service-section-2 {
-    position: relative;
-    z-index: 9;
-
-    .service-wrapper-2 {
-        .swiper-slide.swiper-slide-active {
-
-            .service-box-item {
-              border: 1px transparent;
-
-            &::before {
-                background: none;
-            }
-              .service-image {
-                opacity: 1;
-            }
-
-            h2 {
-                color: $theme-color !important;
-                -webkit-text-stroke: initial !important;
-                z-index: 999;
-                position: relative;
-            }
-
-            h3 {
-                z-index: 999;
-                position: relative;
-
-                a {
-                    color: $white;
-                }
-            }
-            
-          }
-        }
-    }
-
-    .service-bottom {
-        @include flex;
-        justify-content: space-between;
-        margin-top: 40px;
-
-        @include breakpoint (max-xxl){
-            display: none;
-        }
-
-        .service-pagi-items {
-
-            .service-dot {
-                .swiper-pagination-bullet {
-                    width: 340px;
-                    height: 2px;
-                    border-radius: 0;
-                    background: $border-color-2;
-                    opacity: 1;
-                    transition: 0.6s;
-                    margin: 0 !important;
-                }
-        
-                .swiper-pagination-bullet-active {
-                    opacity: 1;
-                    background: $theme-color;
-                    width: 124px;
-                }
-        
-                @include breakpoint (max-md){
-                    display: none;
-                }
-            }
-        }
-
-         .array-buttons-3 {
-            @include flex;
-            gap: 24px;
-
-            @include breakpoint (max-sm) {
-               display: none;
-            }
-
-            .array-prev {
-                width: 48px;
-                height: 48px;
-                line-height: 48px;
-                text-align: center;
-                background-color: $bg-color;
-                color: $header-color;
-                @include transition;
-                z-index: 999;
-                border-radius: 100px;
-                transform: rotate(320deg);
-
-                &:hover {
-                    background-color: $theme-color;
-                    color: $white;
-                }
-            }
-
-            .array-next {
-                width: 48px;
-                height: 48px;
-                line-height: 48px;
-                text-align: center;
-                background-color: $theme-color;
-                color: $white;
-                @include transition;
-                z-index: 999;
-                border-radius: 100px;
-                transform: rotate(320deg);
-                border: 1px solid $theme-color;
-
-                &:hover {
-                    background-color: $bg-color;
-                    color: $header-color;
-                    border: 1px solid $bg-color;
-                }
-            }
-        }
-    }
-}
-
-.service-main-item-3 {
-    @include flex;
-    justify-content: space-between;
-     border-radius: 16px;
-     background-color: $white;
-     padding: 16px 0px 16px 16px;
-     margin-top: 24px;
-
-     @include breakpoint (max-xxl) {
-        flex-wrap: wrap;
-        gap: 30px;
-     }
-
-    .service-left {
-        @include flex;
-        gap: 48px;
-
-         @include breakpoint (max-xxl) {
-            gap: 30px;
-        }
-
-         @include breakpoint (max-md) {
-            flex-wrap: wrap;
-            gap: 30px;
-        }
-
-        .service-image {
-            img {
-                @include imgw;
-                border-radius: 16px;
-            }
-        }
-
-        .content {
-             h3 {
-                a {
-                    background-position: 0 95%;
-                    background-repeat: no-repeat;
-                    background-size: 0% 2px;
-                    display: inline;
-
-                    &:hover {
-                        color: $theme-color;
-                        background-size: 100% 2px;
-                        background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                    }
-                }
-            }
-
-            p {
-                max-width: 566px;
-                margin-top: 15px;
-            }
-        }
-    }
-
-    .service-button {
-        transform: rotate(90deg);
-        margin-right: -15px;
-
-         @include breakpoint (max-xxl) {
-            margin-right: 0;
-            transform: rotate(0);
-        }
-    }
-
-    &.style-2 {
-        padding: 16px 16px 16px 16px;
-
-        .service-left {
-            .content {
-                text-align: right;
-
-                @include breakpoint (max-xxl) {
-                    text-align: left;
-                }
-            }
-        }
-
-        .service-button {
-           margin-left: -15px;
-            margin-right: 0;
-
-            @include breakpoint (max-xxl) {
-               margin-left: 0;
-            }
-        }
-    }
-}
-
-.service-visa-wrapper {
-    @include flex;
-    justify-content: space-between;
-
-    @include breakpoint (max-xxl) {
-        border: 1px solid rgba(202, 210, 210, 0.8);
-    }
-
-    @include breakpoint (max-lg) {
-        flex-wrap: wrap;
-    }
-
-    .service-visa-items {
-        padding: 48px 48px 48px 40px;
-        border-top: 1px solid rgba(202, 210, 210, 0.8);
-        position: relative;
-
-        @include breakpoint (max-xxl) {
-           padding: 30px 30px 30px 30px;
-            border-top: none;
-        }
-
-        .top-item {
-            @include flex;
-            gap: 16px;
-            margin-bottom: 16px;
-
-            .number {
-                width: 64px;
-                height: 64px;
-                line-height: 64px;
-                text-align: center;
-                border-radius: 100px;
-                background-color: $bg-color;
-            }
-
-            h3 {
-               a {
-                    background-position: 0 95%;
-                    background-repeat: no-repeat;
-                    background-size: 0% 2px;
-                    display: inline;
-
-                    &:hover {
-                        color: $theme-color;
-                        background-size: 100% 2px;
-                        background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                    }
-                }
-            }
-        }
-
-        .service-button {
-            position: absolute;
-            top: 90px;
-            right: -89px;
-            bottom: 0;
-            color: $white;
-            background-color: $theme-color;
-            transform: rotate(90deg);
-            padding: 10px 12px;
-            height: 45px;
-            width: 224px;
-            text-align: center;
-            opacity: 0;
-            visibility: hidden;
-            @include transition;
-
-            @include breakpoint (max-xxl) {
-                display: none;
-            }
-        }
-
-        &.style-2 {
-            border-left: 1px solid rgba(202, 210, 210, 0.8);
-        }
-
-        &:hover {
-            .service-button {
-                opacity: 1;
-                visibility: visible;
-            }
-        }
-    }
-}
-
-.service-details-wrapper {
-
-    .service-details-post {
-
-        .details-image {
-            margin-top: 24px;
-            margin-bottom: 30px;
-
-            img {
-                @include imgw;
-                border-radius: 24px;
-            }
-        }
-
-        .text {
-            font-size: 32px;
-
-            @include breakpoint (max-xxl) {
-                font-size: 25px;
-            }
-        }
-
-        .service-left-content {
-
-            .list-item {
-                margin-top: 24px;
-
-                li {
-
-                    i {
-                        color: $theme-color-2;
-                        margin-right: 6px;
-                    }
-
-                    span {
-                        font-size: 20px;
-                        font-weight: 500;
-                        color: $header-color;
-                        font-family: $heading-font;
-
-                        @include breakpoint (max-xxl) {
-                            font-size: 16px;
-                        }
-                    }
-
-                    &:not(:last-child) {
-                        margin-bottom: 16px;
-                    }
-                }
-            }
-        }
-
-        .thumb {
-            img {
-                @include imgw;
-                border-radius: 24px;
-            }
-        }
-        
-        .faq-items {
-            position: relative;
-            z-index: 9;
-
-            .accordion {
-                .accordion-item {
-                    border: none;
-
-                h5 {
-                    button {
-                    line-height: 1;
-                    font-weight: 600;
-                    padding: 29px 30px;
-                    color: $header-color;
-
-                    cursor: pointer;
-
-                        @include breakpoint(max-sm) {
-                            font-size: 18px;
-                            line-height: 1.6;
-                            padding: 22px 20px;
-                        }
-                    }
-                }
-
-                .accordion-body {
-                    padding: 20px 30px;
-                    background-color: $white;
-                    box-shadow: 8px 8px 32px 0 rgba(0, 72, 180, 0.08);
-                    backdrop-filter: blur(5px);
-
-                    p {
-                        font-size: 16px;
-                        line-height: 24px;
-                        font-weight: 400;
-
-                        @include breakpoint(max-sm) {
-                            width: 100%;
-                            font-size: 14px;
-                            line-height: 28px;
-                        }
-                    }
-                }
-            }
-
-            .accordion-button {
-                background-color: $white;
-                color: $header-color;
-                box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
-                backdrop-filter: blur(5px);
-
-                &::after {
-                    content: "\f324";
-                    font-family: "Font Awesome 6 Pro";
-                    background: transparent;
-                    font-weight: 900;
-                    transition: all 0.3s ease-in-out !important;
-                    color: $theme-color-2;
-                }
-
-                &:not(.collapsed) {
-                    background-color: $white;
-                    box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
-                    backdrop-filter: blur(5px);
-                    color: $header-color;
-
-                    &::after {
-                        content: "\f322";
-                        font-family: "Font Awesome 6 Pro";
-                        background: transparent;
-                        font-weight: 900;
-                        color: $theme-color;
-                        transform: rotate(0);
-                    }
-                }
-            }
-        }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_testimonial.scss b/public/assets/scss/_testimonial.scss
deleted file mode 100644
index e0d4c2a..0000000
--- a/public/assets/scss/_testimonial.scss
+++ /dev/null
@@ -1,370 +0,0 @@
-.testimonial-wrapper {
-    margin-top: 60px;
-
-    .testimonia-image {
-        position: relative;
-        height: 370px;
-        overflow: hidden;
-        border-radius: 16px;
-
-        @include breakpoint (max-lg) {
-            height: initial;
-        }
-
-        .video-btn {
-            width: 64px;
-            height: 64px;
-            line-height: 64px;
-            border-radius: 100px;
-            text-align: center;
-            background-color: $theme-color;
-            color: $white;
-            display: inline-block;
-            position: absolute;
-            left: 35px;
-            top: 30px;
-            z-index: 9;
-
-            &::before {
-                @include before;
-                border-radius: 1000px;
-                border: 1px solid rgba(203, 204, 207, 0.24);
-                width: 80px;
-                height: 80px;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%,-50%);
-            }
-        }
-
-        h5 {
-            font-weight: 500;
-            color: $white;
-            position: absolute;
-            left: 24px;
-            bottom: 24px;
-            z-index: 9;
-        }
-
-        img {
-            @include imgw;
-            border-radius: 16px;
-            object-fit: cover;
-        }
-
-         &::after {
-            content: "";
-            position: absolute;
-            width: 200%;
-            height: 0%;
-            left: 50%;
-            top: 50%;
-            background-color: rgba(255,255,255,.3);
-            transform: translate(-50%,-50%) rotate(-45deg);
-            z-index: 1;
-        }
-
-        &:hover {
-             &::after {
-                height: 250%;
-                transition: all 600ms linear;
-                background-color: transparent;
-            }
-        }
-
-        
-    }
-
-    .testimonial-box {
-        border-radius: 16px;
-        background-color: $bg-color;
-        padding: 30px 24px;
-
-        .star {
-            color: $theme-color;
-            margin-bottom: 24px;
-        }
-
-        p {
-            font-style: italic;
-            font-weight: 500;
-            max-width: 307px;
-        }
-        
-        .info-item {
-            @include flex;
-            gap: 12px;
-            margin-top: 90px;
-
-            @include breakpoint (max-xxl) {
-                margin-top: 40px;
-            }
-
-             @include breakpoint (max-lg) {
-                margin-top: 30px;
-            }
-
-            .client-image {
-                img {
-                    border-radius: 100%;
-                }
-            }
-        }
-    }
-}
-
-.testimonial-wrapper-2 {
-    margin-top: 60px;
-
-    @include breakpoint (max-sm) {
-        margin-top: 30px;
-    }
-
-    .testimonial-image {
-        height: 305px;
-
-        img {
-            @include imgw;
-            border-radius: 16px;
-            object-fit: cover;
-        }
-    }
-
-    .testimonial-item {
-        @include flex;
-        gap: 30px;
-
-         @include breakpoint (max-xxl) {
-               flex-wrap: wrap;
-          }
-
-        .testimonial-left {
-            @include transition;
-
-            .testimonial-box {
-                padding: 40px;
-                background-color: $theme-color-2;
-                border-radius: 16px;
-                position: relative;
-                 @include transition;
-
-                 @include breakpoint (max-xxl) {
-                    padding: 30px;
-                 }
-
-                &::before {
-                    position: absolute;
-                    bottom: -23px;
-                    content: "";
-                    left: 32px;
-                    width: 35px;
-                    height: 24px;
-                    background-color: $theme-color-2;
-                    clip-path: polygon(100% 0, 0 0, 100% 100%);
-                }
-
-                .star {
-                    color: $white;
-                    margin-bottom: 10px;
-                }
-
-                p {
-                    max-width: 549px;
-                    font-size: 20px;
-                    font-weight: 500;
-                    font-family: $heading-font;
-                    color: $white;
-                    line-height: 140%;
-
-                    @include breakpoint (max-xxl) {
-                        font-size: 16px;
-                    }
-                }
-            }
-
-            .info-item {
-                @include flex;
-                gap: 10px;
-                margin-top: 24px;
-                margin-left: 80px;
-
-                img {
-                    border: 1px solid $theme-color;
-                    border-radius: 100%;
-                }
-
-                .content {
-                    h5 {
-                        font-weight: 500;
-                    }
-                }
-            }
-        }
-
-        .right-item {
-             width: 100px;
-
-            .test-slider {
-                height: 300px; 
-
-                @include breakpoint (max-xxl) {
-                    height: 80px;
-                }
-            }
-
-            .client-image {
-                img {
-                    border-radius: 8px;
-                     transition: all 0.5s ease;
-                }
-            }
-        }
-    }
-}
-
-.testimonial-wrapper-3 {
-    margin-top: 60px;
-    
-    .testimonial-thumb {
-         border-radius: 16px;
-         
-        img {
-            @include imgw;
-            border-radius: 16px;
-        }
-
-         &.tp-clip-anim {
-            width: 100%;
-            display: grid;
-            align-items: center;
-            justify-items: center;
-            overflow: hidden;
-            position: relative;
-            & .tp-anim-img {
-                opacity: 0;
-                width: 100%;
-                height: 100%;
-            }
-
-            & .mask {
-                background-size: cover;
-                background-position: center;
-                transform: scale(1.005);
-            }
-            >* {
-                grid-area: 1 / 1 / 2 / 2;
-                width: 100%;
-                height: 100%;
-                max-height: 100%;
-            }
-       }
-    }
-
-    .testimonial-content {
-        margin-left: 50px;
-        position: relative;
-
-        @include breakpoint (max-xxl) {
-            margin-left: 0;
-        }
-
-        .content {
-            .star {
-                color: $theme-color;
-                margin-bottom: 20px;
-            }
-
-            h3 {
-                font-size: 28px;
-                line-height: 143%;
-                border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-                padding-bottom: 40px;
-                margin-bottom: 30px;
-                font-weight: 500;
-
-                @include breakpoint (max-xxl) {
-                    font-size: 24px;
-                }
-
-                @include breakpoint (max-lg) {
-                    font-size: 20px;
-                }
-
-                @include breakpoint (max-sm) {
-                    font-size: 16px;
-                }
-            }
-
-            .info-item {
-                @include flex;
-                gap: 20px;
-
-                .icon {
-                    width: 56px;
-                    height: 56px;
-                    line-height: 56px;
-                    text-align: center;
-                    border-radius: 100px;
-                    background-color: $theme-color-2;
-                    color: $white;
-                    font-size: 30px;
-                }
-
-                .content {
-                    border-left: 1px solid rgba(203, 204, 207, 0.24);
-                    padding-left: 30px;
-                }
-            }
-        }
-
-        .array-buttons-3 {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            @include flex;
-            gap: 24px;
-
-            @include breakpoint (max-sm) {
-               display: none;
-            }
-
-            .array-prev {
-                width: 48px;
-                height: 48px;
-                line-height: 48px;
-                text-align: center;
-                background-color: $bg-color;
-                color: $header-color;
-                @include transition;
-                z-index: 999;
-                border-radius: 100px;
-                transform: rotate(320deg);
-
-                &:hover {
-                    background-color: $theme-color;
-                    color: $white;
-                }
-            }
-
-            .array-next {
-                width: 48px;
-                height: 48px;
-                line-height: 48px;
-                text-align: center;
-                background-color: $theme-color;
-                color: $white;
-                @include transition;
-                z-index: 999;
-                border-radius: 100px;
-                transform: rotate(320deg);
-                border: 1px solid $theme-color;
-
-                &:hover {
-                    background-color: $bg-color;
-                    color: $header-color;
-                    border: 1px solid $bg-color;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/_typography.scss b/public/assets/scss/_typography.scss
deleted file mode 100644
index 1ff985e..0000000
--- a/public/assets/scss/_typography.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-/* --------------------------------------------
-    Template Default Fonts & Fonts Styles
- ---------------------------------------------- */
- 
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
-$heading-font: 'Space Grotesk', serif;
-$body-font: "Inter", sans-serif;
-//font-family: "Font Awesome 6 Free";
-$fa: "Font Awesome 6 Pro";
-
-body {
-    font-family: $body-font;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    color: $text-color;
-    background-color: $white;
-	padding: 0;
-	margin: 0;
-	overflow-x: hidden;
-	// // text-transform: capitalize;
-}
-
-ul {
-	padding: 0;
-	margin: 0;
-	list-style: none;
-}
-
-button {
-    border: none;
-    background-color: transparent;
-	padding: 0;
-}
-
-input:focus{
-	color: $white;
-	outline: none;
-}
-
-input{
-	color: $white;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: $heading-font;
-    margin: 0px;
-	padding: 0;
-    color: $header-color;
-	@include transition;
-	// text-transform: capitalize;
-}
-
-h1 {
-	font-size: 72px;
-	font-weight: 700;
-	line-height: 111%;
-
-	@include breakpoint(max-xl4){
-		font-size: 70px;
-	}
-
-	@include breakpoint(max-xxxl){
-		font-size: 60px;
-	}
-
-	@include breakpoint(max-xxl){
-		font-size: 55px;
-	}
-
-	@include breakpoint(max-xl){
-		font-size: 40px;
-	}
-
-	@include breakpoint(max-lg){
-		font-size: 40px;
-	}
-
-	@include breakpoint(max-md){
-		font-size: 32px;
-	}
-
-	@include breakpoint(max-sm){
-		font-size: 28px;
-	}
-}
-
-h2 {
-	font-size: 48px;
-	font-weight: 700;
-	line-height: 117%;
-
-	@include breakpoint(max-xxl){
-		font-size: 50px;
-	}
-
-	@include breakpoint(max-xl){
-		font-size: 38px;
-	}
-
-	@include breakpoint(max-lg){
-		font-size: 38px;
-	}
-
-	@include breakpoint(max-md){
-		font-size: 35px;
-	}
-
-	@include breakpoint(max-sm){
-		font-size: 30px;
-	}
-
-	@include breakpoint(max-xxs){
-		font-size: 25px;
-	}
-}
-
-h3 {
-	font-size: 24px;
-	font-weight: 700;
-	line-height: 133%;
-
-	@include breakpoint(max-xl){
-		font-size: 20px;
-	}
-}
-
-h4 {
-	font-size: 22px;
-	font-weight: 700;
-	line-height: 141%;
-
-	@include breakpoint(max-xl){
-		font-size: 20px;
-	}
-}
-
-h5 {
-	font-size: 20px;
-	font-weight: 700;
-	line-height: 140%;
-}
-
-h6 {
-	font-size: 16px;
-	font-weight: 600;
-}
-
-a {
-    text-decoration: none;
-    outline: none !important;
-    cursor: pointer;
-    color: $header-color;
-	@include transition;
-}
-
-p {
-    margin: 0px;
-	@include transition;
-}
-
-span {
-	margin: 0px;
-	// @include transition;
-}
-
diff --git a/public/assets/scss/_variables.scss b/public/assets/scss/_variables.scss
deleted file mode 100644
index 79dda32..0000000
--- a/public/assets/scss/_variables.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-
-:root {
-    
-    --body: #fff;
-    --black: #000;
-    --white: #fff;
-    --theme: #E13833;
-     --theme-2: #0048B4;
-    --header: #151A26;
-    --text: #535761;
-     --text-2: #0B4E3D;
-    --border: #C9C9C9;
-     --border-2: #CBCCCF;
-    --bg: #F8F8F9;
-     --bg-2: #153888;
-    --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);
-}
-
-// Theme Color - Defualt Colors
-$black: var(--black);
-$white: var(--white);
-$theme-color: var(--theme);
-$theme-color-2: var(--theme-2);
-$text-color: var(--text);
-$text-color-2: var(--text-2);
-$header-color: var(--header);
-$border-color: var(--border);
-$border-color-2: var(--border-2);
-$bg-color: var(--bg);
-$bg-color-2: var(--bg-2);
-$shadow: var(--pp-box-shadow);
\ No newline at end of file
diff --git a/public/assets/scss/_visa.scss b/public/assets/scss/_visa.scss
deleted file mode 100644
index 29eb210..0000000
--- a/public/assets/scss/_visa.scss
+++ /dev/null
@@ -1,565 +0,0 @@
-.visa-certification-wrapper {
-
-    .visa-image {
-        margin-left: -310px;
-
-         @include breakpoint (max-xxl) {
-           margin-left: 0;
-        }
-
-        img {
-            @include imgw;
-        }
-    }
-
-    .visa-certification-content {
-        margin-left: 17px;
-
-         @include breakpoint (max-xxl) {
-            margin-left: 0;
-            margin-bottom: 100px;
-            margin-top: 100px;
-        }
-
-         @include breakpoint (max-lg) {
-           margin-bottom: 80px;
-           margin-top: 0;
-        }
-
-        .visa-item {
-            @include flex;
-            gap: 48px;
-            margin-top: 90px;
-
-            @include breakpoint (max-xxl) {
-                margin-top: 30px;
-                gap: 30px;
-            }
-
-            @include breakpoint (max-lg) {
-                flex-wrap: wrap;
-                gap: 30px;
-            }
-
-             .nav {
-                display: grid;
-                gap: 30px;
-
-                li {
-                    font-size: 20px;
-                    font-weight: 700;
-                    font-family: $heading-font;
-
-                    @include breakpoint (max-xxl) {
-                       font-size: 12px;
-                    }
-                
-                    @include breakpoint (max-lg) {
-                       font-size: 16px;
-                    }
-                
-                .nav-link {
-                    color: $header-color;
-                    @include transition;
-                    padding: 16px 40px 16px 16px;
-                    border-radius: 8px;
-                    backdrop-filter: blur(28px);
-                    background-color: $white;
-                    line-height: 1;
-
-                     @include breakpoint (max-xxl) {
-                         padding: 10px 10px 10px 10px;
-                    }
-
-                    @include breakpoint (max-lg) {
-                         padding: 16px 40px 16px 16px;
-                    }
-
-                    i {
-                        width: 24px;
-                        height: 24px;
-                        line-height: 24px;
-                        text-align: center;
-                        background-color: $theme-color;
-                        color: $white;
-                        border-radius: 50px;
-                        font-size: 14px;
-                        transform: rotate(-45deg);
-                        margin-right: 6px;
-                    }
-                   
-                    &.active {
-                        position: relative;
-                        background-color: $theme-color;
-                        color: $white;
-                        border-radius: 100px;
-
-                        i {
-                            background-color: $white;
-                            color: $theme-color;
-                        }
-                      }
-                   }
-                }
-            }
-
-            .content {
-
-                .icon {
-                    margin-bottom: 16px;
-                }
-
-                p {
-                    max-width: 479px;
-                    margin-bottom: 40px;
-                    margin-top: 10px;
-                }
-            }
-        }
-    }
-}
-
-.visa-provide-box {
-    background-color: $white;
-    padding: 30px;
-    border-radius: 16px;
-    background-color: $white;
-    margin-top: 30px;
-
-    .visa-top-item {
-        margin-bottom: 30px;
-         @include flex;
-        justify-content: space-between;
-
-        @include breakpoint (max-xxl) {
-            flex-wrap: wrap;
-            gap: 20px;
-        }
-
-        .visa-left  {
-            @include flex;
-            gap: 16px;
-
-            p {
-                color: $theme-color;
-            }
-
-             h3 {
-                a {
-                    background-position: 0 95%;
-                    background-repeat: no-repeat;
-                    background-size: 0% 2px;
-                    display: inline;
-
-                    &:hover {
-                        color: $theme-color;
-                        background-size: 100% 2px;
-                        background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%);
-                    }
-                }
-            }
-        }
-
-        .theme-btn {
-            background-color: $bg-color;
-
-            &:hover {
-                background-color: $theme-color;
-                color: $white;
-            }
-        }
-    }
-
-    .visa-list-item {
-        @include flex;
-        justify-content: space-between;
-
-        
-        @include breakpoint (max-xxl) {
-            flex-wrap: wrap;
-            gap: 20px;
-        }
-
-        .list {
-            li {
-                font-size: 18px;
-                font-weight: 500;
-                font-family: $heading-font;
-
-                @include breakpoint (max-xxxl) {
-                    font-size: 16px;
-                }
-
-                &:not(:last-child) {
-                    margin-bottom: 20px;
-                }
-
-                i {
-                    width: 22px;
-                    height: 22px;
-                    line-height: 22px;
-                    text-align: center;
-                    border-radius: 50px;
-                    background-color: $text-color;
-                    color: $white;
-                    margin-right: 8px;
-                    font-size: 12px;
-                    transform: rotate(-45deg);
-                }
-            }
-        }
-    }
-}
-
-.visa-provide-section {
-
-    .visa-slider {
-        margin-left: -400px;
-        margin-right: -400px;
-
-        @include breakpoint (max-xxl) {
-            margin-right: 0;
-            margin-left: 0;
-            margin: 0 10px;
-        }
-    }
-}
-
-
-.visa-bottom {
-    position: relative;
-    margin-top: 70px;
-
-    @include breakpoint (max-xxl) {
-        display: none;
-    }
-
-    &::before {
-        background-color: $theme-color-2;
-        @include before;
-        width: 410px;
-        height: 132px;
-        padding: 16px 16px 16px 294px;
-        border-radius: 0 100px 100px 0;
-
-        @include breakpoint (max-xxxl) {
-            display: none;
-        }
-    }
-
-     &::after {
-        background-color: $theme-color-2;
-        position: absolute;
-        content: "";
-        width: 410px;
-        height: 132px;
-        padding: 16px 16px 16px 294px;
-        border-radius: 100px 0 0 100px;
-        right: 0;
-        top: 0;
-
-        @include breakpoint (max-xxxl) {
-            display: none;
-        }
-    }
-
-    .visa-arrow-item {
-        @include flex;
-        justify-content: space-between;
-
-        .array-prev {
-            width: 100px;
-            height: 100px;
-            line-height: 100px;
-            border-radius: 100%;
-            text-align: center;
-            background-color: $white;
-            color: $header-color;
-            position: relative;
-            z-index: 9;
-            margin-top: 16px;
-            margin-left: -15px;
-            font-size: 40px;
-        }
-
-        .array-next {
-            width: 100px;
-            height: 100px;
-            line-height: 100px;
-            border-radius: 100%;
-            text-align: center;
-            background-color: $theme-color;
-            color: $white;
-            position: relative;
-            z-index: 9;
-            margin-top: 16px;
-            margin-right: -15px;
-            font-size: 40px;
-        }
-
-        .flag-item {
-            @include flex;
-            gap: 24px;
-
-            .flag-thumb {
-                position: relative;
-                transition: all 0.4s ease-in-out;
-                width: 120px;
-                height: 120px;
-
-                img {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 50%;
-                }
-
-                &::before {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    width: 100%;
-                    height: 100%;
-                    content: "";
-                    background-color: rgba(5, 17, 26, 0.8);
-                    border-radius: 50%;
-                    transition: all 0.4s ease-in-out;
-                    opacity: 0;
-                    visibility: hidden;
-                 }
-
-                 &::after {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    width: 100%;
-                    height: 100%;
-                    content: "";
-                    border: 5px solid $white;
-                    border-radius: 50%;
-                    transition: all 0.4s ease-in-out;
-                    opacity: 0;
-                    visibility: hidden;
-               }
-
-                .country-name {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    text-align: center;
-                    z-index: 2;
-                    transition: all 0.4s ease-in-out;
-                    opacity: 0;
-                    visibility: hidden;
-
-                    h4 {
-                        font-size: 14px;
-                        font-weight: 800;
-                        // text-transform: capitalize;
-                        text-align: center;
-                        color: $white;
-                     }
-                 }
-
-                 &:hover {
-                    &::before {
-                      opacity: 1;
-                      visibility: visible;
-                    }
-
-                    &::after {
-                      opacity: 1;
-                      visibility: visible;
-                    }
-
-                    .country-name {
-                      opacity: 1;
-                      visibility: visible;
-                    }
-                 }
-            }
-        }
-    }
-}
-
-
-.country-details-wrapper {
-
-    .country-details-post {
-
-        .details-image {
-
-            img {
-                @include imgw;
-                border-radius: 24px;
-            }
-        }
-
-        .country-details-content {
-            margin-top: 20px;
-
-            h2 {
-                margin-bottom: 10px;
-            }
-
-            h5 {
-                color: $theme-color-2;
-                margin-top: 30px;
-            }
-
-            .tourist-visa-box {
-                border-radius: 16px;
-                padding: 30px;
-                background-color: $bg-color;
-                margin-top: 30px;
-                margin-bottom: 24px;
-
-                .tourist-box {
-                    @include flex;
-                    gap: 50px;
-
-                    .tourist-content {
-                        h5 {
-                            color: $header-color;
-                            margin-bottom: 5px;
-                            margin-top: 0;
-                        }
-                    }
-
-                    &.style-2 {
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid rgba(203, 204, 207, 0.7);
-                        margin-bottom: 15px;
-                    }
-                }
-            }
-
-            .text {
-                font-size: 32px;
-            }
-
-            .list-item {
-                margin-top: 20px;
-                margin-bottom: 30px;
-
-                li {
-                    color: $header-color;
-                    font-size: 18px;
-                    font-weight: 500;
-                    font-family: $heading-font;
-
-                    &:not(:last-child) {
-                        margin-bottom: 15px;
-                    }
-
-                    span {
-                        font-size: 16px;
-                        font-weight: 400;
-                        color: $text-color;
-                        font-family: $body-font;
-                    }
-                }
-            }
-
-            .thumb {
-                img {
-                    @include imgw;
-                    border-radius: 16px;
-                }
-            }
-
-            .visa-list-2 {
-                @include flex;
-                gap: 32px;
-                margin-bottom: 20px;
-
-                li {
-                    font-size: 20px;
-                    font-weight: 500;
-                    color: $header-color;
-
-                    i {
-                        color: $theme-color-2;
-                        margin-right: 8px;
-                    }
-                }
-            }
-        }
-    }
-
-    .country-details-sideber {
-
-        .icon-box-item {
-            background-color: $bg-color;
-            border-radius: 8px;
-            padding: 12px 24px;
-             @include flex;
-             justify-content: space-between;
-             margin-bottom: 8px;
-
-             .left-item {
-                 @include flex;
-                 gap: 16px;
-            }
-
-            i  {
-                color: $header-color;
-            }
-        }
-
-        .visa-contact-box {
-            border-radius: 24px;
-            padding: 40px;
-            margin-top: 30px;
-
-            .content {
-                h3 {
-                    color: $white;
-                }
-
-                p {
-                    color: rgba(255, 255, 255, 0.7);
-                    border-bottom: 1px solid rgba(203, 204, 207, 0.24);
-                    padding-bottom: 16px;
-                    margin-bottom: 24px;
-                }
-
-                .icon-item {
-                    @include flex;
-                    gap: 16px;
-                    margin-bottom: 24px;
-
-                    .icon {
-                        width: 48px;
-                        height: 48px;
-                        line-height: 48px;
-                        text-align: center;
-                        border-radius: 100px;
-                        background-color: #183074;
-                        color: $white;
-                    }
-
-                    .cont {
-                        span {
-                            color: rgba(255, 255, 255, 0.7);
-                        }
-
-                        h6 {
-                            color: $white;
-                            font-size: 18px;
-                            font-weight: 500;
-
-                            a {
-                                color: $white;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/public/assets/scss/main.scss b/public/assets/scss/main.scss
deleted file mode 100644
index bc6977e..0000000
--- a/public/assets/scss/main.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-Theme Name: Visaway 
-Author: Gramentheme
-Author URI: https://themeforest.net/user/Gramentheme/portfolio
-Description: Visaway – Immigration & Visa Consulting HTML Template
-Service Html Template 
-Version: 1.0.0
-*/
-
-/*CSS Table Of Content Ends Here*/
-
-/*
---------------------------------------------------------------
-[Table of Contents]
---------------------------------------------------------------
-01. Variables & Mixins
-02. Typography
-03. Buttons
-04. About 
-05. Animation 
-06. Brand 
-07. Contact
-08. Cta
-09. Faq
-10. Feature
-11. Footer
-12. Header
-13. Helping
-14. Hero
-15. Marquee
-16. Meanmenu
-17. News
-18. Preloader
-19. Pricing
-20. Section
-21. Service
-22. Testimonial
-23. Visa
-
-
---------------------------------------------------------------
-*/
-
-//>> Basic Start <<//
-
-//>> Mixins <<//
-@import "_mixins";
-//>> Variables <<//	
-@import "_variables";
-//>> Buttons <<//
-@import "_buttons";
-//>> Typography <<//
-@import "_typography";
-//>> Basic End <<//	
-
-
-//>> Template Section Style Start <<//
-
-//>> About <<//
-@import "_about";
-//>> Animation <<//
-@import "_animation";
-//>> Brand <<//
-@import "_brand";
-//>> Contact <<//
-@import "_contact";
-//>> Cta <<//
-@import "_cta";
-//>> Faq <<//
-@import "_faq";
-//>> Feature <<//
-@import "_feature";
-//>> Footer <<//
-@import "_footer";
-//>> Header <<//
-@import "_header";
-//>> Helping <<//
-@import "_helping";
-//>> Hero <<//
-@import "_hero";
-//>> Marquee <<//
-@import "_marquee";
-//>> MeanMenu <<//
-@import "_meanmenu";
-//>> News <<//
-@import "_news";
-//>> _Preloader <<//
-@import "_preloader";
-//>> _Pricing <<//
-@import "_pricing";
-//>> Section <<//
-@import "_section";
-//>> Service <<//
-@import "_service";
-//>> Testimonial <<//
-@import "_testimonial";
-//>> Visa <<//
-@import "_visa";
-
-
-//>> Template Section Style End <<//
-