first commit

.env

@@ -0,0 +1,3 @@
+# Generate app password here: https://myaccount.google.com/apppasswords
+MAIL_USER=alaguraj259@gmail.com
+MAIL_PASS=brjb bqot tebf xpjc

.github/workflows/main.yml

@@ -0,0 +1,59 @@
+name: Build and Deploy Build Output
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.17.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Next.js project
+        run: npm run build
+
+      # Optional: List build directories to verify output exists
+      - name: List build directories
+        run: ls -la
+
+      - name: Deploy build output to build-output branch
+        env:
+          # The GITHUB_TOKEN is automatically provided by GitHub Actions.
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Configure git
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          
+          # Create a temporary directory for the output
+          mkdir deploy
+          # Copy the build outputs (update the paths if needed)
+          cp -r out deploy/
+          cp -r .next deploy/ 2>/dev/null || echo ".next folder not found, skipping."
+
+          # Move into the deploy directory
+          cd deploy
+          
+          # Initialize a new git repo
+          git init
+          git checkout -b build-output
+          
+          # Add all files and commit them
+          git add .
+          git commit -m "Deploy build output for commit ${GITHUB_SHA}"
+          
+          # Force push to the remote build-output branch
+          git push --force "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ github.repository }}.git" build-output

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  reactStrictMode: false,
+  trailingSlash: true, // if needed for static export
+
+  async headers() {
+    return [
+      {
+        source: '/(.*)',  // apply this to all routes
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;

optimize-images.mjs

@@ -0,0 +1,18 @@
+// optimize-images.mjs
+import imagemin from 'imagemin';
+import imageminMozjpeg from 'imagemin-mozjpeg';
+import imageminOptipng from 'imagemin-optipng';
+import path from 'path';
+
+const destination = path.join(process.cwd(), 'public/images-optimized');
+
+(async () => {
+  const files = await imagemin(['public/images/*.{jpg,png}'], {
+    destination,
+    plugins: [
+      imageminMozjpeg({ quality: 90 }),
+      imageminOptipng({ optimizationLevel: 3 })
+    ]
+  });
+  console.log('Images optimized:', files);
+})();

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "srimurugantemple",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "node scripts/generate-sitemap.cjs && next build && node optimize-images.mjs",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ramonak/react-progress-bar": "^5.2.0",
+    "animate.css": "^4.1.1",
+    "aos": "^2.3.4",
+    "axios": "^1.10.0",
+    "bootstrap": "^5.3.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0",
+    "imagesloaded": "^5.0.0",
+    "isotope-layout": "^3.0.6",
+    "moment": "^2.30.1",
+    "next": "14.1.4",
+    "next-optimized-images": "^2.6.2",
+    "nodemailer": "^7.0.3",
+    "rc-slider": "^10.5.0",
+    "react": "^18",
+    "react-countup": "^6.5.3",
+    "react-dom": "^18",
+    "react-fast-marquee": "^1.6.4",
+    "react-google-recaptcha": "^3.1.0",
+    "react-modal-image": "^2.6.0",
+    "react-on-screen": "^2.1.1",
+    "react-progress-bar": "^0.1.0",
+    "react-range": "^1.8.14",
+    "react-scroll-to-top": "^3.0.0",
+    "react-visibility-sensor": "^5.1.1",
+    "sitemap": "^8.0.2",
+    "swiper": "^9.1.1"
+  },
+  "devDependencies": {
+    "imagemin": "^6.1.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "sass": "^1.71.1"
+  }
+}

public/assets/css/demo.scss

@@ -0,0 +1,936 @@
+/*
+Theme Name: Fixturbo
+Theme URI: https://wowtheme7.com/fixturbo
+Author: wowtheme7
+Author URI: https://wowtheme7.com 
+Description: Fixturbo - Car Repair & Auto Services HTML Template
+Version: 2.0.1
+*/
+
+:root {
+  --main-color: rgb(232, 9, 46);
+  --main-color-opacity: 13, 110, 253;
+  --main-gradient: linear-gradient(to right, #2878eb, #f129c9);
+  --heading-color: #111;
+  --heading-font: "Yantramanav", sans-serif;
+  --body-font: "Roboto", sans-serif;
+}
+
+/***default-btn-area***/
+.demo .btn {
+  height: 50px;
+  line-height: 50px;
+  padding: 0 32px;
+  overflow: hidden;
+  position: relative;
+  border: 0;
+  transition: all 0.5s ease 0s;
+  font-weight: 700;
+  display: inline-block;
+  transform: perspective(1px) translateZ(0);
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+.demo .btn:focus,
+.demo .btn:active {
+  outline: 0;
+  box-shadow: none;
+}
+.demo .btn:after {
+  content: "";
+  background: var(--main-color);
+  position: absolute;
+  transition: all 0.9s ease 0s;
+  z-index: -1;
+  height: 100%;
+  left: -35%;
+  top: 0;
+  transform: skew(30deg);
+  transform-origin: top left;
+  width: 0;
+}
+.demo .btn:hover {
+  color: #fff;
+}
+.demo .btn:hover:after {
+  height: 100%;
+  width: 135%;
+}
+.demo .btn-base {
+  color: #fff;
+  border: 0;
+  background: var(--main-color);
+}
+.demo .btn-base:after {
+  background: #fff;
+}
+.demo .btn-base:hover::after {
+  background: var(--main-color);
+}
+.demo .btn-border {
+  color: var(--main-color);
+  border: 1px solid var(--main-color);
+  background: transparent;
+}
+.demo .btn-border:hover {
+  color: #fff;
+}
+.demo .btn-border-white {
+  color: #fff;
+  border: 1px solid #fff;
+  background: transparent;
+}
+.demo .btn-border-white:hover {
+  background: #fff;
+  opacity: 1;
+  color: var(--main-color);
+}
+.demo .btn-border-white:hover::after {
+  background: #fff;
+}
+.demo .btn-white {
+  color: var(--main-color);
+  border: 0;
+  background: #fff;
+  font-size: 14px;
+  transition: all 0.3s ease 0s;
+}
+.demo .btn-white:hover {
+  color: var(--main-color);
+}
+.demo .btn-white:hover:after {
+  background: #fff;
+}
+.demo .btn-area {
+  animation: 1.5s 0.8s fadeInUp both;
+}
+.demo .btn-area .btn {
+  margin-right: 15px;
+}
+
+.demo .navbar-area {
+  background: transparent;
+  padding: 0;
+  top: 0;
+  position: fixed;
+  z-index: 98;
+  width: 100% !important;
+  transition: all 0.4s;
+  background: transparent;
+}
+.demo .navbar {
+  background: #fff;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  transition: all 0.3s linear;
+  box-shadow: 0px 5px 50px 0px rgb(0 0 0 / 5%);
+}
+.demo .top-nav-collapse {
+  box-shadow: 0px 4px 6px 0px rgb(12 0 46 / 5%);
+  top: 0;
+  padding: 0;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.88);
+}
+.demo .navbar-area .nav-container {
+  transition: all 0.4s;
+  padding: 16px 12px;
+}
+.demo .top-nav-collapse .nav-container {
+  background-color: transparent;
+  padding: 16px 12px;
+  transition: all 0.4s;
+}
+.demo .navbar-area .nav-container .navbar-collapse .navbar-nav li {
+  margin-top: 0;
+  display: inline-block;
+  font-weight: 400;
+  line-height: 50px;
+  text-transform: capitalize;
+}
+.demo .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
+  color: var(--heading-color);
+  font-size: 18px;
+  font-weight: 700;
+  font-family: var(--heading-font);
+  text-decoration: none;
+}
+.demo .navbar-area .nav-container .navbar-collapse .navbar-nav li + li {
+  margin-left: 30px;
+}
+.demo .nav-right-part-desktop {
+  margin-left: 30px;
+}
+.demo .nav-right-part ul {
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+}
+.demo .nav-right-part ul li {
+  list-style: none;
+  align-self: center;
+}
+.demo .nav-right-part-mobile {
+  display: none;
+}
+.demo .nav-right-part-mobile ul li a {
+  text-decoration: none;
+  color: #fff;
+  padding: 0 10px;
+}
+.demo .nav-right-part-mobile ul li .cart {
+  display: none;
+}
+.demo .nav-right-part-mobile ul li .cart img {
+  height: 20px;
+  width: 20px;
+  filter: invert(1);
+}
+/***banner-area***/
+.demo .banner-area {
+  padding: 250px 0px 250px;
+  background-size: cover !important;
+  position: relative;
+  background-position: center !important;
+  overflow: hidden;
+  background: fixed;
+  background-color: #fff;
+}
+.demo .banner-area:after {
+  content: "";
+  position: absolute;
+  /* background: #080C24; */
+  opacity: 0.98;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.demo .banner-area .sidebar-links {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  display: inline-block;
+  margin-right: -105px;
+  transition: 0.4s;
+  transform: translateY(-50%);
+  margin-top: -70px;
+  z-index: 9;
+}
+.demo .banner-area .sidebar-links:hover {
+  margin-right: 0;
+}
+.demo .banner-area .sidebar-links .btn {
+  border-radius: 0;
+  margin-bottom: 5px;
+  width: 100%;
+  padding: 0 18px;
+  display: block;
+  margin-right: 0;
+  border: 1px solid #eae5e5;
+}
+.demo .banner-area .sidebar-links .btn i {
+  margin-right: 13px;
+  font-size: 22px;
+  float: left;
+  margin-top: 14px;
+}
+.demo .banner-inner {
+  position: relative;
+  z-index: 9;
+}
+.demo .banner-logo {
+  animation: 1.5s 0.4s fadeInUp both;
+}
+.demo .banner-inner h1 {
+  line-height: 1;
+  font-weight: 700;
+  font-size: 64px;
+  margin-bottom: 25px;
+  animation: 1.5s 0.4s fadeInUp both;
+}
+.demo .banner-inner h1 span {
+  color: #ffd934;
+  display: block;
+}
+.demo .banner-inner p {
+  margin-bottom: 25px;
+  font-size: 24px;
+  line-height: 36px;
+}
+.demo .banner-inner .me-5 {
+  animation: 1.5s 0.6s fadeInUp both;
+}
+.demo .banner-inner .banner-counter-wrap {
+  animation: 1.5s 0.7s fadeInUp both;
+}
+.demo .banner-inner .single-counter-inner .details h2 {
+  /* color: #fff; */
+}
+.demo .hero-thumb-wrap {
+  text-align: center;
+  position: relative;
+  padding-top: 72px;
+  padding-bottom: 120px;
+  margin: 0 100px;
+  z-index: 1;
+}
+.demo .hero-thumb-wrap .hero-thumb6,
+.demo .hero-thumb-wrap .hero-thumb5,
+.demo .hero-thumb-wrap .hero-thumb4,
+.demo .hero-thumb-wrap .hero-thumb3,
+.demo .hero-thumb-wrap .hero-thumb2,
+.demo .hero-thumb-wrap .hero-thumb1 {
+  box-shadow: 7px -7px 20px 0px rgba(40, 40, 40, 0.25);
+  border-radius: 10px;
+  display: inline-block;
+  overflow: hidden;
+}
+.demo .hero-thumb-wrap .hero-thumb2 {
+  bottom: 15px;
+  left: 0;
+  position: absolute;
+}
+.demo .hero-thumb-wrap .hero-thumb3 {
+  bottom: 0;
+  right: 112px;
+  position: absolute;
+}
+.demo .hero-thumb-wrap .hero-thumb4 {
+  top: 0;
+  right: 0;
+  z-index: -1;
+  position: absolute;
+}
+.demo .hero-thumb-wrap .hero-thumb5 {
+  top: 0;
+  left: 106px;
+  z-index: -1;
+  position: absolute;
+}
+.demo .hero-thumb-wrap .hero-thumb6 {
+  bottom: -50px;
+  left: 50%;
+  margin-left: -225px;
+  position: absolute;
+}
+
+.demo .hero-thumb-wrap .hero-thumb1 img {
+  max-width: 722px;
+}
+.demo .hero-thumb-wrap .hero-thumb2 img {
+  max-width: 500px;
+}
+.demo .hero-thumb-wrap .hero-thumb3 img {
+  max-width: 350px;
+}
+.demo .hero-thumb-wrap .hero-thumb4 img {
+  max-width: 450px;
+}
+.demo .hero-thumb-wrap .hero-thumb5 img {
+  max-width: 360px;
+}
+.demo .hero-thumb-wrap .hero-thumb6 img {
+  max-width: 450px;
+}
+.demo .jump-reverse {
+  animation: jumpReverseAni 7s linear infinite;
+}
+@keyframes jumpReverseAni {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(30px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.demo .jump {
+  animation: jumpAni 7s linear infinite;
+}
+.demo .jump1 {
+  animation: jumpAni 6s linear infinite;
+}
+.demo .jump2 {
+  animation: jumpAni 5s linear infinite;
+}
+.demo .jump3 {
+  animation: jumpAni 4s linear infinite;
+}
+@keyframes jumpAni {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+/********* single-counter-inner *********/
+.demo .counter-area {
+  transform: translateY(-50%);
+}
+.demo .counter-area-inner {
+  background: var(--main-color);
+  padding: 50px 0 0 0;
+  border-radius: 10px;
+}
+.demo .single-counter-inner {
+  margin-bottom: 50px;
+}
+.demo .single-counter-inner h2 {
+  font-size: 54px;
+  font-weight: 700;
+  color: #fff;
+}
+.demo .single-counter-inner p {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 0;
+  color: #ffffff;
+}
+
+/***inner-item***/
+.demo .inner-item {
+  text-align: center;
+  margin-bottom: 50px;
+  position: relative;
+}
+.demo .inner-item .al-batch {
+  height: 50px;
+  width: 50px;
+  font-size: 14px;
+  background: #ff8400;
+  border-radius: 50%;
+  position: absolute;
+  right: -12px;
+  top: -20px;
+  line-height: 50px;
+  color: #fff;
+  font-weight: 600;
+}
+/* .inner-item .thumb img {
+    transition: transform 5000ms cubic-bezier(.455, .030, .515, .955);
+  } */
+/* .inner-item:hover .thumb img {
+    transform: translateY(calc(-100% + 430px));
+  } */
+.demo .inner-item a {
+  display: block;
+  font-size: 22px;
+  font-weight: 500;
+  color: #1d1d1d;
+  text-decoration: none;
+  position: relative;
+}
+.demo .inner-item a .thumb {
+  overflow: hidden;
+  display: block;
+  position: relative;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  box-shadow: 0px 5px 50px 0px rgb(0 0 0 / 20%);
+  min-height: 430px;
+  transition: 0.6s;
+}
+.demo .inner-item a .thumb:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.4s;
+}
+.demo .inner-item a img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: scale(1) translateY(1);
+  transition: transform 12s;
+  display: block;
+  width: 100%;
+  height: initial;
+}
+.demo .inner-item:hover a .thumb:after {
+  visibility: visible;
+  opacity: 1;
+}
+.demo .header-item {
+  display: block;
+}
+.demo .header-item .thumb {
+  position: relative;
+  display: block;
+}
+.demo .header-item .thumb:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.4s;
+  border-radius: 5px;
+}
+.demo .header-item .thumb img {
+  transition: 0.4s;
+  border-radius: 5px;
+}
+.demo .header-item:hover .thumb img {
+  transform: scale(1.05);
+}
+.demo .header-item:hover .thumb:after {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.demo .inner-item.coming-soon a .thumb img {
+  filter: blur(12px);
+}
+.demo .cm-soon-title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.demo .inner-item:hover .cm-soon-title {
+  color: #fff;
+}
+.demo .inner-item .btn-group {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+  color: #fff;
+  margin-top: -22px;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.4s;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.demo .inner-item .btn-group .btn {
+  font-size: 14px;
+  width: 100%;
+  border-radius: 3px !important;
+  font-weight: 700;
+  color: #ffffff;
+}
+.demo .inner-item .item-title {
+  font-size: 18px;
+}
+.demo .inner-item:hover .btn-group {
+  visibility: visible;
+  opacity: 1;
+}
+
+/***section-title***/
+.demo .section-title {
+  margin-bottom: 60px;
+}
+.demo .section-title h5 {
+  font-weight: 600;
+  color: var(--main-color);
+  margin-bottom: 6px;
+}
+.demo .section-title h2 {
+  font-size: 42px;
+  font-weight: 700;
+  color: var(--heading-color);
+}
+.demo .section-title p {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.4);
+}
+/***default-padding***/
+.demo .pd-top-100 {
+  padding-top: 100px;
+}
+.demo .pd-top-47 {
+  padding-top: 47px;
+}
+.demo .pd-top-70 {
+  padding-top: 70px;
+}
+.demo .pd-top-87 {
+  padding-top: 87px;
+}
+.demo .pd-top-110 {
+  padding-top: 110px;
+}
+.demo .pd-top-120 {
+  padding-top: 120px;
+}
+.demo .pd-top-135 {
+  padding-top: 135px;
+}
+.demo .pd-top-130 {
+  padding-top: 130px;
+}
+.demo .pd-top-140 {
+  padding-top: 140px;
+}
+.demo .pd-top-150 {
+  padding-top: 150px;
+}
+
+.demo .pd-bottom-100 {
+  padding-bottom: 100px;
+}
+.demo .pd-bottom-97 {
+  padding-bottom: 97px;
+}
+.demo .pd-bottom-65 {
+  padding-bottom: 65px;
+}
+.demo .pd-bottom-105 {
+  padding-bottom: 105px;
+}
+.demo .pd-bottom-110 {
+  padding-bottom: 110px;
+}
+.demo .pd-bottom-120 {
+  padding-bottom: 120px;
+}
+.demo .pd-bottom-130 {
+  padding-bottom: 130px;
+}
+.demo .pd-bottom-140 {
+  padding-bottom: 140px;
+}
+.demo .pd-bottom-150 {
+  padding-bottom: 150px;
+}
+
+.demo .typed::after {
+  content: "|";
+  display: inline;
+  -webkit-animation: blink 0.7s infinite;
+  -moz-animation: blink 0.7s infinite;
+  animation: blink 0.7s infinite;
+}
+
+/*Removes cursor that comes with typed.js*/
+.demo .typed-cursor {
+  opacity: 0;
+  display: none !important;
+}
+/*Custom cursor animation*/
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@media all and (max-width: 1599px) {
+  .demo .banner-area {
+    padding: 220px 0px 200px;
+  }
+  .demo .hero-thumb-wrap .hero-thumb5 {
+    left: 0;
+  }
+  .demo .hero-thumb-wrap .hero-thumb4 img {
+    max-width: 400px;
+  }
+  .demo .hero-thumb-wrap .hero-thumb2 img {
+    max-width: 360px;
+  }
+  .demo .hero-thumb-wrap .hero-thumb3 {
+    right: 20px;
+  }
+  .demo .hero-thumb-wrap .hero-thumb6 img {
+    max-width: 300px;
+  }
+  .demo .hero-thumb-wrap .hero-thumb6 {
+    bottom: -20px;
+    margin-left: -150px;
+  }
+}
+@media all and (max-width: 1199px) {
+  .demo .hero-thumb-wrap {
+    display: none;
+  }
+  .demo .banner-area .bg-image {
+    opacity: 0.2;
+    z-index: 0;
+  }
+  .demo .banner-inner p {
+    margin: 0 20px !important;
+  }
+  .demo .btn {
+    height: 50px;
+    line-height: 50px;
+  }
+  .demo .pd-top-140 {
+    padding-top: 100px;
+  }
+  .demo .pd-bottom-97 {
+    padding-bottom: 57px;
+  }
+  .demo .pd-top-87 {
+    padding-top: 47px;
+  }
+  .demo .banner-area {
+    padding: 228px 0px 218px;
+  }
+}
+@media all and (max-width: 991px) {
+  .demo .nav-right-part-mobile {
+    display: block;
+  }
+  .demo .banner-inner h1 {
+    font-size: 70px;
+  }
+}
+@media all and (max-width: 575px) {
+  .demo .nav-right-part-desktop {
+    margin-left: 10px;
+  }
+  .demo .section-title h5 {
+    font-size: 18px;
+  }
+  .demo .counter-area {
+    transform: translateY(0);
+    margin-top: 140px;
+  }
+  .demo .single-counter-inner h2 {
+    font-size: 30px;
+  }
+}
+@media all and (max-width: 767px) {
+  .demo .nav-right-part ul li .btn {
+    display: none;
+  }
+  .demo .nav-right-part-mobile ul li .cart {
+    display: block;
+  }
+  .demo .nav-right-part-desktop {
+    margin-left: 0px;
+  }
+  .demo .banner-inner h1 {
+    line-height: 46px;
+    font-size: 33px;
+    margin-bottom: 15px;
+  }
+  .demo .banner-inner p {
+    font-size: 18px;
+    line-height: inherit;
+    letter-spacing: 0;
+  }
+  .demo .banner-inner p span {
+    font-size: 20px;
+  }
+  .demo .banner-area {
+    padding: 180px 0px 100px;
+  }
+  .demo .section-title h2 {
+    font-size: 30px;
+  }
+  .demo .btn {
+    padding: 0 21px;
+  }
+  .demo .footer-widget.demo .pd-bottom-100 {
+    padding-bottom: 70px;
+  }
+  .demo .footer-widget h5 {
+    font-size: 16px;
+  }
+  .demo .main-logo img {
+    width: 160px;
+  }
+}
+@media all and (max-width: 320px) {
+  .demo .main-logo img {
+    width: 110px;
+  }
+  .demo .nav-right-part ul li {
+    font-size: 15px;
+  }
+  .demo .nav-right-part ul li a {
+    padding: 0 7px;
+  }
+}
+.demo .featured-item {
+  box-shadow: 0 0 40px rgb(82 85 90 / 10%);
+  text-align: center;
+  margin-bottom: 30px;
+  padding: 40px 20px 35px 20px;
+  background: #fff;
+  border-radius: 5px;
+  color: #1d1d1d;
+  font-size: 22px;
+}
+.demo .featured-item img {
+  display: block;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 40px rgb(82 85 90 / 20%);
+  border-radius: 5px;
+}
+.demo .footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  padding: 25px 0;
+  position: relative;
+  z-index: 2;
+}
+.demo .footer-bottom p {
+  margin-bottom: 0;
+  color: #fff;
+}
+.demo .footer-bottom p a {
+  color: #ff8400;
+  text-decoration: none;
+  font-weight: 600;
+}
+.demo .footer-area {
+  position: relative;
+}
+.demo .footer-widget {
+  position: relative;
+  z-index: 9;
+}
+.demo .footer-area:after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(15px);
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.demo .single-pricing-wrap {
+  border: 2px solid #e9e9e9;
+  padding: 60px;
+  margin-bottom: 30px;
+  background: #fff;
+}
+.demo .single-pricing-wrap .price {
+  border-bottom: 1px solid #eaeaea;
+  margin-top: -7px;
+  padding-bottom: 10px;
+  margin-bottom: 31px;
+}
+.demo .single-pricing-wrap .price span {
+  display: inline-block;
+}
+.demo .single-pricing-wrap span.title {
+  font-size: 24px;
+  margin-bottom: 15px;
+  display: inline-block;
+}
+.demo .single-pricing-wrap .price h2 {
+  display: inline-block;
+  font-size: 45px;
+}
+.demo .single-pricing-wrap .pricing-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  margin-bottom: 33px;
+}
+.demo .single-pricing-wrap .pricing-list li {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+.demo .single-pricing-wrap .pricing-list li:last-child {
+  margin-bottom: 0;
+}
+.demo .single-pricing-wrap .pricing-list li.unable {
+  color: #cdcdcd;
+}
+.demo .single-pricing-wrap .pricing-list li i {
+  margin-right: 20px;
+}
+.demo .single-pricing-wrap .more-work-btn {
+  width: 100%;
+}
+.demo .single-pricing-wrap .primary-btn {
+  background: var(--heading-color);
+}
+.demo .video-play-btn {
+  border-radius: 50%;
+  background: #f7f7f7;
+  width: 90px;
+  height: 90px;
+  display: inline-block;
+  line-height: 100px;
+  position: relative;
+  z-index: 0;
+  text-align: center;
+  animation: ripple-white3 2.5s linear infinite;
+  z-index: 9;
+}
+.demo .video-play-btn:after {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: rgba(247, 247, 247, 0.4);
+  top: -10px;
+  left: -10px;
+}
+.demo .video-play-btn i {
+  color: #585858;
+  margin-left: 6px;
+  font-size: 28px;
+}
+@keyframes ripple-white3 {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
+      0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1),
+      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
+  }
+}