From a7356cdb7a5af8d49b6a55d1f03c391f0694736d Mon Sep 17 00:00:00 2001 From: VuHoangThien Date: Tue, 14 Apr 2026 23:43:14 +0700 Subject: [PATCH] fix: resolve merge conflict in globals.css --- app/globals.css | 18 +- app/layout.tsx | 2 +- package.json | 5 +- public/assets/css/main.css | 4 +- public/assets/scss/_about.scss | 280 ------ public/assets/scss/_animation.scss | 915 ------------------- public/assets/scss/_brand.scss | 70 -- public/assets/scss/_buttons.scss | 58 -- public/assets/scss/_contact.scss | 362 -------- public/assets/scss/_cta.scss | 0 public/assets/scss/_faq.scss | 93 -- public/assets/scss/_feature.scss | 1036 --------------------- public/assets/scss/_footer.scss | 683 -------------- public/assets/scss/_header.scss | 1264 -------------------------- public/assets/scss/_helping.scss | 501 ---------- public/assets/scss/_hero.scss | 622 ------------- public/assets/scss/_marquee.scss | 0 public/assets/scss/_meanmenu.scss | 95 -- public/assets/scss/_mixins.scss | 130 --- public/assets/scss/_news.scss | 886 ------------------ public/assets/scss/_preloader.scss | 446 --------- public/assets/scss/_pricing.scss | 309 ------- public/assets/scss/_section.scss | 126 --- public/assets/scss/_service.scss | 673 -------------- public/assets/scss/_testimonial.scss | 370 -------- public/assets/scss/_typography.scss | 174 ---- public/assets/scss/_variables.scss | 31 - public/assets/scss/_visa.scss | 565 ------------ public/assets/scss/main.scss | 102 --- 29 files changed, 23 insertions(+), 9797 deletions(-) delete mode 100644 public/assets/scss/_about.scss delete mode 100644 public/assets/scss/_animation.scss delete mode 100644 public/assets/scss/_brand.scss delete mode 100644 public/assets/scss/_buttons.scss delete mode 100644 public/assets/scss/_contact.scss delete mode 100644 public/assets/scss/_cta.scss delete mode 100644 public/assets/scss/_faq.scss delete mode 100644 public/assets/scss/_feature.scss delete mode 100644 public/assets/scss/_footer.scss delete mode 100644 public/assets/scss/_header.scss delete mode 100644 public/assets/scss/_helping.scss delete mode 100644 public/assets/scss/_hero.scss delete mode 100644 public/assets/scss/_marquee.scss delete mode 100644 public/assets/scss/_meanmenu.scss delete mode 100644 public/assets/scss/_mixins.scss delete mode 100644 public/assets/scss/_news.scss delete mode 100644 public/assets/scss/_preloader.scss delete mode 100644 public/assets/scss/_pricing.scss delete mode 100644 public/assets/scss/_section.scss delete mode 100644 public/assets/scss/_service.scss delete mode 100644 public/assets/scss/_testimonial.scss delete mode 100644 public/assets/scss/_typography.scss delete mode 100644 public/assets/scss/_variables.scss delete mode 100644 public/assets/scss/_visa.scss delete mode 100644 public/assets/scss/main.scss diff --git a/app/globals.css b/app/globals.css index 54e6456..f9292ec 100644 --- a/app/globals.css +++ b/app/globals.css @@ -19,18 +19,34 @@ @theme { --color-brand-blue: #1b254b; + + --color-brand-accent: #3b82f6; --color-brand-light: #f8fbff; + --color-ui-bg: #f9fafb; + + --color-ui-text: #111827; + --color-ui-muted: #6b7280; --color-ui-border: #e5e7eb; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + + --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + + --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); } @layer components { .bento-item { @apply border border-[--color-ui-border] bg-white; } -} \ No newline at end of file +} + +/* Research Page Styles */ +@import "./components/research/research.css"; + +/* Publications Page Styles */ +@import "./components/publications/publications.css"; diff --git a/app/layout.tsx b/app/layout.tsx index 547fd3f..eaffd84 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from "next"; -import "./globals.css"; import Header from "./components/layout/Header/Header"; import Footer from "./components/layout/Footer/Footer"; @@ -12,6 +11,7 @@ export const metadata: Metadata = { title: "H.A.I Learning", description: "H.A.I Learning", }; +import "./globals.css"; export default function RootLayout({ children, diff --git a/package.json b/package.json index 735f72e..b434911 100644 --- a/package.json +++ b/package.json @@ -13,18 +13,19 @@ "dependencies": { "axios": "^1.13.4", "next": "16.1.6", + "postcss": "^8.5.9", "react": "19.2.3", "react-dom": "19.2.3" }, "devDependencies": { - "@tailwindcss/postcss": "^4", + "@tailwindcss/postcss": "^4.2.2", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.1.6", "sass": "^1.98.0", - "tailwindcss": "^4", + "tailwindcss": "^4.2.2", "typescript": "^5" } } diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 1030cd5..b38e5ac 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -147,7 +147,7 @@ input { color: var(--white); } -h1, +/* h1, h2, h3, h4, @@ -158,7 +158,7 @@ h6 { padding: 0; color: var(--header); transition: all 0.4s ease-in-out; -} +} */ h1 { font-size: 72px; diff --git a/public/assets/scss/_about.scss b/public/assets/scss/_about.scss deleted file mode 100644 index f5745b9..0000000 --- a/public/assets/scss/_about.scss +++ /dev/null @@ -1,280 +0,0 @@ -.about-wrapper { - - .about-image { - max-width: 375px; - position: relative; - z-index: 9; - - @include breakpoint (max-xxl) { - max-width: initial; - } - - img { - @include imgw; - border-radius: 16px; - } - - .about-image-2 { - position: absolute; - bottom: -170px; - right: -238px; - - @include breakpoint (max-xxl) { - max-width: 250px; - right: 0; - bottom: 0; - } - } - - .bg-shape { - position: absolute; - z-index: -1; - top: 0; - left: 0; - right: 0; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - - .plane-shape { - position: absolute; - left: -38px; - bottom: -163px; - z-index: -1; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - - .top-shape { - position: absolute; - right: -200px; - top: 0; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - } - - .about-content { - .text { - margin-top: 24px; - padding-left: 40px; - border-left: 3px solid $border-color-2; - margin-bottom: 30px; - - @include breakpoint (max-xxl) { - border-left: none; - padding-left: 0; - } - } - - .about-item { - @include flex; - justify-content: space-between; - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding-top: 24px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30px; - } - - .content { - span { - font-size: 20px; - font-weight: 500; - color: $header-color; - display: inline-block; - margin-bottom: 5px; - - img { - margin-right: 8px; - } - } - } - } - - .list { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding: 24px 0 32px; - margin-bottom: 48px; - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - padding: 24px 0 30px; - } - - li { - &:not(:last-child) { - margin-bottom: 10px; - } - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - i { - color: $theme-color-2; - margin-right: 8px; - } - } - } - } -} - -.about-section { - position: relative; - z-index: 9; - - .top-shape { - position: absolute; - right: 0; - top: -50px; - z-index: -1; - - @include breakpoint (max-xxl) { - display: none; - } - } -} - -.about-wrapper-3 { - - .about-content { - .text { - margin-top: 20px; - max-width: 616px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 24px; - margin-bottom: 30px; - } - - .about-list-item { - display: flex; - gap: 32px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 25px; - } - - .loading-box { - height: 256px; - width: 214px; - border-radius: 16px; - position: relative; - text-align: center; - - .loading-boxs { - height: 200px; - width: 200px; - display: flex; - align-items: center; - justify-content: center; - background: #0a4ebd; - border-radius: 16px; - - .circle-bar { - position: relative; - - strong { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 28px; - font-weight: bold; - color: $white; - } - } - } - - h6 { - color: $white; - font-weight: 500; - font-size: 14px; - } - } - - .list-item { - - .list { - margin-bottom: 48px; - - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - margin-right: 8px; - color: $theme-color-2; - } - } - } - } - } - } - - .about-image { - img { - @include imgw; - border-radius: 8px; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_animation.scss b/public/assets/scss/_animation.scss deleted file mode 100644 index 538c28f..0000000 --- a/public/assets/scss/_animation.scss +++ /dev/null @@ -1,915 +0,0 @@ - -//>>>>> Video Animation Start <<<<>>>> Video Animation End <<<<>>>> Circle Animation Start <<<<>>>> Circle Animation End <<<<>>>> Preloader Animation Start <<<<>>>> Preloader Animation Start <<<<>>>> Preloader Animation End <<<<* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .feature-content { - margin-left: 30px; - - @include breakpoint (max-lg) { - margin-left: 0; - } - - .text { - margin-top: 24px; - } - - .feature-count { - @include flex; - gap: 24px; - border-top: 1px solid rgba(203, 204, 207, 0.24); - margin-top: 24px; - padding-top: 24px; - margin-bottom: 48px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - margin-bottom: 30px; - } - - .content { - - .count-image { - img { - @include imgw; - } - } - - h5 { - font-weight: 500; - } - } - - .list { - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - margin-right: 8px; - color: $theme-color-2; - } - } - } - } - } -} - -.choose-us-wrapper-2 { - - .choose-us-image { - margin-right: 40px; - - img { - @include imgw; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .feature-content { - margin-right: 20px; - - @include breakpoint (max-xxl) { - margin-right: 0; - } - - .text { - margin-top: 24px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 8px; - } - - .choose-us-box { - @include flex; - gap: 16px; - padding: 16px 24px; - border: 1px solid $white; - @include transition; - border-radius: 12px; - margin-top: 24px; - background-color: $white; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - } - - .icon { - width: 80px; - height: 80px; - line-height: 80px; - text-align: center; - border-radius: 100px; - background-color: $bg-color; - } - - .content { - h5 { - margin-bottom: 5px; - } - - p { - max-width: 500px; - } - } - - &:hover { - border: 1px solid $theme-color; - } - } - - .theme-btn { - margin-top: 48px; - } - } -} - -.destination-offer-wrapper-3 { - margin-top: 60px; - - @include breakpoint (max-sm) { - margin-top: 30px; - } - - .destination-offer-item { - border-radius: 16px; - - .choose-us-image { - img { - @include imgw; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - } - } - - .choose-us-content { - padding: 16px 17px 24px; - background-color: $bg-color; - - .icon-item { - @include flex; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - gap: 12px; - padding-bottom: 12px; - margin-bottom: 10px; - - h5 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - } - } - } -} - -.destination-offer-section { - position: relative; - z-index: 9; - - .bg-image { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: -1; - - &::before { - @include before; - background: rgb(4 4 5 / 87%); - } - } -} - -.choose-us-wrapper-3 { - - .choose-us-left-item { - @include flex; - gap: 0; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - } - - .left-item { - .choose-us-image { - img { - @include breakpoint (max-xxl) { - @include imgw; - } - } - } - - .caller-item { - @include flex; - gap: 12px; - padding: 21px 45px; - background-color: $header-color; - width: 311px; - border-bottom-left-radius: 100px; - margin-top: 30px; - - .icon { - width: 48px; - height: 48px; - line-height: 48px; - border-radius: 100px; - text-align: center; - background-color: $white; - color: $theme-color; - } - - .content { - span { - opacity: 0.8; - color: $white; - } - - h5 { - a { - color: $theme-color; - } - } - } - } - } - - .right-item { - .count-box { - padding: 20px 24px; - background-color: $theme-color-2; - border-top-right-radius: 100px; - @include flex; - gap: 4px; - width: 308px; - margin-bottom: 30px; - margin-left: -24px; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - h2 { - color: $white; - } - - h5 { - color: $white; - } - } - - .choose-image { - img { - @include breakpoint (max-xxl) { - @include imgw; - } - } - } - } - } - - .choose-us-content { - - .text { - margin-top: 20px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 24px; - margin-bottom: 24px; - } - - .nav { - display: flex; - gap: 30px; - margin-bottom: 30px; - - li { - font-size: 20px; - font-weight: 500; - - @include breakpoint (max-xl) { - font-size: 16px; - } - - .nav-link{ - color: $header-color; - @include transition; - padding: 16px 32px; - border-radius: 100px; - line-height: 1; - border: 1px solid rgba(203, 204, 207, 0.24); - - &.active { - position: relative; - background-color: $theme-color-2; - color: $white; - } - } - } - } - - .content { - margin-top: 16px; - - .list-item { - @include flex; - gap: 50px; - margin-top: 20px; - margin-bottom: 50px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - margin-bottom: 30px; - } - - .list { - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 10px; - } - - i { - margin-right: 10px; - } - } - } - } - } - } -} - -.intro-image { - margin-top: 30px; - border-radius: 24px; - - img { - @include imgw; - border-radius: 24px; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } -} - -.appointment-wrapper { - - .appointment-content { - h5 { - margin-top: 80px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - } - } - - .calendar { - background: #f9f9f9; - padding: 20px; - border-radius: 15px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - width: 640px; - - @include breakpoint (max-xxl) { - width: initial; - overflow-x: scroll; - } - - .calendar-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - - h2 { - margin: 0; - font-size: 18px; - font-weight: 600; - } - - button { - background: $theme-color-2; - color: $white; - border: none; - border-radius: 50%; - width: 30px; - height: 30px; - cursor: pointer; - font-size: 16px; - } - } - - .days { - display: grid; - grid-template-columns: repeat(7, 1fr); - text-align: center; - font-weight: 700; - color: $header-color; - margin-bottom: 10px; - } - - .dates { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 5px; - text-align: center; - - div { - width: 70px; - height: 70px; - line-height: 70px; - border-radius: 50%; - background: $white; - font-size: 20px; - font-weight: 700; - - @include breakpoint (max-xxl) { - width: 50px; - height: 50px; - line-height: 50px; - font-size: 16px; - } - } - - .highlight { - background: $theme-color-2 !important; - color: $white; - font-weight: bold; - } - - div.active-date { - background: $theme-color-2; - color: $white; - font-weight: bold; - } - } - } -} - -.cooming-soon-content { - text-align: center; - - h2 { - margin-top: 24px; - margin-bottom: 20px; - } - - p { - max-width: 744px; - margin: 0 auto; - } - - form { - max-width: 664px; - width: 100%; - text-align: center; - margin: 0 auto; - } - - .form-clt { - position: relative; - margin-top: 48px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - - input { - width: 100%; - outline: none; - border: none; - background-color: $bg-color; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 25px; - border-radius: 100px; - max-width: 664px; - - @include breakpoint (max-xxl) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - background-color: $bg-color; - - @include breakpoint (max-xxl){ - right: 0; - top: 0; - bottom: 0; - padding: 2px 4px 2px 12px; - font-size: 14px; - - i { - margin-left: 10px; - } - } - - &:hover { - color: $white; - background-color: $theme-color; - } - } - } - - .social-icon { - @include flex; - gap: 12px; - justify-content: center; - margin-top: 40px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - - a { - width: 44px; - height: 44px; - line-height: 44px; - text-align: center; - border-radius: 100px; - background-color: $bg-color; - color: $header-color; - display: inline-block; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_footer.scss b/public/assets/scss/_footer.scss deleted file mode 100644 index d73f4a0..0000000 --- a/public/assets/scss/_footer.scss +++ /dev/null @@ -1,683 +0,0 @@ - -.footer-wrapper { - - .footer-item { - padding: 100px 0; - position: relative; - text-align: center; - - @include breakpoint (max-lg) { - padding: 80px 0; - } - - h2 { - font-size: 30px; - color: $white; - - @include breakpoint (max-sm) { - font-size: 25px; - } - - a { - color: $white; - } - - &.text { - font-size: 24px; - } - } - - .footer-list-item { - @include flex; - justify-content: space-between; - border-radius: 136px; - background: rgba(255, 255, 255, 0.08); - backdrop-filter: blur(62px); - padding: 20px 24px; - margin-top: 80px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - padding: 20px; - } - - @include breakpoint (max-lg) { - border-radius: 0; - flex-wrap: wrap; - gap: 20px; - } - - .footer-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - gap: 20px; - } - - @include breakpoint (max-sm) { - flex-wrap: wrap; - gap: 15px; - } - - li { - font-weight: 500; - font-family: $heading-font; - text-transform: uppercase; - - a { - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - - .social-icon { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - border-radius: 100px; - backdrop-filter: blur(46px); - background-color: $bg-color-2; - color: $white; - display: inline-block; - - &:hover { - background-color: $theme-color; - } - } - } - } - } -} - - -.footer-section { - margin: 0 30px; - border-radius: 32px; - - @include breakpoint (max-sm) { - margin: 0 15px; - } -} - -.footer-bottom { - padding: 24px 0; - text-align: center; - - .footer-wrapper { - @include flex; - justify-content: center; - gap: 100px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: start; - } - - p { - color: $header-color; - - span { - color: $theme-color; - text-transform: uppercase; - } - } - - .bottom-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: center; - } - - li { - a { - &:hover { - color: $theme-color; - } - } - } - } - } -} - -.footer-widget-wrapper-2 { - padding: 70px 0 90px; - - @include breakpoint (max-lg) { - padding: 50px 0 80px; - } - - .single-footer-widget { - margin-top: 30px; - - .widget-title { - margin-bottom: 24px; - - h3 { - color: $white; - text-transform: uppercase; - } - } - - .footer-content { - p { - max-width: 502px; - color: rgba(255, 255, 255, 0.7); - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - } - - .social-icon { - @include flex; - gap: 20px; - margin-top: 50px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - gap: 13px; - } - - @include breakpoint (max-lg) { - gap: 16px; - } - - span { - display: inline-block; - margin-right: 4px; - color: $white; - font-weight: 500; - text-transform: uppercase; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - } - - a { - font-size: 20px; - color: $theme-color; - - &:hover { - color: $theme-color-2; - } - } - } - } - - .list { - li { - @include transition; - font-weight: 400; - - &:not(:last-child){ - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - &:hover { - margin-left: 5px; - - a { - color: $theme-color; - } - } - } - } - - .contact-item { - li { - display: flex; - align-items: start; - color: rgba(255, 255, 255, 0.7); - gap: 8px; - - &.style-2 { - @include flex; - } - - &:not(:last-child) { - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - color: $theme-color; - } - } - } - } -} - -.footer-section-2 { - position: relative; - z-index: 9; - - .shape { - position: absolute; - left: 0; - top: 0; - z-index: -1; - } -} - -.footer-newsletter { - @include flex; - justify-content: space-between; - margin-top: 100px; - padding: 32px 48px; - background-color: $theme-color-2; - border-radius: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - padding: 30px; - margin-top: 80px; - } - - .newsletter-content { - h3 { - color: $white; - } - - p { - color: rgba(255, 255, 255, 0.7); - } - } - - form { - max-width: 587px; - width: 100%; - } - - .form-clt { - position: relative; - - .input-icon { - top: 50%; - left: 25px; - transform: translateY(-50%); - position: absolute; - - @include breakpoint (max-sm) { - top: 23%; - } - } - - input { - width: 100%; - outline: none; - border: none; - background-color: $white; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 60px; - border-radius: 100px; - max-width: 587px; - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 60px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - - @include breakpoint (max-xxs){ - position: static; - margin-top: 20px; - color: $white; - } - } - } -} - -.fotter-bootom-2 { - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding: 20px 0; - - .footer-wrapper { - @include flex; - justify-content: center; - gap: 100px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: start; - } - - p { - color: $white; - - @include breakpoint (max-sm) { - text-align: center; - } - - - span { - color: $theme-color; - text-transform: uppercase; - } - } - - .bottom-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: center; - } - - li { - a { - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - } -} - - -.footer-widget-wrapper-3 { - padding: 70px 0 100px; - position: relative; - - @include breakpoint (max-xxl) { - padding: 70px 0 100px; - } - - @include breakpoint (max-lg) { - padding: 50px 0 80px; - } - - &::before { - position: absolute; - content: ""; - width: 1px; - height: 424px; - left: 600px; - background-color: rgba(203, 204, 207, 0.24); - top: 0; - bottom: 0; - - @include breakpoint (max-xxl) { - display: none; - } - } - - .single-footer-widget { - margin-top: 30px; - - .widget-title { - margin-bottom: 24px; - - h3 { - color: $white; - text-transform: uppercase; - } - } - - .footer-content { - h3 { - color: $white; - margin-bottom: 10px; - } - - p { - color: $white; - opacity: 0.7; - max-width: 551px; - margin-bottom: 30px; - } - - form { - max-width: 551px; - width: 100%; - } - - .form-clt { - position: relative; - - input { - width: 100%; - outline: none; - border: none; - background-color: $white; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 25px; - border-radius: 100px; - max-width: 551px; - - @include breakpoint (max-xxl) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - background-color: $bg-color; - - &:hover { - background-color: $theme-color; - color: $white; - } - - @include breakpoint (max-xxl){ - right: 0; - top: 0; - bottom: 0; - padding: 2px 4px 2px 12px; - font-size: 14px; - - i { - margin-left: 10px; - } - } - } - } - - h6 { - color: $white; - margin-top: 15px; - - span { - color: $theme-color; - text-transform: uppercase; - font-size: 18px; - font-weight: 400; - } - } - } - - .contact-content { - p { - color: $white; - opacity: 0.7; - margin-bottom: 24px; - } - - h3 { - color: $white; - } - - .contact-list { - margin-top: 16px; - - li { - @include flex; - gap: 32px; - - a { - color: $white; - opacity: 0.7; - } - } - } - } - - .list { - li { - @include transition; - font-weight: 400; - - &:not(:last-child){ - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - &:hover { - margin-left: 5px; - - a { - color: $theme-color; - } - } - } - } - } -} - -.footer-top-item { - @include flex; - justify-content: space-between; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30Px; - padding-bottom: 10px; - } - - .footer-logo { - background-color: $theme-color-2; - padding: 18px 30px; - } - - .top-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - gap: 20Px; - } - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 15Px; - } - - li { - a { - font-weight: 500; - text-transform: uppercase; - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: $theme-color-2; - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss deleted file mode 100644 index f6c8d71..0000000 --- a/public/assets/scss/_header.scss +++ /dev/null @@ -1,1264 +0,0 @@ -.header-top-section { - background-color: $theme-color-2; - position: relative; - z-index: 999; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - @include before; - background-color: $theme-color; - left: 0; - right: initial; - width: 337px; - z-index: -1; - } - - .container-fluid { - padding: 0 40px; - - @include breakpoint (max-xxl) { - padding: 0 40px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper { - @include flex; - justify-content: space-between; - padding: 10px 0; - - .header-left { - - .list { - @include flex; - gap: 60px; - - li { - color: rgba(255, 255, 255, 0.7); - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - margin-right: 12px; - color: $theme-color; - } - - &.style-2 { - color: $white; - - i { - color: $white; - } - - span { - font-size: 18px; - color: $white; - display: inline-block; - margin-right: 12px; - } - } - } - } - } - - .header-right { - @include flex; - gap: 45px; - - .flag-wrap { - position: relative; - width: 130px; - z-index: 9; - - @include breakpoint (max-xxl) { - display: none; - } - - i { - color: $white; - } - - .nice-select { - background: transparent; - border: none; - text-align: center; - margin: 0 auto; - position: relative; - z-index: 999; - padding: 10px 7px 10px 58px; - - span{ - font-size: 14px; - font-weight: 500; - // text-transform: capitalize; - color: $white; - } - - .list { - li { - color: $header-color; - } - } - - &::after { - border-bottom: 2px solid $white; - border-right: 2px solid $white; - height: 8px; - margin-top: -6px; - width: 8px; - right: 3px; - } - } - - .flag { - position: absolute; - top: 10px; - left: 32px; - z-index: 1; - - @include breakpoint(max-md){ - display: none - } - - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 32px; - height: 32px; - line-height: 32px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } - } -} - -.header-top-section-2 { - position: relative; - background-color: $header-color; - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper-2 { - padding: 10px 0; - @include flex; - justify-content: space-between; - - @include breakpoint (max-xxl) { - display: none; - } - - .header-left { - @include flex; - gap: 32px; - - span { - color: rgba(255, 255, 255, 0.7); - border-radius: 88px; - background: rgba(255, 255, 255, 0.12); - backdrop-filter: blur(58px); - padding: 5px 8px; - line-height: 1; - - a { - color: rgba(255, 255, 255, 0.7); - } - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } -} - -.header-top-section-3 { - background-color: $header-color; - position: relative; - z-index: 999; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - @include before; - background-color: $theme-color-2; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 300px; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper-3 { - @include flex; - justify-content: space-between; - padding: 10px 0; - - .left-item { - margin-left: 280px; - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } - } - - .header-right { - - .list { - @include flex; - gap: 60px; - - li { - color: rgba(255, 255, 255, 0.7); - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - margin-right: 12px; - color: $theme-color; - } - } - } - } -} - -//>>>>> Header Main Start <<<<a { - color: $theme-color !important; - margin-left: 10px; - - &::before { - width: 10px; - } - - &::after { - color: $theme-color; - } - } - >.submenu { - -webkit-transform: translateY(1); - -moz-transform: translateY(1); - -ms-transform: translateY(1); - -o-transform: translateY(1); - transform: translateY(1); - visibility: visible; - opacity: 1; - } - } - } - li.has-dropdown { - >a { - &::after { - position: absolute; - top: 50%; - inset-inline-end: 25px; - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); - transform: translateY(-50%); - color: $theme-color; - } - } - } - } - - .has-homemenu { - width: 800px; - padding: 30px 30px 10px 30px; - opacity: 0; - left: -250px; - visibility: hidden; - padding: 30px 30px 10px 30px; - background-color: $white; - - .homemenu-items { - @include flex; - gap: 30px; - justify-content: space-between; - - @include breakpoint (max-lg){ - flex-wrap: wrap; - } - - .homemenu { - position: relative; - .homemenu-thumb { - position: relative; - - .demo-button { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - opacity: 0; - visibility: hidden; - @include transition; - margin-top: 20px; - width: 100%; - padding: 0 12px; - - @include breakpoint (max-xxl){ - .theme-btn { - font-size: 14px; - min-width: 140px; - } - } - - .theme-btn { - background-color: $white; - padding-right: 0; - font-size: 16px; - font-weight: 500; - padding: 6px 6px 6px 24px; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - &::before { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6)); - background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - overflow: hidden; - opacity: 0; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - content: ""; - } - &:hover{ - - &::before { - visibility: visible; - opacity: 1; - } - - .demo-button { - opacity: 1; - visibility: visible; - margin-top: 0; - } - & .homemenu-btn { - opacity: 1; - visibility: visible; - bottom: 50%; - transform: translateY(50%); - } - } - img { - width: 100%; - } - } - - .homemenu-title { - text-align: center; - margin: 15px auto; - display: inline-block; - font-size: 16px; - font-weight: 600; - color: $header-color; - } - } - } - } - - &:hover { - >a { - color: $theme-color-2; - - &::after { - color: $theme-color; - } - } - >.submenu { - visibility: visible; - opacity: 1; - transform: scaleY(1) translateZ(0px); - } - } - } - } - } - - .header-right { - gap: 30px; - - @include breakpoint (max-xxl){ - gap: 20px; - } - - .search-toggler { - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - color: $theme-color; - border-radius: 100px; - border: 1px solid $theme-color; - font-size: 16px; - } - - .header-button { - @include breakpoint (max-xxl){ - display: none; - } - .theme-btn { - - &::before { - background-color: $white; - } - - &:hover { - color: $header-color; - } - } - } - - .sidebar__toggle { - cursor: pointer; - font-size: 20px; - color: $header-color; - } - } -} - -.header-1 { - - .container-fluid { - padding: 0 40px; - - @include breakpoint (max-xxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .header-left { - @include flex; - gap: 120px; - - @include breakpoint (max-xxxl) { - gap: 50px; - } - } - - .header-right { - .header-call-item { - @include flex; - gap: 60px; - - .theme-btn { - padding: 4px 4px 4px 24px; - - @include breakpoint (max-xxl) { - display: none; - } - } - } - } - - &.header-2 { - z-index: 9999; - position: relative; - - &::before { - @include before; - background-color: $theme-color; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 235px; - } - - @include breakpoint (max-xxl) { - width: 100%; - } - } - - &::after { - background-color: $theme-color; - right: 0; - position: absolute; - content: ""; - top: 0; - bottom: 0; - height: 100%; - width: 420px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 350px; - } - - @include breakpoint (max-xxl) { - display: none; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .header-left { - .logo { - .header-logo { - display: none; - } - } - } - - .header-right { - - .header-call-item { - - .theme-btn { - color: $white; - - @include breakpoint (max-xxl) { - display: none; - } - - i { - background-color: $white; - color: $header-color; - } - } - - .sidebar__toggle { - color: $white; - } - } - } - } - - &.header-3 { - position: relative; - - &::before { - @include before; - background-color: $theme-color-2; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 300px; - } - - @include breakpoint (max-xxl) { - display: none; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .logo { - position: absolute; - left: 100px; - top: -15px; - z-index: 999; - - @include breakpoint (max-xxl){ - display: none; - } - } - - .header-main { - padding-left: 280px; - - @include breakpoint (max-xxl){ - padding-left: 0; - } - - .header-left { - @include breakpoint (max-xxl){ - .logo-2 { - display: block !important; - } - } - } - - .header-right { - - .header-call-item { - .icon-item { - @include flex; - gap: 12px; - - @include breakpoint (max-xxl){ - display: none; - } - - i { - color: $header-color; - font-size: 30px; - } - - .content { - h6 { - margin-bottom: 5px; - } - span { - font-size: 18px; - - a { - color: $header-color; - } - } - } - } - } - } - } - } -} - -//>>>>> Header 01 Start <<<<>>>> Sticky Start <<<<>>>> Offcanvas Start <<<<>>>> Nice Select Css Start <<<<>>>> Nice Select Css End <<<< ul { - padding: 0; - margin: 0; - width: 100%; - list-style-type: none; - display: block !important; - } - - .mean-container a.meanmenu-reveal { - display: none !important; - } - - .mean-container .mean-nav ul li a { - display: block; - width: 100%; - padding: 10px 0; - color: $black; - font-size: 16px; - font-weight: 600; - line-height: 2; - font-weight: 700; - // text-transform: capitalize; - border-bottom: 1px solid rgba(0, 0, 0, 0.20) !important; - border: none; - - &:hover { - color: $theme-color-2; - } - } - - - .mean-container .mean-nav ul li .submenu li a { - border-bottom: none !important; - font-size: 14px; - padding: 6px 0; - color: $header-color; - } - - .mean-container .mean-nav ul li a:last-child { - border-bottom: 0; - } - .mean-container .mean-nav ul li a:hover { - color: $theme-color; - } - - .mean-container .mean-nav ul li a.mean-expand { - margin-top: 5px; - padding: 0 !important; - } - - .mean-container .mean-nav ul li > a > i { - display: none; - } - - .mean-container .mean-nav ul li > a.mean-expand i { - display: inline-block; - font-size: 18px; - } - - .mean-container .mean-nav > ul > li:first-child > a { - border-top: 0; - } - - .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { - transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - @include transition; - } - - .mean-container .mean-nav ul li .mega-menu li a { - height: 200px; - width: 100%; - padding: 0; - border-top: 0; - margin-bottom: 20px; - } \ No newline at end of file diff --git a/public/assets/scss/_mixins.scss b/public/assets/scss/_mixins.scss deleted file mode 100644 index 5eca375..0000000 --- a/public/assets/scss/_mixins.scss +++ /dev/null @@ -1,130 +0,0 @@ -@mixin breakpoint($point) { - @if $point==xsmall { - @media (min-width: 450px) { - @content ; - } - } - @else if $point==max-xxsmall { - @media (max-width:450px) { - @content ; - } - } - @if $point==xxs { - @media (min-width: 470px) { - @content ; - } - } - @else if $point==max-xxs { - @media (max-width:470px) { - @content ; - } - } - @if $point==xs { - @media (min-width: 500px) { - @content ; - } - } - @else if $point==max-xs { - @media (max-width: 500px) { - @content ; - } - } - @if $point==sm { - @media (min-width: 576px) { - @content ; - } - } - @else if $point==max-sm { - @media (max-width: 575px) { - @content ; - } - } - @else if $point==md { - @media (min-width: 768px) { - @content ; - } - } - @else if $point==max-md { - @media (max-width: 767px) { - @content ; - } - } - @else if $point==lg { - @media (min-width: 992px) { - @content ; - } - } - @else if $point==max-lg { - @media (max-width: 991px) { - @content ; - } - } - @else if $point==xl { - @media (min-width: 1200px) { - @content ; - } - } - @else if $point==max-xl { - @media (max-width: 1199px) { - @content ; - } - } - @else if $point==xxl { - @media (min-width: 1400px) { - @content ; - } - } - @else if $point==max-xxl { - @media (max-width: 1399px) { - @content ; - } - } - @else if $point==xxxl { - @media (min-width: 1600px) { - @content ; - } - } - @else if $point==max-xxxl { - @media (max-width: 1600px) { - @content ; - } - } - @else if $point==xl4 { - @media (min-width: 1899px) { - @content ; - } - } - @else if $point==max-xl4 { - @media (max-width: 1899px) { - @content ; - } - } -} - -@mixin before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; -} - - -@mixin flex { - display: flex; - align-items: center; -} -@mixin transition { - transition: all 0.4s ease-in-out; -} - -@mixin imgw { - width: 100%; - height: 100%; -} - - - diff --git a/public/assets/scss/_news.scss b/public/assets/scss/_news.scss deleted file mode 100644 index e33ee02..0000000 --- a/public/assets/scss/_news.scss +++ /dev/null @@ -1,886 +0,0 @@ -.news-card-item { - margin-top: 30px; - background-color: $bg-color; - border-radius: 16px; - - .news-image { - position: relative; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - overflow: hidden; - - span { - border-radius: 100px; - background-color: $white; - color: $header-color; - font-size: 14px; - font-weight: 400; - padding: 4px 12px; - position: absolute; - top: 16px; - left: 16px; - z-index: 999; - } - - .news-layer-wrapper { - position: absolute; - top: 100%; - left: 0; - width: 100%; - height: 100%; - display: flex; - transition: 0.5s; - - .news-layer-image { - width: 25%; - height: 100%; - transition: 0.5s; - background-size: cover; - - &:nth-child(1){ - background-position: 0; - transition-delay: 0; - } - - &:nth-child(2){ - background-position: 33.33%; - transition-delay: 0.1s; - } - - &:nth-child(3){ - background-position: 66.66%; - transition-delay: 0.2s; - } - - &:nth-child(4){ - background-position: 100%; - transition-delay: 0.3s; - } - } - } - - img { - @include imgw; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - transform: scale(1.02); - transition: all 1.5s ease-out; - } - } - - .news-content { - padding: 16px 24px 30px; - - .list { - @include flex; - gap: 24px; - margin-bottom: 10px; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .news-bottom { - @include flex; - justify-content: space-between; - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding-top: 24px; - margin-top: 16px; - - .info-item { - @include flex; - gap: 8px; - } - } - } - - &:hover { - .news-image { - - .news-layer-wrapper { - .news-layer-image { - transform: translateY(-100%); - } - } - - img { - -webkit-transform: scale3d(1.1, 1.1, 1); - transform: scale3d(1.1, 1.1, 1); - } - } - } -} - -.news-main-item { - border-radius: 16px; - background-color: $bg-color; - padding: 30px; - @include flex; - justify-content: space-between; - margin-top: 30px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - } - - .news-left-content { - h2 { - sup { - font-size: 32px; - top: auto; - - @include breakpoint (max-lg) { - font-size: 30px; - } - - @include breakpoint (max-lg) { - font-size: 25px; - } - } - - span { - font-size: 16px; - font-weight: 400; - } - } - - h3 { - - @include breakpoint (max-xl) { - br { - display: none; - } - } - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .news-post { - @include flex; - justify-content: space-between; - margin-top: 30px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 20px; - } - - span { - text-transform: uppercase; - font-weight: 500; - color: $header-color; - } - } - } - - .news-right-content { - @include flex; - gap: 30px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 20px; - } - - .news-image { - overflow: hidden; - transition: scale 0.4s ease, transform 0.4s ease; - - @include breakpoint (max-lg) { - flex-basis: 100%; - } - - img { - @include imgw; - border-radius: 16px; - } - } - - .content { - p { - max-width: 388px; - margin-bottom: 30px; - } - - .theme-btn { - padding: 2px 4px 2px 24px; - } - } - } -} - -.news-card-items-3 { - @include flex; - border-radius: 16px; - background-color: $white; - margin-top: 30px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - padding: 10px; - } - - @include breakpoint (max-lg) { - flex-wrap: initial; - gap: 30px; - padding: 0; - } - - @include breakpoint (max-md) { - flex-wrap: wrap; - gap: 30px; - padding: 10px; - } - - .news-image { - - @include breakpoint (max-xxl) { - flex-basis: 100%; - } - - @include breakpoint (max-lg) { - flex-basis: initial; - } - - @include breakpoint (max-sm) { - flex-basis: 100%; - } - - img { - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - - @include breakpoint (max-xxl) { - @include imgw; - border-radius: 16px; - } - - @include breakpoint (max-lg) { - width: initial; - height: initial; - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - } - - @include breakpoint (max-sm) { - @include imgw; - border-radius: 16px; - } - } - } - - .news-content { - padding: 25px 25px 25px 30px; - - @include breakpoint (max-lg) { - padding: 0 25px; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .info-item { - @include flex; - gap: 26px; - margin-top: 15px; - margin-bottom: 25px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 10px; - } - - .info-image { - @include flex; - gap: 8px; - - h6 { - font-weight: 500; - text-transform: uppercase; - } - } - } - - .theme-btn { - border: none; - padding: 0; - - &:hover { - background-color: transparent; - color: $theme-color; - - i { - background-color: $header-color; - color: $white; - } - } - } - } -} - -.news-standard-wrapper { - - .news-standard-post { - margin-bottom: 30px; - - .news-image { - img { - @include imgw; - border-radius: 16px; - } - } - - .news-content { - margin-top: 24px; - - .news-list { - @include flex; - gap: 40px; - margin-bottom: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - } - - li { - i { - margin-right: 8px; - } - } - } - - h3 { - margin-bottom: 10px; - - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - p { - margin-bottom: 40px; - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - } - } - - .theme-btn { - padding: 4px 4px 4px 24px; - } - } - } -} - -.main-sideber { - - .news-sideber-box { - padding: 30px; - background-color: $bg-color; - border-radius: 16px; - margin-bottom: 32px; - - .wid-title { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - } - - .search-widget { - form { - width: 100%; - position: relative; - - input { - background-color: $white; - font-size: 16px; - font-weight: 400; - padding: 16px 20px; - width: 100%; - border: none; - color: $text-color; - border-radius: 100px; - } - - button { - position: absolute; - right: 3px; - top: 3px; - bottom: 3px; - width: 50px; - height: 50px; - line-height: 50px; - border-radius: 100px; - font-size: 16px; - background-color: $theme-color; - color: $white; - text-align: center; - transition: all .3s ease-in-out; - - &:hover { - background-color: $header-color; - } - } - } - } - - .news-widget-categories { - ul { - li { - @include flex; - justify-content: space-between; - font-size: 16px; - font-weight: 400; - background-color: $white; - @include transition; - border-radius: 100px; - line-height: 1; - padding: 20px; - position: relative; - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - i { - margin-right: 5px; - color: $theme-color-2; - } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 0%; - height: 100%; - background: $theme-color; - z-index: 0; - transition: width 0.5s ease; - border-radius: 100px; - } - - a { - color: $header-color; - } - - span { - @include transition; - color: $header-color; - } - - &:not(:last-child){ - margin-bottom: 20px; - } - - &:hover { - &::before { - width: 100%; - } - - i { - color: $white; - } - - a { - color: $white; - position: relative; - z-index: 999; - } - - span { - color: $white; - position: relative; - z-index: 999; - } - } - } - } - } - - .recent-post-area { - .recent-items { - @include flex; - gap: 20px; - - &:not(:last-child){ - margin-bottom: 20px; - } - - .recent-thumb { - img { - border-radius: 8px; - } - } - - .recent-content { - h6 { - margin-bottom: 10px; - line-height: 133%; - font-weight: 500; - font-size: 18px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - - @include breakpoint (max-xxl) { - font-size: 15px; - } - - a { - &:hover { - color: $theme-color; - } - } - } - - ul { - li { - color: $text-color; - } - } - } - } - } - - .tagcloud { - a { - display: inline-block; - padding: 12px 11px; - line-height: 1; - font-size: 16px; - font-weight: 400; - background: $white; - border-radius: 100px; - margin-right: 5px; - // text-transform: capitalize; - margin-bottom: 10px; - color: $text-color; - @include transition; - position: relative; - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 0%; - height: 100%; - background: $theme-color; - border-radius: 100px; - z-index: 0; - transition: width 0.5s ease; - } - - &:last-child { - margin-right: 0; - } - - &:hover { - color: $white; - z-index: 999; - position: relative; - - &::before { - width: 100%; - z-index: -1; - } - } - } - } - } -} - -.news-details-wrapper { - - .news-details-post { - - .news-details-image { - img { - @include imgw; - border-radius: 16px; - } - } - - .details-content { - margin-top: 24px; - - .news-list { - @include flex; - gap: 40px; - margin-bottom: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - } - - li { - i { - margin-right: 8px; - } - } - } - - h2 { - font-size: 40px; - margin-bottom: 10px; - - @include breakpoint (max-xxl) { - font-size: 20px; - } - } - - .thumb { - img { - width: 410px; - height: 264px; - object-fit: cover; - border-radius: 16px; - } - } - - .sideber { - background-color: $theme-color-2; - padding: 24px 30px; - margin-top: 24px; - margin-bottom: 24px; - border-radius: 8px; - - h5 { - color: $white; - font-weight: 500; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - } - } - - .tag-share-wrap { - - .tagcloud { - - span { - font-size: 20px; - font-weight: 600; - display: inline-block; - margin-right: 8px; - color: $header-color; - font-family: $heading-font; - } - - a { - display: inline-block; - padding: 12px 26px; - line-height: 1; - background: $bg-color; - margin-right: 8px; - // text-transform: capitalize; - color: $text-color; - font-weight: 400; - @include transition; - border-radius: 30px; - - @include breakpoint (max-xl){ - padding: 10px 18px; - } - - @include breakpoint (max-xl){ - margin-bottom: 15px;; - } - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - .social-share { - - a { - font-size: 16px; - color: $header-color; - display: inline-block; - width: 36px; - height: 36px; - border-radius: 100px; - line-height: 36px; - text-align: center; - background-color: $bg-color; - - &:not(:last-child){ - margin-right: 10px; - } - - &:hover { - color: $white; - background-color: $theme-color; - } - } - } - } - - .comments-area { - margin-top: 40px; - border-top: 1px solid rgba(203, 204, 207, 0.24); - margin-top: 48px; - padding-top: 30px; - margin-bottom: 48px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - } - - .comments-heading { - margin-bottom: 30px; - - @include breakpoint (max-sm){ - margin-bottom: 20px; - } - } - - .news-single-comment { - - @include breakpoint (max-sm){ - flex-wrap: wrap; - gap: 20px; - } - - .image { - img { - border-radius: 12px; - } - } - - .content { - .head { - .con { - h4 { - margin-bottom: 5px; - } - } - - .reply { - font-weight: 500; - font-size: 16px; - color: $theme-color; - padding: 6px 14px; - text-transform: uppercase; - color: $white; - background-color: $header-color; - border-radius: 100px; - - &:hover { - background-color: $theme-color; - } - } - } - } - - &.style-2 { - margin-left: 90px; - - @include breakpoint (max-xxl){ - margin-left: 0; - } - } - } - } - - .form-clt { - position: relative; - - span { - color: $header-color; - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - margin-bottom: 10px; - display: inline-block; - } - - input,textarea { - width: 100%; - border: none; - outline: none; - background: $bg-color; - color: $text-color; - border-radius: 100px; - padding: 18px 20px; - - @include breakpoint (max-md){ - padding: 14px 20px; - } - - @include breakpoint (max-sm){ - padding: 12px 18px; - } - - &::placeholder { - color: $text-color; - } - } - - textarea { - padding-bottom: 100px; - resize: none; - border-radius: 40px; - } - } - - .theme-btn { - width: 100%; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_preloader.scss b/public/assets/scss/_preloader.scss deleted file mode 100644 index cd1350e..0000000 --- a/public/assets/scss/_preloader.scss +++ /dev/null @@ -1,446 +0,0 @@ -.preloader { - align-items: center; - cursor: default; - display: flex; - height: 100%; - justify-content: center; - position: fixed; - left: 0; - top: 0; - width: 100%; - z-index: 9999999; - - .animation-preloader { - z-index: 1000; - - .spinner { - animation: spinner 1s infinite linear; - border-radius: 50%; - border: 3px solid rgba(0, 0, 0, 0.2); - border-top-color: $theme-color; - height: 9em; - margin: 0 auto 3.5em auto; - width: 9em; - - @media (max-width: 767px) { - width: 7.5em; - height: 7.5em; - margin: 0 auto 1.5em auto; - } - } - - .txt-loading { - font: bold 5em $heading-font, $body-font; - text-align: center; - user-select: none; - - @media (max-width: 767px) { - font-size: 2.5em; - } - - .letters-loading { - color: $theme-color; - position: relative; - - &:nth-child(2):before { - animation-delay: 0.2s; - } - - &:nth-child(3):before { - animation-delay: 0.4s; - } - - &:nth-child(4):before { - animation-delay: 0.6s; - } - - &:nth-child(5):before { - animation-delay: 0.8s; - } - - &:nth-child(6):before { - animation-delay: 1s; - } - - &:nth-child(7):before { - animation-delay: 1.2s; - } - - &:nth-child(8):before { - animation-delay: 1.4s; - } - - &::before { - animation: letters-loading 4s infinite; - color: $header-color; - content: attr(data-text-preloader); - left: 0; - opacity: 0; - font-family: $heading-font; - position: absolute; - top: -3px; - transform: rotateY(-90deg); - } - } - } - } - - p { - font-size: 15px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 8px; - color: $theme-color; - } - - .loader { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - font-size: 0; - z-index: 1; - pointer-events: none; - - .row { - height: 100%; - } - - .loader-section { - padding: 0px; - - .bg { - background-color: $bg-color; - height: 100%; - left: 0; - width: 100%; - transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); - } - } - } - - &.loaded { - .animation-preloader { - opacity: 0; - transition: 0.3s ease-out; - } - - .loader-section { - .bg { - width: 0; - transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); - } - } - } -} - - - - - - -.back-to-top { - background-color: $theme-color; - width: 50px; - height: 50px; - line-height: 40px; - border-radius: 100px; - color: $white; - font-size: 16px; - position: fixed; - display: inline-block; - z-index: 9999; - right: 30px; - bottom: 30px; - @include transition; - opacity: 0; - visibility: hidden; - transform: translateY(20px); - - @include breakpoint (max-sm) { - display: none; - } - - &:hover { - background-color: $white; - color: $theme-color-2; - } - - &.show { - opacity: 1; - visibility: visible; - transform: translate(0); - } -} - - - -.cursor-outer { - -webkit-margin-start: -12px; - margin-inline-start: -12px; - margin-top: -12px; - width: 30px; - height: 30px; - border: 1px solid $theme-color; - background-color: $theme-color; - -webkit-box-sizing: border-box; - box-sizing: border-box; - z-index: 10000000; - opacity: 0.34; - -webkit-transition: all 0.4s ease-out 0s; - transition: all 0.4s ease-out 0s; -} -.cursor-outer.cursor-hover { - opacity: 0.14; -} -.cursor-outer.cursor-big { - opacity: 0; -} -.mouseCursor { - position: fixed; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - pointer-events: none; - border-radius: 50%; - -webkit-transform: translateZ(0); - transform: translateZ(0); - visibility: hidden; - text-align: center; -} -.mouseCursor.cursor-big { - width: 20px; - height: 20px; - -webkit-margin-start: -12px; - margin-inline-start: -12px; - margin-top: -12px; -} -.cursor-inner { - -webkit-margin-start: -3px; - margin-inline-start: -3px; - margin-top: -3px; - width: 10px; - height: 10px; - z-index: 10000001; - background-color: $theme-color; - opacity: 1; - -webkit-transition: all 0.24s ease-out 0s; - transition: all 0.24s ease-out 0s; - span { - color: $text-color; - line-height: 60px; - opacity: 0; - text-transform: uppercase; - letter-spacing: 1px; - font-size: 12px; - } -} -.cursor-inner.cursor-big { - span { - opacity: 1; - } -} -.cursor-inner.cursor-hover { - -webkit-margin-start: -10px; - margin-inline-start: -10px; - margin-top: -10px; - width: 30px; - height: 30px; - background-color: $theme-color; - border: 1px solid #686363; - opacity: 0; -} - - - -.search-popup { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -2; - -webkit-transition: all 1s ease; - -khtml-transition: all 1s ease; - -moz-transition: all 1s ease; - -ms-transition: all 1s ease; - -o-transition: all 1s ease; - transition: all 1s ease; -} - -.search-popup__overlay { - position: fixed; - width: 224vw; - height: 224vw; - top: calc(90px - 112vw); - right: calc(50% - 112vw); - z-index: 3; - display: block; - -webkit-border-radius: 50%; - -khtml-border-radius: 50%; - -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; - border-radius: 50%; - -webkit-transform: scale(0); - -khtml-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transition: transform 0.8s ease-in-out; - -khtml-transition: transform 0.8s ease-in-out; - -moz-transition: transform 0.8s ease-in-out; - -ms-transition: transform 0.8s ease-in-out; - -o-transition: transform 0.8s ease-in-out; - transition: transform 0.8s ease-in-out; - transition-delay: 0s; - transition-delay: 0.3s; - -webkit-transition-delay: 0.3s; - background-color: #000000; - opacity: 0.7; - cursor: url(../../assets/img/close.png), auto; -} - -@media (max-width: 767px) { - .search-popup__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - transform: none; - width: 100%; - height: 100%; - border-radius: 0; - transform: translateY(-110%); - } -} - -.search-popup__content { - position: fixed; - width: 0; - max-width: 560px; - padding: 30px 15px; - left: 50%; - top: 50%; - opacity: 0; - z-index: 3; - -webkit-transform: translate(-50%, -50%); - -khtml-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - transition-delay: 0s, 0.8s, 0s; - transition-delay: 0s, 0.4s, 0s; - transition-delay: 0.2s; - -webkit-transition-delay: 0.2s; -} - -.search-popup__form { - position: relative; -} - -.search-popup__form input[type=search], -.search-popup__form input[type=text] { - width: 100%; - height: 66px; - border: none; - outline: none; - padding-left: 20px; - background-color: $white; - font-size: 16px; - font-weight: 400; - color: $text-color; - transition: all 500ms ease; -} - -.search-popup__form input[type=search]:focus, -.search-popup__form input[type=text]:focus { - color: $header-color; -} - -.search-popup__form .search-btn { - padding: 0; - width: 66px; - height: 66px; - display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right: -1px; - border-radius: 0; - font-size: 20px; - color: $white; - background-color: $theme-color; - @include transition; - - &:hover { - background-color: $black; - } -} - -.search-popup__form .eolexi-btn svg { - width: 1em; - height: 1em; - fill: currentColor; -} - -.search-popup.active { - z-index: 9999; -} - -.search-popup.active .search-popup__overlay { - top: auto; - bottom: calc(90px - 112vw); - -webkit-transform: scale(1); - -khtml-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - transition-delay: 0s; - -webkit-transition-delay: 0s; - opacity: 0.7; - -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -} - -@media (max-width: 767px) { - .search-popup.active .search-popup__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - transform: none; - width: 100%; - height: 100%; - border-radius: 0; - transform: translateY(0%); - } -} - -.search-popup.active .search-popup__content { - width: 100%; - opacity: 1; - transition-delay: 0.7s; - -webkit-transition-delay: 0.7s; -} - diff --git a/public/assets/scss/_pricing.scss b/public/assets/scss/_pricing.scss deleted file mode 100644 index 6a2861d..0000000 --- a/public/assets/scss/_pricing.scss +++ /dev/null @@ -1,309 +0,0 @@ -/* Pricing Section */ -.pricing-wrapper-2 { - - .pricing-content { - position: relative; - z-index: 9; - - .pricing-text { - margin-top: 25px; - max-width: 548px; - } - - .nav { - background-color: $white; - border-radius: 24.5px; - padding: 10px 20px; - margin-top: 40px; - border: none; - - @include breakpoint (max-xxl) { - margin-top: 15px; - } - - .nav-tabs { - border-bottom: 0; - display: flex; - } - - .nav-link { - font-size: 16px; - font-weight: 700; - text-transform: uppercase; - border: 0; - border-radius: 0; - padding: 0 40px; - position: relative; - background: transparent; - z-index: 2; - color: $text-color; - margin-bottom: 0; - - &::before { - content: ""; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%) translateX(50%); - background: $theme-color; - width: 43px; - height: 22px; - border-radius: 20px; - } - - &::after { - content: ""; - position: absolute; - right: -18px; - top: 50%; - transform: translateY(-50%); - width: 17px; - height: 17px; - border-radius: 50%; - background: $white; - z-index: 1; - } - - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - - &::after, - &::before { - display: none; - } - } - - &.active { - color: $theme-color-2; - - &::after { - right: 0; - } - } - } - } - } - - .pricing-right-items { - display: flex; - align-items: center; - - .pricing-box-items { - max-width: 417px; - width: 100%; - border-radius: 20px; - background: $header-color; - padding: 40px; - - @include breakpoint (max-xxl) { - padding: 30px; - } - - @include breakpoint (max-sm) { - padding: 25px; - } - - .pricing-header { - position: relative; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding-bottom: 35px; - position: relative; - z-index: 9; - margin-bottom: 32px; - - .sub-texts { - top: 40px; - right: 0; - position: absolute; - font-size: 24px; - font-weight: 700; - color: $white; - - @include breakpoint (max-sm) { - font-size: 20px; - } - } - - h2 { - font-size: 72px; - font-weight: 700; - line-height: 1; - color: $white; - - @include breakpoint (max-sm) { - font-size: 50px; - } - - sup { - font-size: 32px; - font-weight: 700; - top: -1.5em; - margin-right: -10px; - - @include breakpoint (max-sm) { - top: -0.5em; - } - } - - sub { - font-size: 20px; - font-weight: 600; - // text-transform: capitalize; - margin-left: -10px; - } - } - } - - .theme-btn { - background: $theme-color; - color: $white; - border: none; - @include flex; - justify-content: space-between; - - i { - background-color: $white; - color: $header-color; - } - - &:hover { - background-color: $white; - color: $header-color; - - i { - background-color: $theme-color; - color: $white; - } - } - } - - ul { - margin-top: 24px; - - li { - color: $white; - - &:not(:last-child) { - margin-bottom: 15px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - i { - color: $theme-color-2; - margin-right: 8px; - - @include breakpoint (max-sm) { - margin-right: 5px; - } - } - } - } - - &.style-2 { - margin-left: -32%; - z-index: -1; - border-radius: 20px; - background: $white; - - @media (max-width: 767px) { - margin-left: -70%; - } - - .pricing-header { - - .sub-texts { - color: $header-color; - } - } - - .theme-btn { - width: 100%; - background-color: transparent; - border: 1px solid rgba(203, 204, 207, 0.24); - color: $header-color; - - i { - background-color: $theme-color; - color: $white; - } - } - - ul { - li { - color: $text-color; - } - } - } - - &::after { - display: none; - } - } - } -} - - -.pricing-card-items-3 { - border-radius: 16px; - background-color: $white; - backdrop-filter: blur(24px); - padding: 40px 48px; - margin-top: 30px; - @include transition; - - @include breakpoint (max-xl) { - padding: 30px; - } - - .pricing-header { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - - h6 { - text-transform: uppercase; - font-weight: 500; - margin-bottom: 10px; - } - - h2 { - color: $theme-color-2; - } - } - - .pricing-list-box { - padding: 24px; - background-color: $bg-color; - margin-bottom: 30px; - border-radius: 16px; - - li { - color: $header-color; - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - color: $theme-color-2; - margin-right: 12px; - } - } - } - - .theme-btn { - width: 100%; - @include flex; - justify-content: space-between; - } - - &:hover { - transform: translateY(-10px); - } -} \ No newline at end of file diff --git a/public/assets/scss/_section.scss b/public/assets/scss/_section.scss deleted file mode 100644 index 30249ea..0000000 --- a/public/assets/scss/_section.scss +++ /dev/null @@ -1,126 +0,0 @@ - -//>>>>> Section Title Start <<<<>>>> Section Title End <<<<>>>> Basic Css Start <<<<>>>> Basic Css End <<<<* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .testimonial-content { - margin-left: 50px; - position: relative; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - .content { - .star { - color: $theme-color; - margin-bottom: 20px; - } - - h3 { - font-size: 28px; - line-height: 143%; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 40px; - margin-bottom: 30px; - font-weight: 500; - - @include breakpoint (max-xxl) { - font-size: 24px; - } - - @include breakpoint (max-lg) { - font-size: 20px; - } - - @include breakpoint (max-sm) { - font-size: 16px; - } - } - - .info-item { - @include flex; - gap: 20px; - - .icon { - width: 56px; - height: 56px; - line-height: 56px; - text-align: center; - border-radius: 100px; - background-color: $theme-color-2; - color: $white; - font-size: 30px; - } - - .content { - border-left: 1px solid rgba(203, 204, 207, 0.24); - padding-left: 30px; - } - } - } - - .array-buttons-3 { - position: absolute; - right: 0; - bottom: 0; - @include flex; - gap: 24px; - - @include breakpoint (max-sm) { - display: none; - } - - .array-prev { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - background-color: $bg-color; - color: $header-color; - @include transition; - z-index: 999; - border-radius: 100px; - transform: rotate(320deg); - - &:hover { - background-color: $theme-color; - color: $white; - } - } - - .array-next { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - background-color: $theme-color; - color: $white; - @include transition; - z-index: 999; - border-radius: 100px; - transform: rotate(320deg); - border: 1px solid $theme-color; - - &:hover { - background-color: $bg-color; - color: $header-color; - border: 1px solid $bg-color; - } - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_typography.scss b/public/assets/scss/_typography.scss deleted file mode 100644 index 1ff985e..0000000 --- a/public/assets/scss/_typography.scss +++ /dev/null @@ -1,174 +0,0 @@ -/* -------------------------------------------- - Template Default Fonts & Fonts Styles - ---------------------------------------------- */ - -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); - -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); - -$heading-font: 'Space Grotesk', serif; -$body-font: "Inter", sans-serif; -//font-family: "Font Awesome 6 Free"; -$fa: "Font Awesome 6 Pro"; - -body { - font-family: $body-font; - font-size: 16px; - font-weight: 400; - line-height: 24px; - color: $text-color; - background-color: $white; - padding: 0; - margin: 0; - overflow-x: hidden; - // // text-transform: capitalize; -} - -ul { - padding: 0; - margin: 0; - list-style: none; -} - -button { - border: none; - background-color: transparent; - padding: 0; -} - -input:focus{ - color: $white; - outline: none; -} - -input{ - color: $white; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: $heading-font; - margin: 0px; - padding: 0; - color: $header-color; - @include transition; - // text-transform: capitalize; -} - -h1 { - font-size: 72px; - font-weight: 700; - line-height: 111%; - - @include breakpoint(max-xl4){ - font-size: 70px; - } - - @include breakpoint(max-xxxl){ - font-size: 60px; - } - - @include breakpoint(max-xxl){ - font-size: 55px; - } - - @include breakpoint(max-xl){ - font-size: 40px; - } - - @include breakpoint(max-lg){ - font-size: 40px; - } - - @include breakpoint(max-md){ - font-size: 32px; - } - - @include breakpoint(max-sm){ - font-size: 28px; - } -} - -h2 { - font-size: 48px; - font-weight: 700; - line-height: 117%; - - @include breakpoint(max-xxl){ - font-size: 50px; - } - - @include breakpoint(max-xl){ - font-size: 38px; - } - - @include breakpoint(max-lg){ - font-size: 38px; - } - - @include breakpoint(max-md){ - font-size: 35px; - } - - @include breakpoint(max-sm){ - font-size: 30px; - } - - @include breakpoint(max-xxs){ - font-size: 25px; - } -} - -h3 { - font-size: 24px; - font-weight: 700; - line-height: 133%; - - @include breakpoint(max-xl){ - font-size: 20px; - } -} - -h4 { - font-size: 22px; - font-weight: 700; - line-height: 141%; - - @include breakpoint(max-xl){ - font-size: 20px; - } -} - -h5 { - font-size: 20px; - font-weight: 700; - line-height: 140%; -} - -h6 { - font-size: 16px; - font-weight: 600; -} - -a { - text-decoration: none; - outline: none !important; - cursor: pointer; - color: $header-color; - @include transition; -} - -p { - margin: 0px; - @include transition; -} - -span { - margin: 0px; - // @include transition; -} - diff --git a/public/assets/scss/_variables.scss b/public/assets/scss/_variables.scss deleted file mode 100644 index 79dda32..0000000 --- a/public/assets/scss/_variables.scss +++ /dev/null @@ -1,31 +0,0 @@ - -:root { - - --body: #fff; - --black: #000; - --white: #fff; - --theme: #E13833; - --theme-2: #0048B4; - --header: #151A26; - --text: #535761; - --text-2: #0B4E3D; - --border: #C9C9C9; - --border-2: #CBCCCF; - --bg: #F8F8F9; - --bg-2: #153888; - --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13); -} - -// Theme Color - Defualt Colors -$black: var(--black); -$white: var(--white); -$theme-color: var(--theme); -$theme-color-2: var(--theme-2); -$text-color: var(--text); -$text-color-2: var(--text-2); -$header-color: var(--header); -$border-color: var(--border); -$border-color-2: var(--border-2); -$bg-color: var(--bg); -$bg-color-2: var(--bg-2); -$shadow: var(--pp-box-shadow); \ No newline at end of file diff --git a/public/assets/scss/_visa.scss b/public/assets/scss/_visa.scss deleted file mode 100644 index 29eb210..0000000 --- a/public/assets/scss/_visa.scss +++ /dev/null @@ -1,565 +0,0 @@ -.visa-certification-wrapper { - - .visa-image { - margin-left: -310px; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - img { - @include imgw; - } - } - - .visa-certification-content { - margin-left: 17px; - - @include breakpoint (max-xxl) { - margin-left: 0; - margin-bottom: 100px; - margin-top: 100px; - } - - @include breakpoint (max-lg) { - margin-bottom: 80px; - margin-top: 0; - } - - .visa-item { - @include flex; - gap: 48px; - margin-top: 90px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - gap: 30px; - } - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30px; - } - - .nav { - display: grid; - gap: 30px; - - li { - font-size: 20px; - font-weight: 700; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 12px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - - .nav-link { - color: $header-color; - @include transition; - padding: 16px 40px 16px 16px; - border-radius: 8px; - backdrop-filter: blur(28px); - background-color: $white; - line-height: 1; - - @include breakpoint (max-xxl) { - padding: 10px 10px 10px 10px; - } - - @include breakpoint (max-lg) { - padding: 16px 40px 16px 16px; - } - - i { - width: 24px; - height: 24px; - line-height: 24px; - text-align: center; - background-color: $theme-color; - color: $white; - border-radius: 50px; - font-size: 14px; - transform: rotate(-45deg); - margin-right: 6px; - } - - &.active { - position: relative; - background-color: $theme-color; - color: $white; - border-radius: 100px; - - i { - background-color: $white; - color: $theme-color; - } - } - } - } - } - - .content { - - .icon { - margin-bottom: 16px; - } - - p { - max-width: 479px; - margin-bottom: 40px; - margin-top: 10px; - } - } - } - } -} - -.visa-provide-box { - background-color: $white; - padding: 30px; - border-radius: 16px; - background-color: $white; - margin-top: 30px; - - .visa-top-item { - margin-bottom: 30px; - @include flex; - justify-content: space-between; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - .visa-left { - @include flex; - gap: 16px; - - p { - color: $theme-color; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - } - - .theme-btn { - background-color: $bg-color; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - .visa-list-item { - @include flex; - justify-content: space-between; - - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - .list { - li { - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - - @include breakpoint (max-xxxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 20px; - } - - i { - width: 22px; - height: 22px; - line-height: 22px; - text-align: center; - border-radius: 50px; - background-color: $text-color; - color: $white; - margin-right: 8px; - font-size: 12px; - transform: rotate(-45deg); - } - } - } - } -} - -.visa-provide-section { - - .visa-slider { - margin-left: -400px; - margin-right: -400px; - - @include breakpoint (max-xxl) { - margin-right: 0; - margin-left: 0; - margin: 0 10px; - } - } -} - - -.visa-bottom { - position: relative; - margin-top: 70px; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - background-color: $theme-color-2; - @include before; - width: 410px; - height: 132px; - padding: 16px 16px 16px 294px; - border-radius: 0 100px 100px 0; - - @include breakpoint (max-xxxl) { - display: none; - } - } - - &::after { - background-color: $theme-color-2; - position: absolute; - content: ""; - width: 410px; - height: 132px; - padding: 16px 16px 16px 294px; - border-radius: 100px 0 0 100px; - right: 0; - top: 0; - - @include breakpoint (max-xxxl) { - display: none; - } - } - - .visa-arrow-item { - @include flex; - justify-content: space-between; - - .array-prev { - width: 100px; - height: 100px; - line-height: 100px; - border-radius: 100%; - text-align: center; - background-color: $white; - color: $header-color; - position: relative; - z-index: 9; - margin-top: 16px; - margin-left: -15px; - font-size: 40px; - } - - .array-next { - width: 100px; - height: 100px; - line-height: 100px; - border-radius: 100%; - text-align: center; - background-color: $theme-color; - color: $white; - position: relative; - z-index: 9; - margin-top: 16px; - margin-right: -15px; - font-size: 40px; - } - - .flag-item { - @include flex; - gap: 24px; - - .flag-thumb { - position: relative; - transition: all 0.4s ease-in-out; - width: 120px; - height: 120px; - - img { - width: 100%; - height: 100%; - border-radius: 50%; - } - - &::before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - background-color: rgba(5, 17, 26, 0.8); - border-radius: 50%; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - } - - &::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - border: 5px solid $white; - border-radius: 50%; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - } - - .country-name { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - z-index: 2; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - - h4 { - font-size: 14px; - font-weight: 800; - // text-transform: capitalize; - text-align: center; - color: $white; - } - } - - &:hover { - &::before { - opacity: 1; - visibility: visible; - } - - &::after { - opacity: 1; - visibility: visible; - } - - .country-name { - opacity: 1; - visibility: visible; - } - } - } - } - } -} - - -.country-details-wrapper { - - .country-details-post { - - .details-image { - - img { - @include imgw; - border-radius: 24px; - } - } - - .country-details-content { - margin-top: 20px; - - h2 { - margin-bottom: 10px; - } - - h5 { - color: $theme-color-2; - margin-top: 30px; - } - - .tourist-visa-box { - border-radius: 16px; - padding: 30px; - background-color: $bg-color; - margin-top: 30px; - margin-bottom: 24px; - - .tourist-box { - @include flex; - gap: 50px; - - .tourist-content { - h5 { - color: $header-color; - margin-bottom: 5px; - margin-top: 0; - } - } - - &.style-2 { - padding-bottom: 15px; - border-bottom: 1px solid rgba(203, 204, 207, 0.7); - margin-bottom: 15px; - } - } - } - - .text { - font-size: 32px; - } - - .list-item { - margin-top: 20px; - margin-bottom: 30px; - - li { - color: $header-color; - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - - &:not(:last-child) { - margin-bottom: 15px; - } - - span { - font-size: 16px; - font-weight: 400; - color: $text-color; - font-family: $body-font; - } - } - } - - .thumb { - img { - @include imgw; - border-radius: 16px; - } - } - - .visa-list-2 { - @include flex; - gap: 32px; - margin-bottom: 20px; - - li { - font-size: 20px; - font-weight: 500; - color: $header-color; - - i { - color: $theme-color-2; - margin-right: 8px; - } - } - } - } - } - - .country-details-sideber { - - .icon-box-item { - background-color: $bg-color; - border-radius: 8px; - padding: 12px 24px; - @include flex; - justify-content: space-between; - margin-bottom: 8px; - - .left-item { - @include flex; - gap: 16px; - } - - i { - color: $header-color; - } - } - - .visa-contact-box { - border-radius: 24px; - padding: 40px; - margin-top: 30px; - - .content { - h3 { - color: $white; - } - - p { - color: rgba(255, 255, 255, 0.7); - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - } - - .icon-item { - @include flex; - gap: 16px; - margin-bottom: 24px; - - .icon { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - border-radius: 100px; - background-color: #183074; - color: $white; - } - - .cont { - span { - color: rgba(255, 255, 255, 0.7); - } - - h6 { - color: $white; - font-size: 18px; - font-weight: 500; - - a { - color: $white; - } - } - } - } - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/main.scss b/public/assets/scss/main.scss deleted file mode 100644 index bc6977e..0000000 --- a/public/assets/scss/main.scss +++ /dev/null @@ -1,102 +0,0 @@ -/* -Theme Name: Visaway -Author: Gramentheme -Author URI: https://themeforest.net/user/Gramentheme/portfolio -Description: Visaway – Immigration & Visa Consulting HTML Template -Service Html Template -Version: 1.0.0 -*/ - -/*CSS Table Of Content Ends Here*/ - -/* --------------------------------------------------------------- -[Table of Contents] --------------------------------------------------------------- -01. Variables & Mixins -02. Typography -03. Buttons -04. About -05. Animation -06. Brand -07. Contact -08. Cta -09. Faq -10. Feature -11. Footer -12. Header -13. Helping -14. Hero -15. Marquee -16. Meanmenu -17. News -18. Preloader -19. Pricing -20. Section -21. Service -22. Testimonial -23. Visa - - --------------------------------------------------------------- -*/ - -//>> Basic Start <> Mixins <> Variables <> Buttons <> Typography <> Basic End <> Template Section Style Start <> About <> Animation <> Brand <> Contact <> Cta <> Faq <> Feature <> Footer <> Header <> Helping <> Hero <> Marquee <> MeanMenu <> News <> _Preloader <> _Pricing <> Section <> Service <> Testimonial <> Visa <> Template Section Style End <