From 5b29928f16f3c939e966c8634b0847c18c6312e4 Mon Sep 17 00:00:00 2001
From: Le Nhut Huy <lenhuthuy8942@gmail.com>
Date: Tue, 3 Feb 2026 12:09:24 +0700
Subject: [PATCH] refactor json header, footer, home and styling ui

---
 app/components/home/VisaSolutions.tsx         |    2 +-
 app/components/layout/Footer/FooterBottom.tsx |   19 +-
 app/components/layout/Footer/FooterTop.tsx    |   45 +-
 app/components/layout/Footer/footer.json      |   80 ++
 app/components/layout/Header/Header.tsx       |   30 +-
 app/components/layout/Header/HeaderBottom.tsx |  163 +--
 app/components/layout/Header/HeaderTop.tsx    |   64 +-
 app/components/layout/Header/Offcanvas.tsx    |  150 +++
 app/components/layout/Header/header.json      |  142 ++
 app/home.json                                 |  120 +-
 public/assets/css/main.css                    | 1163 ++++++++++++++---
 11 files changed, 1476 insertions(+), 502 deletions(-)
 create mode 100644 app/components/layout/Footer/footer.json
 create mode 100644 app/components/layout/Header/Offcanvas.tsx
 create mode 100644 app/components/layout/Header/header.json

diff --git a/app/components/home/VisaSolutions.tsx b/app/components/home/VisaSolutions.tsx
index c11bbcc..bd637c5 100644
--- a/app/components/home/VisaSolutions.tsx
+++ b/app/components/home/VisaSolutions.tsx
@@ -28,7 +28,7 @@ const VisaSolutions = ({ data }: VisaSolutionsProps) => {
                 <div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
                     <div className="container">
                         <div className="service-item">
-                            <div className="image-hover d-none d-md-block bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/hover-bg.jpg')" }}></div>
+
                             <div className="left-item">
                                 <h5 className="number">{item.number}</h5>
                                 <h3>
diff --git a/app/components/layout/Footer/FooterBottom.tsx b/app/components/layout/Footer/FooterBottom.tsx
index 5e32054..b708b2c 100644
--- a/app/components/layout/Footer/FooterBottom.tsx
+++ b/app/components/layout/Footer/FooterBottom.tsx
@@ -1,23 +1,22 @@
 import Link from 'next/link';
+import footerData from './footer.json';
 
 const FooterBottom = () => {
+    const { bottom } = footerData;
+
     return (
         <div className="footer-bottom">
             <div className="container">
                 <div className="footer-wrapper">
                     <p>
-                        Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
+                        {bottom.copyright.text} <span>{bottom.copyright.brand}</span> {bottom.copyright.rights}
                     </p>
                     <ul className="bottom-list">
-                        <li>
-                            <Link href="/contact">Terms & Conditions</Link>
-                        </li>
-                        <li>
-                            <Link href="/contact">Privacy Policy</Link>
-                        </li>
-                        <li>
-                            <Link href="/contact">Contact Us</Link>
-                        </li>
+                        {bottom.menuLinks.map((item, index) => (
+                            <li key={index}>
+                                <Link href={item.href}>{item.label}</Link>
+                            </li>
+                        ))}
                     </ul>
                 </div>
             </div>
diff --git a/app/components/layout/Footer/FooterTop.tsx b/app/components/layout/Footer/FooterTop.tsx
index b954267..52c388b 100644
--- a/app/components/layout/Footer/FooterTop.tsx
+++ b/app/components/layout/Footer/FooterTop.tsx
@@ -1,46 +1,37 @@
 import Link from 'next/link';
+import footerData from './footer.json';
 
 const FooterTop = () => {
+    const { top } = footerData;
+
     return (
-        <footer className="footer-section fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/footer-bg.jpg')" }}>
+        <footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>
             <div className="container">
                 <div className="footer-wrapper">
                     <div className="row">
                         <div className="col-xl-12">
                             <div className="footer-item">
                                 <h2>
-                                    <a href="tel:+16336547896">+84 961 83 4040</a>
+                                    <a href={top.phone.href}>{top.phone.display}</a>
                                 </h2>
-                                <h2 className="text">734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC</h2>
+                                <h2 className="text">{top.address}</h2>
                                 <div className="footer-list-item">
-                                    <Link href="/">
-                                        <img src="/assets/img/logo/white-logo.svg" alt="img" />
+                                    <Link href={top.logo.href}>
+                                        <img src={top.logo.src} alt={top.logo.alt} />
                                     </Link>
                                     <ul className="footer-list">
-                                        <li>
-                                            <Link href="/">Home</Link>
-                                        </li>
-                                        <li>
-                                            <Link href="/about">About Us</Link>
-                                        </li>
-                                        <li>
-                                            <Link href="/country-details">Visa</Link>
-                                        </li>
-                                        <li>
-                                            <Link href="/news-details">Pages</Link>
-                                        </li>
-                                        <li>
-                                            <Link href="/news">Article</Link>
-                                        </li>
-                                        <li>
-                                            <Link href="/contact">Contact Us</Link>
-                                        </li>
+                                        {top.menuLinks.map((item, index) => (
+                                            <li key={index}>
+                                                <Link href={item.href}>{item.label}</Link>
+                                            </li>
+                                        ))}
                                     </ul>
                                     <div className="social-icon">
-                                        <a href="#"><i className="fa-brands fa-twitter"></i></a>
-                                        <a href="#"><i className="fa-brands fa-instagram"></i></a>
-                                        <a href="#"><i className="fa-brands fa-linkedin"></i></a>
-                                        <a href="#"><i className="fa-brands fa-youtube"></i></a>
+                                        {top.socialLinks.map((social, index) => (
+                                            <a key={index} href={social.href}>
+                                                <i className={social.icon}></i>
+                                            </a>
+                                        ))}
                                     </div>
                                 </div>
                             </div>
diff --git a/app/components/layout/Footer/footer.json b/app/components/layout/Footer/footer.json
new file mode 100644
index 0000000..12c4e07
--- /dev/null
+++ b/app/components/layout/Footer/footer.json
@@ -0,0 +1,80 @@
+{
+  "top": {
+    "bgImage": "/assets/img/home-1/footer-bg.jpg",
+    "phone": {
+      "display": "+84 961 83 4040",
+      "href": "tel:+84961834040"
+    },
+    "address": "734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC",
+    "logo": {
+      "src": "/assets/img/logo/white-logo.svg",
+      "alt": "logo",
+      "href": "/"
+    },
+    "menuLinks": [
+      {
+        "label": "Home",
+        "href": "/"
+      },
+      {
+        "label": "About Us",
+        "href": "/about"
+      },
+      {
+        "label": "Visa",
+        "href": "/country-details"
+      },
+      {
+        "label": "Pages",
+        "href": "/news-details"
+      },
+      {
+        "label": "Article",
+        "href": "/news"
+      },
+      {
+        "label": "Contact Us",
+        "href": "/contact"
+      }
+    ],
+    "socialLinks": [
+      {
+        "icon": "fa-brands fa-twitter",
+        "href": "#"
+      },
+      {
+        "icon": "fa-brands fa-instagram",
+        "href": "#"
+      },
+      {
+        "icon": "fa-brands fa-linkedin",
+        "href": "#"
+      },
+      {
+        "icon": "fa-brands fa-youtube",
+        "href": "#"
+      }
+    ]
+  },
+  "bottom": {
+    "copyright": {
+      "text": "Copyright©",
+      "brand": "GRAMENTHEME",
+      "rights": "All Rights Reserved."
+    },
+    "menuLinks": [
+      {
+        "label": "Terms & Conditions",
+        "href": "/contact"
+      },
+      {
+        "label": "Privacy Policy",
+        "href": "/contact"
+      },
+      {
+        "label": "Contact Us",
+        "href": "/contact"
+      }
+    ]
+  }
+}
diff --git a/app/components/layout/Header/Header.tsx b/app/components/layout/Header/Header.tsx
index 3484090..6ec07fa 100644
--- a/app/components/layout/Header/Header.tsx
+++ b/app/components/layout/Header/Header.tsx
@@ -1,14 +1,36 @@
+'use client';
+
+import { useState } from 'react';
 import HeaderTop from './HeaderTop';
 import HeaderBottom from './HeaderBottom';
+import Offcanvas from './Offcanvas';
 
 const Header = () => {
+    const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+    const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
+    const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
+
     return (
         <>
             <HeaderTop />
-            <HeaderBottom />
-            {/* Search Popup - kept here for now as part of header logic/structure */}
-            <div className="search-popup">
-                <div className="search-popup__overlay search-toggler"></div>
+            <HeaderBottom 
+                onToggleOffcanvas={toggleOffcanvas} 
+                onToggleSearch={toggleSearch} 
+            />
+            
+            <Offcanvas 
+                isOpen={isOffcanvasOpen} 
+                onClose={() => setIsOffcanvasOpen(false)} 
+            />
+
+            {/* Search Popup */}
+            <div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
+                <div 
+                    className="search-popup__overlay search-toggler" 
+                    onClick={() => setIsSearchOpen(false)}
+                ></div>
                 <div className="search-popup__content">
                     <form role="search" method="get" className="search-popup__form" action="#">
                         <input type="text" id="search" name="search" placeholder="Search Here..." />
diff --git a/app/components/layout/Header/HeaderBottom.tsx b/app/components/layout/Header/HeaderBottom.tsx
index 4b87d29..a401863 100644
--- a/app/components/layout/Header/HeaderBottom.tsx
+++ b/app/components/layout/Header/HeaderBottom.tsx
@@ -3,116 +3,50 @@
 import Link from 'next/link';
 import HeaderMenu from './HeaderMenu';
 
-const homeMegaMenu = (
-    <>
-        <div className="homemenu">
-            <div className="homemenu-thumb">
-                <img src="/assets/img/header/home-1.jpg" alt="img" />
-                <div className="demo-button">
-                    <Link href="/" className="theme-btn">
-                        Multi Page <i className="fa-solid fa-arrow-right"></i>
-                    </Link>
-                </div>
-            </div>
-            <div className="homemenu-content text-center">
-                <h4 className="homemenu-title">
-                    Home 01
-                </h4>
-            </div>
-        </div>
-        <div className="homemenu">
-            <div className="homemenu-thumb mb-15">
-                <img src="/assets/img/header/home-2.jpg" alt="img" />
-                <div className="demo-button">
-                    <Link href="/index-2" className="theme-btn">
-                        Multi Page <i className="fa-solid fa-arrow-right"></i>
-                    </Link>
-                </div>
-            </div>
-            <div className="homemenu-content text-center">
-                <h4 className="homemenu-title">
-                    Home 02
-                </h4>
-            </div>
-        </div>
-        <div className="homemenu">
-            <div className="homemenu-thumb mb-15">
-                <img src="/assets/img/header/home-3.jpg" alt="img" />
-                <div className="demo-button">
-                    <Link href="/index-3" className="theme-btn">
-                        Multi Page <i className="fa-solid fa-arrow-right"></i>
-                    </Link>
-                </div>
-            </div>
-            <div className="homemenu-content text-center">
-                <h4 className="homemenu-title">
-                    Home 03
-                </h4>
-            </div>
-        </div>
-    </>
-);
+import headerData from './header.json';
 
-const menuItems = [
-    {
-        label: 'Home',
-        href: '/',
-        megaMenuContent: homeMegaMenu
-    },
-    {
-        label: 'About Us',
-        href: '/about'
-    },
-    {
-        label: 'Pages',
-        href: '#',
-        submenu: [
-            {
-                label: 'Service',
-                href: '#',
-                submenu: [
-                    { label: 'Service', href: '/service' },
-                    { label: 'Service Details', href: '/service-details' }
-                ]
-            },
-            {
-                label: 'Country List',
-                href: '#',
-                submenu: [
-                     { label: 'Country List', href: '/country-list' },
-                     { label: 'Country Details', href: '/country-details' }
-                ]
-            },
-            { label: 'Our Pricing', href: '/pricing' },
-            { label: 'Appointment', href: '/appointment' },
-            { label: '404 Page', href: '/404' },
-            { label: 'Coming Soon', href: '/coming-soon' }
-        ]
-    },
-    {
-        label: 'VISA',
-        href: '#',
-        submenu: [
-            { label: 'Visa List', href: '/country-list' },
-            { label: 'Visa Details', href: '/country-details' }
-        ]
-    },
-    {
-        label: 'Blog',
-        href: '#',
-        submenu: [
-            { label: 'Blog Grid', href: '/news-grid' },
-            { label: 'Blog Standard', href: '/news' },
-            { label: 'Blog Details', href: '/news-details' }
-        ]
-    },
-    {
-        label: 'Contact Us',
-        href: '/contact'
-    }
-];
 
-const HeaderBottom = () => {
+
+// Map the JSON data to satisfy the HeaderMenu props interface
+interface JsonMenuItem {
+    label: string;
+    href: string;
+    children?: JsonMenuItem[];
+}
+
+interface MenuItem {
+    label: string;
+    href: string;
+    submenu?: MenuItem[];
+    megaMenuContent?: React.ReactNode;
+}
+
+// We need to recursively map 'children' to 'submenu'
+const mapMenuItems = (items: JsonMenuItem[]): MenuItem[] => {
+    return items.map(item => {
+        const newItem: MenuItem = {
+            label: item.label,
+            href: item.href,
+        };
+
+
+
+        if (item.children && item.children.length > 0) {
+            newItem.submenu = mapMenuItems(item.children);
+        }
+
+        return newItem;
+    });
+};
+
+const menuItems: MenuItem[] = mapMenuItems(headerData.menu as JsonMenuItem[]);
+
+interface HeaderBottomProps {
+    onToggleOffcanvas: () => void;
+    onToggleSearch: () => void;
+}
+
+const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggleSearch }) => {
     return (
         <header id="header-sticky" className="header-1">
             <div className="container-fluid">
@@ -130,15 +64,22 @@ const HeaderBottom = () => {
                         </div>
                         <div className="header-right d-flex align-items-center mt-0">
                             <div className="header-call-item">
-                                <a href="#" className="main-header__search search-toggler">
+                                <button 
+                                    onClick={onToggleSearch} 
+                                    className="main-header__search search-toggler"
+                                >
                                     <i className="fa-regular fa-magnifying-glass"></i>
-                                </a>
+                                </button>
                                 <Link href="/contact" className="theme-btn">
                                     Apply now
                                     <i className="fa-solid fa-arrow-right"></i>
                                 </Link>
                                 <div className="header__hamburger my-auto">
-                                    <div className="sidebar__toggle">
+                                    <div 
+                                        className="sidebar__toggle" 
+                                        onClick={onToggleOffcanvas}
+                                        style={{ cursor: 'pointer' }}
+                                    >
                                         <i className="fa-solid fa-bars-staggered"></i>
                                     </div>
                                 </div>
diff --git a/app/components/layout/Header/HeaderTop.tsx b/app/components/layout/Header/HeaderTop.tsx
index 50539b5..6e20811 100644
--- a/app/components/layout/Header/HeaderTop.tsx
+++ b/app/components/layout/Header/HeaderTop.tsx
@@ -1,29 +1,32 @@
 import Link from 'next/link';
+import headerData from './header.json';
 
 const HeaderTop = () => {
+    const { phone, email, location, socialLinks, languages } = headerData.top;
+
     return (
         <div className="header-top-section">
             <div className="container-fluid">
                 <div className="header-top-wrapper">
                     <div className="header-left">
-  <ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
-    <li className="style-2 d-flex align-items-center me-4">
-      <span className="me-2">Help Line</span>
-      <i className="fa-solid fa-phone me-2"></i>
-      <a href="tel:+84961834040">+84 961 83 4040</a>
-    </li>
+                        <ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
+                            <li className="style-2 d-flex align-items-center me-4">
+                                <span className="me-2">Help Line</span>
+                                <i className="fa-solid fa-phone me-2"></i>
+                                <a href={`tel:${phone.replace(/\s/g, '')}`}>{phone}</a>
+                            </li>
 
-    <li className="d-flex align-items-center me-4">
-      <i className="fa-solid fa-location-dot me-2"></i>
-      734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC
-    </li>
+                            <li className="d-flex align-items-center me-4">
+                                <i className="fa-solid fa-location-dot me-2"></i>
+                                {location}
+                            </li>
 
-    <li className="d-flex align-items-center">
-      <i className="fa-solid fa-envelope me-2"></i>
-      <a href="mailto:get-info@hai.edu.vn">get-info@hai.edu.vn</a>
-    </li>
-  </ul>
-</div>
+                            <li className="d-flex align-items-center">
+                                <i className="fa-solid fa-envelope me-2"></i>
+                                <a href={`mailto:${email}`}>{email}</a>
+                            </li>
+                        </ul>
+                    </div>
 
                     <div className="header-right">
                         <div className="flag-wrap">
@@ -32,26 +35,27 @@ const HeaderTop = () => {
                             </div>
                             <div className="nice-select" tabIndex={0}>
                                 <span className="current">
-                                    English
+                                    {languages[0]?.name || 'English'}
                                 </span>
                                 <ul className="list">
-                                    <li data-value="1" className="option selected focus">
-                                        English
-                                    </li>
-                                    <li data-value="1" className="option">
-                                        Bangla
-                                    </li>
-                                    <li data-value="1" className="option">
-                                        Hindi
-                                    </li>
+                                    {languages.map((lang, index) => (
+                                        <li
+                                            key={index}
+                                            data-value={lang.value}
+                                            className={`option ${index === 0 ? 'selected focus' : ''}`}
+                                        >
+                                            {lang.name}
+                                        </li>
+                                    ))}
                                 </ul>
                             </div>
                         </div>
                         <div className="social-item">
-                            <a href="#"><i className="fa-brands fa-linkedin"></i></a>
-                            <a href="#"><i className="fa-brands fa-twitter"></i></a>
-                            <a href="#"><i className="fa-brands fa-instagram"></i></a>
-                            <a href="#"><i className="fa-brands fa-youtube"></i></a>
+                            {socialLinks.map((social, index) => (
+                                <a key={index} href={social.url} target="_blank" rel="noopener noreferrer">
+                                    <i className={social.icon}></i>
+                                </a>
+                            ))}
                         </div>
                     </div>
                 </div>
diff --git a/app/components/layout/Header/Offcanvas.tsx b/app/components/layout/Header/Offcanvas.tsx
new file mode 100644
index 0000000..e1d0bd2
--- /dev/null
+++ b/app/components/layout/Header/Offcanvas.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import headerData from './header.json';
+
+interface SocialLink {
+    platform: string;
+    url: string;
+    icon: string;
+}
+
+interface MenuItem {
+    label: string;
+    href: string;
+    children?: MenuItem[];
+}
+
+interface OffcanvasProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const Offcanvas: React.FC<OffcanvasProps> = ({ isOpen, onClose }) => {
+    // Explicitly casting headerData to the expected structure
+    const data = headerData as {
+        top: {
+            socialLinks: SocialLink[];
+        };
+        offcanvas: {
+            description: string;
+            contactInfo: {
+                address: string;
+                email: string;
+                workingHours: string;
+                phone: string;
+            };
+        };
+        menu: MenuItem[];
+    };
+
+    const { offcanvas, top, menu } = data;
+
+    return (
+        <>
+            <div className="fix-area">
+                <div className={`offcanvas__info ${isOpen ? 'info-open' : ''}`}>
+                    <div className="offcanvas__wrapper">
+                        <div className="offcanvas__content">
+                            <div className="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
+                                <div className="offcanvas__logo">
+                                    <Link href="/">
+                                        <Image 
+                                            src="/assets/img/logo/black-logo.svg" 
+                                            alt="logo-img" 
+                                            width={150} 
+                                            height={50} 
+                                            priority
+                                        />
+                                    </Link>
+                                </div>
+                                <div className="offcanvas__close">
+                                    <button onClick={onClose} aria-label="Close menu">
+                                        <i className="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <p className="text d-none d-xl-block">
+                                {offcanvas.description}
+                            </p>
+                            
+                            {/* Mobile Menu Area */}
+                            <div className="mobile-menu fix mb-3 d-xl-none">
+                                <nav className="mean-nav">
+                                    <ul>
+                                        {menu.map((item: MenuItem, idx: number) => (
+                                            <li key={idx}>
+                                                <Link href={item.href} onClick={onClose}>
+                                                    {item.label}
+                                                </Link>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </nav>
+                            </div>
+
+                            <div className="offcanvas__contact d-xl-block">
+                                <h4 className="d-xl-block">Contact Info</h4>
+                                <ul className="d-xl-block">
+                                    <li className="d-flex align-items-center">
+                                        <div className="offcanvas__contact-icon">
+                                            <i className="fal fa-map-marker-alt"></i>
+                                        </div>
+                                        <div className="offcanvas__contact-text">
+                                            <a target="_blank" href="#" rel="noopener noreferrer">
+                                                {offcanvas.contactInfo.address}
+                                            </a>
+                                        </div>
+                                    </li>
+                                    <li className="d-flex align-items-center">
+                                        <div className="offcanvas__contact-icon mr-15">
+                                            <i className="fal fa-envelope"></i>
+                                        </div>
+                                        <div className="offcanvas__contact-text">
+                                            <a href={`mailto:${offcanvas.contactInfo.email}`}>
+                                                <span>{offcanvas.contactInfo.email}</span>
+                                            </a>
+                                        </div>
+                                    </li>
+                                    <li className="d-flex align-items-center">
+                                        <div className="offcanvas__contact-icon mr-15">
+                                            <i className="fal fa-clock"></i>
+                                        </div>
+                                        <div className="offcanvas__contact-text">
+                                            <span>{offcanvas.contactInfo.workingHours}</span>
+                                        </div>
+                                    </li>
+                                    <li className="d-flex align-items-center">
+                                        <div className="offcanvas__contact-icon mr-15">
+                                            <i className="far fa-phone"></i>
+                                        </div>
+                                        <div className="offcanvas__contact-text">
+                                            <a href={`tel:${offcanvas.contactInfo.phone.replace(/\s/g, '')}`}>
+                                                {offcanvas.contactInfo.phone}
+                                            </a>
+                                        </div>
+                                    </li>
+                                </ul>
+                                <div className="social-icon d-flex align-items-center">
+                                    {top.socialLinks.map((social: SocialLink, idx: number) => (
+                                        <a key={idx} href={social.url} target="_blank" rel="noopener noreferrer">
+                                            <i className={social.icon}></i>
+                                        </a>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div 
+                className={`offcanvas__overlay ${isOpen ? 'overlay-open' : ''}`} 
+                onClick={onClose}
+            ></div>
+        </>
+    );
+};
+
+export default Offcanvas;
diff --git a/app/components/layout/Header/header.json b/app/components/layout/Header/header.json
new file mode 100644
index 0000000..cf55fb5
--- /dev/null
+++ b/app/components/layout/Header/header.json
@@ -0,0 +1,142 @@
+{
+  "top": {
+    "phone": "+09 378 357 5222",
+    "email": "info@hailearning.edu.vn",
+    "location": "69 Street, 5th Avenue LA, United States",
+    "socialLinks": [
+      {
+        "platform": "linkedin",
+        "url": "https://linkedin.com",
+        "icon": "fa-brands fa-linkedin"
+      },
+      {
+        "platform": "twitter",
+        "url": "https://twitter.com",
+        "icon": "fa-brands fa-twitter"
+      },
+      {
+        "platform": "instagram",
+        "url": "https://instagram.com",
+        "icon": "fa-brands fa-instagram"
+      },
+      {
+        "platform": "youtube",
+        "url": "https://youtube.com",
+        "icon": "fa-brands fa-youtube"
+      }
+    ],
+    "languages": [
+      {
+        "name": "English",
+        "value": "1"
+      },
+      {
+        "name": "Bangla",
+        "value": "2"
+      },
+      {
+        "name": "Hindi",
+        "value": "3"
+      }
+    ]
+  },
+  "offcanvas": {
+    "description": "Nullam dignissim, ante scelerisque the is euismod fermentum odio sem semper the is erat, a feugiat leo urna eget eros. Duis Aenean a imperdiet risus.",
+    "contactInfo": {
+      "address": "Main Street, Melbourne, Australia",
+      "email": "info@hailearning.edu.vn",
+      "workingHours": "Mod-Friday, 09am - 05pm",
+      "phone": "+09 378 357 5222"
+    }
+  },
+  "menu": [
+    {
+      "label": "Home",
+      "href": "/",
+      "children": []
+    },
+    {
+      "label": "About Us",
+      "href": "/about",
+      "children": []
+    },
+    {
+      "label": "Pages",
+      "href": "#",
+      "children": [
+        {
+          "label": "Service",
+          "href": "/service",
+          "children": [
+            {
+              "label": "Service",
+              "href": "/service"
+            },
+            {
+              "label": "Service Details",
+              "href": "/service-details"
+            }
+          ]
+        },
+        {
+          "label": "Country List",
+          "href": "/country-list",
+          "children": [
+            {
+              "label": "Country List",
+              "href": "/country-list"
+            },
+            {
+              "label": "Country Details",
+              "href": "/country-details"
+            }
+          ]
+        },
+        {
+          "label": "Our Pricing",
+          "href": "/pricing"
+        },
+        {
+          "label": "Appointment",
+          "href": "/appointment"
+        }
+      ]
+    },
+    {
+      "label": "VISA",
+      "href": "#",
+      "children": [
+        {
+          "label": "Visa List",
+          "href": "/visa-list"
+        },
+        {
+          "label": "Visa Details",
+          "href": "/visa-details"
+        }
+      ]
+    },
+    {
+      "label": "Blog",
+      "href": "#",
+      "children": [
+        {
+          "label": "Blog Grid",
+          "href": "/blog-grid"
+        },
+        {
+          "label": "Blog Standard",
+          "href": "/blog"
+        },
+        {
+          "label": "Blog Details",
+          "href": "/blog-details"
+        }
+      ]
+    },
+    {
+      "label": "Contact Us",
+      "href": "/contact"
+    }
+  ]
+}
diff --git a/app/home.json b/app/home.json
index f260aed..4ecd14f 100644
--- a/app/home.json
+++ b/app/home.json
@@ -1,123 +1,5 @@
 {
-  "header": {
-    "top": {
-      "phone": "+09 378 357 5222",
-      "email": "info@hailearning.edu.vn",
-      "location": "69 Street, 5th Avenue LA, United States",
-      "socialLinks": [
-        {
-          "platform": "linkedin",
-          "url": "https://linkedin.com",
-          "icon": "fa-brands fa-linkedin"
-        },
-        {
-          "platform": "twitter",
-          "url": "https://twitter.com",
-          "icon": "fa-brands fa-twitter"
-        },
-        {
-          "platform": "instagram",
-          "url": "https://instagram.com",
-          "icon": "fa-brands fa-instagram"
-        },
-        {
-          "platform": "youtube",
-          "url": "https://youtube.com",
-          "icon": "fa-brands fa-youtube"
-        }
-      ]
-    },
-    "menu": [
-      {
-        "label": "Home",
-        "href": "/",
-        "children": []
-      },
-      {
-        "label": "About Us",
-        "href": "/about",
-        "children": []
-      },
-      {
-        "label": "Pages",
-        "href": "#",
-        "children": [
-          {
-            "label": "Service",
-            "href": "/service",
-            "children": [
-              {
-                "label": "Service",
-                "href": "/service"
-              },
-              {
-                "label": "Service Details",
-                "href": "/service-details"
-              }
-            ]
-          },
-          {
-            "label": "Country List",
-            "href": "/country-list",
-            "children": [
-              {
-                "label": "Country List",
-                "href": "/country-list"
-              },
-              {
-                "label": "Country Details",
-                "href": "/country-details"
-              }
-            ]
-          },
-          {
-            "label": "Our Pricing",
-            "href": "/pricing"
-          },
-          {
-            "label": "Appointment",
-            "href": "/appointment"
-          }
-        ]
-      },
-      {
-        "label": "VISA",
-        "href": "#",
-        "children": [
-          {
-            "label": "Visa List",
-            "href": "/visa-list"
-          },
-          {
-            "label": "Visa Details",
-            "href": "/visa-details"
-          }
-        ]
-      },
-      {
-        "label": "Blog",
-        "href": "#",
-        "children": [
-          {
-            "label": "Blog Grid",
-            "href": "/blog-grid"
-          },
-          {
-            "label": "Blog Standard",
-            "href": "/blog"
-          },
-          {
-            "label": "Blog Details",
-            "href": "/blog-details"
-          }
-        ]
-      },
-      {
-        "label": "Contact Us",
-        "href": "/contact"
-      }
-    ]
-  },
+
   "hero": {
     "title": "From Application to Visa – We've Got You Covered",
     "subtitle": "Global Education Simplified",
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 5b37157..85870c1 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -45,14 +45,14 @@ Version: 1.0.0
   --body: #fff;
   --black: #000;
   --white: #fff;
-  --theme: #E13833;
-  --theme-2: #0048B4;
-  --header: #151A26;
+  --theme: #e13833;
+  --theme-2: #0048b4;
+  --header: #151a26;
   --text: #535761;
-  --text-2: #0B4E3D;
-  --border: #C9C9C9;
-  --border-2: #CBCCCF;
-  --bg: #F8F8F9;
+  --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);
 }
@@ -470,10 +470,21 @@ span {
   background: #0a4ebd;
   border-radius: 16px;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar {
+.about-wrapper-3
+  .about-content
+  .about-list-item
+  .loading-box
+  .loading-boxs
+  .circle-bar {
   position: relative;
 }
-.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar strong {
+.about-wrapper-3
+  .about-content
+  .about-list-item
+  .loading-box
+  .loading-boxs
+  .circle-bar
+  strong {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -501,7 +512,12 @@ span {
     font-size: 16px;
   }
 }
-.about-wrapper-3 .about-content .about-list-item .list-item .list li:not(:last-child) {
+.about-wrapper-3
+  .about-content
+  .about-list-item
+  .list-item
+  .list
+  li:not(:last-child) {
   margin-bottom: 15px;
 }
 .about-wrapper-3 .about-content .about-list-item .list-item .list li i {
@@ -589,21 +605,27 @@ span {
   }
 }
 @-webkit-keyframes letters-loading {
-  0%, 75%, 100% {
+  0%,
+  75%,
+  100% {
     opacity: 0;
     transform: rotateY(-90deg);
   }
-  25%, 50% {
+  25%,
+  50% {
     opacity: 1;
     transform: rotateY(0deg);
   }
 }
 @keyframes letters-loading {
-  0%, 75%, 100% {
+  0%,
+  75%,
+  100% {
     opacity: 0;
     transform: rotateY(-90deg);
   }
-  25%, 50% {
+  25%,
+  50% {
     opacity: 1;
     transform: rotateY(0deg);
   }
@@ -875,7 +897,8 @@ span {
 }
 /*img-animation**********************/
 .img-custom-anim-right {
-  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
+  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
+    0.4s;
   opacity: 0;
 }
 
@@ -892,7 +915,8 @@ span {
   }
 }
 .img-custom-anim-left {
-  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
+  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
+    0.4s;
   opacity: 0;
 }
 
@@ -1036,17 +1060,25 @@ span {
   }
 }
 @keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
   }
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: translateX(-5px);
     -ms-transform: translateX(-5px);
     transform: translateX(-5px);
   }
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     -webkit-transform: translateX(5px);
     -ms-transform: translateX(5px);
     transform: translateX(5px);
@@ -1174,7 +1206,8 @@ span {
   }
 }
 .img_bottom_animation {
-  animation: bottom-animation 2000ms forwards cubic-bezier(0.4, 0.98, 0.52, 0.99);
+  animation: bottom-animation 2000ms forwards
+    cubic-bezier(0.4, 0.98, 0.52, 0.99);
   opacity: 0;
 }
 
@@ -1199,7 +1232,11 @@ span {
   }
 }
 @keyframes icon-bounce {
-  0%, 100%, 20%, 50%, 80% {
+  0%,
+  100%,
+  20%,
+  50%,
+  80% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
@@ -1420,7 +1457,10 @@ span {
   filter: initial;
   opacity: 1;
 }
-.brand-wrapper.style-1 .brand-item .swiper-slide.swiper-slide-active .brand-image {
+.brand-wrapper.style-1
+  .brand-item
+  .swiper-slide.swiper-slide-active
+  .brand-image {
   filter: initial;
   opacity: 1;
 }
@@ -1465,7 +1505,8 @@ span {
     font-size: 20px;
   }
 }
-.contact-wrapper-2 .contact-from-box .form-clt input, .contact-wrapper-2 .contact-from-box .form-clt textarea {
+.contact-wrapper-2 .contact-from-box .form-clt input,
+.contact-wrapper-2 .contact-from-box .form-clt textarea {
   width: 100%;
   outline: none;
   border: none;
@@ -1477,7 +1518,8 @@ span {
   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 {
+.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 {
@@ -1648,7 +1690,8 @@ span {
   margin-bottom: 10px;
   display: inline-block;
 }
-.contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea {
+.contact-from-wrapper .form-clt input,
+.contact-from-wrapper .form-clt textarea {
   width: 100%;
   border: none;
   outline: none;
@@ -1658,16 +1701,19 @@ span {
   padding: 18px 20px;
 }
 @media (max-width: 767px) {
-  .contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea {
+  .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 {
+  .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 {
+.contact-from-wrapper .form-clt input::placeholder,
+.contact-from-wrapper .form-clt textarea::placeholder {
   color: var(--text);
 }
 .contact-from-wrapper .form-clt textarea {
@@ -1705,14 +1751,22 @@ span {
   font-weight: 500;
   font-family: "Space Grotesk", serif;
 }
-.contact-from-wrapper .cheak-list-item .cheak-list .form-check .form-check-input {
+.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 {
+.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);
 }
@@ -1957,7 +2011,11 @@ span {
   position: absolute;
   inset: 0;
   border-radius: 24px;
-  background: linear-gradient(75deg, #182960 -2.93%, rgba(0, 72, 180, 0.24) 98.99%);
+  background: linear-gradient(
+    75deg,
+    #182960 -2.93%,
+    rgba(0, 72, 180, 0.24) 98.99%
+  );
   z-index: 1;
   pointer-events: none;
 }
@@ -2387,7 +2445,10 @@ span {
   padding: 16px 17px 24px;
   background-color: var(--bg);
 }
-.destination-offer-wrapper-3 .destination-offer-item .choose-us-content .icon-item {
+.destination-offer-wrapper-3
+  .destination-offer-item
+  .choose-us-content
+  .icon-item {
   display: flex;
   align-items: center;
   border-bottom: 1px solid rgba(203, 204, 207, 0.24);
@@ -2395,13 +2456,23 @@ span {
   padding-bottom: 12px;
   margin-bottom: 10px;
 }
-.destination-offer-wrapper-3 .destination-offer-item .choose-us-content .icon-item h5 a {
+.destination-offer-wrapper-3
+  .destination-offer-item
+  .choose-us-content
+  .icon-item
+  h5
+  a {
   background-position: 0 95%;
   background-repeat: no-repeat;
   background-size: 0% 2px;
   display: inline;
 }
-.destination-offer-wrapper-3 .destination-offer-item .choose-us-content .icon-item h5 a:hover {
+.destination-offer-wrapper-3
+  .destination-offer-item
+  .choose-us-content
+  .icon-item
+  h5
+  a:hover {
   color: var(--theme);
   background-size: 100% 2px;
   background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
@@ -2466,11 +2537,22 @@ span {
   background-color: var(--white);
   color: var(--theme);
 }
-.choose-us-wrapper-3 .choose-us-left-item .left-item .caller-item .content span {
+.choose-us-wrapper-3
+  .choose-us-left-item
+  .left-item
+  .caller-item
+  .content
+  span {
   opacity: 0.8;
   color: var(--white);
 }
-.choose-us-wrapper-3 .choose-us-left-item .left-item .caller-item .content h5 a {
+.choose-us-wrapper-3
+  .choose-us-left-item
+  .left-item
+  .caller-item
+  .content
+  h5
+  a {
   color: var(--theme);
 }
 .choose-us-wrapper-3 .choose-us-left-item .right-item .count-box {
@@ -2562,7 +2644,12 @@ span {
     font-size: 16px;
   }
 }
-.choose-us-wrapper-3 .choose-us-content .content .list-item .list li:not(:last-child) {
+.choose-us-wrapper-3
+  .choose-us-content
+  .content
+  .list-item
+  .list
+  li:not(:last-child) {
   margin-bottom: 10px;
 }
 .choose-us-wrapper-3 .choose-us-content .content .list-item .list li i {
@@ -2998,7 +3085,11 @@ span {
     gap: 16px;
   }
 }
-.footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon span {
+.footer-widget-wrapper-2
+  .single-footer-widget
+  .footer-content
+  .social-icon
+  span {
   display: inline-block;
   margin-right: 4px;
   color: var(--white);
@@ -3007,12 +3098,20 @@ span {
   font-family: "Space Grotesk", serif;
 }
 @media (max-width: 1399px) {
-  .footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon span {
+  .footer-widget-wrapper-2
+    .single-footer-widget
+    .footer-content
+    .social-icon
+    span {
     font-size: 14px;
   }
 }
 @media (max-width: 991px) {
-  .footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon span {
+  .footer-widget-wrapper-2
+    .single-footer-widget
+    .footer-content
+    .social-icon
+    span {
     font-size: 16px;
   }
 }
@@ -3020,7 +3119,11 @@ span {
   font-size: 20px;
   color: var(--theme);
 }
-.footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon a:hover {
+.footer-widget-wrapper-2
+  .single-footer-widget
+  .footer-content
+  .social-icon
+  a:hover {
   color: var(--theme-2);
 }
 .footer-widget-wrapper-2 .single-footer-widget .list li {
@@ -3049,7 +3152,10 @@ span {
   display: flex;
   align-items: center;
 }
-.footer-widget-wrapper-2 .single-footer-widget .contact-item li:not(:last-child) {
+.footer-widget-wrapper-2
+  .single-footer-widget
+  .contact-item
+  li:not(:last-child) {
   margin-bottom: 20px;
 }
 .footer-widget-wrapper-2 .single-footer-widget .contact-item li a {
@@ -3270,26 +3376,46 @@ span {
   max-width: 551px;
 }
 @media (max-width: 1399px) {
-  .footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt input {
+  .footer-widget-wrapper-3
+    .single-footer-widget
+    .footer-content
+    .form-clt
+    input {
     padding: 20px 0px 20px 10px;
     font-size: 14px;
   }
 }
 @media (max-width: 991px) {
-  .footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt input {
+  .footer-widget-wrapper-3
+    .single-footer-widget
+    .footer-content
+    .form-clt
+    input {
     padding: 20px 0px 20px 10px;
     font-size: 14px;
   }
 }
 @media (max-width: 575px) {
-  .footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt input {
+  .footer-widget-wrapper-3
+    .single-footer-widget
+    .footer-content
+    .form-clt
+    input {
     font-size: 14px;
   }
 }
-.footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt input::placeholder {
+.footer-widget-wrapper-3
+  .single-footer-widget
+  .footer-content
+  .form-clt
+  input::placeholder {
   color: var(--text);
 }
-.footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt .theme-btn {
+.footer-widget-wrapper-3
+  .single-footer-widget
+  .footer-content
+  .form-clt
+  .theme-btn {
   position: absolute;
   top: 4px;
   right: 4px;
@@ -3298,19 +3424,32 @@ span {
   border: 1px solid rgba(203, 204, 207, 0.24);
   background-color: var(--bg);
 }
-.footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt .theme-btn:hover {
+.footer-widget-wrapper-3
+  .single-footer-widget
+  .footer-content
+  .form-clt
+  .theme-btn:hover {
   background-color: var(--theme);
   color: var(--white);
 }
 @media (max-width: 1399px) {
-  .footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt .theme-btn {
+  .footer-widget-wrapper-3
+    .single-footer-widget
+    .footer-content
+    .form-clt
+    .theme-btn {
     right: 0;
     top: 0;
     bottom: 0;
     padding: 2px 4px 2px 12px;
     font-size: 14px;
   }
-  .footer-widget-wrapper-3 .single-footer-widget .footer-content .form-clt .theme-btn i {
+  .footer-widget-wrapper-3
+    .single-footer-widget
+    .footer-content
+    .form-clt
+    .theme-btn
+    i {
     margin-left: 10px;
   }
 }
@@ -3335,12 +3474,21 @@ span {
 .footer-widget-wrapper-3 .single-footer-widget .contact-content .contact-list {
   margin-top: 16px;
 }
-.footer-widget-wrapper-3 .single-footer-widget .contact-content .contact-list li {
+.footer-widget-wrapper-3
+  .single-footer-widget
+  .contact-content
+  .contact-list
+  li {
   display: flex;
   align-items: center;
   gap: 32px;
 }
-.footer-widget-wrapper-3 .single-footer-widget .contact-content .contact-list li a {
+.footer-widget-wrapper-3
+  .single-footer-widget
+  .contact-content
+  .contact-list
+  li
+  a {
   color: var(--white);
   opacity: 0.7;
 }
@@ -3370,7 +3518,7 @@ span {
 @media (max-width: 991px) {
   .footer-top-item {
     flex-wrap: wrap;
-    gap: 30Px;
+    gap: 30px;
     padding-bottom: 10px;
   }
 }
@@ -3385,13 +3533,13 @@ span {
 }
 @media (max-width: 1399px) {
   .footer-top-item .top-list {
-    gap: 20Px;
+    gap: 20px;
   }
 }
 @media (max-width: 991px) {
   .footer-top-item .top-list {
     flex-wrap: wrap;
-    gap: 15Px;
+    gap: 15px;
   }
 }
 .footer-top-item .top-list li a {
@@ -3910,10 +4058,25 @@ span {
 .header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu {
   position: relative;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb {
   position: relative;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb
+  .demo-button {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -3926,24 +4089,64 @@ span {
   padding: 0 12px;
 }
 @media (max-width: 1399px) {
-  .header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
+  .header-main
+    .main-menu
+    ul
+    li
+    .has-homemenu
+    .homemenu-items
+    .homemenu
+    .homemenu-thumb
+    .demo-button
+    .theme-btn {
     font-size: 14px;
     min-width: 140px;
   }
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb
+  .demo-button
+  .theme-btn {
   background-color: var(--white);
   padding-right: 0;
   font-size: 16px;
   font-weight: 500;
   padding: 6px 6px 6px 24px;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb
+  .demo-button
+  .theme-btn:hover {
   background-color: var(--theme);
   color: var(--white);
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb::before {
-  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb::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;
@@ -3959,25 +4162,63 @@ span {
   transition: all 0.3s ease-in-out;
   content: "";
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover::before {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb:hover::before {
   visibility: visible;
   opacity: 1;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb:hover
+  .demo-button {
   opacity: 1;
   visibility: visible;
   margin-top: 0;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb:hover
+  .homemenu-btn {
   opacity: 1;
   visibility: visible;
   bottom: 50%;
   transform: translateY(50%);
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb img {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-thumb
+  img {
   width: 100%;
 }
-.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-title {
+.header-main
+  .main-menu
+  ul
+  li
+  .has-homemenu
+  .homemenu-items
+  .homemenu
+  .homemenu-title {
   text-align: center;
   margin: 15px auto;
   display: inline-block;
@@ -4252,13 +4493,32 @@ span {
   color: var(--header);
   font-size: 30px;
 }
-.header-1.header-3 .header-main .header-right .header-call-item .icon-item .content h6 {
+.header-1.header-3
+  .header-main
+  .header-right
+  .header-call-item
+  .icon-item
+  .content
+  h6 {
   margin-bottom: 5px;
 }
-.header-1.header-3 .header-main .header-right .header-call-item .icon-item .content span {
+.header-1.header-3
+  .header-main
+  .header-right
+  .header-call-item
+  .icon-item
+  .content
+  span {
   font-size: 18px;
 }
-.header-1.header-3 .header-main .header-right .header-call-item .icon-item .content span a {
+.header-1.header-3
+  .header-main
+  .header-right
+  .header-call-item
+  .icon-item
+  .content
+  span
+  a {
   color: var(--header);
 }
 
@@ -4324,9 +4584,15 @@ span {
   -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;
+  -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;
@@ -4396,27 +4662,52 @@ span {
     font-size: 14px;
   }
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
+.offcanvas__wrapper
+  .offcanvas__content
+  .offcanvas__contact
+  ul
+  li:not(:last-child) {
   margin-bottom: 30px;
 }
 @media (max-width: 575px) {
-  .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
+  .offcanvas__wrapper
+    .offcanvas__content
+    .offcanvas__contact
+    ul
+    li:not(:last-child) {
     margin-bottom: 20px;
   }
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a {
+.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a,
+.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li span {
   color: var(--black);
+  font-weight: 600;
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon {
+.offcanvas__wrapper
+  .offcanvas__content
+  .offcanvas__contact
+  ul
+  li
+  .offcanvas__contact-icon {
   margin-right: 20px;
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i {
+.offcanvas__wrapper
+  .offcanvas__content
+  .offcanvas__contact
+  ul
+  li
+  .offcanvas__contact-icon
+  i {
   color: var(--theme);
 }
 .offcanvas__wrapper .offcanvas__content .offcanvas__contact span {
   text-transform: initial;
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn {
+.offcanvas__wrapper
+  .offcanvas__content
+  .offcanvas__contact
+  .header-button
+  .theme-btn {
   width: 100%;
   padding: 20px 40px;
   text-transform: capitalize !important;
@@ -4445,7 +4736,11 @@ span {
     display: none;
   }
 }
-.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover {
+.offcanvas__wrapper
+  .offcanvas__content
+  .offcanvas__contact
+  .social-icon
+  a:hover {
   background-color: var(--theme);
   color: var(--white);
 }
@@ -4592,7 +4887,8 @@ span {
 .ripple {
   position: relative;
 }
-.ripple::before, .ripple::after {
+.ripple::before,
+.ripple::after {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -4690,7 +4986,7 @@ span {
   line-height: 42px;
   text-align: center;
   background-color: var(--header);
-  color: #00E5FF;
+  color: #00e5ff;
   transition: all 0.4s ease-in-out;
   border-radius: 100%;
 }
@@ -4704,7 +5000,7 @@ span {
   line-height: 42px;
   border-radius: 100%;
   text-align: center;
-  background: #2ADDC8;
+  background: #2addc8;
   color: var(--header);
   transition: all 0.4s ease-in-out;
 }
@@ -4816,7 +5112,8 @@ span {
   height: 16px;
   border-radius: 30px;
 }
-.swiper-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
+.swiper-dot-2
+  .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -4877,7 +5174,7 @@ span {
   margin: 0 2px;
 }
 .page-nav-wrap ul li .page-numbers.current {
-  background: linear-gradient(180deg, #1539EE 0%, #2ADDC8 100%);
+  background: linear-gradient(180deg, #1539ee 0%, #2addc8 100%);
   color: var(--white);
   border-radius: 10px;
 }
@@ -4943,7 +5240,8 @@ span {
   display: none;
 }
 
-html.lenis, html.lenis body {
+html.lenis,
+html.lenis body {
   height: auto;
 }
 
@@ -5395,7 +5693,11 @@ html.lenis, html.lenis body {
   width: 100%;
   height: 100%;
   content: "";
-  background: linear-gradient(279deg, rgba(21, 26, 38, 0.88) 34.84%, rgba(21, 26, 38, 0) 84.02%);
+  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;
@@ -5928,7 +6230,9 @@ html.lenis, html.lenis body {
 }
 .news-main-item .news-right-content .news-image {
   overflow: hidden;
-  transition: scale 0.4s ease, transform 0.4s ease;
+  transition:
+    scale 0.4s ease,
+    transform 0.4s ease;
 }
 @media (max-width: 991px) {
   .news-main-item .news-right-content .news-image {
@@ -6231,27 +6535,57 @@ html.lenis, html.lenis body {
   align-items: center;
   gap: 20px;
 }
-.main-sideber .news-sideber-box .recent-post-area .recent-items:not(:last-child) {
+.main-sideber
+  .news-sideber-box
+  .recent-post-area
+  .recent-items:not(:last-child) {
   margin-bottom: 20px;
 }
-.main-sideber .news-sideber-box .recent-post-area .recent-items .recent-thumb img {
+.main-sideber
+  .news-sideber-box
+  .recent-post-area
+  .recent-items
+  .recent-thumb
+  img {
   border-radius: 8px;
 }
-.main-sideber .news-sideber-box .recent-post-area .recent-items .recent-content h6 {
+.main-sideber
+  .news-sideber-box
+  .recent-post-area
+  .recent-items
+  .recent-content
+  h6 {
   margin-bottom: 10px;
   line-height: 133%;
   font-weight: 500;
   font-size: 18px;
 }
 @media (max-width: 1399px) {
-  .main-sideber .news-sideber-box .recent-post-area .recent-items .recent-content h6 {
+  .main-sideber
+    .news-sideber-box
+    .recent-post-area
+    .recent-items
+    .recent-content
+    h6 {
     font-size: 15px;
   }
 }
-.main-sideber .news-sideber-box .recent-post-area .recent-items .recent-content h6 a:hover {
+.main-sideber
+  .news-sideber-box
+  .recent-post-area
+  .recent-items
+  .recent-content
+  h6
+  a:hover {
   color: var(--theme);
 }
-.main-sideber .news-sideber-box .recent-post-area .recent-items .recent-content ul li {
+.main-sideber
+  .news-sideber-box
+  .recent-post-area
+  .recent-items
+  .recent-content
+  ul
+  li {
   color: var(--text);
 }
 .main-sideber .news-sideber-box .tagcloud a {
@@ -6347,7 +6681,12 @@ html.lenis, html.lenis body {
     font-size: 16px;
   }
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .tagcloud span {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .tagcloud
+  span {
   font-size: 20px;
   font-weight: 600;
   display: inline-block;
@@ -6355,7 +6694,12 @@ html.lenis, html.lenis body {
   color: var(--header);
   font-family: "Space Grotesk", serif;
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .tagcloud a {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .tagcloud
+  a {
   display: inline-block;
   padding: 12px 26px;
   line-height: 1;
@@ -6368,20 +6712,40 @@ html.lenis, html.lenis body {
   border-radius: 30px;
 }
 @media (max-width: 1199px) {
-  .news-details-wrapper .news-details-post .details-content .tag-share-wrap .tagcloud a {
+  .news-details-wrapper
+    .news-details-post
+    .details-content
+    .tag-share-wrap
+    .tagcloud
+    a {
     padding: 10px 18px;
   }
 }
 @media (max-width: 1199px) {
-  .news-details-wrapper .news-details-post .details-content .tag-share-wrap .tagcloud a {
+  .news-details-wrapper
+    .news-details-post
+    .details-content
+    .tag-share-wrap
+    .tagcloud
+    a {
     margin-bottom: 15px;
   }
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .tagcloud a:hover {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .tagcloud
+  a:hover {
   background-color: var(--theme);
   color: var(--white);
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .social-share a {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .social-share
+  a {
   font-size: 16px;
   color: var(--header);
   display: inline-block;
@@ -6392,10 +6756,20 @@ html.lenis, html.lenis body {
   text-align: center;
   background-color: var(--bg);
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .social-share a:not(:last-child) {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .social-share
+  a:not(:last-child) {
   margin-right: 10px;
 }
-.news-details-wrapper .news-details-post .details-content .tag-share-wrap .social-share a:hover {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .tag-share-wrap
+  .social-share
+  a:hover {
   color: var(--white);
   background-color: var(--theme);
 }
@@ -6412,27 +6786,60 @@ html.lenis, html.lenis body {
     margin-bottom: 30px;
   }
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .comments-heading {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .comments-heading {
   margin-bottom: 30px;
 }
 @media (max-width: 575px) {
-  .news-details-wrapper .news-details-post .details-content .comments-area .comments-heading {
+  .news-details-wrapper
+    .news-details-post
+    .details-content
+    .comments-area
+    .comments-heading {
     margin-bottom: 20px;
   }
 }
 @media (max-width: 575px) {
-  .news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment {
+  .news-details-wrapper
+    .news-details-post
+    .details-content
+    .comments-area
+    .news-single-comment {
     flex-wrap: wrap;
     gap: 20px;
   }
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image img {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .news-single-comment
+  .image
+  img {
   border-radius: 12px;
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con h4 {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .news-single-comment
+  .content
+  .head
+  .con
+  h4 {
   margin-bottom: 5px;
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .reply {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .news-single-comment
+  .content
+  .head
+  .reply {
   font-weight: 500;
   font-size: 16px;
   color: var(--theme);
@@ -6442,14 +6849,29 @@ html.lenis, html.lenis body {
   background-color: var(--header);
   border-radius: 100px;
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .reply:hover {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .news-single-comment
+  .content
+  .head
+  .reply:hover {
   background-color: var(--theme);
 }
-.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment.style-2 {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .comments-area
+  .news-single-comment.style-2 {
   margin-left: 90px;
 }
 @media (max-width: 1399px) {
-  .news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment.style-2 {
+  .news-details-wrapper
+    .news-details-post
+    .details-content
+    .comments-area
+    .news-single-comment.style-2 {
     margin-left: 0;
   }
 }
@@ -6464,7 +6886,8 @@ html.lenis, html.lenis body {
   margin-bottom: 10px;
   display: inline-block;
 }
-.news-details-wrapper .news-details-post .details-content .form-clt input, .news-details-wrapper .news-details-post .details-content .form-clt textarea {
+.news-details-wrapper .news-details-post .details-content .form-clt input,
+.news-details-wrapper .news-details-post .details-content .form-clt textarea {
   width: 100%;
   border: none;
   outline: none;
@@ -6474,16 +6897,27 @@ html.lenis, html.lenis body {
   padding: 18px 20px;
 }
 @media (max-width: 767px) {
-  .news-details-wrapper .news-details-post .details-content .form-clt input, .news-details-wrapper .news-details-post .details-content .form-clt textarea {
+  .news-details-wrapper .news-details-post .details-content .form-clt input,
+  .news-details-wrapper .news-details-post .details-content .form-clt textarea {
     padding: 14px 20px;
   }
 }
 @media (max-width: 575px) {
-  .news-details-wrapper .news-details-post .details-content .form-clt input, .news-details-wrapper .news-details-post .details-content .form-clt textarea {
+  .news-details-wrapper .news-details-post .details-content .form-clt input,
+  .news-details-wrapper .news-details-post .details-content .form-clt textarea {
     padding: 12px 18px;
   }
 }
-.news-details-wrapper .news-details-post .details-content .form-clt input::placeholder, .news-details-wrapper .news-details-post .details-content .form-clt textarea::placeholder {
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .form-clt
+  input::placeholder,
+.news-details-wrapper
+  .news-details-post
+  .details-content
+  .form-clt
+  textarea::placeholder {
   color: var(--text);
 }
 .news-details-wrapper .news-details-post .details-content .form-clt textarea {
@@ -6527,7 +6961,11 @@ html.lenis, html.lenis body {
   }
 }
 .preloader .animation-preloader .txt-loading {
-  font: bold 5em "Space Grotesk", serif, "Inter", sans-serif;
+  font:
+    bold 5em "Space Grotesk",
+    serif,
+    "Inter",
+    sans-serif;
   text-align: center;
   user-select: none;
 }
@@ -6540,25 +6978,46 @@ html.lenis, html.lenis body {
   color: var(--theme);
   position: relative;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(2):before {
   animation-delay: 0.2s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(3):before {
   animation-delay: 0.4s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(4):before {
   animation-delay: 0.6s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(5):before {
   animation-delay: 0.8s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(6):before {
   animation-delay: 1s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(7):before {
   animation-delay: 1.2s;
 }
-.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(8):before {
   animation-delay: 1.4s;
 }
 .preloader .animation-preloader .txt-loading .letters-loading::before {
@@ -6806,12 +7265,30 @@ html.lenis, html.lenis body {
   -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;
+  -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;
@@ -6822,8 +7299,8 @@ html.lenis, html.lenis body {
   position: relative;
 }
 
-.search-popup__form input[type=search],
-.search-popup__form input[type=text] {
+.search-popup__form input[type="search"],
+.search-popup__form input[type="text"] {
   width: 100%;
   height: 66px;
   border: none;
@@ -6836,8 +7313,8 @@ html.lenis, html.lenis body {
   transition: all 500ms ease;
 }
 
-.search-popup__form input[type=search]:focus,
-.search-popup__form input[type=text]:focus {
+.search-popup__form input[type="search"]:focus,
+.search-popup__form input[type="text"]:focus {
   color: var(--header);
 }
 
@@ -6979,7 +7456,8 @@ html.lenis, html.lenis body {
 .pricing-wrapper-2 .pricing-content .nav .nav-link:last-child {
   padding-right: 0;
 }
-.pricing-wrapper-2 .pricing-content .nav .nav-link:last-child::after, .pricing-wrapper-2 .pricing-content .nav .nav-link:last-child::before {
+.pricing-wrapper-2 .pricing-content .nav .nav-link:last-child::after,
+.pricing-wrapper-2 .pricing-content .nav .nav-link:last-child::before {
   display: none;
 }
 .pricing-wrapper-2 .pricing-content .nav .nav-link.active {
@@ -7017,7 +7495,11 @@ html.lenis, html.lenis body {
   z-index: 9;
   margin-bottom: 32px;
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header .sub-texts {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items
+  .pricing-header
+  .sub-texts {
   top: 40px;
   right: 0;
   position: absolute;
@@ -7026,7 +7508,11 @@ html.lenis, html.lenis body {
   color: var(--white);
 }
 @media (max-width: 575px) {
-  .pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header .sub-texts {
+  .pricing-wrapper-2
+    .pricing-right-items
+    .pricing-box-items
+    .pricing-header
+    .sub-texts {
     font-size: 20px;
   }
 }
@@ -7037,22 +7523,41 @@ html.lenis, html.lenis body {
   color: var(--white);
 }
 @media (max-width: 575px) {
-  .pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header h2 {
+  .pricing-wrapper-2
+    .pricing-right-items
+    .pricing-box-items
+    .pricing-header
+    h2 {
     font-size: 50px;
   }
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header h2 sup {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items
+  .pricing-header
+  h2
+  sup {
   font-size: 32px;
   font-weight: 700;
   top: -1.5em;
   margin-right: -10px;
 }
 @media (max-width: 575px) {
-  .pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header h2 sup {
+  .pricing-wrapper-2
+    .pricing-right-items
+    .pricing-box-items
+    .pricing-header
+    h2
+    sup {
     top: -0.5em;
   }
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header h2 sub {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items
+  .pricing-header
+  h2
+  sub {
   font-size: 20px;
   font-weight: 600;
   text-transform: capitalize;
@@ -7084,7 +7589,11 @@ html.lenis, html.lenis body {
 .pricing-wrapper-2 .pricing-right-items .pricing-box-items ul li {
   color: var(--white);
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items ul li:not(:last-child) {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items
+  ul
+  li:not(:last-child) {
   margin-bottom: 15px;
 }
 @media (max-width: 575px) {
@@ -7112,7 +7621,11 @@ html.lenis, html.lenis body {
     margin-left: -70%;
   }
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items.style-2 .pricing-header .sub-texts {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items.style-2
+  .pricing-header
+  .sub-texts {
   color: var(--header);
 }
 .pricing-wrapper-2 .pricing-right-items .pricing-box-items.style-2 .theme-btn {
@@ -7121,7 +7634,11 @@ html.lenis, html.lenis body {
   border: 1px solid rgba(203, 204, 207, 0.24);
   color: var(--header);
 }
-.pricing-wrapper-2 .pricing-right-items .pricing-box-items.style-2 .theme-btn i {
+.pricing-wrapper-2
+  .pricing-right-items
+  .pricing-box-items.style-2
+  .theme-btn
+  i {
   background-color: var(--theme);
   color: var(--white);
 }
@@ -7272,7 +7789,7 @@ html.lenis, html.lenis body {
 }
 
 .section-bg-2 {
-  background-color: #F7F7F7;
+  background-color: #f7f7f7;
 }
 
 .header-bg {
@@ -7280,7 +7797,7 @@ html.lenis, html.lenis body {
 }
 
 .footer-bg-2 {
-  background-color: #151A26;
+  background-color: #151a26;
 }
 
 .section-padding {
@@ -7329,7 +7846,9 @@ html.lenis, html.lenis body {
   background-repeat: no-repeat;
   background-position-x: 75%;
   opacity: 0;
-  transition: opacity 0.3s, transform 0.4s ease-out;
+  transition:
+    opacity 0.3s,
+    transform 0.4s ease-out;
   overflow: hidden;
   pointer-events: none;
   z-index: 2;
@@ -7369,6 +7888,11 @@ html.lenis, html.lenis body {
 .service-wrapper .service-item .right-item p {
   max-width: 503px;
 }
+@media (max-width: 575px) {
+  .service-wrapper .service-item .right-item p {
+    margin-right: 0;
+  }
+}
 .service-wrapper .service-item .right-item .service-btn {
   font-weight: 500;
   color: var(--theme);
@@ -7462,7 +7986,11 @@ html.lenis, html.lenis body {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(0deg, rgba(21, 26, 38, 0.8) 0%, rgba(21, 26, 38, 0.8) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(21, 26, 38, 0.8) 0%,
+    rgba(21, 26, 38, 0.8) 100%
+  );
 }
 .service-wrapper-2 .service-box-item h2 {
   font-size: 56px;
@@ -7516,26 +8044,49 @@ html.lenis, html.lenis body {
   position: relative;
   z-index: 9;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item {
   border: 1px transparent;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item::before {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item::before {
   background: none;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item .service-image {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item
+  .service-image {
   opacity: 1;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item h2 {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item
+  h2 {
   color: var(--theme) !important;
   -webkit-text-stroke: initial !important;
   z-index: 999;
   position: relative;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item h3 {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item
+  h3 {
   z-index: 999;
   position: relative;
 }
-.service-section-2 .service-wrapper-2 .swiper-slide.swiper-slide-active .service-box-item h3 a {
+.service-section-2
+  .service-wrapper-2
+  .swiper-slide.swiper-slide-active
+  .service-box-item
+  h3
+  a {
   color: var(--white);
 }
 .service-section-2 .service-bottom {
@@ -7549,7 +8100,11 @@ html.lenis, html.lenis body {
     display: none;
   }
 }
-.service-section-2 .service-bottom .service-pagi-items .service-dot .swiper-pagination-bullet {
+.service-section-2
+  .service-bottom
+  .service-pagi-items
+  .service-dot
+  .swiper-pagination-bullet {
   width: 340px;
   height: 2px;
   border-radius: 0;
@@ -7558,7 +8113,11 @@ html.lenis, html.lenis body {
   transition: 0.6s;
   margin: 0 !important;
 }
-.service-section-2 .service-bottom .service-pagi-items .service-dot .swiper-pagination-bullet-active {
+.service-section-2
+  .service-bottom
+  .service-pagi-items
+  .service-dot
+  .swiper-pagination-bullet-active {
   opacity: 1;
   background: var(--theme);
   width: 124px;
@@ -7792,25 +8351,47 @@ html.lenis, html.lenis body {
     font-size: 25px;
   }
 }
-.service-details-wrapper .service-details-post .service-left-content .list-item {
+.service-details-wrapper
+  .service-details-post
+  .service-left-content
+  .list-item {
   margin-top: 24px;
 }
-.service-details-wrapper .service-details-post .service-left-content .list-item li i {
+.service-details-wrapper
+  .service-details-post
+  .service-left-content
+  .list-item
+  li
+  i {
   color: var(--theme-2);
   margin-right: 6px;
 }
-.service-details-wrapper .service-details-post .service-left-content .list-item li span {
+.service-details-wrapper
+  .service-details-post
+  .service-left-content
+  .list-item
+  li
+  span {
   font-size: 20px;
   font-weight: 500;
   color: var(--header);
   font-family: "Space Grotesk", serif;
 }
 @media (max-width: 1399px) {
-  .service-details-wrapper .service-details-post .service-left-content .list-item li span {
+  .service-details-wrapper
+    .service-details-post
+    .service-left-content
+    .list-item
+    li
+    span {
     font-size: 16px;
   }
 }
-.service-details-wrapper .service-details-post .service-left-content .list-item li:not(:last-child) {
+.service-details-wrapper
+  .service-details-post
+  .service-left-content
+  .list-item
+  li:not(:last-child) {
   margin-bottom: 16px;
 }
 .service-details-wrapper .service-details-post .thumb img {
@@ -7822,10 +8403,20 @@ html.lenis, html.lenis body {
   position: relative;
   z-index: 9;
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-item {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-item {
   border: none;
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-item h5 button {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-item
+  h5
+  button {
   line-height: 1;
   font-weight: 600;
   padding: 29px 30px;
@@ -7833,37 +8424,68 @@ html.lenis, html.lenis body {
   cursor: pointer;
 }
 @media (max-width: 575px) {
-  .service-details-wrapper .service-details-post .faq-items .accordion .accordion-item h5 button {
+  .service-details-wrapper
+    .service-details-post
+    .faq-items
+    .accordion
+    .accordion-item
+    h5
+    button {
     font-size: 18px;
     line-height: 1.6;
     padding: 22px 20px;
   }
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-item .accordion-body {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-item
+  .accordion-body {
   padding: 20px 30px;
   background-color: var(--white);
   box-shadow: 8px 8px 32px 0 rgba(0, 72, 180, 0.08);
   backdrop-filter: blur(5px);
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-item .accordion-body p {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-item
+  .accordion-body
+  p {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 }
 @media (max-width: 575px) {
-  .service-details-wrapper .service-details-post .faq-items .accordion .accordion-item .accordion-body p {
+  .service-details-wrapper
+    .service-details-post
+    .faq-items
+    .accordion
+    .accordion-item
+    .accordion-body
+    p {
     width: 100%;
     font-size: 14px;
     line-height: 28px;
   }
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-button {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-button {
   background-color: var(--white);
   color: var(--header);
   box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
   backdrop-filter: blur(5px);
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-button::after {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-button::after {
   content: "\f324";
   font-family: "Font Awesome 6 Pro";
   background: transparent;
@@ -7871,13 +8493,21 @@ html.lenis, html.lenis body {
   transition: all 0.3s ease-in-out !important;
   color: var(--theme-2);
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-button:not(.collapsed) {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-button:not(.collapsed) {
   background-color: var(--white);
   box-shadow: 8px 8px 32px 0 rgba(36, 12, 135, 0.08);
   backdrop-filter: blur(5px);
   color: var(--header);
 }
-.service-details-wrapper .service-details-post .faq-items .accordion .accordion-button:not(.collapsed)::after {
+.service-details-wrapper
+  .service-details-post
+  .faq-items
+  .accordion
+  .accordion-button:not(.collapsed)::after {
   content: "\f322";
   font-family: "Font Awesome 6 Pro";
   background: transparent;
@@ -8037,7 +8667,10 @@ html.lenis, html.lenis body {
     padding: 30px;
   }
 }
-.testimonial-wrapper-2 .testimonial-item .testimonial-left .testimonial-box::before {
+.testimonial-wrapper-2
+  .testimonial-item
+  .testimonial-left
+  .testimonial-box::before {
   position: absolute;
   bottom: -23px;
   content: "";
@@ -8047,7 +8680,11 @@ html.lenis, html.lenis body {
   background-color: var(--theme-2);
   clip-path: polygon(100% 0, 0 0, 100% 100%);
 }
-.testimonial-wrapper-2 .testimonial-item .testimonial-left .testimonial-box .star {
+.testimonial-wrapper-2
+  .testimonial-item
+  .testimonial-left
+  .testimonial-box
+  .star {
   color: var(--white);
   margin-bottom: 10px;
 }
@@ -8060,7 +8697,11 @@ html.lenis, html.lenis body {
   line-height: 140%;
 }
 @media (max-width: 1399px) {
-  .testimonial-wrapper-2 .testimonial-item .testimonial-left .testimonial-box p {
+  .testimonial-wrapper-2
+    .testimonial-item
+    .testimonial-left
+    .testimonial-box
+    p {
     font-size: 16px;
   }
 }
@@ -8075,7 +8716,12 @@ html.lenis, html.lenis body {
   border: 1px solid var(--theme);
   border-radius: 100%;
 }
-.testimonial-wrapper-2 .testimonial-item .testimonial-left .info-item .content h5 {
+.testimonial-wrapper-2
+  .testimonial-item
+  .testimonial-left
+  .info-item
+  .content
+  h5 {
   font-weight: 500;
 }
 .testimonial-wrapper-2 .testimonial-item .right-item {
@@ -8297,7 +8943,12 @@ html.lenis, html.lenis body {
     font-size: 16px;
   }
 }
-.visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link {
+.visa-certification-wrapper
+  .visa-certification-content
+  .visa-item
+  .nav
+  li
+  .nav-link {
   color: var(--header);
   transition: all 0.4s ease-in-out;
   padding: 16px 40px 16px 16px;
@@ -8307,16 +8958,32 @@ html.lenis, html.lenis body {
   line-height: 1;
 }
 @media (max-width: 1399px) {
-  .visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link {
+  .visa-certification-wrapper
+    .visa-certification-content
+    .visa-item
+    .nav
+    li
+    .nav-link {
     padding: 10px 10px 10px 10px;
   }
 }
 @media (max-width: 991px) {
-  .visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link {
+  .visa-certification-wrapper
+    .visa-certification-content
+    .visa-item
+    .nav
+    li
+    .nav-link {
     padding: 16px 40px 16px 16px;
   }
 }
-.visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link i {
+.visa-certification-wrapper
+  .visa-certification-content
+  .visa-item
+  .nav
+  li
+  .nav-link
+  i {
   width: 24px;
   height: 24px;
   line-height: 24px;
@@ -8328,17 +8995,32 @@ html.lenis, html.lenis body {
   transform: rotate(-45deg);
   margin-right: 6px;
 }
-.visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link.active {
+.visa-certification-wrapper
+  .visa-certification-content
+  .visa-item
+  .nav
+  li
+  .nav-link.active {
   position: relative;
   background-color: var(--theme);
   color: var(--white);
   border-radius: 100px;
 }
-.visa-certification-wrapper .visa-certification-content .visa-item .nav li .nav-link.active i {
+.visa-certification-wrapper
+  .visa-certification-content
+  .visa-item
+  .nav
+  li
+  .nav-link.active
+  i {
   background-color: var(--white);
   color: var(--theme);
 }
-.visa-certification-wrapper .visa-certification-content .visa-item .content .icon {
+.visa-certification-wrapper
+  .visa-certification-content
+  .visa-item
+  .content
+  .icon {
   margin-bottom: 16px;
 }
 .visa-certification-wrapper .visa-certification-content .visa-item .content p {
@@ -8611,24 +9293,41 @@ html.lenis, html.lenis body {
   color: var(--theme-2);
   margin-top: 30px;
 }
-.country-details-wrapper .country-details-post .country-details-content .tourist-visa-box {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .tourist-visa-box {
   border-radius: 16px;
   padding: 30px;
   background-color: var(--bg);
   margin-top: 30px;
   margin-bottom: 24px;
 }
-.country-details-wrapper .country-details-post .country-details-content .tourist-visa-box .tourist-box {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .tourist-visa-box
+  .tourist-box {
   display: flex;
   align-items: center;
   gap: 50px;
 }
-.country-details-wrapper .country-details-post .country-details-content .tourist-visa-box .tourist-box .tourist-content h5 {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .tourist-visa-box
+  .tourist-box
+  .tourist-content
+  h5 {
   color: var(--header);
   margin-bottom: 5px;
   margin-top: 0;
 }
-.country-details-wrapper .country-details-post .country-details-content .tourist-visa-box .tourist-box.style-2 {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .tourist-visa-box
+  .tourist-box.style-2 {
   padding-bottom: 15px;
   border-bottom: 1px solid rgba(203, 204, 207, 0.7);
   margin-bottom: 15px;
@@ -8636,42 +9335,74 @@ html.lenis, html.lenis body {
 .country-details-wrapper .country-details-post .country-details-content .text {
   font-size: 32px;
 }
-.country-details-wrapper .country-details-post .country-details-content .list-item {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .list-item {
   margin-top: 20px;
   margin-bottom: 30px;
 }
-.country-details-wrapper .country-details-post .country-details-content .list-item li {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .list-item
+  li {
   color: var(--header);
   font-size: 18px;
   font-weight: 500;
   font-family: "Space Grotesk", serif;
 }
-.country-details-wrapper .country-details-post .country-details-content .list-item li:not(:last-child) {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .list-item
+  li:not(:last-child) {
   margin-bottom: 15px;
 }
-.country-details-wrapper .country-details-post .country-details-content .list-item li span {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .list-item
+  li
+  span {
   font-size: 16px;
   font-weight: 400;
   color: var(--text);
   font-family: "Inter", sans-serif;
 }
-.country-details-wrapper .country-details-post .country-details-content .thumb img {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .thumb
+  img {
   width: 100%;
   height: 100%;
   border-radius: 16px;
 }
-.country-details-wrapper .country-details-post .country-details-content .visa-list-2 {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .visa-list-2 {
   display: flex;
   align-items: center;
   gap: 32px;
   margin-bottom: 20px;
 }
-.country-details-wrapper .country-details-post .country-details-content .visa-list-2 li {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .visa-list-2
+  li {
   font-size: 20px;
   font-weight: 500;
   color: var(--header);
 }
-.country-details-wrapper .country-details-post .country-details-content .visa-list-2 li i {
+.country-details-wrapper
+  .country-details-post
+  .country-details-content
+  .visa-list-2
+  li
+  i {
   color: var(--theme-2);
   margin-right: 8px;
 }
@@ -8697,7 +9428,11 @@ html.lenis, html.lenis body {
   padding: 40px;
   margin-top: 30px;
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content h3 {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  h3 {
   color: var(--white);
 }
 .country-details-wrapper .country-details-sideber .visa-contact-box .content p {
@@ -8706,13 +9441,22 @@ html.lenis, html.lenis body {
   padding-bottom: 16px;
   margin-bottom: 24px;
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content .icon-item {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  .icon-item {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 24px;
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content .icon-item .icon {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  .icon-item
+  .icon {
   width: 48px;
   height: 48px;
   line-height: 48px;
@@ -8721,14 +9465,33 @@ html.lenis, html.lenis body {
   background-color: #183074;
   color: var(--white);
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content .icon-item .cont span {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  .icon-item
+  .cont
+  span {
   color: rgba(255, 255, 255, 0.7);
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content .icon-item .cont h6 {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  .icon-item
+  .cont
+  h6 {
   color: var(--white);
   font-size: 18px;
   font-weight: 500;
 }
-.country-details-wrapper .country-details-sideber .visa-contact-box .content .icon-item .cont h6 a {
+.country-details-wrapper
+  .country-details-sideber
+  .visa-contact-box
+  .content
+  .icon-item
+  .cont
+  h6
+  a {
   color: var(--white);
-}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+} /*# sourceMappingURL=main.css.map */