/*===========================
Project Name: Zenfy - HTML Template
Author: Egens Lab --> (https://www.egenslab.com/)
Support: https://egenslab.desky.support/
Developer: Abid Hossain Chowdhury --> hello@egenslab.com
Version: 1.0

01.COMMON CSS 
02. Mixins Css
03. Global Css
04.Header Css
05.Home1 Banner section
06.Home1 About section
07.Home1 Solution section
08.Home1 Portfolio section
09.Home1 Process section
10.Home1 Banner With Case Study Slider section
11.Home1 Approach section
12.Home1 Logo section
13.Home1 Testimonial section
14.Home1 Blog section
15.Home1 Contact section
16.Home1 Footer section
17.Home2 Banner section
18.Home2 About section
19.Home2 Service section
20.Home2 Feature section
21.Home2 Horizontal Scrolling section
22.Home2 case-study section
23.Home2 Testimonal section
24.Home2 Pricing Plan section
25.Home2 Contact section
26.Home2 Blog section
27.Home3 Banner section
28.Home3 Process section
29.Home3 Countdown section
30.Home3 Project Management section
31.Home3 Testimonial section
32.Home3 Feature section
33.Home3 Pricing plan section
34.Home3 Newsletter section
35.Home3 Faq section
36.Home3 Tools section
37.Home4 Banner section
38.Home4 About section
39.Home4 Service section
40.Home4 Experience section
41.Home4 Portfolio section
42.Home4 Process section
43.Home4 Contact section
44.Home4 Award section
45.Home4 Teams section
47.Home4 Blog section
48.Home4 Footer section
49.Home5 Banner Section
50.Home5 Partnership Section
51.Home5 About Section
52.Home5 Services Section
53.Home5 Why Choose Section
54.Home5 Industry Section
55.Home5 Team Section
56.Home5 Testimonial Section
57.Home5 Blog Section
58.Home5 Portfolio Section
59.Home5 Contact Section
60.Breadcrumb Section
61.Case Study Details Page
62.Team Page
63.Inner Page Pagination Section
64.Inner Page Sidebar area Section
65.Pricing Plan Page
66.Faq Page
67.Contact Page
68.Shop Page
69.Product Details Page
70. Cart Page
71. Checkout Page
72. Error Page
73. Portfolio Details Page
74. Service Details Page
75. Blog Details Page
76. All Dark Page Css
===========================*/


/*===========================
     01.COMMON CSS 
===========================*/
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}


:root {
  --font-hankenGrotesk: 'Hanken Grotesk', sans-serif;
  --font-inter: 'Inter', sans-serif;
  // Colors ---------------
  --white-color: #fff;
  --dark-white-color: #fff;
  --black-color: #000;
  --black-color2: #1E1F1F;
  --black-color3: #0B0C0C;
  --light-black-color: #242627;
  --title-color: #0B0C0C;
  --dark-title-color: #0B0C0C;
  --title-color-opc: 11, 12, 12;
  --text-color: #3F444B;
  --text-color-opc: 63, 68, 75;
  // Theme Color
  --primary-color1: #3067FF;
  --primary-color1-opc: 48, 103, 255;
  --primary-color2 : #0B0C0C;
  --dark-primary-color2 : #0B0C0C;
  --primary-color2-opc: 11, 12, 12; 
  --border-color: #eee; 
  --border-color2: #eee; 
}
body.dark{
  --white-color: #fff;
  --dark-white-color: #0B0C0C;
  --black-color: #000;
  --black-color2: #1E1F1F;
  --title-color: #fff;
  --title-color-opc: 255, 255, 255;
  --text-color: #B5B5B5;
  --text-color-opc: 255, 255, 255;
  // Theme Color
  --primary-color1: #3067FF;
  --primary-color1-opc: 48, 103, 255; 
  --primary-color2 : #fff;
  --primary-color2-opc: 255, 255, 255; 
  --border-color: #5e5a5a6e; 
  --border-color2: #3d3a3a6e; 
  background-color: #000;
  &.style-2{
    background-color: #000;
  }
}

/*================================================
02. Mixins Css
=================================================*/

@mixin eighteen-down-device {
  @media (max-width: 1799px) {
    @content;
  }
}
@mixin seventeen-down-device {
  @media (max-width: 1699px) {
    @content;
  }
}

@mixin fifteen-down-device {
  @media (max-width: 1499px) {
    @content;
  }
}

@mixin xxl-down-device {
  @media (max-width: 1399px) {
    @content;
  }
}

@mixin xl-down-device {
  @media (max-width: 1199px) {
    @content;
  }
}

@mixin xxl-device {
  @media (min-width: 1400px) and (max-width: 1599px) {
    @content;
  }
}

@mixin xl-device {
  @media (min-width: 1200px) and (max-width: 1399px) {
    @content;
  }
}

@mixin lg-device {
  @media (min-width: 992px) and (max-width: 1199px) {
    @content;
  }
}

@mixin xl-up-device {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin lg-up-device {
  @media (min-width: 992px) {
    @content;
  }
}

@mixin lg-down-device {
  @media (max-width: 991px) {
    @content;
  }
}

// md-device============
@mixin md-device {
  @media (min-width: 768px) and (max-width: 991px) {
    @content;
  }
}

@mixin xxl-up-device {
  @media (min-width: 1600px) {
    @content;
  }
}

@mixin md-up-device {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin md-down-device {
  @media (max-width: 767px) {
    @content;
  }
}

// sm-device
@mixin sm-device {
  @media (min-width: 576px) and (max-width: 768px) {
    @content;
  }
}

@mixin sm-down-device {
  @media (max-width: 576px) {
    @content;
  }
}

@mixin sm-mobile-device {
  @media (max-width: 425px) {
    @content;
  }
}

@mixin big-mobile-device {
  @media (min-width: 375px) and (max-width: 576px) {
    @content;
  }
}

@mixin threefifty-down-device() {
  @media (max-width: 350px) {
    @content;
  }
}


/*================================================
03. Global Css
=================================================*/
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-hankenGrotesk);
  color: var(--title-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  &.style-2{
    background: #F7F6F1;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-hankenGrotesk);
  font-weight: 600;
  line-height: 1.4;
  color: var(--title-color);
}

input {
  border: none;
  outline: none;
}

button {
  outline: none;
  border: none;
}

i.bx {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

p {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-130 {
  padding-bottom: 130px;
  @include lg-device() {
    padding-bottom: 100px;
  }
  @include lg-down-device() {
    padding-bottom: 90px;
  }
}
.pt-120 {
  padding-top: 120px;
  @include lg-device() {
    padding-top: 100px;
  }
  @include lg-down-device() {
    padding-top: 90px;
  }
  @include md-down-device() {
    padding-top: 70px;
  }
}

.pb-120 {
  padding-bottom: 120px;
  @include lg-device() {
    padding-bottom: 100px;
  }
  @include lg-down-device() {
    padding-bottom: 90px;
  }
  @include md-down-device() {
    padding-bottom: 70px;
  }
}

.pt-100 {
  padding-top: 110px;
  @include lg-down-device() {
    padding-top: 80px;
  }
}

.pb-100 {
  padding-bottom: 110px;

  @include lg-down-device() {
    padding-bottom: 80px;
  }
}

.pt-90 {
  padding-top: 90px;

  @include lg-down-device() {
    padding-top: 80px;
  }
  @include md-down-device() {
    padding-top: 70px;
  }
}

.pb-90 {
  padding-bottom: 90px;

  @include lg-down-device() {
    padding-bottom: 80px;
  }
  @include md-down-device() {
    padding-bottom: 70px;
  }
}

.pb-80 {
  padding-bottom: 80px;

  @include lg-device() {
    padding-bottom: 60px;
  }

}

.pb-65 {
  padding-bottom: 65px;
}

.mt-120 {
  margin-top: 120px;

  @include lg-device() {
    margin-top: 100px;
  }

  @include lg-down-device() {
    margin-top: 90px;
  }
}

.mb-110 {
  margin-bottom: 110px;
  @include lg-device() {
    margin-bottom: 90px;
  }

  @include lg-down-device() {
    margin-bottom: 80px;
  }
  @include md-down-device(){
    margin-bottom: 60px;
  }
}
.mb-120 {
  margin-bottom: 120px;
  @include lg-device() {
    margin-bottom: 100px;
  }

  @include lg-down-device() {
    margin-bottom: 90px;
  }
  @include md-down-device(){
    margin-bottom: 70px;
  }
}
.mb-130 {
  margin-bottom: 130px;
  @include lg-device() {
    margin-bottom: 100px;
  }

  @include lg-down-device() {
    margin-bottom: 90px;
  }
}

.mb-100 {
  margin-bottom: 100px;
  @include lg-down-device(){
    margin-bottom: 80px;
  }
}
.mt-100 {
  margin-top: 100px;
  @include lg-down-device(){
    margin-top: 80px;
  }
}
.mb-90 {
  margin-bottom: 90px;
  @include lg-down-device(){
    margin-bottom: 70px;
  }
  @include md-down-device(){
    margin-bottom: 50px;
  }
}
.mb-80 {
  margin-bottom: 80px;
  @include lg-device(){
    margin-bottom: 70px;
  }
  @include lg-down-device(){
    margin-bottom: 70px;
  }
}

.mb-15 {
  margin-bottom: 15px;
}
.mb-10 {
  margin-bottom: 10px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-50 {
  padding-top: 50px;
  @include lg-device(){
    padding-top: 40px;
  }
  @include lg-down-device(){
    padding-top: 30px;
  }
}
.pt-40 {
  padding-top: 40px;
}
.pt-35 {
  padding-top: 35px;
}
.pt-30 {
  padding-top: 30px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pe-80 {
  padding-right: 80px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pl-110 {
  padding-left: 110px;

  @include xxl-device() {
    padding-left: 70px;
  }

  @include xl-device() {
    padding-left: 40px;
  }

  @include xl-down-device() {
    padding-left: unset;
  }
}

.mb-60 {
  margin-bottom: 60px;
  @include xl-down-device(){
    margin-bottom: 50px;
  }
  @include md-down-device() {
    margin-bottom: 40px;
  }
}

.mb-70 {
  margin-bottom: 70px;

  @include md-down-device() {
    margin-bottom: 40px;
  }
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-35 {
  margin-top: 35px;
}

.mb-40 {
  margin-bottom: 40px;
  @include xl-down-device(){
    margin-bottom: 30px;
  }
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mt-50 {
  margin-top: 50px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-25 {
  margin-top: 25px;
}

.mb-50 {
  margin-bottom: 50px;
  @include md-down-device(){
    margin-bottom: 40px;
  }
}

.mt-60 {
  margin-top: 60px;

  @include md-down-device() {
    margin-top: 40px;
  }
}

.mt-70 {
  margin-top: 70px;

  @include lg-down-device() {
    margin-top: 40px;
  }
}

// Button
.primary-btn1 {
  border-radius: 5px;
  background-color: var(--primary-color1);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  color: var(--white-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 18px 30px;
  position: relative;
  align-items: center;
  display: inline-flex;
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  > span {
    transition: opacity 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 102% 102%;
    border-radius: inherit;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
    z-index: -1;
  }
  &::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    opacity: 0;
    transform: translate(0, 100%);
    transition: opacity 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    white-space: nowrap;
  }
  &:hover {
    color: var(--dark-white-color);
    background-color: var(--primary-color2);
    &::before {
      opacity: 1;
    }
    > span {
      transform: translateY(-150%);
      opacity: 0;
    }
    &::after {
      transform: translate(0%, -50%);
      opacity: 1;
    }
  }
  &.hover-white{
    &:hover{
      background-color: var(--dark-white-color);
      color: var(--title-color);
    }
  }
}
.primary-btn2 {
  border-radius: 5px;
  background-color: var(--primary-color2);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  color: var(--dark-white-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 16px 20px;
  position: relative;
  align-items: center;
  display: inline-flex;
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  @include sm-down-device(){
    font-size: 15px;
  }
  > span {
    transition: opacity 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 102% 102%;
    border-radius: inherit;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
    z-index: -1;
  }

  &::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    opacity: 0;
    transform: translate(0, 100%);
    transition: opacity 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    white-space: nowrap;
  }

  &:hover {
    color: var(--white-color);
    background-color: var(--primary-color1);

    &::before {
      opacity: 1;
    }

    > span {
      transform: translateY(-150%);
      opacity: 0;
    }

    &::after {
      transform: translate(0%, -50%);
      opacity: 1;
    }
  }
}
.primary-btn3{
  border-radius: 35px;
  background-color: transparent;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  color: var(--title-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 15px 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  border: 1px solid #0B0C0C;
  border-bottom: 3px solid #0B0C0C;
  svg{
    fill: none;
    stroke: var(--primary-color2);
  }
  &::after {
    position: absolute;
    content: "";
    border-radius: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--primary-color2);
    transform-origin: right;
    transform: scalex(0);
    z-index: -1;
    transition: transform 0.7s;
  }
  &:hover {
    color: var(--dark-white-color);
    // border-bottom: 2px solid var(--title-color);
    &::after {
      transform: scalex(1);
      transform-origin: left;
    }
    svg{
      stroke: var(--dark-white-color);
    }
  }
}
.primary-btn4{
  border-radius: 50px;
  background-color: var(--primary-color1);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  color: var(--white-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  &::after {
    position: absolute;
    content: "";
    border-radius: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--white-color);
    transform-origin: right;
    transform: scalex(0);
    z-index: -1;
    transition: transform 0.7s;
  }
  &:hover {
    color: var(--dark-title-color);
    &::after {
      transform: scalex(1);
      transform-origin: left;
    }
  }
  &.black-hover{
    &::after {
      background-color: var(--primary-color2);
    }
    &:hover {
      color: var(--dark-white-color);
      &::after {
        transform: scalex(1);
        transform-origin: left;
      }
    }
  }
}
.primary-btn5{
  color: var(--dark-white-color);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  background-color: transparent;
  line-height: 1;
  padding: 16px 30px;
  position: relative;
  z-index: 1;
  transition: 0.45s;
  &::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(3deg);
    background-color: var(--primary-color1);
    width: 100%;
    height: 100%;
    border-radius: 50px;
    z-index: -1;
    transition: 0.45s;
  }
  &::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--title-color);
    width: 100%;
    height: 100%;
    border-radius: 50px;
    z-index: -1;
    transition: 0.45s;
  }
  &.two{ 
    color: var(--white-color);
    &::before{
      background-color: var(--title-color);
    }
    &::after{
      background-color: var(--primary-color1);
    } 
    &:hover{
      color: var(--dark-white-color);
      &::before{
        transform: translate(-50%,-50%) rotate(0deg);
      }
      &::after{
        background-color: var(--title-color);
      } 
    } 
  }
  &:hover{
    color: var(--white-color);
    &::before{
      transform: translate(-50%,-50%) rotate(0deg);
    }
    &::after{
      background-color: var(--primary-color1);
    } 
  }
}
.load-btn{
  border-radius: 50px;
  background-color: var(--primary-color2);
  padding: 14px 35px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  &::after {
    position: absolute;
    content: "";
    border-radius: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--primary-color1);
    transform-origin: right;
    transform: scalex(0);
    z-index: -1;
    transition: transform 0.7s;
  }
  span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 1.4;
    font-weight: 500;
    text-decoration: none;
    outline: none;
    padding: 0 1.375em .0625em 0;
    cursor: pointer;
    background-color: transparent;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: var(--background-size, 100%) 0.0625em;
    transition: background-size 0.2s linear var(--background-delay, 0.15s);
    transform: translateZ(0);
    border: none;
    background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
    color: var(--dark-white-color);
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    &::after{
      content: "\f123";
      font-family: "bootstrap-icons";
      display: block;
      position: absolute;
      right: 0;
      left: initial;
      top: 0;
      opacity: 1;
      -webkit-transition: opacity 0.3s 0.15s;
      transition: opacity 0.3s 0.15s;
      color: var(--white-color);
    }
    svg{
      position: absolute;
      display: block;
      line-height: 1.8125em;
      width: 1.375em;
      height: 1.8125em;
      right: 0;
      left: initial;
      top: 50%;
      margin: -.92em 0 0;
      fill: none;
      stroke: var(--white-color);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1px;
      stroke-dasharray: 7.95 30;
      stroke-dashoffset: var(--stroke-dashoffset, 46);
      transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
    }
  }
  &:hover {
    span{
      --background-size: 0%;
      --stroke-dashoffset: 26;
      --stroke-duration: .3s;
      --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
      --stroke-delay: .195s;
      &::after{
        opacity: 0;
        transition-delay: 0s;
      }
    }
    &::after {
      transform: scalex(1);
      transform-origin: left;
    }
  }
}
.explore-btn{
  color: var(--text-color);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.5s;
  svg{
    fill: var(--text-color);
    transition: 0.5s;
  }
  &:hover{
    color: var(--primary-color1);
    svg{
      transform: rotate(45deg);
      fill: var(--primary-color1);
    }
  }
}
.details-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  outline: none;
  padding: 0 1.375em .0625em 0;
  cursor: pointer;
  background-color: transparent;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 0.0625em;
  transition: background-size 0.2s linear var(--background-delay, 0.15s);
  transform: translateZ(0);
  border: none;
  background-image: linear-gradient(0deg, #0B0C0C 0%, #0B0C0C 100%);
  color: var(--title-color);
  font-family: var(--font-inter);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  &::after{
    content: "\f123";
    font-family: "bootstrap-icons";
    display: block;
    position: absolute;
    right: 0;
    left: initial;
    top: 0;
    opacity: 1;
    -webkit-transition: opacity 0.3s 0.15s;
    transition: opacity 0.3s 0.15s;
    color: var(--title-color);
  }
  svg{
    position: absolute;
    display: block;
    line-height: 1.8125em;
    width: 1.375em;
    height: 1.8125em;
    right: 0;
    left: initial;
    top: 50%;
    margin: -.92em 0 0;
    fill: none;
    stroke: var(--title-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: var(--stroke-dashoffset, 46);
    transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
  }
  &:hover{
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: .3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: .195s;
    &::after{
      opacity: 0;
      transition-delay: 0s;
    }
  }
}
.slider-btn-group{
  display: flex;
  align-items: center;
  gap: 20px;
  .slider-btn{
    height: 40px;
    width: 40px;
    background-color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
    cursor: pointer;
    border: 1px solid #D9D9D9e6;
    svg{
        fill: var(--primary-color1);
        transition: .4s;
    }
    &:hover{
        background-color: var(--primary-color1);
        border-color: var(--primary-color1);
        svg{
            fill: var(--white-color);
        }
    }
    &.swiper-button-disabled{
        opacity: .2;
    }
  }
}
.slider-btn-group2{
  display: flex;
  align-items: center;
  gap: 40px;
  .slider-btn{
      cursor: pointer;
      svg{
          fill: var(--primary-color2);
          transition: .4s;
      }
      &:hover{
          svg{
              fill: var(--primary-color1);
          }
      }
      &.swiper-button-disabled{
          opacity: .2;
      }
  }
}

.circle-container {
  background: transparent;
  position: fixed;
  right: 30px;
  bottom: 55px;
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset  0 0 0 2px #3067FF;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;

  &.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }
  // icon
  &::after {
      position: absolute;
      font-family: 'Bootstrap-icons';
      content: '\F145';
      text-align: center;
      line-height: 40px;
      font-size: 28px;
      color: var(--primary-color1);
      left: 0;
      top: 0;
      height: 40px;
      width: 40px;
      cursor: pointer;
      display: block;
      z-index: 1;
      -webkit-transition: all 200ms linear;
      transition: all 200ms linear;
  }
  // circle container hover
  &:hover {
    // icon hover
    svg{
      path {
        fill: var(--primary-color1);
        transition: 0.5s;
      }
    }
    &::after {
        color: var(--white-color);
    }
  }
  svg {
    path {
      fill: none;
    }
    &.circle-progress {
      path {
        stroke: var(--primary-color1);
        stroke-width: 5;
        box-sizing:border-box;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
      }
    }
  }
}

// Nice Select
.select{
  margin-bottom: 25px;
}
.nice-select {
  width: 100%;
  background: transparent;
  border-radius: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0px 25px;
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #F3F3F3;
  &::after{
    height: 8px;
    width: 8px;
    border-bottom: 1px solid var(--text-color);
    border-right: 1px solid var(--text-color);
    right: 28px;
    margin-top: -5px;
  }
  .current{
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 400;
  }
  &:hover{
    border-color: #F3F3F3;
    background: #F3F3F3;
  }
  &:focus{
    border-color: var(--primary-color1);
    background-color: var(--white-color);
  }
  .list{
    border: none;
    border-radius: 5px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1; 
      }
      &::-webkit-scrollbar-thumb {
        background: var(--text-color); 
      }
      
    .option{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 13px;
      font-weight: 500;  
      padding-left: 25px;
      padding-right: 25px;
      display: flex;
      align-items:  center;
      justify-content: space-between;
      width: 100%;
      &:hover{
        color: var(--title-color);
        background-color: var(--primary-color1);
        font-weight: 500;
      }
      &.selected{
        background-color: var(--primary-color1);
        color: var(--title-color);
      }
    }
  }
}

// section title
.section-title{ 
  >span{
    color: var(--primary-color1);
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    @include md-down-device(){
      margin-bottom: 10px;
    }
    svg{
      fill: rgba(var(--text-color-opc), 0.3);
    }
  }
  h2{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0;
    @include xl-down-device(){
      font-size: 38px;
    }
    @include sm-down-device(){
      font-size: 35px;
    }
  }
  p{
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    padding-top: 20px;
    margin-bottom: 0;
    @include lg-device(){
      font-size: 15px;
    }
    @include md-down-device(){
      padding-top: 15px;
    }
  }
  &.white{
    span{
      svg{
        fill: rgba(#fff, 0.5);
      }
    }
    h2{
      color: var(--white-color);
    }
    p{
      color: rgba(#fff, 0.6);
    }
  }
}
.section-title2{
  >span{
    color: var(--primary-color1);
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-color); 
    background: rgba(233, 229, 255, 0.60);
    border-radius: 5px;
    margin-bottom: 5px;
    @include xl-device(){
      margin-bottom: 15px;
    }
    @include lg-device(){
      margin-bottom: 10px;
    }
    @include sm-down-device(){
      margin-bottom: 10px;
    }
    svg{
      fill: rgba(var(--text-color-opc), 0.4);
    }
  }
  h2{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2; /* 120% */

    @include lg-device(){
      font-size: 48px;
    }
    @include lg-down-device(){
      font-size: 45px;
    }
    @include md-down-device(){
      font-size: 38px;
    }
  }
  p{
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 0;
    padding-top: 15px;
    @include lg-down-device(){
      padding-top: 10px;
    }
  }
}
.section-title3{
  >span{
    border-radius: 50px;
    border: 1px solid rgba(var(--text-color-opc), 0.2);
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.39px;
    text-transform: uppercase;
    margin-bottom: 10px;
    svg{
      fill: var(--primary-color1);
    }
  }
  h2{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;

    margin-bottom: 0px;
    @include lg-device(){
      font-size: 48px;
    }
    @include lg-down-device(){
      font-size: 45px;
    }
    @include md-down-device(){
      font-size: 38px;
    }
  }
  p{
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 0;
    @include md-down-device(){
      font-size: 17px;
    }
  }
}
.section-title5{
  h2{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.1; 
    margin-bottom: 0;
    @include xxl-down-device(){
      font-size: 42px;
    }
    @include md-down-device(){
      font-size: 38px;
    }
    span{
      display: block;
      font-weight: 400;
      color: var(--text-color);
    }
  }
  p{
    color: var(--text-color);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 0;
    padding-top: 20px;
  }
  &.two{
    h2{
      font-size: 60px;
      span{
        color: var(--text-color);
        display: contents;
      }
      @include lg-device(){
        font-size: 48px;
      }
      @include lg-down-device(){
        font-size: 45px;
      }
      @include md-down-device(){
        font-size: 38px;
      }
    }
  }
}
.slider-btn-grp{
  display: flex;
  align-items: center;
  gap: 50px;
  .slider-btn{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
    i{
      color: var(--title-color);
      line-height: 1;
      transition: 0.5s;
    }
    &:hover{
      background-color: var(--primary-color1);
      border-color: var(--primary-color1);
      i{
        color: var(--white-color);
      }
    }
    &.swiper-button-disabled{
      opacity: .2;
    }
  }
}
.form-inner{
  line-height: 1;
  label{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 15px;
    font-weight: 600; 
    display: inline-block;
    line-height: 1;
    margin-bottom: 12px; 
  }
  input{
    width: 100%;
    background: var(--white-color);   
    color: var(--title-color);
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 400;
    padding: 10px 20px;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    &::placeholder{
      color: rgba(var(--text-color-opc), 0.4);
    }
    &:focus{
      border-color: var(--primary-color1);
    }
  }
  textarea{
    width: 100%;
    border-radius: 5px;
    background: #fff;   
    color: var(--title-color);
    border: 1px solid #eee;
    outline: none;
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 400;
    padding: 20px 25px;
    min-height: 150px;
    &:focus{
      border-color: var(--primary-color1);
    }
    &::placeholder{
      color: rgba(var(--text-color-opc), 0.4);
    }
  }
}
.form-inner2{
  .form-check{
    min-height: unset;
    margin-bottom: 0;
    .form-check-input{
        cursor: pointer;
        height: 14px;
        width: 14px;
        margin-top: 8px;
        &:focus{
            box-shadow: none;
        }
        &:checked{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
        }
    }
    .form-check-input[type=checkbox]{
        border-radius: unset;
    }
    .form-check-label{
        cursor: pointer;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 400;    
        line-height: 1.2;
    }
  }
}
/*=====================================
  04.Header CSS
========================================*/
@keyframes fade-down {
  0% {
    opacity: 0;
    transform: scaleY(0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
  }
}
@keyframes zoom-In-effect {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}
header.style-1 {
  position: absolute;
  width: 100%;
  z-index: 999;
  transition: all 0.8s ease-out 0s;
  background-color: transparent;
  border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
  &.inner-page{
    position: relative;
    background-color: var(--dark-white-color);
  }
  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--dark-white-color);
    z-index: 999;

    @keyframes smooth-header {
      0% {
        transform: translateY(-30px);
      }

      100% {
        transform: translateY(0px);
      }
    }
  }
  .company-logo{
    @include lg-down-device(){
      padding: 15px 0;
    }
    .logo-dark{
      display: block;
    }
    .logo-light{
      display: none;
    }
  }
  .nav-right {
    gap: 50px;
    @include xl-device(){
      gap: 35px;
    }
    @include xl-down-device() {
      gap: 25px;
    }
    @include lg-down-device() {
      gap: 0px;
    }

    .right-sidebar-and-hotline-area{
      display: flex;
      align-items: center;
      .hotline-area {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 5px 0 0 5px;
        border: 1px solid rgba(var(--title-color-opc), 0.05);
        background: rgba(var(--primary-color1-opc), 0.05);
        padding: 5px 25px 5px 15px;
        border-right: unset;
        .icon{
          background-color: rgba(var(--title-color-opc), 0.1);
          border-radius: 5px;
          padding: 4px 5px;
          line-height: 1;
          svg{
            fill: var(--primary-color2);
          }
        }
        .content {
          position: relative;
          line-height: 1;
          span {
            font-family: var(--font-inter);
            font-weight: 600;
            font-size: 11px;
            line-height: 1;
            color: var(--text-color);
            margin-bottom: 5px;
            display: inline-block;
          }
    
          h6 {
            margin-bottom: 0;
            line-height: 1;
            a {
              font-family: var(--font-hankenGrotesk);
              font-weight: 600;
              font-size: 15px;
              line-height: 20px;
              color: var(--title-color);
              transition: 0.5s;
              &:hover {
                color: var(--primary-color1);
              }
            }
          }
        }
      }
      .sidebar-btn{
        background-color: var(--black-color2);
        padding: 16px 18px;
        line-height: 1;
        border-radius: 0 5px 5px 0;
        // border: 1px solid var(--black-color2);
        cursor: pointer;
        @include xl-down-device(){
          border-radius: 5px;
          padding: 13px 15px;
        }
        @include sm-down-device(){
          padding: 8px;
        }
        svg{
          fill: var(--white-color);
          &.close{
            display: none;
          }
        }
        &.active{
          svg{
              &.close{
                  display: block;
              }
              &.open{
                  display: none;
              }
          } 
        }
      }
    } 
    .sidebar-and-btn{
      display: flex;
      align-items: center;
      gap: 35px;
      @include lg-device(){
        gap: 25px;
      }
      .sidebar-btn{
        cursor: pointer;
        svg{
          fill: var(--text-color);
        }
      }
      .primary-btn2{
        border-radius: 10px;
      }
    }
  }
  .main-menu {
    display: inline-block;
    position: relative;
    >ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 25px;
        @include xxl-down-device(){
          padding: 0 20px;
        }
        @include lg-down-device() {
          padding: 0px 12px;
        }
        &:hover {
          i {
            color: var(--black-color2);
            font-size: 20px;
          }
        }

        @include lg-up-device() {
          &:first-child {
            padding-left: 0;
            a {
              padding-left: 0;
            }
          }
          &:last-child{
            padding-right: 0;
          }
        }

        >a {
          color: var(--text-color);
          display: block;
      
          letter-spacing: 0.4px;
          padding: 25px 0px;
          position: relative;
          font-family: var(--font-inter);
          font-weight: 500;
          font-size: 15px;
          transition: all .5s ease-out 0s;
          position: relative;
          @include xl-device(){
            padding: 22px 0;
          }
          &::after{
            content: "";
            display: block;
            position: absolute;
            bottom: 26px;
            left: 0px;
            width: 100%;
            border-bottom: 1px solid var(--title-color);
            transform-origin: right center;
            transform: scale(0, 1);
            transition: transform 0.5s;
            @include xl-device(){
              bottom: 22px;
            }
            @include lg-down-device(){
              display: none;
            }
          }
        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--title-color);
          font-style: normal;
          position: absolute;
          right: -5px;
          top: 35px;
          z-index: 999;
          cursor: pointer;
          display: none;
          transition: all .5s ease-out 0s;
          opacity: 0;
          @include lg-down-device() {
            opacity: 1;
          }
          &.active {
            color: var(--title-color);
            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--dark-white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          transform-origin: top;

          @include xl-down-device() {
            box-shadow: none;
          }

          >li {

            i {
              position: absolute;
              top: 14px;
              right: 6px;
              display: block;
              color: var(--title-color);
              font-size: 14px;
            }

            .dropdown-icon {
              color: var(--title-color);
              opacity: 1;
              top: 14px;
              font-size: 14px;
              right: 10px;

              @include lg-down-device() {
                right: 0;
                top: 8px;
                font-size: 20px;
              }
            }

            padding: 0;
            display: block;
            position: relative;

            >a {
              display: block;
              padding: 15px 15px;
              color: var(--title-color);
              font-weight: 400;
              font-family: var(--font-hankenGrotesk);
              text-transform: uppercase;
              font-size: 13px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid var(--border-color);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, var(--primary-color1), #fff);
                width: 100%;
                height: 1px;
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                -webkit-transform-origin: left;
                transform-origin: left;
                -webkit-transition: 0.4s ease-in;
                transition: 0.4s ease-in;
                z-index: 1;
              }

              @include lg-down-device {
                border-color: rgba(233, 228, 228, .5);

                &::before {
                  background: linear-gradient(90deg, #ddd, #EFB93F, #ddd);
                }
              }

              &:hover {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

              &.active {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

            }

            &:last-child {
              a {
                border-bottom: none;

                &::before {
                  display: none;
                }

              }
              .sub-menu {
                li{
                  a{
                    border-bottom: 1px solid var(--border-color);
                    &::before {
                      display: block;
                    }
                  }  
                  &:last-child{
                    a {
                      border-bottom: none;
                      &::before {
                        display: none;
                      }
                    }
                  }   
                }
              }
            }

            &:hover {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }
            }

            &.active {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }

            }

            .sub-menu {
              left: 220px;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--dark-white-color);
              box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
              top: 0;

              @include xl-down-device() {
                box-shadow: none;
              }

              &::before {
                display: none;
                visibility: hidden;
              }

              @media only screen and (max-width: 991px) {
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

              >li {
                i {
                  display: block;
                }
              }
            }

            &:hover{
              >.sub-menu{
                @include lg-up-device() {
                  display: block;
                  animation: fade-down 0.45s linear;
                }
              }
            }
          }
        }

        &.menu-item-has-children {
          transition: all .55s ease-in-out;
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 26px;
            right: 6px;
            font-size: 12px;
            color: var(--title-color);
            transition: all .55s ease-in-out;
            @include xl-device(){
              right: 0px;
              top: 23px;
            }
            @include xl-down-device(){
              right: 0;
            }
            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
          &:hover{
            &::after{
              content: "\f286";
            }
          }
        }

        &:hover {
          >ul.sub-menu {
            @include lg-up-device() {
              display: block;
             
              animation: fade-down 0.45s linear;
              z-index: 999;
            }
          }
          @keyframes fade-up {
            0% {
              opacity: 0;
              transform: scaleY(0);
              visibility: hidden;
            }

            100% {
              opacity: 1;
              transform: scaleY(1);
              visibility: visible;
            }
          }
        }

        &:hover {
          >a {
            color: var(--title-color);
            &::after{
              transform-origin: left center;
              transform: scale(1, 1);
            }
          }

          &::after {
            color: var(--title-color);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
        }

        &.active {
          >a {
            color: var(--primary-color1);
            &::before{
              content: '';
              position: absolute;
              bottom: 26px;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: var(--primary-color1);
              @include xl-device(){
                bottom: 22px;
              }
              @include lg-down-device(){
                display: none;
              }
            }
            &::after{
              border-bottom: 1px solid var(--primary-color1);
            }
          }

          &::after {
            color: var(--primary-color1);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
          &.position-inherit{
            >a{
              &::after {
                color: var(--primary-color1);
              }
            }
          }

        }

      }

      li.menu-item-has-children>i {
        display: block;
      }
    }
  }
}
header.style-2 {
  position: absolute;
  width: 100%;
  z-index: 999;
  transition: all 0.8s ease-out 0s;
  background-color: transparent;
  border-bottom: 1px solid rgba(#FFF, 0.1);
  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: #0A0A0A;
    box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
    z-index: 999;

    @keyframes smooth-header {
      0% {
        transform: translateY(-30px);
      }

      100% {
        transform: translateY(0px);
      }

    }


  }
  .company-logo{
    @include lg-down-device(){
      padding: 15px 0;
    }
    .logo-dark{
      display: block;
    }
    .logo-light{
      display: none;
    }
  }
  .nav-right {
    gap: 50px;
    @include xl-device(){
      gap: 35px;
    }
    @include xl-down-device() {
      gap: 25px;
    }
    @include lg-down-device() {
      gap: 0px;
    }
    .right-sidebar-and-hotline-area{
      display: flex;
      align-items: center;
      .hotline-area {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 5px 0 0 5px;
        border: 1px solid rgba(var(--title-color-opc), 0.05);
        background: rgba(var(--primary-color1-opc), 0.05);
        padding: 5px 25px 5px 15px;
        border-right: unset;
        .icon{
          background-color: rgba(var(--title-color-opc), 0.1);
          border-radius: 5px;
          padding: 4px 5px;
          line-height: 1;
          svg{
            fill: var(--primary-color2);
          }
        }
        .content {
          position: relative;
          line-height: 1;
          span {
            font-family: var(--font-inter);
            font-weight: 600;
            font-size: 11px;
            line-height: 1;
            color: var(--text-color);
            margin-bottom: 5px;
            display: inline-block;
          }
    
          h6 {
            margin-bottom: 0;
            line-height: 1;
            a {
              font-family: var(--font-hankenGrotesk);
              font-weight: 600;
              font-size: 15px;
              line-height: 20px;
              color: var(--title-color);
              transition: 0.5s;
              &:hover {
                color: var(--primary-color1);
              }
            }
          }
        }
      }
      .right-sidebar-button{
        background-color: var(--black-color2);
        padding: 16px 18px;
        line-height: 1;
        border-radius: 0 5px 5px 0;
        // border: 1px solid var(--black-color2);
        cursor: pointer;
        @include xl-down-device(){
          border-radius: 5px;
          padding: 13px 15px;
        }
        @include sm-down-device(){
          padding: 8px;
        }
        svg{
          fill: var(--white-color);
        }
      }
    } 
    .sidebar-and-btn{
      display: flex;
      align-items: center;
      gap: 35px;
      @include xl-down-device(){
        gap: 20px;
      }
      .sidebar-btn{
        cursor: pointer;
        svg{
          fill: var(--white-color);
        }
      }
      .primary-btn2{
        background-color: var(--white-color);
        color: var(--dark-title-color);
        &:hover {
          color: var(--white-color);
          background-color: var(--primary-color1);
        }
      }
    }
  }
  .main-menu {
    display: inline-block;
    position: relative;
    >ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 25px;
        @include xxl-down-device(){
          padding: 0 20px;
        }
        @include lg-down-device() {
          padding: 0px 12px;
        }
        &:hover {
          i {
            color: var(--black-color2);
            font-size: 20px;
          }
        }

        @include lg-up-device() {
          &:first-child {
            padding-left: 0;

            a {
              padding-left: 0;
            }
          }
        }

        >a {
          color: var(--white-color);
          display: block;
      
          letter-spacing: 0.4px;
          padding: 25px 0px;
          position: relative;
          font-family: var(--font-inter);
          font-weight: 500;
          font-size: 15px;
          transition: all .5s ease-out 0s;
          position: relative;
          @include xl-device(){
            padding: 22px 0;
          }
          &::after{
            content: "";
            display: block;
            position: absolute;
            bottom: 25px;
            left: 0px;
            width: 100%;
            border-bottom: 1px solid var(--primary-color1);
            transform-origin: right center;
            transform: scale(0, 1);
            transition: transform 0.5s;
            @include xl-device(){
              bottom: 22px;
            }
            @include lg-down-device(){
              display: none;
            }
          }
        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--title-color);
          font-style: normal;
          position: absolute;
          right: -5px;
          top: 35px;
          z-index: 999;
          cursor: pointer;
          display: none;
          transition: all .5s ease-out 0s;
          opacity: 0;
          @include lg-down-device() {
            opacity: 1;
          }
          &.active {
            color: var(--title-color);
            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--dark-white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          transform-origin: top;

          @include xl-down-device() {
            box-shadow: none;
          }

          >li {

            i {
              position: absolute;
              top: 14px;
              right: 6px;
              display: block;
              color: var(--title-color);
              font-size: 14px;
            }

            .dropdown-icon {
              color: var(--title-color);
              opacity: 1;
              top: 14px;
              font-size: 14px;
              right: 10px;

              @include lg-down-device() {
                right: 0;
                top: 8px;
                font-size: 20px;
              }
            }

            padding: 0;
            display: block;
            position: relative;

            >a {
              display: block;
              padding: 15px 15px;
              color: var(--title-color);
              font-weight: 400;
              font-family: var(--font-hankenGrotesk);
              text-transform: uppercase;
              font-size: 13px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid var(--border-color);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, var(--primary-color1), #fff);
                width: 100%;
                height: 1px;
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                -webkit-transform-origin: left;
                transform-origin: left;
                -webkit-transition: 0.4s ease-in;
                transition: 0.4s ease-in;
                z-index: 1;
              }

              @include lg-down-device {
                border-color: rgba(233, 228, 228, .5);

                &::before {
                  background: linear-gradient(90deg, #ddd, #EFB93F, #ddd);
                }
              }

              &:hover {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

              &.active {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

            }

            &:last-child {
              a {
                border-bottom: none;
                &::before {
                  display: none;
                } 
              }
              .sub-menu {
                li{
                  a{
                    border-bottom: 1px solid var(--border-color);
                    &::before {
                      display: block;
                    }
                  }  
                  &:last-child{
                    a {
                      border-bottom: none;
                      &::before {
                        display: none;
                      }
                    }
                  }   
                }
              }
            }

            &:hover {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }
            }

            &.active {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }

            }

            .sub-menu {
              left: 220px;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--dark-white-color);
              box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
              top: 0;

              @include xl-down-device() {
                box-shadow: none;
              }

              &::before {
                display: none;
                visibility: hidden;
              }

              @media only screen and (max-width: 991px) {
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

              >li {
                i {
                  display: block;
                }
              }
            }
            &:hover{
              >.sub-menu{
                @include lg-up-device() {
                  display: block;
                  animation: fade-down 0.45s linear;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
          }
        }

        &.menu-item-has-children {
          transition: all .55s ease-in-out;
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 26px;
            right: 6px;
            font-size: 12px;
            color: var(--white-color);
            transition: all .55s ease-in-out;
            @include xl-device(){
              right: 0px;
              top: 23px;
            }
            @include xl-down-device(){
              right: 0;
            }
            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
          &:hover{
            &::after{
              content: "\f286";
            }
          }
        }

        &:hover {
          >ul.sub-menu {
            @include lg-up-device() {
              display: block;
              animation: fade-down 0.45s linear;
            }
          }
          @keyframes fade-up {
            0% {
              opacity: 0;
              transform: scaleY(0);
              visibility: hidden;
            }

            100% {
              opacity: 1;
              transform: scaleY(1);
              visibility: visible;
            }
          }
        }

        &:hover {
          >a {
            color: var(--primary-color1);
            &::after{
              transform-origin: left center;
              transform: scale(1, 1);
            }
          }

          &::after {
            color: var(--primary-color1);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
        }

        &.active {
          >a {
            color: var(--primary-color1);
            &::before{
              content: '';
              position: absolute;
              bottom: 25px;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: var(--primary-color1);
              @include xl-device(){
                bottom: 22px;
              }
              @include lg-down-device(){
                display: none;
              }
            }
          }

          &::after {
            color: var(--primary-color1);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
          &.position-inherit{
            >a{
              &::after {
                color: var(--primary-color1);
              }
            }
          }

        }

      }

      li.menu-item-has-children>i {
        display: block;
      }
    }
  }
}
header.style-3 {
  position: absolute;
  width: 100%;
  z-index: 999;
  transition: all 0.8s ease-out 0s;
  background-color: transparent;
  border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
  padding: 0 5%;
  @include xxl-down-device(){
    padding: 0 2%;
  }
  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--dark-white-color);
    box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
    z-index: 999;

    @keyframes smooth-header {
      0% {
        transform: translateY(-30px);
      }

      100% {
        transform: translateY(0px);
      }

    }


  }
  .company-logo{
    @include lg-down-device(){
      padding: 15px 0;
    }
    .logo-dark{
      display: block;
    }
    .logo-light{
      display: none;
    }
  }

  .nav-right {
    gap: 50px;
    @include xl-device(){
      gap: 35px;
    }
    @include xl-down-device() {
      gap: 25px;
    }
    @include lg-down-device() {
      gap: 0px;
    }
    .sidebar-and-btn{
      display: flex;
      align-items: center;
      gap: 35px;
      @include xxl-down-device(){
        gap: 25px;
      }
      .hotline-area {
        display: flex;
        align-items: center;
        gap: 8px;
        .icon{
          background-color: rgba(var(--title-color-opc), 0.1);
          border-radius: 5px;
          padding: 4px 5px;
          line-height: 1;
          svg{
            fill: var(--primary-color2);
          }
        }
        .content {
          position: relative;
          line-height: 1;
          span {
            font-family: var(--font-inter);
            font-weight: 600;
            font-size: 11px;
            line-height: 1;
            color: var(--primary-color1);
            margin-bottom: 5px;
            display: inline-block;
          }
    
          h6 {
            margin-bottom: 0;
            line-height: 1;
            a {
              font-family: var(--font-hankenGrotesk);
              font-weight: 600;
              font-size: 15px;
              line-height: 1;
              color: var(--title-color);
              transition: 0.5s;
              &:hover {
                color: var(--primary-color1);
              }
            }
          }
        }
      }
      .sidebar-btn{
        background-color: var(--black-color2);
        padding: 12px 14px;
        line-height: 1;
        border-radius: 5px;
        cursor: pointer;
        svg{
          fill: var(--white-color);
        }
      }
      .primary-btn2{
        border-radius: 10px;
      }
    }
  }

  .main-menu {
    display: inline-block;
    position: relative;
    
    >ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 25px;
        @include xxl-down-device(){
          padding: 0 20px;
        }
        @include lg-down-device() {
          padding: 0px 12px;
        }
        &:hover {
          i {
            color: var(--black-color2);
            font-size: 20px;
          }
        }

        @include lg-up-device() {
          &:first-child {
            padding-left: 0;

            a {
              padding-left: 0;
            }
          }
        }

        >a {
          color: var(--text-color);
          display: block;
      
          letter-spacing: 0.4px;
          padding: 25px 0px;
          position: relative;
          font-family: var(--font-inter);
          font-weight: 500;
          font-size: 15px;
          transition: all .5s ease-out 0s;
          position: relative;
          @include xl-device(){
            padding: 22px 0;
          }
          &::after{
            content: "";
            display: block;
            position: absolute;
            bottom: 30px;
            left: 1px;
            width: 100%;
            border-bottom: 1px solid var(--primary-color1);
            transform-origin: right center;
            transform: scale(0, 1);
            transition: transform 0.5s;
            @include xl-device(){
              bottom: 22px;
            }
            @include lg-down-device(){
              display: none;
            }
          }
        }

        i {
          font-size: 20px;
          text-align: center;
          color: var(--title-color);
          font-style: normal;
          position: absolute;
          right: -5px;
          top: 35px;
          z-index: 999;
          cursor: pointer;
          display: none;
          transition: all .5s ease-out 0s;
          opacity: 0;
          @include lg-down-device() {
            opacity: 1;
          }
          &.active {
            color: var(--title-color);
            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--dark-white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          transform-origin: top;

          @include xl-down-device() {
            box-shadow: none;
          }
          >li {
            i {
              position: absolute;
              top: 14px;
              right: 6px;
              display: block;
              color: var(--title-color);
              font-size: 14px;
            }

            .dropdown-icon {
              color: var(--title-color);
              opacity: 1;
              top: 14px;
              font-size: 14px;
              right: 10px;

              @include lg-down-device() {
                right: 0;
                top: 8px;
                font-size: 20px;
              }
            }

            padding: 0;
            display: block;
            position: relative;

            >a {
              display: block;
              padding: 15px 15px;
              color: var(--title-color);
              font-weight: 400;
              font-family: var(--font-hankenGrotesk);
              text-transform: uppercase;
              font-size: 13px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid var(--border-color);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, var(--primary-color1), #fff);
                width: 100%;
                height: 1px;
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                -webkit-transform-origin: left;
                transform-origin: left;
                -webkit-transition: 0.4s ease-in;
                transition: 0.4s ease-in;
                z-index: 1;
              }

              @include lg-down-device {
                border-color: rgba(233, 228, 228, .5);

                &::before {
                  background: linear-gradient(90deg, #ddd, #EFB93F, #ddd);
                }
              }

              &:hover {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

              &.active {
                color: var(--primary-color1);

                &::before {
                  -webkit-transform: scale(1);
                  transform: scale(1);
                }
              }

            }

            &:last-child {
              a {
                border-bottom: none;

                &::before {
                  display: none;
                }

              }
              .sub-menu {
                li{
                  a{
                    border-bottom: 1px solid var(--border-color);
                    &::before {
                      display: block;
                    }
                  }  
                  &:last-child{
                    a {
                      border-bottom: none;
                      &::before {
                        display: none;
                      }
                    }
                  }   
                }
              }
            }

            &:hover {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }
            }

            &.active {
              >a {
                color: var(--primary-color1);
              }

              .dropdown-icon {
                color: var(--primary-color1);
              }

            }

            .sub-menu {
              left: 220px;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--dark-white-color);
              box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
              top: 0;

              @include xl-down-device() {
                box-shadow: none;
              }

              &::before {
                display: none;
                visibility: hidden;
              }

              @media only screen and (max-width: 991px) {
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

              >li {
                i {
                  display: block;
                }
              }
            }
            &:hover{
              >.sub-menu{
                @include lg-up-device() {
                  display: block;
                  animation: fade-down 0.45s linear;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
          }
        }

        &.menu-item-has-children {
          transition: all .55s ease-in-out;
          &::after {
            content: "\F123";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 25px;
            right: 5px;
            font-size: 14px;
            color: var(--title-color);
            transition: all .55s ease-in-out;
            @include xl-device(){
              right: 0px;
              top: 23px;
            }
            @include xl-down-device(){
              right: 0;
            }
            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
          &:hover{
            &::after{
              transform: rotate(45deg);
              color: var(--primary-color1);
            }
          }
        }

        &:hover {
          >ul.sub-menu {
            @include lg-up-device() {
              display: block;
              animation: fade-down 0.45s linear;
            }
          }
          @keyframes fade-up {
            0% {
              opacity: 0;
              transform: scaleY(0);
              visibility: hidden;
            }

            100% {
              opacity: 1;
              transform: scaleY(1);
              visibility: visible;
            }
          }
        }

        &:hover {
          >a {
            color: var(--primary-color1);
            &::after{
              transform-origin: left center;
              transform: scale(1, 1);
            }
          }

          &::after {
            color: var(--title-color);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
        }

        &.active {
          >a {
            color: var(--primary-color1);
          }

          &::after {
            color: var(--primary-color1);
          }

          .dropdown-icon2 {
            color: var(--primary-color1);
          }
          

        }

      }

      li.menu-item-has-children>i {
        display: block;
      }
    }
  }
}
.sidebar-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0px 0 70px;
  z-index: 9992;
  overflow-y: auto;
  transition: all 0.3s;
  background-color: var(--dark-white-color);
  height: 100%;
  transform-origin: top;
  transform: translateY(-120%);
  transition: transform 0.6s ease-in;
  @include xxl-down-device(){
    padding: 0px 0 70px;
  }
  &.active{
    transform: translateY(0);
  }
  .sidebar-menu-top-area{
    padding: 25px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 80px;
    .sidebar-menu-logo{
      .logo-light{
        display: none;
      }
    }
    .sidebar-menu-close{
      border: 1px solid var(--primary-color2);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.5s;
      svg{
        fill: var(--primary-color2);
        transition: 0.5s;
      }
      @include sm-down-device(){
        width: 36px;
        height: 36px;
        svg{
          width: 18px;
          height: 18px;
        }
      }
      &:hover{
        background-color: #FF4820;
        border-color: #FF4820;
        svg{
          fill: var(--white-color);
        }
      }
    }
  }
  .sidebar-contact{
    .getin-touch-area{
        h4{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 28px;
          font-weight: 800; 
          margin-bottom: 35px;
          @include lg-down-device(){
            margin-bottom: 30px;
          }
          @include md-down-device(){
            margin-bottom: 25px;
          }
          svg{
            fill: var(--title-color);
            margin-left: 5px;
          }   
        }
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          .single-contact{
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 40px;
            &:last-child{
                margin-bottom: 0;
            }
            .icon{
                height: 40px;
                min-width: 40px;
                max-width: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.35s;
                border: 1px solid var(--title-color);
                svg{
                    transition: 0.35s;
                    fill: var(--title-color);
                }
            }
            .contact{
                span{
                  color: var(--text-color);
                  font-family: var(--font-inter);
                  font-size: 16px;
                  font-weight: 600;
                }
                h6{
                  margin-bottom: 0;
                  a{
                    font-family: var(--font-inter);
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 1.2;
                    color: var(--title-color);
                    transition: 0.35s;
                    @include sm-down-device(){
                      font-size: 16px;
                    }
                    &:hover{
                        color: var(--primary-color1);
                    }
                    }
                }
            }
            &:hover{
                .icon{
                    background-color: var(--title-color);
                    svg{
                        fill: var(--dark-white-color);
                    }
                }
            }
          }
        }
    }
    .social-link-area{
        h6{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 18px;
          font-weight: 800;
          margin-bottom: 0;
          border-bottom: 1px solid var(--border-color);
          padding-bottom: 10px;
          margin-bottom: 30px;
          svg{
              fill: var(--title-color);
              margin-left: 5px;
          }
        }
        .social-area{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin: 0;
            padding: 0;
            list-style: none;
            li{
              a{
                border: 1px solid var(--border-color); 
                border-radius: 50px;
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--title-color);
                font-family: var(--font-inter);
                font-size: 15px;
                font-weight: 600;
                line-height: 1;
                padding: 7px 15px;
                transition: 0.35s;
                  i{
                      color: var(--text-color);
                      line-height: 1;
                      transition: 0.35s;
                  }
                  &:hover{
                      background-color: var(--primary-color1);       
                      border-color: var(--primary-color1);
                      color: var(--white-color);
                      i{
                          color: var(--white-color);
                      }
                  }
              }
            }
        }
    }
  }
  .sidebar-menu-wrap{
    border-left: 1px solid var(--border-color);
    margin-right: 50px;
    @include xl-device(){
      margin-right: 30px;
    }
    @include xl-down-device(){
      margin-right: 0px;
    }
    @include lg-down-device(){
      margin-right: 0;
    }
    .main-menu{
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-y: auto;
        border-top: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);

        &::-webkit-scrollbar {
            width: 0;
        }
        &::-webkit-scrollbar-track {
            background: var(--title-color); 
        }
        &::-webkit-scrollbar-thumb {
            background: var(--primary-color)
          }
        >li{
            position: relative;
            >a{
                border-bottom: 1px solid var(--border-color);
                color: var(--title-color);
                font-family: var(--font-hankenGrotesk);
                text-transform: uppercase;
                font-size: 30px;
                font-weight: 700;
                display: block;
                line-height: 1;
                padding: 25px;
                transform: translateY(var(--y)) translateZ(0);
                transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
                @include md-down-device(){
                  padding: 20px;
                }
                @include sm-down-device(){
                  padding: 15px 20px;
                  font-size: 22px;
                }
                .menu-text {
                    display: flex;
                    overflow: hidden;
                    text-shadow: 0 30px 0 var(--title-color);
                    span {
                        display: block;
                        backface-visibility: hidden;
                        transition: transform 0.4s ease, -webkit-transform 0.4s ease;
                        transform: translateY(var(--m)) translateZ(0);
                        &:nth-child(1) {
                            transition-delay: 0.05s;
                        }
                        &:nth-child(2) {
                            transition-delay: 0.1s;
                        }
                        &:nth-child(3) {
                            transition-delay: 0.15s;
                        }
                        &:nth-child(4) {
                            transition-delay: 0.2s;
                        }
                        &:nth-child(5) {
                            transition-delay: 0.25s;
                        }
                        &:nth-child(6) {
                            transition-delay: 0.3s;
                        }
                        &:nth-child(7) {
                            transition-delay: 0.35s;
                        }
                        &:nth-child(8) {
                            transition-delay: 0.4s;
                        }
                        &:nth-child(9) {
                            transition-delay: 0.45s;
                        }
                        &:nth-child(10) {
                            transition-delay: 0.5s;
                        }
                        &:nth-child(11) {
                            transition-delay: 0.55s;
                        }
                        &:nth-child(12) {
                            transition-delay: 0.6s;
                        }
                        &:nth-child(13) {
                            transition-delay: 0.65s;
                        }
                        &:nth-child(14) {
                            transition-delay: 0.7s;
                        }
                        &:nth-child(15) {
                            transition-delay: 0.75s;
                        }
                        &:nth-child(16) {
                            transition-delay: 0.8s;
                        }
                        &:nth-child(17) {
                            transition-delay: 0.85s;
                        }
                        &:nth-child(18) {
                            transition-delay: 0.9s;
                        }
                        &:nth-child(19) {
                            transition-delay: 0.95s;
                        }
                        &:nth-child(20) {
                            transition-delay: 1s;
                        }
                        &:nth-child(21) {
                            transition-delay: 1.05s;
                        }
                        &:nth-child(22) {
                            transition-delay: 1.1s;
                        }
                        &:nth-child(23) {
                            transition-delay: 1.15s;
                        }
                        &:nth-child(24) {
                            transition-delay: 1.2s;
                        }
                        &:nth-child(25) {
                            transition-delay: 1.25s;
                        }
                        &:nth-child(26) {
                            transition-delay: 1.3s;
                        }
                        &:nth-child(27) {
                            transition-delay: 1.35s;
                        }
                        &:nth-child(28) {
                            transition-delay: 1.4s;
                        }
                        &:nth-child(29) {
                            transition-delay: 1.45s;
                        }
                        &:nth-child(30) {
                            transition-delay: 1.5s;
                        }
                        &:nth-child(31) {
                            transition-delay: 1.55s;
                        }
                        &:nth-child(32) {
                            transition-delay: 1.6s;
                        }
                        &:nth-child(33) {
                            transition-delay: 1.65s;
                        }
                        &:nth-child(34) {
                            transition-delay: 1.70s;
                        }
                        &:nth-child(35) {
                            transition-delay: 1.75s;
                        }
                        &:nth-child(36) {
                            transition-delay: 1.80s;
                        }
                        &:nth-child(37) {
                            transition-delay: 1.85s;
                        }
                        &:nth-child(38) {
                            transition-delay: 1.90s;
                        }
                        &:nth-child(39) {
                            transition-delay: 1.95s;
                        }
                        &:nth-child(40) {
                            transition-delay: 2s;
                        }
                    }
                }
                &:hover{
                    --y: -0px;
                    span{
                        --m: calc(30px * -1);        
                    }
                }
            }
            
            .dropdown-icon2{
                position: absolute;
                right: 25px;
                top: 20px;
                width: 40px;
                height: 40px;
                border-radius: 5px;                       
                background-color: var(--light-black-color);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                i{
                    color: var(--white-color);      
                    font-size: 28px;
                }
                @include md-down-device(){
                  right: 21px;
                }
                @include sm-down-device(){
                  top: 10px;
                  right: 20px;
                  width: 35px;
                  height: 35px;
                }
                &.active{
                    i{
                        &::before{
                            content: "\f2ea";
                        }
                    }
                }
                &.two{
                    height: unset;
                    width: unset;
                    background-color: transparent;
                    top: -7px;
                    i{
                        color: var(--title-color);
                    }
                }
            }
            .submenu-list{
                margin: 0;
                padding: 0;
                list-style: none;
                padding-left: 40px;
                position: static;
                opacity: 1;
                visibility: visible;
                transition: none;
                display: none;
                padding-top: 35px;
                padding-bottom: 35px;
                padding-left: 70px;
                border-bottom: 1px solid var(--border-color);
                @include xxl-down-device(){
                    padding-left: 40px;
                    padding-top: 30px;
                    padding-bottom: 30px;
                }
                // @include xxl-down-device(){
                //     padding-left: 20px;
                // }
                &.active{
                    display: block;
                }
                li{
                    position: relative;
                    margin-bottom: 15px;
                    &:last-child{
                        margin-bottom: 0;
                    }
                    &::after{
                        content: '';
                        height: 10px;
                        width: 10px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        position: absolute;
                        left: -20px;
                        border: 1px solid var(--text-color);
                        top: 10px;
                    }

                    a{
                        color: var(--text-color);
                        font-family: var(--font-hankenGrotesk);
                        font-size: 28px;
                        font-weight: 600;
                        text-transform: uppercase;
                        transition: 0.35s;
                        @include xl-down-device(){
                          font-size: 25px;
                        }
                        @include sm-down-device(){
                          font-size: 20px;
                        }
                        svg{
                            fill: var(--text-color);
                            margin-left: 5px;
                            transition: 0.35s;
                        }
                        &:hover{
                            color: var(--title-color);
                            svg{
                                fill: var(--primary-color1);
                            }
                        }
                    }
                    .submenu-list{
                        padding-top: 20px;
                        padding-bottom: 7px;
                        padding-left: 20px;
                        border-bottom: none;
                        li{
                            margin-bottom: 10px;
                            &::after{
                                display: none;
                            }
                            a{
                                font-size: 15px;
                                svg{
                                    fill: var(--text-color);
                                    margin-left: 5px;
                                    transition: 0.35s;
                                }
                                &:hover{
                                    color: var(--title-color);
                                    svg{
                                        fill: var(--primary-color);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
}

/*=====================================
  05.Home1 Banner section
========================================*/
.home1-banner-section{
  background: linear-gradient(180deg, rgba(48, 103, 255, 0.08) 0%, rgba(48, 103, 255, 0.00) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 175px 0 0 16.5%;
  overflow: hidden;
  @include eighteen-down-device(){
    padding: 175px 0 0 12%;
  }
  @include seventeen-down-device(){
    padding: 175px 0 0 9.5%;
  }
  @include xxl-device(){
    padding: 160px 0 0 4%;
  }
  @include xxl-down-device(){
    padding: 150px 0 0 3.5%;
  }
  @include lg-down-device(){
    padding: 170px 30px 100px 30px;
  }
  @include md-down-device(){
    padding: 150px 30px 80px 30px;
  }
  @include sm-down-device(){
    padding: 140px 15px 70px 15px;
  }
  .banner-content{
    max-width: 750px;
    width: 100%;
    >span{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 5px;
      background-color: rgba(var(--title-color-opc), 0.05);
      border-radius: 5px;
      margin-bottom: 20px;
      @include xl-device(){
        margin-bottom: 15px;
      }
      @include lg-device(){
        margin-bottom: 10px;
      }
      @include sm-down-device(){
        margin-bottom: 10px;
      }
      svg{
        fill: rgba(#3067FF, 0.3);
      }
    }
    h1{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 65px;
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 25px;
      @include xxl-device(){
        font-size: 58px;
      }
      @include xxl-down-device(){
        font-size: 50px;
        margin-bottom: 15px;
      }
      @include lg-device(){
        font-size: 40px;
      }
      @include sm-down-device(){
        font-size: 38px;
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 45px;
      @include lg-device(){
        font-size: 15px;
        margin-bottom: 25px;
      }
      @include lg-down-device(){
        margin-bottom: 35px;
      }
      @include sm-down-device(){
        font-size: 15px;
        margin-bottom: 20px;
      }
    }
    .banner-content-bottom{
      display: flex;
      align-items: center;
      gap: 40px;
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      .rating-area{
        display: flex;
        align-items: center;
        gap: 10px;
        .review{
          span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 5px;
            display: block;
          }
          .logo-dark{
            display: block;
          }
          .logo-light{
            display: none;
          }
        }
        .rating{
           .star{
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
            margin-top: 5px;
            line-height: 1;
            li{
              i{
                color: #E62415;
              }
            }
           }
           span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
           }
        }
      }
    }
  }
  .banner-img-wrap{
    img{
      border-radius: 5px 0 0 0;
      object-fit: cover;
      @include xl-device(){
        min-height: 500px;
      }
      @include lg-device(){
        min-height: 420px;
      }
    }
    @include lg-down-device(){
      display: none;
    }
  }
  .video-area{
    .badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      border-radius: 100%;
      animation: identifier 20s linear infinite;
      position: absolute;
      bottom: 0;
      left: 55%;
      z-index: 1;
      background-color: var(--dark-white-color);
      padding: 5px;
      @include seventeen-down-device(){
        left: 52%;
      }
      @include xxl-device(){
        left: 48%;
      }
      @include xxl-down-device(){
        left: 48%;
      }
      @include xl-down-device(){
        width: 110px;
        height: 110px;
        left: 49%;
      }
      @include lg-down-device(){
        display: none;
      }
      .play{
        margin: 0;
        border-radius: 50%;
        animation: identifier 20s linear infinite;
        animation-direction: reverse;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        .play-icon{
          text-align: center;
          i{
            font-size: 45px;
            color: rgba(var(--title-color-opc), 0.5);
          }
        }
      }

      .badge__char {
        display: block;
        position: absolute;
        top: 0;
        left: calc(50% - 10px / 2);
        height: calc(130px / 2);
        width: 10px;
        background-repeat: round;
        text-align: center;
        text-transform: uppercase;
        line-height: 1;
        font-weight: 500;
        font-size: 13px;
        color: var(--title-color);
        font-family: var(--font-inter);
        transform-origin: bottom center;
        transform: rotate(var(--char-rotate));
        @include xl-down-device(){
          height: calc(110px / 2);
        }
      }
      
      @keyframes identifier {
        0% {
          transform: rotate(0deg);
        }
      
        to {
          transform: rotate(1turn);
        }
      }
    }
  }
}
.home1-banner-bottom{
    overflow: hidden;
    display: flex;
    align-items: center;
    &.two{
      transform: rotate(-2deg) translateY(-13px);
      margin-top: -30px;
      @include xxl-device(){
        transform: rotate(-2deg) translateY(-24px);
      }
      @include xxl-down-device(){
        transform: rotate(-2deg) translateY(-13px);
        margin-top: -19px;
      }
      @include lg-down-device(){
        transform: rotate(0) translateY(0);
        margin-top: -19px;
      }
    }
  .marquee_text{
    background: #1E1F1F; 
    height: 70px; 
    display: flex;
    align-items: center;
  }
  .js-marquee{
      display: flex;
      align-items: center;
      gap: 25px;
  }
  h6{
      color: rgba(#FFF, 0.7);
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      text-transform: uppercase;     
      margin-bottom: 0;
  }
  svg{
    fill: rgba(#3067FF, 0.7);
  }
}
/*=====================================
  06.Home1 About section
========================================*/
.feature-card{
  .icon{
    margin-bottom: 30px;
    transition: transform 0.45s ease;
    @include lg-device(){
      margin-bottom: 20px;
    }
    @include sm-down-device(){
      margin-bottom: 20px;
    }
    svg{
      fill: var(--text-color);
    }
  }
  .content{
    h4{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 27px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 15px;
      @include sm-down-device(){
        font-size: 22px;
        margin-bottom: 10px;
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;
      margin-bottom: 0;
      @include sm-down-device(){
        font-size: 15px;
      }
    }
  }
  &:hover{
    .icon{
      animation: fadeInUp 0.7s linear;
    }
  }
  &.two{
    position: relative;
    z-index: 1;
    &::before{
      content: '\F138';
      font-family: bootstrap-icons!important;
      font-size: 23px;
      position: absolute;
      left: 50%;
      top: 38px;
      z-index: -1;
      color: #3F444B;
    }
    &::after{
      content: '';
      height: 1px;
      width: 86%;
      background-color: #3F444B;
      opacity: .2;
      position: absolute;
      left: 76px;
      top: 52px;
      z-index: -1;
    }
    .icon{
      position: relative;
      display: inline-block;
      .icon-bg{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        svg{
          fill: rgba(var(--primary-color1-opc), 0.1);
        }
      }
    }
    .content{
      ul{
        padding-top: 35px;
        @include sm-down-device(){
          padding-top: 25px;
        }
        li{
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 500;
          line-height: 1.1;
          letter-spacing: 0.3px;
          margin-bottom: 20px;
          &:last-child{
            margin-bottom: 0;
          }
          svg{
            fill: var(--text-color);
          }
        }
      }
    }
    &:hover{
      .icon{
        animation: unset;
        >svg{
          animation: zoomIn 0.75s linear;
        }
      }
    }
  }
}
.home1-about-section{
  .about-content{
    max-width: 910px;
    width: 100%;
    @include lg-device(){
      max-width: 650px;
    }
    .about-section-title{
      >span{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.36px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 5px;
        background-color: rgba(var(--title-color-opc), 0.05);
        border-radius: 5px;
        margin-bottom: 20px;
        @include md-down-device(){
          margin-bottom: 10px;
        }
        svg{
          fill: rgba(#3067FF, 0.3);
        }
      }
      h2{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 50px;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 0;
        @include xl-down-device(){
          font-size: 38px;
        }
        @include md-down-device(){
          font-size: 32px;
        }
        @include sm-down-device(){
          font-size: 28px;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        padding-top: 20px;
        margin-bottom: 0;
        @include lg-device(){
          font-size: 15px;
        }
        @include md-down-device(){
          padding-top: 15px;
        }
      }
    }
  }
  .about-countdown-area{
    padding-top: 30px;
    ul{
      @include lg-down-device(){
        display: flex;
        align-items: center;
        gap: 25px;
        flex-wrap: wrap;
      }
      .single-countdown{
        display: flex;
        gap: 30px;
        margin-bottom: 50px;
        @include xxl-down-device(){
          margin-bottom: 40px;
          gap: 25px;
        }
        @include lg-down-device(){
          margin-bottom: 0;
          gap: 20px;
        }
        .icon{
          margin-top: 2px;
          svg{
            fill: var(--text-color);
          }
        }
        .content{
          padding-bottom: 35px;
          border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
          @include lg-down-device(){
            padding-bottom: 0;
            border-bottom: unset;
          }
          .number{
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            line-height: 1;
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 10px;
            h5{
              font-size: 40px;
              font-weight: 800;
              margin-bottom: 0;
              line-height: 1;
              @include lg-down-device(){
                font-size: 35px;
              }
            }
            span{
              font-size: 27px;
              font-weight: 500;
              @include lg-down-device(){
                font-size: 22px;
              }
            }
          }
          p{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 0;
            @include lg-down-device(){
              font-size: 14px;
            }
          }
        }
        &:last-child{
          margin-bottom: 0;
          .content{
            border-bottom: unset;
            padding-bottom: 0;
          }
        }
      }
    }
  }
  .about-bottom-area{
    padding: 0 12.5%;
    @include eighteen-down-device(){
      padding: 0 8%;
    }
    @include seventeen-down-device(){
      padding: 0 6%;
    }
    @include xxl-device(){
      padding: 0 2%;
    }
    @include xxl-down-device(){
      padding: 0 2%;
    }
    .feature-card{
      .content{
        h4{
          @include xxl-device(){
            font-size: 25px;
          }
          @include xl-device(){
            font-size: 24px;
          }
          @include lg-device(){
            font-size: 22px;
            margin-bottom: 10px;
          }
        }
        p{
          @include lg-device(){
            font-size: 15px;
          }
        }
      }
    }
  }
}
/*=====================================
  07.Home1 Solution section
========================================*/
.service-card{
  background-color: var(--dark-white-color);
  border-radius: 5px;
  padding: 35px 30px;
  transition: 0.5s;
  @include xxl-down-device(){
    padding: 35px 25px;
  }
  @include lg-device(){
    padding: 25px 20px;
  }
  @include sm-down-device(){
    padding: 25px 20px;
  }
  .content{
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(#0B0C0C, 0.1);
    margin-bottom: 20px;
    h4{
      margin-bottom: 15px;
      a{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
    
        transition: 0.5s;
        @include xxl-down-device(){
          font-size: 25px;
        }
        @include lg-device(){
          font-size: 22px;
        }
        @include sm-down-device(){
          font-size: 22px;
        }
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    svg{
      fill: var(--title-color);
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 0;
      padding-top: 15px;
      @include lg-device(){
        font-size: 15px;
      }
      @include sm-down-device(){
        font-size: 15px;
      }
    }
  }
  .explore-btn{
    color: var(--title-color);
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.36px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding-bottom: 2px;
    background: linear-gradient(to bottom, #0B0C0C 0%, #0B0C0C 98%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: left 100%;
    transition: background-size 0.75s;
    svg{
      fill: var(--title-color) ;
      transition: 0.75s;
    }
    &:hover{
      color: var(--primary-color1);
      background-size: 0 1px;
      background-position: 0% 100%;
      svg{
        fill: var(--primary-color1);
        transform: rotate(0deg);
      }
    }
  }
  &:hover{
    transform: translateY(-5px);
  }
  &.two{
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
  }
}
.home1-solution-section{
  background-image: url(../img/home1/solution-bg.png), linear-gradient(180deg, #EDF1FC 0%, rgba(201, 215, 255, 0.13) 100%);
  background-color: var(--dark-white-color);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 0;
  @include xl-down-device(){
    padding: 90px 0;
  }
  @include lg-down-device(){
    padding: 70px 0; 
  }
}
/*=====================================
  08.Home1 Portfolio section
========================================*/
.eg-card{
  position: relative;
  padding: 0;
  height: 100%;
  transition: .5s;
  .card-content{
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 1.13%, rgba(0, 0, 0, 0.00) 55.54%);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: unset;
      padding: 40px 40px;
      display: flex ;
      justify-content: end;
      flex-direction: column;
      transition: .5s;
      @include xxl-down-device(){
          padding: 35px 20px;
      }
      @include lg-down-device(){
          padding: 35px 20px;
      }
      @include md-down-device(){
          padding: 30px 20px;
      }
      .view-btn{
        position: absolute;
        right: 85px;
        top: 85px;
        transition: .5s;
        opacity: 0;
      }
      .catgory-and-title{
          >a{
            border-radius: 15px;
            border: 1px solid var(--white-color);
            background: transparent;
            display: inline-block;
            color: var(--white-color);
            text-align: center;
            font-family: var(--font-inter);
            font-size: 12px;
            font-weight: 500;
            padding: 5px 18px;
            line-height: 1;
            margin-bottom: 13px;
          }
          h5{
              margin-bottom: 0;
              a{
                  color: var(--white-color);
                  font-family: var(--font-hankenGrotesk);
                  font-size: 24px;
                  font-weight: 500;    
                  transition: 0.35s;
                  &:hover{
                      color: #CACACA;
                  }
              }
          }
      }
  }
  &:hover{
    .card-content{
        .view-btn{
            right: 35px;
            top: 35px;
            opacity: 1;
        }  
    }  
  }
}
.portfolio-section{
  .portfolio-bottom-area{
    padding: 0 11%;
    margin-top: -220px;
    @include eighteen-down-device(){
      padding: 0 6.5%;
    }
    @include seventeen-down-device(){
      padding: 0 5%;
    }
    @include xxl-device(){
      padding: 0 10px;
    }
    @include xxl-down-device(){
      padding: 0 10px;
    }
    @include xl-down-device(){
      padding: 0;
      margin-top: -150px;
    }
    @include sm-down-device(){
      display: none;
    }
    .pagination-area{
      background: #EBF2F6;
      height: 380px;
      display: flex;
      justify-content: center;
      align-items: end;
      padding: 0 80px;
      @include xxl-device(){
        padding: 0 30px;
      }
      @include xxl-down-device(){
        padding: 0 30px;
      }
      @include xl-down-device(){
        height: 280px;
        padding: 0 15px;
      }
      .swiper-pagination{
        padding: 40px 0 50px;
        border-top: 1px solid var(--white-color);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        z-index: 9;
        bottom: unset;
        gap: 12px;
        @include xl-down-device(){
          padding: 30px 0;
        }
        .swiper-pagination-bullet{
            height: 16px;
            width: 16px;
            background-color: transparent;
            border: 1px solid #596977;
            opacity: 1;
            position: relative;
            &::after{
                content: '';
                height: 8px;
                width: 8px;
                border-radius: 50%;
                background-color: #596977;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            &.swiper-pagination-bullet-active{
                border-color: var(--primary-color1);
                height: 20px;
                width: 20px;
                &::after{
                    width: 10px;
                    height: 10px;
                    background-color: var(--primary-color1);
                }
            }
        }
      }
    }
  }
}
/*=====================================
  09.Home1 Process section
========================================*/
.home1-process-section{
  .process-slider{
    padding: 10px;
    margin: -10px;
  }
}
/*=====================================
  10.Home1 Banner With Case Study Slider section
========================================*/
.case-study-card{
  background-color: var(--black-color3);
  border-radius: 10px;
  padding: 30px;
  @include xl-device(){
    padding: 30px 20px;
  }
  @include lg-down-device(){
    padding: 25px 15px;
  }
  .card-img{
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    img{
      border-radius: 10px;
      transition: all 0.5s ease-out;
    }
    &::after{
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 1;
    }
  }
  .card-content{
    >a{
      color: var(--primary-color1);
      font-family: var(--font-inter);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 10px;
    }
    h4{
      margin-bottom: 20px;
      @include lg-down-device(){
        margin-bottom: 15px;
      }
      @include sm-down-device(){
        margin-bottom: 10px;
      }
      a{
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 28px;
        font-weight: 600;
        line-height: 1.4;
    
        transition: 0.5s;
        @include seventeen-down-device(){
          font-size: 26px;
        }
        @include xl-device(){
          font-size: 24px;
        }
        @include lg-down-device(){
          font-size: 22px;
        }
        @include sm-down-device(){
          font-size: 20px;
        }
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    p{
      color: rgba(#fff, 0.7);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;    
      margin-bottom: 30px;
      @include sm-down-device(){
        font-size: 15px;
      }
    }
    .learn-more-btn{
      color: var(--white-color);
      font-family: var(--font-inter);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      text-transform: uppercase;
      padding-bottom: 2px;
      background: linear-gradient(to bottom, #fff 0%, #fff 98%);
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: left 100%;
      transition: background-size 0.75s;
      svg{
        fill: var(--white-color) ;
        transition: 0.75s;
      }
      &:hover{
        color: var(--primary-color1);
        background-size: 0 1px;
        background-position: 0% 100%;
        svg{
          fill: var(--primary-color1);
        }
      }
    }
  }
  &:hover{
    .card-img{
      img{
        transform: scale(1.1);
      }
      &::after{
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
      }
    }
  }
  &.style-2{
    background-color: var(--dark-white-color);
    border: 1px solid rgba(var(--title-color-opc), 0.08);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
    padding: 30px 20px;
    @include sm-down-device(){
      padding: 20px 15px;
    }
    .card-content{
      h4{
        a{
          color: var(--title-color);
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      p{
        color: rgba(var(--text-color-opc), 0.7);
      }
      .learn-more-btn{
        color: var(--title-color);
        background: linear-gradient(to bottom, #0B0C0C 0%, #0B0C0C 98%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: left 100%;
        transition: background-size 0.75s;
        svg{
          fill: var(--title-color) ;
          transition: 0.75s;
        }
        &:hover{
          color: var(--primary-color1);
          background-size: 0 1px;
          background-position: 0% 100%;
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
  }
}
.banner-with-case-study-slider-section{
  overflow: hidden;
  .banner-area{
    position: relative;
    height: 100%;
    @include lg-down-device(){
      display: none;
    }
    img{
      height: 100%;
      object-fit: cover;
    }
    .banner-content{
      background: linear-gradient(181deg, rgba(11, 12, 12, 0.63) 13.52%, rgba(11, 12, 12, 0.50) 25.19%, rgba(11, 12, 12, 0.50) 56.23%, rgba(11, 12, 12, 0.63) 82.81%);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 70px 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      @include xxl-device(){
        padding: 70px 30px;
      }
      @include xxl-down-device(){
        padding: 60px 20px;
      }
      .banner-content-bottom{
        p{
          color: var(--white-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
          margin-bottom: 30px;
        }
      }
      .section-title{
        h2{
          @include xxl-device(){
            font-size: 45px;
          }
          @include xxl-down-device(){
            font-size: 38px;
          }
        }
      }
    }
  }
  .case-study-slider-area{
    background-color: var(--light-black-color);
    padding: 90px 115px;
    @include seventeen-down-device(){
      padding: 90px 80px;
    }
    @include xxl-device(){
      padding: 80px 50px;
    }
    @include xxl-down-device(){
      padding: 50px 30px;
    }
    @include lg-device(){
      padding: 40px 30px;
    }
    @include sm-down-device(){
      padding: 40px 20px;
    }
    .slider-btn-grp{
      max-width: 530px;
      width: 100%;
      justify-content: space-between;
      .slider-btn{
        border-color: rgba(#fff, 0.5);
        i{
          color: rgba(#fff, 0.5);
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          i{
            color: var(--white-color);
          }
        }
      }
    }
  }
}
/*=====================================
  11.Home1 Approach section
========================================*/
.home1-approach-section{
  .approach-area{
    padding: 0 13%;
    @include eighteen-down-device(){
      padding: 0 8%;
    }
    @include seventeen-down-device(){
      padding: 0 6%;
    }
    @include xxl-device(){
      padding: 0 20px;
    }
    @include xxl-down-device(){
      padding: 0 10px;
    }
    .divider{
      position: relative;
      &::before{
        content: '';
        position: absolute;
        top: 38.5%;
        left: 50%;
        transform: translateX(-50%);
        width: 98%;
        height: 2px;
        background-color: var(--border-color);
        border-radius: 10px;
        @include xl-device(){
          top: 39.2%;
        }
        @include xl-down-device(){
          display: none;
        }
      }
    }
    .single-approach{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img-area{
        margin-bottom: 15px;
        img{
          width: 180px;
          height: 180px;
          border-radius: 50%;
        }
      }
      .dot{
        margin-bottom: 30px;
        line-height: 1;
        span{
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: var(--title-color);
          display: inline-flex;
          position: relative;
          z-index: 1;
        }
      }
      .approach-content-wrap{
        border-radius: 5px;
        background-image: linear-gradient(180deg, rgba(237, 241, 252, 0.38) 0%, rgba(201, 215, 255, 0.13) 100%);
        background-color: var(--dark-white-color);
        padding: 30px 25px;
        position: relative;
        @include xl-device(){
          padding: 25px 15px;
        }
        @include xl-down-device(){
          padding: 25px 20px;
        }
        &::before{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 70px;
          border-radius: 0px 0px 5px 5px;
          background: linear-gradient(180deg, rgba(237, 241, 252, 0.00) 0%, rgba(237, 241, 252, 0.76) 26.46%, #EDF1FC 45.7%);
          z-index: 1;
        }
        &::after{
          content: '';
          position: absolute;
          width: 2px;
          height: 38px;
          background-color: var(--border-color);
          left: 50%;
          transform: translateX(-50%);
          top: -38px;
        }
        .scroll-content-area{
          overflow: hidden;
          .content{
            max-height: 260px;
            transform: translateY(0);
            transition: 5s; 
            span{
              color: var(--primary-color1);
              font-family: var(--font-hankenGrotesk);
              font-size: 13px;
              font-weight: 500;
              line-height: 1;
              text-transform: uppercase;
              display: inline-block;
              margin-bottom: 10px;
            }
            h5{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 23px;
              font-weight: 700;
              line-height: 1.2;
          
              margin-bottom: 10px;
              @include xl-device(){
                font-size: 20px;
              }
              @include lg-device(){
                font-size: 22px;
              }
              @include md-down-device(){
                font-size: 20px;
              }
              @include sm-down-device(){
                font-size: 22px;
              }
            }
            p{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 13px;
              font-weight: 400;
              line-height: 1.8;
              margin-bottom: 15px;
            }
            ul{
              li{
                color: var(--text-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 14px;
                font-weight: 400;
                line-height: 1.8;
                margin-bottom: 10px;
                padding-left: 12px;
                position: relative;
                &:last-child{
                  margin-bottom: 0;
                }
                strong{
                  color: var(--title-color);
                  font-weight: 600;
                }
                &::before{
                  content: '';
                  position: absolute;
                  top: 8px;
                  left: 0;
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background-color: var(--title-color);
                }
              }
            }
          }
        }
        &:hover{
          .scrollTextAni {
            transform: translateY(-200px);
          }   
        }
      }
    }
  }
}
/*=====================================
  12.Home1 Logo section
========================================*/
.logo-section{
  overflow: hidden;
  padding: 0 4%;
  .logo-wrap{
    .logo-title{
      text-align: center;
      margin-bottom: 45px;
      @include xxl-down-device(){
        margin-bottom: 35px;
      }
      @include lg-down-device(){
        margin-bottom: 25px;
      }
      h6{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.36px;
        text-transform: uppercase;
        margin-bottom: 0;
      }
    }
    .logo-area{
      overflow: hidden;
      .js-marquee-wrapper{
          display: flex;
          align-items: center;
          gap: 110px;
          @include fifteen-down-device(){
            gap: 70px;
          }
          @include sm-down-device(){
            gap: 50px;
          }
          .js-marquee{
              display: flex;
              align-items: center;
              gap: 110px;
              margin-right: 0 !important;
              @include fifteen-down-device(){
                gap: 70px;
              }
              @include sm-down-device(){
                gap: 50px;
              }
          }
      }
    }
  }
}
/*=====================================
  13.Home1 Testimonial section
========================================*/
.testimonial-card-wrapper{
  .testimonial-card{
    background-color: var(--dark-white-color);
    border-radius: 10px;
    padding: 40px 35px;
    position: relative;
    margin-bottom: 45px;
    @include sm-down-device(){
      padding: 30px 20px;
    }
    .logo-and-rating{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px; 
      .logo{
        .light{
          display: block;
        }
        .dark{
          display: none;
        }
      }
      .rating{
        display: flex;
        align-items: center;
        gap: 8px;
        li{
          i{
            color: #FFC107;
          }
        }
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.9;
      letter-spacing: 0.03em;
      margin-bottom: 35px;
      @include lg-down-device(){
        font-size: 16px;
      }
      @include sm-down-device(){
        font-size: 15px;
      }
    }
    .author-and-desig{
      h5{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 23px;
        font-weight: 600;
        line-height: 1;
        @include sm-down-device(){
          font-size: 20px;
        }
      }
      p{
        color: rgba(var(--text-color-opc), 0.5);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.32px;
        margin-bottom: 0;
      }
    }
    &::after{
      content: "";
      width: 40px;
      height: 40px;
      background: var(--dark-white-color);
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      bottom: -20px;
      opacity: 1;
      transition: 0.35s;
    }
  }
  .author-area{
    display: flex;
    align-items: center;
    justify-content: center;
    .author-img{
      transition: 0.35s;
      opacity: 1;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      img{
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }
    }
  }
}
.home1-testimonial-section{
  background-image: url(../img/home1/testimonial-bg.png), linear-gradient(180deg, #D3E1EF 0%, #D3E1EF 100%); 
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 100px 7%;
  @include seventeen-down-device(){
    padding: 80px 4%;
  }
  @include xxl-device(){
    padding: 80px 2%;
  }
  @include xxl-down-device(){
    padding: 80px 2%;
  }
  @include lg-down-device(){
    padding: 70px 20px 70px 20px;
  }
  @include sm-down-device(){
    padding: 70px 10px 70px 10px;
  }
  .testimonial-content{
    .rating-area{
      display: flex;
      align-items: center;
      gap: 60px;
      padding-top: 50px;
      @include xxl-down-device(){
        gap: 30px;
      }
      @include lg-device(){
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 35px;
      }
      @include lg-down-device(){
        padding-top: 30px;
      }
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      >li{
        position: relative;
        &::before{
          content: '';
          position: absolute;
          top: 50%;
          left: -30px;
          transform: translateY(-50%);
          background-color: rgba(var(--primary-color1-opc), 0.2);
          width: 1px;
          height: 35px;
          @include xl-device(){
            left: -15px;
          }
          @include lg-device(){
            display: none;
          }
          @include sm-device(){
            left: -15px;
          }
          @include sm-down-device(){
            display: none;
          }
        }
        &:first-child{
          &::before{
            display: none;
          }
        }
        .single-rating{
          display: flex;
          align-items: center;
          gap: 8px;
          .review{
            line-height: 1;
            span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              line-height: 1;
              margin-bottom: 8px;
              display: block;
            }
            .logo-dark{
              display: block;
            }
            .logo-light{
              display: none;
            }
            img{
              width: 64px;
            }
          }
          .rating{
            line-height: 1;
             .star{
              display: flex;
              align-items: center;
              gap: 4px;
              margin-bottom: 8px;
              line-height: 1;
              li{
                i{
                  color: #E62415;
                  font-size: 12px;
                }
              }
             }
             span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
             }
          }
          &.google{
            .rating{
              .star{
                li{
                  i{
                    color: #FFC107;
                  }
                }
              }
            }
          }
        }
      }
    }
    .section-title{
      h2{
        @include xxl-device(){
          font-size: 45px;
        }
      }
    }
  }
  .tetimonial-slider-wrapper{
    .swiper-slide-active{
      span{
          animation: fadeInDown 1.7s;
      }
      p{
          animation: fadeInDown 1.7s;
      }
      .author-and-logo-area{
          animation: fadeInUp 1.7s;
      }
    }
  }
  &.two{
    padding: 120px 7%;
    @include xxl-down-device(){
      padding: 80px 2%;
    }
    @include lg-down-device(){
      padding: 70px 20px;
    }
    @include md-down-device(){
      padding: 70px 10px;
    }
    @include sm-down-device(){
      padding: 70px 0px;
    }
  }
}
/*=====================================
  14.Home1 Blog section
========================================*/
.blog-card{
  .blog-card-img-wrap{
    position: relative;
    overflow: hidden;
    .card-img{
      position: relative;
      overflow: hidden;
      display: block;
      transition: all 0.5s ease-out;
      img{
        transition: all 0.5s ease-out;
        @include lg-down-device(){
          width: 100%;
        }
      }
      &::after{
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 1;
      }
    }
    .date{
      color: var(--white-color);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 10px 16px;
      background-color: var(--primary-color2);
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
      svg{
        fill: var(--white-color);
      }
    }
  }
  .card-content{
    padding-top: 25px;
    .blog-meta{
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      .category{ 
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        li{
          position: relative;
          line-height: 1;
          a{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            text-decoration: underline;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
      .blog-comment{
        position: relative;
        padding-left: 20px;
        line-height: 1;
        &::before{
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 5px;
          background-color: rgba(var(--title-color-opc), 0.2);
          width: 1px;
          height: 12px;
        }
        span{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 13px;
          font-weight: 500;
          line-height: 1;
          position: relative;
        }
      }
    }
    h4{
      margin-bottom: 20px;
      a{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 25px;
        font-weight: 600;
        line-height: 1.4;
    
        transition: 0.5s;
        @include lg-device(){
          font-size: 22px;
        }
        @include sm-down-device(){
          font-size: 22px;
        }
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .read-more-btn{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      text-decoration: underline;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: 0.5s;
      svg{
        fill: var(--text-color);
        transition: 0.5s;
      }
      &:hover{
        color: var(--primary-color1);
        svg{
          transform: rotate(45deg);
          fill: var(--primary-color1);
        }
      }
    }
  }
  &:hover{
    .blog-card-img-wrap{
      .card-img{
        img{
          transform: scale(1.1);
        }
        &::after{
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }
    }
  }
  &.style-2{
    border-radius: 10px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    .blog-card-img-wrap{
      border-radius: 10px 10px 0 0;
      .card-img{
        img{
          border-radius: 10px 10px 0 0;
        }
      }
      .date{
        position: absolute;
        top: 6px;
        left: 6px;
        text-align: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(#0B0C0C, 0.4);
        backdrop-filter: blur(22.5px);
        transition: 0.5s;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        @include sm-down-device(){
          width: 65px;
          height: 65px;
        }
        span{
          color: var(--white-color);
          text-align: center;
          font-family: var(--font-inter);
          font-size: 11px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.22px;
      
          display: block;
          strong{
            font-size: 22px;
            font-weight: 700;
            font-family: var(--font-hankenGrotesk);
            margin-bottom: 5px;
            display: block;
            @include sm-down-device(){
              font-size: 20px;
            }
          }
        }
      }
    }
    .card-content{
      padding: 30px 25px;
      @include xl-down-device(){
        padding: 25px 20px;
      }
      h4{
        a{
          @include xl-device(){
            font-size: 23px;
          }
          @include xl-down-device(){
            font-size: 22px;
          }
          @include lg-device(){
            font-size: 20px;
          }
        }
      }
    }
    &.two{
      border: none;
      .card-content{
        padding: 30px 0 0;
        @include xl-down-device(){
          padding: 25px 0px 0;
        }
      } 
    }
    &:hover{
      .blog-card-img-wrap{
        .date{
          background-color: var(--primary-color1);
        }
      }
    }
  }
}
/*=====================================
  15.Home1 Contact section
========================================*/
.contact-section{
  background-color: #fefcf1;
  padding: 100px 0;
  margin-top: 230px;
  @include lg-device(){
    padding: 90px 0;
  }
  @include lg-down-device(){
    padding: 80px 0;
    margin-top: 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  .contact-content{
    .contact-area{
      margin-bottom: 80px;
      padding-top: 80px;
      @include xxl-down-device(){
        padding-top: 50px;
        margin-bottom: 60px;
      }
      @include sm-down-device(){
        padding-top: 30px;
        margin-bottom: 40px;
      }
      .hotline-area{
        display: flex;
        align-items: center;
        gap: 20px;
        .icon{
          position: relative;
          svg{
            fill: var(--primary-color1);
          }
          &::after{
            content: "";
            height: 35px;
            width: 1px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -10px;
            background-color: rgba(#fff, 0.15);
          }
        }
        .content{
          span{
            color: #CACACA;
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            display: inline-block;
            margin-bottom: 7px;
          }
          h6{
            margin-bottom: 0;
            a{
              color: var(--white-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 18px;
              font-weight: 600;
              line-height: 1;
            }
          }
        }
      }
    }
    .social-area{
      h6{
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.2;
        text-decoration: underline;
        margin-bottom: 20px;
      }
      .social-list{
        display: flex;
        align-items: center;
        gap: 30px;
        li{
          display: block;
          text-align: center;
          a{
            i{
              color: var(--white-color);
              transition: 0.5s;
            }
            svg{
              fill: var(--white-color);
              transition: 0.5s;
            }
            span{
              color: var(--white-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 12px;
              font-weight: 400;
              line-height: 1;
              display: block;
              padding-top: 2px;
              transition: 0.5s;
            }
          }
          &:hover{
            a{
              i{
                color: var(--primary-color1);
              }
              svg{
                fill: var(--primary-color1);
              }
              span{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
  }
  .contact-form-wrap{
    padding-left: 70px;
    margin-top: -220px;
    @include xxl-down-device(){
      padding-left: 40px;
    }
    @include xl-down-device(){
      padding-left: 0;
    }
    @include lg-down-device(){
      margin-top: 0;
    }
    .contact-form-area{
      background-image: linear-gradient(180deg, #EDF1FC 0%, rgba(201, 215, 255, 0.13) 100%);
      background-color: var(--dark-white-color);
      border-radius: 10px;
      padding: 50px 45px;
      @include xxl-down-device(){
        padding: 45px 30px;
      }
      @include sm-down-device(){
        padding: 30px 20px;
      }
      h3{
        font-size: 25px;
        font-family: var(--font-hankenGrotesk);
        font-weight: 700;
        margin-bottom: 35px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
        @include sm-down-device(){
          font-size: 22px;
        }
      }
    }
  }
  &.two{
    margin-top: 120px;
    @include lg-down-device(){
      margin-top: 0;
    }
  }
}
/*=====================================
  16.Home1 Footer section
========================================*/
.footer-section{
  background-image: linear-gradient(180deg, rgba(48, 103, 255, 0.00) 74.5%, rgba(48, 103, 255, 0.13) 100%);
  background-color: #FDF9F8;
  .footer-top{
    padding: 40px 0;
    .footer-widget{
      .widget-title{
        margin-bottom: 25px;
        h4{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 30px;
          font-weight: 800;
          line-height: 1;
          letter-spacing: 0.9px;
          margin-bottom: 0;
          position: relative;
          padding-bottom: 10px;
          &::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 107px;
            height: 2px;
            border-radius: 10px;
            background: linear-gradient(90deg, #0B0C0C 0.01%, rgba(11, 12, 12, 0.00) 102.8%);
          }
        }
        &.two{
          margin-bottom: 0;
          >span{
            color: var(--primary-color1);
            font-family: var(--font-inter);
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.36px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            @include md-down-device(){
              margin-bottom: 10px;
            }
            svg{
              fill: rgba(var(--text-color-opc), 0.3);
            }
          }
          h3{
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 35px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 0;
            @include xl-down-device(){
              font-size: 30px;
            }
          } 
        }
      }
      .content{
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.8;
          padding-top: 20px;
          margin-bottom: 0;
          @include xl-down-device(){
            font-size: 15px;
            padding-top: 15px;
          }
        }
      }
      .menu-container{
        display: flex;
        gap: 30px;
        @include xl-device(){
          gap: 20px;
        }
        @include xl-down-device(){
          gap: 15px;
        }
        .widget-list{
          li{
            margin-bottom: 20px;
            line-height: 1;
            transition: .5s;
            position: relative;
            transform: translateX(0);
            @include xl-down-device(){
              margin-bottom: 15px;
            }
            &:last-child{
              margin-bottom: 0;
            }
            a{
              color: rgba(var(--title-color-opc), 0.7);
              font-family: var(--font-hankenGrotesk);
              font-size: 17px;
              font-weight: 500;
              line-height: 1.3; 
              letter-spacing: 0.34px;
              transition: 0.5s;
              @include xl-device(){
                font-size: 15px;
              }
              @include xl-down-device(){
                font-size: 15px;
              }
              @include sm-down-device(){
                font-size: 14px;
              }
              &:hover{
                color: var(--primary-color1);
              }
            }
            &::after{
              content: "";
              width: 10px;
              height: 1px;
              background-color: var(--primary-color1);
              position: absolute;
              left: -15px;
              top: 50%;
              transform: translateY(-50%);
              opacity: 0;
              transition: .35s;
            }
            &:hover{
              transform: translateX(10px);
              &::after{
                opacity: 1;
              }
            }
          }
        }
      }
      .rating-area{
        display: flex;
        align-items: center;
        gap: 60px;
        padding-top: 35px;
        @include xxl-down-device(){
          gap: 30px;
        }
        @include lg-device(){
          flex-wrap: wrap;
          gap: 20px;
        }
        @include sm-down-device(){
          flex-wrap: wrap;
          gap: 20px;
        }
        >li{
          .single-rating{
            display: flex;
            align-items: center;
            gap: 8px;
            .review{
              line-height: 1;
              span{
                color: var(--text-color);
                font-family: var(--font-inter);
                font-size: 14px;
                font-weight: 600;
                line-height: 1;
                margin-bottom: 8px;
                display: block;
              }
              img{
                width: 64px;
              }
              .logo-dark{
                display: block;
              }
              .logo-light{
                display: none;
              }
            }
            .rating{
              line-height: 1;
               .star{
                display: flex;
                align-items: center;
                gap: 4px;
                margin-bottom: 8px;
                line-height: 1;
                li{
                  i{
                    color: #E62415;
                    font-size: 12px;
                  }
                }
               }
               span{
                color: var(--text-color);
                font-family: var(--font-inter);
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
               }
            }
            &.google{
              .rating{
                .star{
                  li{
                    i{
                      color: #FFC107;
                    }
                  }
                }
              }
            }
          }
          position: relative;
          &::before{
            content: '';
            position: absolute;
            top: 50%;
            left: -30px;
            transform: translateY(-50%);
            background-color: rgba(var(--primary-color1-opc), 0.2);
            width: 1px;
            height: 35px;
            @include xl-device(){
              left: -15px;
            }
            @include lg-device(){
              display: none;
            }
            @include sm-device(){
              left: -15px;
            }
            @include sm-down-device(){
              display: none;
            }
          }
          &:first-child{
            &::before{
              display: none;
            }
          }
        }
      }
      .footer-logo{
        .logo-dark{
          display: block;
        }
        .logo-light{
          display: none;
        }
      }
      .subscribe-area{
        h4{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 25px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 0.9px;
          margin-bottom: 30px;
        }
        .subscribe-form-wrap{
          .subscribe-form{
            border-radius: 5px;
            background: var(--dark-white-color);
            display: flex;
            align-items: center;
            max-width: 335px;
            width: 100%;
            height: 60px;
            padding: 10px 10px 10px 20px;
            margin-bottom: 15px;
            input{
              width: 100%;
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 500;
              background: transparent;
              border: none;
              line-height: 1;
            }
            button{
              border: none;
              height: 36px;
              min-width: 36px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: var(--primary-color1);
              svg{
                fill: var(--white-color);
              }
            }
          }
        }
      }
      .social-area{
        h6{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 18px;
          font-weight: 400;
          line-height: 1.2;
          text-decoration: underline;
          margin-bottom: 20px;
        }
        .social-list{
          display: flex;
          align-items: center;
          gap: 30px;
          li{
            display: block;
            text-align: center;
            a{
              i{
                color: var(--text-color);
                transition: 0.5s;
              }
              svg{
                fill: var(--text-color);
                transition: 0.5s;
              }
              span{
                color: var(--text-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 12px;
                font-weight: 400;
                line-height: 1;
                display: block;
                padding-top: 2px;
                transition: 0.5s;
              }
            }
            &:hover{
              a{
                i{
                  color: var(--primary-color1);
                }
                svg{
                  fill: var(--primary-color1);
                }
                span{
                  color: var(--primary-color1);
                }
              }
            }
          }
        }
      }
    }
    .footer-logo-area{
      position: relative;
      .logo-bg{
        .light{
          display: block;
        }
        .dark{
          display: none;
        }
      }
      .logo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        img{
          @include lg-device(){
            width: 85px;
          }
        }
        .light{
          display: block;
        }
        .dark{
          display: none;
        }
      }
    }
  }
  .contact-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    .hotline-area{
      display: flex;
      align-items: center;
      gap: 10px;
      .icon{
        position: relative;
        svg{
          fill: var(--primary-color1);
        } 
      }
      .content{
        span{
          color: var(--primary-color1);
          font-family: var(--font-inter);
          font-size: 13px;
          font-weight: 400;
          line-height: 1;
          display: inline-block;
          margin-bottom: 7px;
        }
        h6{
          margin-bottom: 0;
          a{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.54px;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  .footer-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    border-top: 1px solid rgba(var(--title-color-opc), 0.1);
    @include lg-down-device(){
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .copyright-area{
      p{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 0;
        a{
          color: var(--text-color);
          font-weight: 700;
          transition: 0.5s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
    .footer-bottom-right{
      ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 45px;
        flex-wrap: wrap;
        line-height: 1;
        @include lg-down-device(){
          gap: 30px;
        }
        @include sm-down-device(){
          gap: 20px;
          justify-content: center;
        }
        li{
          a{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 15px;
            font-weight: 500;
            line-height: 1; 
            letter-spacing: 0.3px;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  &.style-2{
    background-image: linear-gradient(180deg, rgba(169, 213, 255, 0.00) 74.5%, rgba(169, 213, 255, 0.13) 100%);
    background-color: #D8ECFF;
    .footer-top{
      padding: 100px 0;
      @include xl-down-device(){
        padding: 90px 0;
      }
      @include md-down-device(){
        padding: 70px 0;
      }
      .footer-widget{
        .widget-title{
          h4{
            font-size: 25px;
            font-weight: 600;
            @include lg-device(){
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
        .rating-area{
          @include md-down-device(){
            flex-wrap: wrap;
            gap: 20px;
          }
          .single-rating{
            &::before{
              @include md-down-device(){
                display: none;
              }
            }
          }
        }
      }
    }
  }
  &.style-3{
    background-image: url(../img/home3/home3-footer-bg.png), linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    .footer-top{
      padding: 100px 0;
      @include xl-down-device(){
        padding: 90px 0;
      }
      @include md-down-device(){
        padding: 70px 0;
      }
      .footer-widget{
        .widget-title{
          h4{
            color: var(--white-color);
            font-size: 25px;
            font-weight: 600;
            @include lg-device(){
              font-size: 20px;
              font-weight: 700;
            }
            &::after{
              background: linear-gradient(90deg, #0B0C0C 0.01%, #FFF 0.02%, rgba(255, 255, 255, 0.00) 102.8%);
              opacity: 0.4;
            }
          }
        }
        .content{
          p{
            color: rgba(#fff, 0.6);
          }
        }
        .menu-container{
          .widget-list{
            li{
              a{
                color: rgba(#fff, 0.6);
                &:hover{
                  color: var(--primary-color1);
                }
              }
            }
          }
        }
        .rating-area{
          @include md-down-device(){
            flex-wrap: wrap;
            gap: 20px;
          }
          .single-rating{
            .review, .rating{
              span{
                color: rgba(#fff, 0.5);
                font-weight: 300;
              }
            }
            &::before{
              @include md-down-device(){
                display: none;
              }
            }
          }
        }
        .subscribe-area{
          h4{
            color: var(--white-color);
          }
          .subscribe-form-wrap{
            .form-check{
              .form-check-label{
                color: rgba(#fff, 0.6);
              }
            }
          }
        }
        .social-area{
          h6{
            color: var(--white-color);
          }
          .social-list{
            li{
              a{
                i{
                  color: var(--white-color);
                }
                svg{
                  fill: var(--white-color);
                }
                span{
                  color: var(--white-color);
                }
              }
              &:hover{
                a{
                  i{
                    color: var(--primary-color1);
                  }
                  svg{
                    fill: var(--primary-color1);
                  }
                  span{
                    color: var(--primary-color1);
                  }
                }
              }
            }
          }
        }
      }
    }
    .contact-area{
      .hotline-area{
        .content{
          h6{
            a{
              color: rgba(#fff, 0.6);
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
    .footer-bottom{
      border-top: 1px solid rgba(#fff, 0.1);
      .copyright-area{
        p{
          color: rgba(#fff, 0.6);
          a{
            color: rgba(#fff, 0.6);
          }
        }
      }
      .footer-bottom-right{
        ul{
          li{
            a{
              color: rgba(#fff, 0.6);
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
  }
}
/*=====================================
  17.Home2 Banner section
========================================*/
.home2-banner-section{
  background-image: url(../img/home2/home2-banner-bg.png), linear-gradient(180deg, rgba(212, 185, 244, 0.42) 0%, rgba(212, 185, 244, 0.00) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 175px 0 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 0% 100%);
  overflow: hidden;
  @include xxl-down-device(){
    padding: 160px 0 0 0;
  }
  @include lg-down-device(){
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  @include sm-down-device(){
    padding: 140px 0 0 0;
  }
  .banner-content{
    text-align: center;
    max-width: 1130px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 70px;
    @include xl-down-device(){
      margin-bottom: 60px;
    }
    @include md-down-device(){
      margin-bottom: 40px;
    }
    @include sm-down-device(){
      margin-bottom: 30px;
    }
    >span{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 10px;
      background-color: #DBD4FF;
      border-radius: 100px;
      margin-bottom: 20px;
      @include xl-device(){
        margin-bottom: 15px;
      }
      @include lg-device(){
        margin-bottom: 10px;
      }
      @include sm-down-device(){
        margin-bottom: 10px;
      }
      svg{
        fill: var(--primary-color1);
      }
    }
    h1{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 70px;
      font-weight: 900;
      line-height: 1.2;
  
      margin-bottom: 40px;
      span{
        text-decoration: underline;
        color: var(--text-color);
    
      }
      @include lg-device(){
        font-size: 65px;
        margin-bottom: 30px;
      }
      @include lg-down-device(){
        font-size: 50px;
        margin-bottom: 30px;
      }
      @include md-down-device(){
        font-size: 45px;
        margin-bottom: 20px;
      }
      @include sm-down-device(){
        font-size: 40px;
        margin-bottom: 20px;
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      margin-bottom: 0;
      @include md-down-device(){
        font-size: 15px;
      }
    }
  }
  &::before{
    content: url(../img/home2/vector/home2-banner-vector1.svg);
    position: absolute;
    top: 30%;
    left: 70px;
    @include seventeen-down-device(){
      left: 40px;
    }
    @include xxl-device(){
      left: 10px;
    }
    @include xxl-down-device(){
      top: 40%;
      left: 0;
    }
    @include xl-down-device(){
      display: none;
    }
  }
  &::after{
    content: url(../img/home2/vector/home2-banner-vector2.svg);
    position: absolute;
    top: 32%;
    right: 0;
    @include xxl-down-device(){
      top: 45%;
    }
    @include xl-down-device(){
      display: none;
    }
  }
  .banner-img{
    .light-img{
      display: block;
    }
    .dark-img{
      display: none;
    }
  }
}
/*=====================================
  18.Home2 About section
========================================*/
.home2-about-section{
  .about-content-wrap{
    .about-title{
      text-align: center;
      margin-bottom: 65px;
      @include lg-device(){
        margin-bottom: 55px;
      }
      @include lg-down-device(){
        margin-bottom: 50px;
      }
      @include md-down-device(){
        margin-bottom: 40px;
      }
      >span{
        color: var(--primary-color1);
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.36px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        border: 1px solid var(--border-color);
        background: rgba(233, 229, 255, 0.60);
        border-radius: 5px;
        margin-bottom: 5px;
        @include xl-device(){
          margin-bottom: 15px;
        }
        @include lg-device(){
          margin-bottom: 10px;
        }
        @include sm-down-device(){
          margin-bottom: 10px;
        }
        svg{
          fill: rgba(var(--text-color-opc), 0.4);
        }
      }
      h2{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 60px;
        font-style: normal;
        font-weight: 800;
        line-height: 1.2; /* 120% */
        @include lg-device(){
          font-size: 48px;
        }
        @include lg-down-device(){
          font-size: 45px;
        }
        @include md-down-device(){
          font-size: 38px;
        }
        span{
          color: var(--text-color);
          text-decoration: underline;
        }
        a{
          color: var(--text-color);
          text-decoration: underline;
          transition: 0.5s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
    .about-countdown-wrap{
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
      margin-bottom: 65px;
      @include lg-device(){
        margin-bottom: 55px;
      }
      @include lg-down-device(){
        margin-bottom: 50px;
      }
      @include md-down-device(){
        margin-bottom: 40px;
      }
      .single-countdown{
        text-align: center;
        .countdown-area{
          position: relative;
          display: inline-block;
          margin-bottom: 10px;
          svg{
            fill: none;
            stroke: var(--primary-color1);
            path{
              &:last-child{
                stroke: rgba(var(--primary-color1-opc), 0.15);
              }
            }
          }
          .number-and-arrow{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .number{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              line-height: 1;
              display: flex;
              align-items: baseline;
              gap: 2px;
              margin-bottom: 10px;
              h5{
                font-size: 45px;
                font-weight: 800;
                margin-bottom: 0;
                line-height: 1;
                @include xl-down-device(){
                  font-size: 40px;
                }
                @include md-down-device(){
                  font-size: 35px;
                }
              }
              span{
                font-size: 45px;
                font-weight: 800;
                @include xl-down-device(){
                  font-size: 40px;
                }
                @include md-down-device(){
                  font-size: 35px;
                }
              }
            }
            .arrow{
              line-height: 1;
              svg{
                fill: var(--primary-color1);
              }
            }
          }
        }
        .content{
          p{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 20px;
            font-weight: 500;
            line-height: 1.6;
        
            margin-bottom: 0;
          }
        }
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      text-align: center;
      margin-bottom: 0; 
    }
  }
  .about-feature-card{
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(var(--title-color-opc), 0.05);
    background: #EDF8EB;
    padding: 30px;
    transition: 0.5s;
    @include lg-device(){
      padding: 30px 20px;
    }
    @include sm-down-device(){
      padding: 30px 20px;
    }
    .icon{
      margin-bottom: 20px;
      svg{
        fill: var(--text-color);
      }
    }
    .content{
      h3{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    
        margin-bottom: 20px;
        @include lg-device(){
          font-size: 28px;
          margin-bottom: 15px;
        }
        @include sm-down-device(){
          font-size: 28px;
          margin-bottom: 15px;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        margin-bottom: 0;
      }
    }
    &.two{
      background: #F5F3EF;
    }
    &.three{
      background: #F2F2F8;
    }
    &:hover{
      transform: translateY(-10px);
      .icon{
        animation: zoomIn 0.7s linear;
      }
    }
  }
}
/*=====================================
  19.Home2 Service section
========================================*/
.home2-service-section{
  background: #F4F5ED;
  padding: 100px 0;
  overflow: hidden;
  @include lg-device(){
    padding: 90px 0;
  }
  @include lg-down-device(){
    padding: 70px 0;
  }
  .sevices-wrap {
      .single-services {
        transition: 0.5s;
        border: 1px solid rgba(var(--title-color-opc), .08);
        border-bottom: none;
        position: relative;
        display: grid;
        grid-template-columns: 10% 25% 45% 20%;
        z-index: 1;
        @include xxl-down-device() {
          grid-template-columns: 13% 30% 37% 20%;
        }
        @include md-down-device() {
          padding: 20px;
          display: block;
        }
        &:last-child{
          border-bottom: 1px solid rgba(var(--title-color-opc), .08);
        }
        .icon {
          padding: 30px;
          border-right: 1px solid rgba(var(--title-color-opc), .08);
          transition: 0.5s;
          display: flex;
          align-items: center;
          justify-content: center;
  
          @include md-down-device() {
            padding: 0;
            margin-bottom: 15px;
            justify-content: start;
            border-right: unset;
          }
  
          svg {
            fill: var(--text-color);
            transition: 0.5s;
            min-width: 50px;
            max-width: 50px;
          }
        }
        h5 {
          padding: 30px 15px 30px 30px;
          max-width: 320px;
          width: 100%;
          margin-bottom: 0;
          @include lg-down-device(){
            padding: 30px 15px;
          }
          @include md-down-device() {
            margin-bottom: 10px;
            padding: 0;
          }
  
          a {
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 0;
            transition: 0.5s;
            @include lg-down-device(){
              font-size: 22px;
            }
            span {
              color: var(--text-color);
              font-size: 18px;
              font-weight: 500;
              margin-bottom: 0;
              transition: 0.5s;
              display: block;
              @include lg-down-device(){
                font-size: 17px;
              }
            }
            @include md-down-device() {
              font-size: 20px;
  
              span {
                font-size: 16px;
              }
            }
          }
        }
        .services-img {
          width: 260px;
          height: 320px;
          position: absolute;
          top: -150px;
          left: 0;
          opacity: 0;
          z-index: -1;
          transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
          border-radius: 5px; 
          overflow: hidden;
          pointer-events: none;
  
          @include md-down-device() {
            display: none;
            visibility: hidden;
          }
        }
        .content{
          padding: 30px 0;
          max-width: 560px;
          width: 100%;
          @include md-down-device() {
            margin-bottom: 10px;
            line-height: 26px;
            padding: 0;
          }
          ul{
            columns: 2;
            column-gap: 0;
            padding-top: 20px;
            @include xl-down-device(){
              columns: unset;
            }
            li{
              display: flex;
              align-items: center;
              gap: 8px;
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 500;
              line-height: 1.2;
              letter-spacing: 0.3px;
          
              margin-bottom: 15px;
              svg{
                fill: var(--primary-color1);
              }
            }
          }
          p {
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
            margin-bottom: 0;
          }
        }
        .button-area{
          padding: 30px;
          @include lg-down-device(){
            padding: 30px 15px;
          }
          @include md-down-device() {
            padding: 0;
          }
          .explore-btn {
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(to bottom, var(--primary-color1) 0%, var(--primary-color1) 98%);
            background-size: 0 1px;
            background-repeat: no-repeat;
            background-position: left 100%;
            transition: background-size 0.75s;
            svg{
              fill: var(--title-color);
              transition: 0.5s;
            }
          }
        }
  
        &:hover {
          .icon {
            svg {
              fill: var(--primary-color1);
              animation: bounceIn 1s linear;
            }
  
            @keyframes rotate {
              0% {
                transform: rotate(0);
              }
  
              100% {
                transform: rotate(360deg);
              }
            }
          }
  
          h5 {
            a {
              color: var(--primary-color1);
              span{
                color: var(--primary-color1);
              }
            }
          }
  
          .services-img {
            opacity: 1;
          }
          .explore-btn{
            color: var(--primary-color1);
            background-size: 100% 1px;
            background-position: 0% 100%;
            svg{
              fill: var(--primary-color1);
              transform: rotate(45deg);
            }
          }
        }
      }
  }
  &.two{
    background: unset;
    padding: 0;
    padding-top: 120px;
    @include lg-device() {
      padding-top: 100px;
    }
    @include lg-down-device() {
      padding-top: 90px;
    }
    @include md-down-device() {
      padding-top: 70px;
    }
  }
}
/*=====================================
  20.Home2 Feature section
========================================*/
.feature-card3{
  .feature-content{
    h3{
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 30px;
      font-weight: 600;
      line-height: 1.2;
  
      margin-bottom: 15px;
      @include md-down-device(){
        font-size: 28px;
        margin-bottom: 10px;
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 25px;
    }
    ul{
      li{
        display: flex;
        gap: 10px;
        margin-bottom: 30px;
        &:last-child{
          margin-bottom: 0;
        }
        .check-icon{
           min-width: 35px;
           max-width: 35px;
           height: 35px;
           border-radius: 50%;
           background-color: rgba(var(--primary-color1-opc), 0.1);
           display: flex;
           align-items: center;
           justify-content: center;
           svg{
            fill: var(--primary-color1);
           }
        }
        .content{
          h5{
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 20px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0.4px;
            margin-bottom: 10px;
          }
          p{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .feature-img{
    @include lg-down-device(){
      display: none;
    }
  }
}
.home2-feature-section{
  .section-title-wrap{
    position: sticky;
    top: 100px;
    @include xl-down-device(){
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
    .section-title2{
      max-width: 425px;
      width: 100%;
      margin-bottom: 35px;
      @include xl-down-device(){
        margin-bottom: 0;
      }
      @include lg-device(){
        max-width: 550px;
      }
    }
  }
  .feature-list{
    >li{
      border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
      padding-bottom: 40px;
      margin-bottom: 45px;
      &:last-child{
        border-bottom: unset;
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }
  }
}
/*=====================================
  21.Home2 Horizontal Scrolling section
========================================*/
.horizontal-scrolling-section{
  overflow: hidden;
  .horizontal-scrolling-wrapper{
    width: 200%;
    // height: 100%;
    display: flex;
    flex-wrap: no-wrap;
    @include xl-down-device(){
      display: block;
      width: 100% !important;
    }
    .single-scroll{
      width: 200%;
      height: 100%;
      will-change: transform;
      opacity: 1 !important;
      @include xxl-device(){
        height: 92%;
      }
      @include xl-down-device(){
        width: 100% !important;
        height: auto;
      }
    }
  }
}
.home2-process-section{
  background-image: url(../img/home2/home2-process-bg.png), linear-gradient(180deg, #E9E5FF 0%, #E9E5FF 100%); 
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 120px 0 0;
  @include xxl-device(){
    padding: 90px 0 0;
  }
  @include xxl-down-device(){
    padding: 60px 0 0;
  }
  @include md-down-device(){
    padding: 70px 0 0;
  }
  .section-title2{
      margin-bottom: 70px;
      @include xxl-device(){
        margin-bottom: 50px;
      }
      @include xl-device(){
        margin-bottom: 40px;
      }
      @include md-down-device() {
        margin-bottom: 40px;
      }
     span{
      background: #DDD7FF;
      border: 1px solid rgba(var(--text-color-opc), 0.05);
     }
  }
  .process-slider-area{
    padding: 0 10% 185px;
    position: relative;
    @include seventeen-down-device(){
      padding: 0 8% 185px;
    }
    @include xxl-device(){
      padding: 0 5% 150px;
    }
    @include xl-device(){
      padding: 0 3% 120px;
    }
    @include xl-down-device(){
      padding: 0 3% 150px;
    }
    @include md-down-device(){
      padding: 0 3% 130px;
    }
    .home2-process-slider{
      padding-top: 50px;
      @include xxl-device(){
        padding-top: 30px;
      }
      @include xxl-down-device(){
        padding-top: 30px;
      }
    }
    .single-process{
      text-align: center;
      .step{
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
        @include xxl-device(){
          margin-bottom: 20px;
        }
        @include xxl-down-device(){
          margin-bottom: 20px;
        }
        .number{
          background-color: var(--dark-white-color);
          width: 64px;
          height: 64px;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 1;
          &::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid var(--white-color);
            z-index: 1;
          }
          &::after{
            content: "";
            position: absolute;
            width: 3px;
            height: 48px;
            background: rgba(#fff, 0.4);
            left: 50%;
            transform: translateX(-50%);
            top: -50px;
            z-index: -9;
          }
          h6{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 17px;
            font-weight: 500;
            line-height: 1;
        
            margin-bottom: 5px;
          }
          span{
            color: var(--primary-color1);
            font-family: var(--font-hankenGrotesk);
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
        
          }
        }
      }
      .content{
        h4{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 25px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 15px;
          @include xxl-device(){
            font-size: 24px;
            margin-bottom: 10px;
          }
          @include xxl-down-device(){
            font-size: 24px;
            margin-bottom: 10px;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.7;
          margin-bottom: 0;
          @include xxl-device(){
            font-size: 15px;
          }
          @include xxl-down-device(){
            font-size: 15px;
          }
        }
      }
    }
    .slider-btn-area{
      background-color: var(--dark-white-color);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 50px 50px 0px 0px;
      line-height: 1;
      padding: 0 30px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      min-width: 380px;
      @include sm-down-device(){
        min-width: unset;
        width: 100%;
      }
      .slider-btn{
        cursor: pointer;
        i{
          color: var(--text-color);
          font-size: 20px;
          transition: 0.5s;
          &:hover{
            color: var(--primary-color1);
          }
        }
        &.swiper-button-disabled{
          opacity: 0.2;
        }
      }
      .content{
        padding: 18px 20px;
        border-left: 1px solid #E9E5FF;
        border-right: 1px solid #E9E5FF;
        margin: 0 20px;
        @include md-down-device(){
          padding: 18px 15px;
        }
        @include sm-down-device(){
          padding: 18px 10px;
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 17px;
          font-weight: 500;
          line-height: 1.5;
      
          margin-bottom: 0;
          @include sm-down-device(){
            font-size: 15px;
          }
        }
      }
    }
    &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: rgba(#fff, 0.4);
    }
  }
  &.two{
    background-image:unset;
    background-color: #DFEBF6; 
  }
}
 //Home2 Marketing Agency section
.home2-marketing-agency-section{
  background-image: url(../img/home2/marketing-agency-bg.png), linear-gradient(180deg, #FFFAF0 0%, #FFFAF0 100%); 
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 120px 0;
  @include xxl-device(){
    padding: 90px 0;
  }
  @include xxl-down-device(){
    padding: 60px 0;
  }
  @include lg-device(){
    padding: 100px 0;
  }
  @include lg-down-device(){
    padding: 90px 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  .graf-img{
    @include xl-down-device(){
      display: none;
    }
    .light{
      display: block;
    }
    .dark{
      display: none;
    }
    img{
      min-width: 250px;
    }
  }
  .marketing-agency-content{
    max-width: 696px;
    width: 100%;
    margin: 0 auto;
    .section-title2{
      h2{
        span{
          font-weight: 400;
        }
        @include xl-device(){
          font-size: 45px;
        }
        @include sm-down-device(){
          font-size: 35px;
        }
      }
    }
    .nav-and-tab-area{
      .nav-area{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        nav{
          display: flex;
          .nav-tabs{
              border-bottom: none;
              background: rgba(var(--primary-color1-opc), 0.1);
              border-radius: 15px;
              padding: 4px;
              .nav-link{
                  min-width: 22px;
                  max-width: 22px;
                  height: 22px;
                  border-radius: 50%; 
                  border: none;
                  padding: 0;
                  &:hover{
                      border: none;
                      box-shadow: none;
                  }
                  &:focus{
                      border: none;
                      box-shadow: none;
                  }
                  &.active{
                      color: var(--white-color);
                      background: var(--primary-color1);
                      border: none;
                  }  
              }
          }
        }
        span{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1; 
          text-transform: uppercase;
        }
      }
      .counter-wrap{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        @include md-down-device(){
          flex-wrap: wrap;
          justify-content: center;
        }
        .single-countdown{
          max-width: 205px;
          width: 100%;
          text-align: center;
          .number{
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            h5{
              color: var(--title-color);
              font-size: 30px;
              font-weight: 600;
              margin-bottom: 0;
              line-height: 1;
            }
            span{
              font-size: 30px;
              font-weight: 600;
            }
          }
          p{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
        
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
/*=====================================
  22.Home2 case-study section
========================================*/
.case-study-card2{
  border: 1px solid rgba(var(--title-color-opc), 0.1);
  border-radius: 10px;
  overflow: hidden;
  .card-img{
    position: relative;
    overflow: hidden;
    img{
      border-radius: 10px 10px 0 0;
      transition: all 0.5s ease-out;
    }
    &::after{
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 1;
    }
  }
  .card-content{
    padding: 30px 25px;
    @include xl-down-device(){
      padding: 25px 20px;
    }
    h4{
      margin-bottom: 25px;
      @include lg-device(){
        margin-bottom: 20px;
      }
      @include md-down-device(){
        margin-bottom: 20px;
      }
      a{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.2;
    
        transition: 0.5s;
        @include lg-device(){
          font-size: 25px;
        }
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .number{
      color: var(--primary-color1);
      font-family: var(--font-inter);
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 30px;
      @include lg-device(){
        margin-bottom: 25px;
      }
      @include md-down-device(){
        margin-bottom: 25px;
      }
      h5{
        color: var(--primary-color1);
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 0;
        line-height: 1;
      }
      span{
        font-size: 40px;
        font-weight: 700;
      }
    }
    .tag-list{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 50px;
      @include lg-device(){
        margin-bottom: 40px;
      }
      @include md-down-device(){
        margin-bottom: 35px;
      }
      li{
        a{
          border-radius: 100px;
          border: 1px solid rgba(var(--text-color-opc), 0.5);
          padding: 5px 15px;
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 13px;
          font-weight: 400;
          line-height: 1;
          transition: 0.5s;
          &:hover{
            color: var(--white-color);
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
          }
        }
      }
    }
    .read-more-btn{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      text-decoration: underline;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: 0.5s;
      svg{
        fill: var(--text-color);
        transition: 0.5s;
      }
      &:hover{
        color: var(--primary-color1);
        svg{
          transform: rotate(45deg);
          fill: var(--primary-color1);
        }
      }
    }
  }
  &:hover{
    .card-img{
      img{
        transform: scale(1.1);
      }
      &::after{
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
      }
    }
  }
}
.home2-case-study-section{
  .pagination-area{
    display: flex;
    justify-content: center;
    align-items: end;
    .swiper-pagination{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      z-index: 9;
      bottom: unset;
      gap: 12px;
      .swiper-pagination-bullet{
          height: 16px;
          width: 16px;
          background-color: transparent;
          border: 1px solid #596977;
          opacity: 1;
          position: relative;
          &::after{
              content: '';
              height: 8px;
              width: 8px;
              border-radius: 50%;
              background-color: #596977;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
          }
          &.swiper-pagination-bullet-active{
              border-color: var(--primary-color1);
              height: 20px;
              width: 20px;
              &::after{
                  width: 10px;
                  height: 10px;
                  background-color: var(--primary-color1);
              }
          }
      }
    }
  }
}
/*=====================================
  23.Home2 Testimonal section
========================================*/
.home2-testimonial-section{
  overflow: hidden;
  .testimonial-content{
    background: rgba(#E9E5FF, 0.8);
    padding: 110px 150px;
    height: 100%;
    @include eighteen-down-device(){
      padding: 110px 120px;
    }
    @include seventeen-down-device(){
      padding: 110px 110px;
    }
    @include xxl-device(){
      padding: 110px 70px;
    }
    @include xxl-down-device(){
      padding: 100px 35px;
    }
    @include xl-down-device(){
      padding: 90px 25px;
    }
    @include lg-down-device(){
      padding: 70px 25px;
    }
    .section-title2{
      span{
        background: #DDD7FF;
      }
    }
    .bottom-area{
      margin-top: 145px;
      border-radius: 200px;
      background: var(--dark-white-color);
      display: inline-flex;
      align-items: center;
      gap: 20px;
      padding: 5px;
      max-width: 335px;
      width: 100%;
      @include xl-down-device(){
        margin-top: 120px;
      }
      @include lg-down-device(){
        margin-top: 50px;
      }
      .icon{
        min-width: 60px;
        max-width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(var(--primary-color1-opc), 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
          fill: var(--primary-color1);
        }
      }
      .text{
        p{
          color: var(--text-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 20px;
          font-weight: 500;
          line-height: 1.3;
          margin-bottom: 0;
        }
      }
    }
  }
  .testimonial-wrap{
    background-color: #F7F7FA;
    padding: 105px 120px;
    height: 100%;
    @include fifteen-down-device(){
        padding: 100px 80px;  
    }
    @include xxl-down-device(){
        padding: 80px 50px;  
    }
    @include sm-down-device(){
        padding: 60px 20px;  
    }
    .swiper-slide-active{
        .author-area{
            animation: fadeInUp 1.7s;
        }
        p{
            animation: fadeInDown 1.7s;
        }
        span{
            animation: fadeInDown 1.7s;
        }
    }
    .testimonial-card2{
        >span{
            color: var(--primary-color1);
            font-family: var(--font-hankenGrotesk);
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 10px;
        }
        p{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 22px;
            font-weight: 400;     
            line-height: 1.8;  
            margin-bottom: 35px;
            @include sm-down-device(){
              font-size: 18px;
            }
        }
        .author-area{
            display: flex;
            align-items: center;
            gap: 15px;
            .author-img{
                img{
                    height: 70px;
                    width: 70px;
                    border-radius: 50%;
                }
            }
            .content{
                line-height: 1;
                h6{
                    color:  var(--title-color);
                    font-family: var(--font-hankenGrotesk);
                    font-size: 18px;
                    font-weight: 600;     
                    margin-bottom: 7px;  
                }
                span{
                    color: var(--text-color);
                    font-family: var(--font-inter);
                    font-size: 14px;
                    font-weight: 500;     
                }
            }
        }
    }
    .slider-btn-area{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        padding-top: 50px;
        z-index: 9;
        @include lg-down-device(){
          padding-top: 40px;
        }
        .dash{
            width: 100%;
            height: 1px;
            background-color: rgba(var(--title-color-opc), .08);
        }
        .slider-btn-group{
          display: flex;
          align-items: center;
          justify-content: space-between;
          &.w-100{
              max-width: 100px;
              min-width: 100px;
              width: 100%;
          }
        }
    }
    .rating-area{
      display: flex;
      align-items: center;
      gap: 60px;
      padding-top: 45px;
      @include xxl-down-device(){
        gap: 30px;
      }
      @include lg-device(){
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 35px;
      }
      @include lg-down-device(){
        padding-top: 35px;
      }
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      >li{
        .single-rating{
          display: flex;
          align-items: center;
          gap: 8px;
          .review{
            line-height: 1;
            span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              line-height: 1;
              margin-bottom: 8px;
              display: block;
            }
            .logo-dark{
              display: block;
            }
            .logo-light{
              display: none;
            }
            img{
              width: 64px;
            }
          }
          .rating{
            line-height: 1;
             .star{
              display: flex;
              align-items: center;
              gap: 4px;
              margin-bottom: 8px;
              line-height: 1;
              li{
                i{
                  color: #E62415;
                  font-size: 12px;
                }
              }
             }
             span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
             }
          }
          &.google{
            .rating{
              .star{
                li{
                  i{
                    color: #FFC107;
                  }
                }
              }
            }
          }
        }
        position: relative;
        &::before{
          content: '';
          position: absolute;
          top: 50%;
          left: -30px;
          transform: translateY(-50%);
          background-color: rgba(var(--primary-color1-opc), 0.2);
          width: 1px;
          height: 35px;
          @include xl-device(){
            left: -15px;
          }
          @include lg-device(){
            display: none;
          }
          @include sm-device(){
            left: -15px;
          }
          @include sm-down-device(){
            display: none;
          }
        }
        &:first-child{
          &::before{
            display: none;
          }
        }
      }
    }                                               
  }                   
}
/*=====================================
  24.Home2 Pricing Plan section
========================================*/
.pricing-card{
  background-color: var(--dark-white-color);
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  border-radius: 10px;
  .pricing-top{
      padding: 40px 30px;
      border-bottom: 1px solid rgba(var(--primary-color1-opc), 0.1);
      @include xxl-down-device{
          padding: 40px 25px; 
      }
      span{
          font-family: var(--font-hankenGrotesk);
          font-weight: 400;
          font-size: 20px;
      
          color: var(--text-color);   
          display: inline-block;
          line-height: 1;
          margin-bottom: 30px;
      }
      h2{
          margin-bottom: 0;
          font-family: var(--font-hankenGrotesk);
          font-weight: 800;
          font-size: 50px;
          line-height: 44px;
          color: var(--title-color);    
          @include sm-down-device(){
            font-size: 45px;
          }
          sub{
              font-weight: 400;
              font-size: 17px;
              color: var(--text-color);
              bottom: 0;
          }   
      }
  }
  .pricing-content{
      padding: 50px 25px;
      ul{
        li{
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-inter);
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 0.03em;
        
            color: var(--text-color); 
            line-height: 1.5;
            padding-bottom: 20px; 
            margin-bottom: 15px; 
            position: relative;
            &:last-child{
                padding-bottom: 0;
                &::before{
                  display: none;
                }
            }
            svg{
              fill: var(--primary-color1);
              min-width: 16px;
              path{
                &:last-child{
                  fill: var(--white-color);
                }
              }
            }
            &::before{
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 1px;
              background: linear-gradient(90deg, rgba(5, 45, 57, 0.17) 0%, rgba(5, 45, 57, 0.00) 81.82%);

            }
            &.red{
              svg{
                fill: #F73131;
              }
            }
        }
      }
      .pay-btn-area{
          display: flex;
          justify-content: center;
          padding-top: 40px;
          .pay-btn {
            border-radius: 5px;
            border: 1px solid var(--primary-color2);
            font-family: var(--font-inter);
            font-weight: 600;
            font-size: 15px;
            color: var(--title-color);
            letter-spacing: 0.48px;
        
            line-height: 1;
            padding: 14px 46px;
            position: relative;
            align-items: center;
            display: inline-flex;
            transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            overflow: hidden;
            z-index: 1;
            white-space: nowrap;
            > span {
              transition: opacity 0.2s, transform 0.2s;
              transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            }
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-size: 102% 102%;
              border-radius: inherit;
              transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
              opacity: 0;
              z-index: -1;
            }
            &::after {
              content: attr(data-text);
              position: absolute;
              top: 50%;
              opacity: 0;
              transform: translate(0, 100%);
              transition: opacity 0.2s, transform 0.2s;
              transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
              white-space: nowrap;
            }
            &:hover {
              color: var(--dark-white-color);
              background-color: var(--primary-color2);
              &::before {
                opacity: 1;
              }
              > span {
                transform: translateY(-150%);
                opacity: 0;
              }
              &::after {
                transform: translate(0%, -50%);
                opacity: 1;
              }
            }
          }
      }
  }
  .batch{
    width: 63px;
    height: 59px;
    border-radius: 0px 0px 100px 100px;
    background: var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 30px;
    span{
      color: var(--white-color);
      text-align: center;
      font-family: var(--font-hankenGrotesk);
      font-size: 15px;
      font-style: italic;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.3px;
      strong{
        font-size: 20px;
        font-weight: 800;
        font-style: normal;
        display: block;
        margin-bottom: 5px;
      }
    }
  }
  &.two{
    background: rgba(var(--primary-color1-opc), 0.1);      
    .pricing-content{
      .pay-btn-area{
        .pay-btn {
          border: unset;
          background-color: var(--primary-color1);
          color: var(--white-color);
          &:hover {
            color: var(--dark-white-color);
            background-color: var(--primary-color2);
            &::before {
              opacity: 1;
            }
            > span {
              transform: translateY(-150%);
              opacity: 0;
            }
            &::after {
              transform: translate(0%, -50%);
              opacity: 1;
            }
          }
        }
      }
    }
  }
  &.three{
    background: rgba(#10393B, 0.1);      
    .pricing-content{
      .pay-btn-area{
        .pay-btn {
          border: unset;
          background-color: var(--primary-color1);
          color: var(--white-color);
          &:hover {
            color: var(--dark-white-color);
            background-color: var(--primary-color2);
            &::before {
              opacity: 1;
            }
            > span {
              transform: translateY(-150%);
              opacity: 0;
            }
            &::after {
              transform: translate(0%, -50%);
              opacity: 1;
            }
          }
        }
      }
    }
    .batch{
      background-color: #F98138;
    }
  }
}
.home2-pricing-plan-section{
  .pricing-plan-tab-area{
    nav{
      display: flex;
      justify-content: center;
      margin-bottom: 50px;
      .nav-tabs{
          border-bottom: none;
          background: var(--dark-white-color);
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(63, 68, 75, 0.10);
          border-radius: 50px;
          padding: 10px;
          @include sm-down-device{
              border-radius: 10px; 
          }
          
          .nav-link{
              font-family: var(--font-hankenGrotesk);
              font-weight: 500;
              font-size: 17px;
          
              color: var(--title-color); 
              border: none;
              padding: 17px 28px;
              line-height: 1;
              border-radius: 25px; 
              display: flex;
              align-items: center;
              gap: 8px; 
              @include sm-down-device{
                  width: 100%;
                  border-radius: 10px; 
                  display: flex;
                  justify-content: center;
              }
              span{
                  font-family: var(--font-inter);
                  font-weight: 700;
                  font-size: 8px;
                  text-transform: uppercase;
                  color: var(--dark-white-color);     
                  background: var(--title-color);
                  border-radius: 100%;
                  padding: 5px 7px;
              }
              &:hover{
                  border: none;
              }
              &:focus{
                  border: none;
              }
              &.yearly{
                position: relative;
                span{
                  position: absolute;
                  right: 0;
                  top: -18px;
                  @include sm-down-device(){
                    position: relative;
                    top: unset;
                  }
                }
              }
              &.active{
                  color: var(--white-color);
                  background: var(--primary-color1);
                  border: none;
              }  
          }
      }
    }
  }
}
/*=====================================
  25.Home2 Contact section
========================================*/
.home2-contact-section{
  background-image: url(../img/home2/home2-contact-bg.png), linear-gradient(180deg, #E9E5FF 0%, #E9E5FF 100%); 
  background-size: cover;
  background-repeat: no-repeat;
  padding: 95px 0;
  margin-left: 60px;
  margin-right: 60px;
  border-radius: 50px;
  @include xxl-device(){
    padding: 95px 30px;
    margin-left: 40px;
    margin-right: 40px;
  }
  @include xxl-down-device(){
    padding: 75px 30px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 40px;
  }
  @include xl-down-device(){
    padding: 70px 20px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 30px;
  }
  @include md-down-device(){
    padding: 70px 20px;
    margin-left: 10px;
    margin-right: 10px;
  }
  @include sm-down-device(){
    padding: 70px 0;
    border-radius: 20px;
  }
  .contact-content{
    max-width: 536px;
    width: 100%;
    .section-title2{
      span{
        background-color: #DDD7FF;
        border: 1px solid rgba(var(--text-color-opc), 0.05);
      }
    }
    >ul{
      padding-top: 40px;
      margin-bottom: 60px;
      @include xl-down-device(){
        padding-top: 30px;
        margin-bottom: 50px;
      }
      @include md-down-device(){
        margin-bottom: 40px;
      }
      li{
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.3px;
    
        margin-bottom: 25px;
        &:last-child{
          margin-bottom: 0;
        }
        svg{
          fill: var(--primary-color1);
          path{
            &:last-child{
              fill: #FFFCEE;
            }
          }
        }
      }
    }
    .social-area{
      h6{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.2;
        text-decoration: underline;
        margin-bottom: 20px;
      }
      .social-list{
        display: flex;
        align-items: center;
        gap: 30px;
        li{
          display: block;
          text-align: center;
          a{
            i{
              color: var(--text-color);
              transition: 0.5s;
            }
            svg{
              fill: var(--text-color);
              transition: 0.5s;
            }
            span{
              color: var(--text-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 12px;
              font-weight: 400;
              line-height: 1;
              display: block;
              padding-top: 2px;
              transition: 0.5s;
            }
          }
          &:hover{
            a{
              i{
                color: var(--primary-color1);
              }
              svg{
                fill: var(--primary-color1);
              }
              span{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
  }
  .contact-form-wrap{
    background-color: var(--dark-white-color);
    border-radius: 30px;
    padding: 50px 45px;
    @include xxl-down-device(){
      padding: 45px 30px;
    }
    @include lg-device(){
      border-radius: 20px;
    }
    @include sm-down-device(){
      padding: 30px 20px;
      border-radius: 10px;
    }
    h3{
      font-size: 25px;
      font-family: var(--font-hankenGrotesk);
      font-weight: 700;
      margin-bottom: 35px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
      @include sm-down-device(){
        font-size: 22px;
      }
    }
  }
}
/*=====================================
  26.Home2 Blog section
========================================*/
.home2-blog-section{
  .blog-section-left{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 50px;
    @include lg-down-device(){
      padding-bottom: 0;
    }
    .explore-btn{
      @include lg-down-device(){
        padding-top: 20px;
      }
    }
  }
}
/*=====================================
  27.Home3 Banner section
========================================*/
.home3-banner-section{
  background-image: url(../img/home3/home3-banner-bg.png), linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 11% 0 13%;
  margin-bottom: 310px;
  @include seventeen-down-device(){
    margin-bottom: 300px;
  }
  @include xxl-device(){
    padding: 11% 0 17%;
  }
  @include xxl-down-device(){
    padding: 13% 0 17%;
    margin-bottom: 280px;
  }
  @include xl-down-device(){
    padding: 170px 0 100px;
    margin-bottom: 100px;
  }
  @include lg-down-device(){
    margin-bottom: 80px;
  }
  @include sm-down-device(){
    padding: 140px 0 70px;
  }
  .banner-content{
    text-align: center;
    >span{
      color: var(--white-color);
      font-family: var(--font-inter);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 10px;
      background: rgba(#fff, 0.1);
      border-radius: 100px;
      margin-bottom: 20px;
      @include xl-device(){
        margin-bottom: 15px;
      }
      @include lg-device(){
        margin-bottom: 10px;
      }
      @include sm-down-device(){
        margin-bottom: 10px;
      }
      svg{
        fill: var(--primary-color1);
      }
    }
    h1{
      color: var(--white-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 70px;
      font-weight: 900;
      line-height: 1.2;
  
      margin-bottom: 40px;
      @include xxl-down-device(){
        margin-bottom: 40px;
        font-size: 65px;
      }
      @include xl-down-device(){
        font-size: 63px;
      }
      span{
        text-decoration: underline;
        color: var(--primary-color1);
      }
      @include lg-device(){
        font-size: 65px;
        margin-bottom: 30px;
      }
      @include lg-down-device(){
        font-size: 50px;
        margin-bottom: 30px;
      }
      @include md-down-device(){
        font-size: 45px;
        margin-bottom: 20px;
      }
      @include sm-down-device(){
        font-size: 40px;
        margin-bottom: 20px;
      }
    }
    p{
      color: rgba(#fff, 0.6);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      margin-bottom: 0;
    }
    ul{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 50px;
      margin-bottom: 60px;
      flex-wrap: wrap;
      padding-top: 40px;
      @include xxl-down-device(){
        margin-bottom: 45px;
      }
      @include md-down-device(){
        gap: 20px;
        margin-bottom: 35px;
      }
      li{
        svg{
          fill: #F98138;
          path{
            &:last-child{
              fill: var(--dark-title-color);
            }
          }
        }
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
    
      }
    }
    .banner-content-bottom{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: start;
      gap: 40px;
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      .video-area{
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        .icon{
          position: relative;
          .video-circle{
            stroke: var(--white-color);
            fill: none;
            transition: 0.5s;
            .top-half{
              stroke-dasharray: 320;
              stroke-dashoffset: 320;
              transition: stroke-dashoffset .8s cubic-bezier(.33,1,.68,1);
            }
          }
          i{
            color: var(--white-color);
            font-size: 30px;
            position: absolute;
            top: 52%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        h6{
          color: var(--white-color);
          font-family: var(--font-rubik);
          font-size: 16px;
          font-weight: 600;
          line-height: 1.2;
          letter-spacing: 0.48px;
      
          margin-bottom: 0;
        }
        &:hover{
          .icon{
            .video-circle{
              .top-half{
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }
  }
  .bottom-img1, .bottom-img2, .bottom-img3{
    border-radius: 10px;
    box-shadow: 0px 6px 25px 0px rgba(63, 68, 75, 0.10);
    @include xl-down-device(){
      display: none;
    }
  }
  .bottom-img1{
    position: absolute;
    left: 45px;
    bottom: -13%;
    @include seventeen-down-device(){
      left: 25px;
    }
    @include xxl-device(){
      max-width: 325px;
      bottom: -10%;
    }
    @include xxl-down-device(){
      max-width: 325px;
      left: 10px;
      bottom: -10%;
    }
  }
  .bottom-img2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -22%;
    @include xxl-down-device(){
      max-width: 450px;
    }
  }
  .bottom-img3{
    position: absolute;
    right: 45px;
    bottom: -52px;
    @include seventeen-down-device(){
      right: 25px;
    }
    @include xxl-device(){
      bottom: -14%;
    }
    @include xxl-down-device(){
      bottom: -14%;
      right: 10px;
    }
  }
}
/*=====================================
  28.Home3 Process section
========================================*/
.home3-process-section{
  .process-card{
    border-radius: 7px;
    background: #FFEBEB;
    padding: 30px 25px;
    transition: all 0.5s ease-out;
    @include xxl-down-device(){
      padding: 30px 20px;
    }
    .process-card-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .icon{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: var(--dark-white-color);
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
          fill: var(--text-color);
          transition: all 0.5s ease-out;
        }
      }
      .number{
        span{
          color: rgba(var(--title-color-opc), 0.05);
          font-family: var(--font-hankenGrotesk);
          font-size: 40px;
          font-weight: 700;
          line-height: 1;
      
        }
      }
    }
    .content{
      h4{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
    
        margin-bottom: 15px;
        @include xl-device(){
          font-size: 26px;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.9; /* 200% */
        margin-bottom: 0;
      }
    }
    &:hover{
      transform: translateY(-5px);
      .process-card-top{
        .icon{
          svg{
            transform: rotate(360deg);
          }
        }
      }
    }
    &.two{
      background: #E4F4F1;
    }
    &.three{
      background: #F0EFE9;
    }
    &.four{
      background: #EFF4F8;
    }
  }
}
/*=====================================
  29.Home3 Countdown section
========================================*/
.home3-countdown-section{
  background-image: url(../img/home3/home3-countdown-bg.png), linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 150px 0 120px;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
  border-radius: 10px 10px 0 0;
  @include xl-down-device(){
    padding: 130px 0 100px;
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
  }
  @include lg-down-device(){
    padding: 120px 0 90px;
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%);
  }
  @include md-down-device(){
    padding: 90px 0 70px;
  }
  @include sm-down-device(){
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 100%);
  }
  .section-title{
    max-width: 560px;
    width: 100%;
    margin-bottom: 235px;
    @include xl-device(){
      margin-bottom: 200px;
    }
    @include xl-down-device(){
      margin-bottom: 180px;
    }
    @include lg-down-device(){
      margin-bottom: 140px;
    }
    @include md-down-device(){
      margin-bottom: 60px;
    }
  }
  .single-countdown{
    display: flex;
    gap: 15px; 
    .icon{
      svg{
        fill: var(--primary-color1);
      }
    }
    .content{ 
      .number{
        color: var(--white-color);
        font-family: var(--font-inter);
        line-height: 1;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        h5{
          color: var(--white-color);
          font-size: 35px;
          font-weight: 700;
          margin-bottom: 0;
          line-height: 1;
          @include lg-down-device(){
            font-size: 35px;
          }
        }
        span{
          font-size: 35px;
          font-weight: 700;
        }
      }
      p{
        color: rgba(#fff, 0.7);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.9;
        margin-bottom: 0;
        @include lg-device(){
          font-size: 13px;
        }
      }
    }
  }
}
/*=====================================
  30.Home3 Project Management section
========================================*/
.home3-project-management-section{
  .project-management-tab-wrapper{
    .project-management-nav{
      .nav-tabs {
        border-bottom: 1px solid rgba(var(--text-color-opc), 0.2);
        padding-left: 80px;
        padding-right: 80px;
        gap: 50px;
        @include xl-device(){
          padding-left: 60px;
          padding-right: 60px;
          gap: 24px;
        }
        @include xl-down-device(){
          padding-left: 0;
          padding-right: 0;
          gap: 5px;
        }
        @include lg-down-device() {
          gap: 0px;
        }
        @include sm-down-device(){
          flex-direction: column;
        }
        .nav-link {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-inter);
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0.36px;
      
          border: none;
          background: linear-gradient(to bottom, rgba(#0B0C0C, 1) 0%, rgba(#0B0C0C, 1) 98%);
          background-size: 0px 3px;
          background-repeat: no-repeat;
          background-position: right 100%;
          transition: background-size .75s;
  
          &.active {
            color: var(--title-color);
            background-size: 100% 3px;
            background-position: 0% 100%;
          }
        }
      } 
    }
    .project-management-tab{
      .project-management-tab-content{
        background-image: url(../img/home3/home3-faq-section-bg.png), linear-gradient(180deg, #EFEFFF 0%, #EFEFFF 100%);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 10px 0 0 10px;
        padding: 85px 70px;
        height: 100%;
        @include xxl-down-device(){
          padding: 75px 45px;
        }
        @include lg-device(){
          padding: 60px 25px;
        }
        @include lg-down-device(){
          padding: 60px 40px;
          border-radius: 10px;
        }
        @include md-down-device(){
          padding: 60px 25px;
        }
        @include sm-down-device(){
          padding: 60px 20px;
        }
        h3{
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 35px;
          font-weight: 600;
          line-height: 1.2;
      
          margin-bottom: 15px;
          @include sm-down-device(){
            font-size: 32px;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.8;
          letter-spacing: 0.32px;
          margin-bottom: 35px;
          @include sm-down-device(){
            font-size: 14px;
          }
        }
        ul{
          columns: 2;
          margin-bottom: 50px;
          @include lg-device(){
            column-gap: 0;
          }
          @include sm-down-device(){
            columns: unset;
            margin-bottom: 40px;
          }
          li{
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.3px;
        
            margin-bottom: 25px;
            &:last-child{
              margin-bottom: 0;
            }
            svg{
              fill: var(--primary-color1);
            }
          }
        }
      }
      .project-management-tab-img-wrap{
        background-image: url(../img/home3/project-management-tab-img-bg.png), linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 0 10px 10px 0;
        display: flex;
        align-items: end;
        height: 100%;
        padding: 55px 0 0 55px;
        @include lg-device(){
          padding: 0px 15px 0 15px;
          align-items: center;
        }
        @include lg-down-device(){
          display: none;
        }
        img{
          border-radius: 10px 0 0 0;
          @include lg-device(){
            border-radius: 10px;
          }
        }
      }
    }
  }
}
/*=====================================
  31.Home3 Testimonial section
========================================*/
.testimonial-card3{
  background-color: var(--dark-white-color);
  padding: 40px 35px;
  border-radius: 10px ;
  position: relative;
  @include xxl-down-device(){
    padding: 35px 25px;
  }
  @include sm-down-device(){
    padding: 30px 20px;
  }
  .author-area{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 30px;
      @include sm-down-device(){
        margin-bottom: 25px;
      }
      .author-img{
          img{
              height: 50px;
              width: 50px;
              border-radius: 50%;
          }
      }
      .content{
          line-height: 1;
          h6{
              color:  var(--title-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 23px;
              font-weight: 700;     
              line-height: 1;
              margin-bottom: 7px;  
          }
          span{
              color: var(--primary-color1);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 500;     
          }
      }
  }
  p{
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 400;     
    line-height: 1.8;  
    letter-spacing: 0.54px;
    margin-bottom: 25px;
    @include sm-down-device(){
      font-size: 15px;
    }
  }
  .logo-and-rating{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .rating{
      display: flex;
      align-items: center;
      gap: 9px;
      li{
        i{
          color: #FFC107;
        }
      }
    }
  }
  &::before{
    content: url(../img/home3/vector/testimonial-card3-quote.svg);
    position: absolute;
    top: 0;
    right: 18%;
    @include xxl-down-device(){
      right: 10%;
    }
    @include lg-down-device(){
      right: 0;
    }
  }
  &.style-2{
    padding: 60px 35px;
    @include xxl-device(){
      padding: 50px 35px;
    }
    @include xxl-down-device(){
      padding: 50px 35px;
    }
    @include md-down-device(){
      padding: 45px 25px;
    }
    @include sm-down-device(){
      padding: 35px 20px;
    }
    >span{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 18px;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 15px;
      @include md-down-device(){
        margin-bottom: 10px;
      }
    }
    p{
      font-size: 22px;
      letter-spacing: 0.03em;
      margin-bottom: 35px;
      @include md-down-device(){
        font-size: 20px;
      }
      @include sm-down-device(){
        font-size: 17px;
        margin-bottom: 30px;
      }
    }
    .author-area{
      margin-bottom: 0;
    }
    .author-and-logo-area{
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      flex-wrap: wrap;
      gap: 20px;
      &::before{
        content: url(../img/home3/vector/testimonial-card3-quote.svg);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        @include lg-device(){
          display: none;
        }
        @include md-down-device(){
          display: none;
        }
      }
    }
    &::before{
      display: none;
    }
  }
}
.home3-testimonial-section{
  background-image: url(../img/home3/home3-testimonial-bg.png), linear-gradient(96deg, #FBD8FF 1.56%, #DEDBFD 50.41%, #C5CCFF 98.25%);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 90px 6.5% 30px;
  @include seventeen-down-device(){
    padding: 90px 5% 30px;
  }
  @include xxl-device(){
    padding: 90px 3% 30px;
  }
  @include xxl-down-device(){
    padding: 90px 20px 30px;
  }
  @include md-down-device(){
    padding: 70px 20px 30px;
  }
  @include sm-down-device(){
    padding: 70px 0 30px;
  }
  .slider-btn-and-pagination-wrap{
    padding-top: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 540px;
    width: 100%;
    @include xl-down-device(){
      padding-top: 60px;
    }
    @include md-down-device(){
      padding-top: 40px;
    }
    .franctional-pagi2{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 24px;
      font-weight: 400;   
      @include sm-down-device(){
          top: unset;
          position: relative;
          right: unset;
          display: flex;
      }
      .swiper-pagination-current{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 24px;
          font-weight: 400;      
      }
      .swiper-pagination-total{
          color: var(--text-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 16px;
          font-weight: 400;  
      }
    }
  }
}
/*=====================================
  32.Home3 Feature section
========================================*/
.home3-feature-section{
  .feature-content-wrap{
    .progressBarContainer div span.progressBar {
      width: 100%;
      height: 1px;
      background-color: rgba(var(--text-color-opc), 0.1);
      display: block;
    }
    .progressBarContainer div span.progressBar .inProgress {
      background-color: var(--primary-color1);
      width: 0%;
      height: 1px;
    }
    .feature-list-wrap{
      max-width: 536px;
      width: 100%;
      .pt-25{
        padding-top: 25px;
      }
    }
    .single-feature {
      display: flex;
      gap: 20px;
      padding-bottom: 20px;
      @include lg-device(){
        gap: 15px;
      }
      @include sm-down-device(){
        flex-direction: column;
      }
      .icon{
        min-width: 60px;
        max-width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #D3EAFD;
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
          fill: #359FF5;
        }
      }
      .content{
        h6{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 22px;
          font-weight: 600;
          line-height: 1.2; 
      
          margin-bottom: 10px;
          @include lg-device(){
            margin-bottom: 5px;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.7;
          margin-bottom: 0;
          @include lg-device(){
            font-size: 14px;
          }
        }
      }
      &.two{
        .icon{
          background-color: #DBEFDC;
          svg{
            fill: #54B259;
          }
        }
      }
      &.three{
        .icon{
          background-color: #FBD9E4;
          svg{
            fill: #EB4278;
          }
        }
      }
    }
  }
}
/*=====================================
  33.Home3 Pricing plan section
========================================*/
.home3-pricing-plan-section{
  .pricing-plan-tab-area{
    .nav-area{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      nav{
        display: flex;
        .nav-tabs{
            border-bottom: none;
            background: rgba(var(--primary-color1-opc), 0.1);
            border: 1px solid rgba(var(--text-color-opc), 0.1);
            border-radius: 15px;
            padding: 4px;
            .nav-link{
                min-width: 32px;
                max-width: 32px;
                height: 26px;
                border-radius: 25px; 
                border: none;
                padding: 0;
                &:hover{
                    border: none;
                    box-shadow: none;
                }
                &:focus{
                    border: none;
                    box-shadow: none;
                }
                &.active{
                    color: var(--white-color);
                    background: var(--primary-color1);
                    border: none;
                }  
            }
        }
      }
      span{
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 500;
        line-height: 1; 
        letter-spacing: 0.32px;
    
      }
    }
  }
}
/*=====================================
  34.Home3 Newsletter section
========================================*/
.home3-newsletter-section{
  .newsletter-wrapper{
    background-image: url(../img/home3/home3-newsletter-bg.png), linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 90px 110px;
    @include xxl-down-device(){
      padding: 90px 60px;
    }
    @include xl-down-device(){
      padding: 90px 30px;
    }
    @include lg-down-device(){
      padding: 80px 20px;
    }
    @include md-down-device(){
      padding: 70px 20px;
      border-radius: 10px;
    }
    .section-title{
      max-width: 546px;
      width: 100%;
    }
    .newsletter-form-area{
      h6{
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
    
        margin-bottom: 15px;
      }
      .form-inner{
        border-radius: 5px;
        border: 1px solid rgba(#fff, 0.2);
        display: flex;
        input{
          background-color: transparent;
          height: unset;
          border: none;
          color: var(--white-color);
        }
        button{
          background-color: var(--primary-color1);
          border-radius: 0px 5px 5px 0px;
          padding: 16px 26px;
          transition: 0.5s;
          i{
            color: var(--white-color);
            font-size: 20px;
          }
          &:hover{
            background-color: var(--light-black-color);
          }
        }
      }
    }
  }
}
/*=====================================
  35.Home3 Faq section
========================================*/
.faq-content {
  .accordion {
    .accordion-item {
      border: none;
      background-color: transparent;
      &:first-child {
        .accordion-header {
          .accordion-button {
            padding-top: 0;
          }
        }
      }
      .accordion-header {
        .accordion-button {
          border: none;
          border-radius: unset;
          box-shadow: none;
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          background-color: transparent;
          font-size: 20px;
          font-weight: 600;
          line-height: 1.4;
          padding: 0;
          padding-bottom: 15px;
          padding-top: 15px;
          border-bottom: 1px solid rgba(var(--title-color-opc), 0.08);
          &::after {
            width: unset;
            height: unset;
            content: '\F4FE';
            font-family: bootstrap-icons;
            background-image: none;
            font-weight: 800;
            font-size: 22px;
          }
          &:not(.collapsed) {
            background-color: unset;

            &::after {
              content: '\F2EA';
            }
          }
          @include md-down-device(){
            font-size: 18px;
          }
        }
      }
      .accordion-body {
        padding: 20px;
        padding-bottom: 15px;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.9;
        letter-spacing: 0.48px;

        @include sm-down-device() {
          font-size: 14px;
          padding: 15px 10px;
        }
      }

    }
  }
  &.style-2{
    .accordion{
      .accordion-item{
        .accordion-header{
          .accordion-button{
            &::after{
              content: url(../img/innerpage/vector/faq-arrow-down.svg);
            }
            &:not(.collapsed) {
              // color: var(--primary-color1);
              &::after {
                content: url(../img/innerpage/vector/faq-arrow-down.svg);
                // transform: unset;
              }
            }
          }
        }
      }
    }
  }
}
.home3-faq-section{
  background-image: url(../img/home3/home3-faq-section-bg.png), linear-gradient(180deg, #EFEFFF 0%, #EFEFFF 100%);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 90px 0;
  @include lg-down-device(){
    padding: 80px 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
}
/*=====================================
  36.Home3 Tools section
========================================*/
.home3-tools-section{
  .tools-card{
    border-radius: 5px;
    border: 1px solid rgba(var(--title-color-opc), 0.05);
    background: var(--dark-white-color);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    @include xxl-down-device(){
      gap: 15px;
    }
    @include lg-device(){
      padding: 20px;
    }
    @include sm-device(){
      flex-direction: column;
      align-items: start;
    }
    .icon{
      border: 1px solid rgba(var(--title-color-opc), 0.05);
      background: var(--white-color);
      box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.05);
      min-width: 62px;
      max-width: 62px;
      height: 62px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content{
      h6{
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    
        margin-bottom: 5px;
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;
        margin-bottom: 0;
      }
    }
  }
}
/*=====================================
  37.Home4 Banner section
========================================*/
.home4-banner-section{
  background-image: url(../img/home4/home4-banner-bg.png), linear-gradient(180deg, #FEFBF5 0%, #FEFBF5 100%);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 175px 0px 150px;
  @include seventeen-down-device(){
    padding: 165px 0px 150px;
  }
  @include lg-down-device(){
    padding: 150px 0 80px;
  }
  @include sm-down-device(){
    padding: 130px 0 80px;
  }
  @keyframes up-down {
    0% {
      transform: translateY(130px);
    }
    50% {
      transform: translateY(110px);
    }
    100% {
      transform: translateY(130px);
    }
  }
  .banner-wrapper{
    position: relative;
    z-index: 1;
    h1{
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 85px;
      font-weight: 700;
      line-height: 1.2;
  
      position: relative;
      margin-bottom: 0;
      span{
        font-style: italic;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px var(--title-color);
      }
      @include xxl-device(){
        font-size: 75px;
      }
      @include xxl-down-device(){
        font-size: 65px;
      }
      @include md-down-device(){
        font-size: 48px;
      }
      @include sm-down-device(){
        font-size: 42px;
      }
      &::before{
        content: url(../img/home4/vector/banner-text-top-vector.png);
        position: absolute;
        top: -35px;
        right: 18%;
        @include xxl-device(){
          right: 26%;
        }
        @include xxl-down-device(){
          right: 26%;
        }
        @include lg-down-device(){
          display: none;
        }
      }
    }
    .banner-content-and-btn{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-top: -35px;
      @include xl-down-device(){
        margin-top: -45px;
      }
      @include lg-down-device(){
        flex-direction: column;
        align-items: flex-start;
        margin-top: 25px;
        gap: 40px;
      }
      @include md-down-device(){
        margin-top: 20px;
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.7;
        max-width: 650px;
        width: 100%;
        margin-bottom: 0;
        margin-left: 100px;
        @include xl-device(){
          max-width: 580px;
          font-size: 18px;
        }
        @include xl-down-device(){
          margin-left: 0;
        }
        @include sm-down-device(){
          font-size: 17px;
        }
      }
      a{
        position: relative;
        line-height: 1;
        transition: 0.5s;
        height: 178px;
        width: 178px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        .bg{
          line-height: 1;
          transition: 0.5s;
          svg{
              fill: transparent;
              stroke: rgba(var(--title-color-opc), 0.1);
              transition: 0.5s;
          }
        }
        .details-button{
            transition: 0.5s;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &:hover{
            .bg{
                svg{
                    fill: var(--primary-color1);
                    stroke: var(--primary-color1);
                }
            }
            .details-button{
              background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
              &::after{
                color: var(--white-color);
              }
                svg{
                    stroke: var(--white-color);
                }
                color: var(--white-color);
            }    
        }
      }
    }
    .scroll-down-btn{
      display: flex;
      justify-content: center;
      animation: up-down 2s linear infinite alternate;
      @include lg-down-device(){
        display: none;
      }
      a{
        width: 41px;
        height: 80px;
        border-radius: 110px;
        border: 1px solid rgba(var(--title-color-opc), 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        svg{
          fill: none;
          stroke: rgba(var(--title-color-opc), 0.5);
          transition: 0.5;
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            stroke: var(--white-color);
          }
        }
      }
    }
  }
  .banner-img{
    position: absolute;
    bottom: 0;
    left: 0;
    @include seventeen-down-device(){
      width: 450px;
    }
    @include xxl-device(){
      width: 400px;
    }
    @include xxl-down-device(){
      width: 380px;
    }
    @include xl-down-device(){
      display: none;
    }
    &.dark{
      display: none;
    }
  }
  .social-list{
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 65px;
    z-index: 1;
    @include xl-down-device(){
      left: 10px;
    }
    @include xl-down-device(){
      display: none;
    }
    li{
      position: relative;
      line-height: 1;
      transition: 0.5s;
      &::before{
        content: '';
        position: absolute;
        top: -33px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--text-color);
        width: 3px;
        height: 3px;
        border-radius: 50%;
        @include xl-device(){
          top: -15px;
        }
      }
      &:first-child{
        &::before{
          display: none;
        }
      }
      a{
        i{
          color: var(--text-color);
          font-size: 22px;
          transition: 0.5s;
        }
        svg{
          fill: var(--text-color);
        }
      }
      &:hover{
        a{
          i{
            color: var(--primary-color1);
          }
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
  }
  .scroll-text {
    writing-mode: vertical-rl;
    position: absolute;
    right: 0;
    top: 0;
    @include xl-down-device(){
      display: none;
    }
    h2 {
      white-space: nowrap;
      font-family: var(--font-hankenGrotesk);
      font-size: 75px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 0;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px rgba(var(--title-color-opc), 0.1);
      animation: marqueeTop 50s linear infinite;

      @keyframes marqueeTop {
        0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0)
        }

        100% {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0)
        }
      }
    }
  }
}
/*=====================================
  38.Home4 About section
========================================*/
.home4-about-section{
  scroll-margin-top: 150px;
  .about-content-wrap{
    .about-section-title{
      span{
        border-radius: 50px;
        border: 1px solid rgba(var(--text-color-opc), 0.2);
        padding: 13px 20px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.39px;
        text-transform: uppercase;
        margin-bottom: 25px;
        @include lg-down-device(){
          margin-bottom: 15px;
        }
        svg{
          fill: var(--primary-color1);
        }
      }
      h2{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk)  ;
        font-size: 58px;
        font-weight: 800;
        line-height: 1.2;
    
        margin-bottom: 25px;
        @include xxl-down-device(){
          font-size: 50px;
        }
        @include xl-down-device(){
          font-size: 38px;
          margin-bottom: 20px;
        }
        @include md-down-device(){
          font-size: 32px;
        }
        @include sm-down-device(){
          font-size: 28px;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.7;
        margin-bottom: 0;
        @include md-down-device(){
          font-size: 17px;
        }
      }
    }
    .explore-btn{
      font-size: 16px;
    }
  }
  .text-rotate-area{
    position: relative;
    @include xl-down-device(){
      display: none;
    }
    .badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 250px;
      border-radius: 100%;
      animation: identifier 20s linear infinite;
      z-index: 1;
      background-color: transparent;
      padding: 5px;
      .inner-circle{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: rgba(var(--text-color-opc), 0.1);
      }

      .badge__char {
        display: block;
        position: absolute;
        top: 0;
        left: calc(50% - 10px / 2);
        height: calc(250px / 2);
        width: 10px;
        background-repeat: round;
        text-align: center;
        text-transform: uppercase;
        line-height: 1;
        font-weight: 400;
        font-size: 16px;
        color: var(--text-color);
        font-family: var(--font-inter);
        transform-origin: bottom center;
        transform: rotate(var(--char-rotate));
      }
      
      @keyframes identifier {
        0% {
          transform: rotate(0deg);
        }
      
        to {
          transform: rotate(1turn);
        }
      }
    }
    .half-circle-img-area{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      img{
        width: 200px;
        height: 395px;
        border-radius: 0px 300px 300px 0px;
        object-fit: cover;
        @include xl-device(){
          width: 180px;
        }
      }
    }
  }
  .about-coundown-area{
    .single-countdown{
      text-align: center;
      .number{
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        h2{
          font-family: var(--font-hankenGrotesk);
          font-size: 150px;
          font-weight: 900;
          letter-spacing: 4.5px;
          -webkit-text-fill-color: transparent;
          -webkit-text-stroke: 1px var(--title-color);
          margin-bottom: 0;
          line-height: 0.8;
          @include xl-down-device(){
            font-size: 130px;
          }
          @include sm-down-device(){
            font-size: 100px;
          }
        }
        span{
          font-family: var(--font-hankenGrotesk);
          font-size: 150px;
          font-weight: 900;
          letter-spacing: 4.5px;
          -webkit-text-fill-color: transparent;
          -webkit-text-stroke: 1px var(--title-color);
          line-height: 0.8;
          @include xl-down-device(){
            font-size: 130px;
          }
          @include sm-down-device(){
            font-size: 100px;
          }
        }
      }
      .content{
        background-color: #F7F6F1;
        padding-top: 20px;
        margin-top: -15px;
        position: relative;
        z-index: 1;
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 500;
          line-height: 1;
          text-transform: uppercase;
          margin-bottom: 0;
          @include lg-down-device(){
            font-size: 14px;
          }
        }
      }
    }
  }
}
/*=====================================
  39.Home4 Service section
========================================*/
.home4-service-section{
  overflow: hidden;
  .sevices-wrap {
    .single-services {
      transition: 0.5s;
      border-radius: 10px;
      border: 1px solid rgba(63, 68, 75, 0.10);
      background: var(--dark-white-color);
      position: relative;
      display: grid;
      grid-template-columns: 7% 26% 52% 15%;
      @include xxl-down-device() {
        grid-template-columns: 7% 26% 51% 16%;
      }
      @include xl-down-device(){
        grid-template-columns: 7% 26% 47% 20%;
      }
      @include lg-down-device(){
        grid-template-columns: 7% 24% 45% 24%;
      }
      @include md-down-device() {
        padding: 20px;
        display: block;
      }
      .icon {
        padding: 25px;
        border-right: 1px solid rgba(var(--title-color-opc), .08);
        transition: 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(var(--primary-color1-opc), 0.05);
        position: relative;
        @include md-down-device() {
          background-color: unset;
          padding: 0;
          margin-bottom: 15px;
          align-items: start;
          justify-content: space-between;
          border-right: unset;
        }

        svg {
          fill: var(--text-color);
          transition: 0.5s;
          min-width: 50px;
          max-width: 50px;
        }
        .number{
          position: absolute;
          top: 14px;
          left: 14px;
          @include md-down-device(){
            position: relative;
            top: unset;
            left: unset;
          }
          span{
            font-family: var(--font-inter);
            font-size: 20px;
            font-weight: 900;
            line-height: 1;
            letter-spacing: 2px;
        
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px rgba(var(--text-color-opc), 0.3);
          }
        }
      }
      h5 { 
        padding: 20px 10px 20px 30px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 26px;
        font-weight: 700;
        transition: 0.5s;
        margin-bottom: 0;
        @include xl-down-device(){
          padding: 20px 15px;
          font-size: 25px;
        }
        @include md-down-device() {
          margin-bottom: 10px;
          padding: 0;
          font-size: 20px;
        }
      }
      .services-img {
        width: 260px;
        height: 320px;
        position: absolute;
        top: -150px;
        left: 0;
        opacity: 0;
        z-index: 9;
        transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        // margin: -200px 0 0 -150px;
        border-radius: 5px; 
        overflow: hidden;
        pointer-events: none;

        @include md-down-device() {
          display: none;
          visibility: hidden;
        }
      }
      .content{
        padding: 30px 80px;
        position: relative;
        @include xxl-down-device(){
          padding: 30px 40px;
        }
        @include xl-down-device(){
          padding: 25px 20px;
        }
        @include md-down-device() {
          margin-bottom: 20px;
          line-height: 26px;
          padding: 0;
        }
        .tag-list{
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 15px;
          padding-top: 25px;
          @include xl-down-device(){
            padding-top: 15px;
          }
          li{
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
        
            border: 1px solid rgba(var(--primary-color1-opc), 0.25);
            border-radius: 50px;
            padding: 8px 13px;
          }
        }
        p {
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;
          margin-bottom: 0;
        }
        &::before, &::after {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 1px;
          height: 100px;
          background: rgba(var(--text-color-opc), 0.1);
          border-radius: 10px;
          @include md-down-device(){
            display: none;
          }
        }
        &::after{
          left: unset;
          right: 0;
        }
      }
      .button-area{
        padding: 30px;
        display: flex;
        align-items: center;
        @include xxl-down-device(){
          padding: 20px;
        }
        @include lg-down-device(){
          padding: 30px 15px;
        }
        @include md-down-device() {
          padding: 0;
        }
        .explore-btn {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 500;
          line-height: 1;
          text-decoration: none;
          white-space: nowrap;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background-color: rgba(var(--primary-color1-opc), 0.1);
          border-radius: 23px;
          border: 1px solid rgba(var(--title-color-opc), 0.1);
          padding: 14px 19px;
          transition: 0.5s;
          svg{
            fill: var(--title-color);
            transition: 0.5s;
          }
        }
      }

      &:hover {
        .icon {
          svg {
            fill: var(--primary-color1);
            animation: bounceIn 1.2s linear;
          }

          @keyframes rotate {
            0% {
              transform: rotate(0);
            }

            100% {
              transform: rotate(360deg);
            }
          }
        }

        h5 {
          a {
            color: var(--primary-color1);
            span{
              color: var(--primary-color1);
            }
          }
        }

        .services-img {
          opacity: 1;
        }
        .explore-btn{
          color: var(--white-color);
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            fill: var(--white-color);
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}
/*=====================================
  40.Home4 Experience section
========================================*/
.home4-experience-section{
  background-image: url(../img/home4/home4-experience-bg.png), linear-gradient(180deg, #121212 0%, #121212 100%);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 120px 0;
  @include lg-device(){
    padding: 100px 0;
  }
  @include lg-down-device(){
    padding: 90px 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  .experience-card-wrap{
    .single-experience{
      border-radius: 10px;
      border: 1px solid rgba(#fff, 0.20);
      background: #121212;
      padding: 40px 35px;
      position: relative;
      @include lg-device(){
        padding: 35px 20px;
      }
      @include sm-down-device(){
        padding: 30px 20px;
      }
      .background-img{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1;
        transition: 0.5s;
        opacity: 0;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
        }
        &::before{
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(#121212, 0.6);
          border-radius: 10px;
          transition: 0.5s;
        }
      }
      .content{
        position: relative;
        z-index: 2;
        h4{
          color: var(--white-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 30px;
          font-weight: 700;
          line-height: 1.2;
      
          margin-bottom: 10px;
        }
        p{
          color: rgba(#fff, 0.6);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 0;
        }
      }
      .number{
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2;
        @include sm-down-device(){
          top: 15px;
          right: 15px;
        }
        span{
          font-family: var(--font-inter);
          font-size: 50px;
          font-weight: 900;
          line-height: 1;
          letter-spacing: 2px;
      
          -webkit-text-fill-color: transparent;
          -webkit-text-stroke: 1px rgba(#fff, 0.15);
          @include sm-down-device(){
            font-size: 35px;
          }
        }
      }
      &:hover{
        .background-img{
          opacity: 1;
        }
      }
    }
  }
  .experience-percentage-wrap{  
    max-width: 640px;
    width: 100%;
    .section-title3{
      span{
        border: 1px solid rgba(#fff, 0.2);
        color: var(--white-color);
      }
      h2{
        color: var(--white-color);
      }
    }
    .eg-progress-wrap{
      .eg-progress-bar-single{
        .eg-progress-bar-title{
            h6{
                color: var(--white-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 15px;
                font-weight: 500;    
                margin-bottom: 18px;
            }
        }
        .eg-progress-bar{
            height: 3px;
            background-color: rgba(var(--primary-color1-opc), 0.5);
            border-radius: 25px;
            .experience-bar-per {
                height: 3px;
                background-color: var(--white-color);
                border-radius: 25px;
                width: 0;
                transition: 1s linear;
                position: relative;
                &:before {
                  content: attr(data-per);
                  position: absolute;
                  color: var(--white-color);
                  font-size: 14px;
                  font-weight: 500;
                  font-family: var(--font-hankenGrotesk);
                  line-height: 1;
                  top: -30px;
                  right: 0;
                  transform: translateX(50%);
                  z-index: 1;
                  @include sm-down-device(){
                    right: 10px;
                  }
                }
            }
        }
        
    }
    }
  }
}
.experience-logo-area{
  .logo-area{
    overflow: hidden;
    .marquee_text2{
      background-color: #222222;
      padding: 25px 0;
      border-top: 1px solid rgba(#fff, 0.2);
    }
    .js-marquee-wrapper{
        display: flex;
        align-items: center;
        gap: 110px;
        @include fifteen-down-device(){
          gap: 70px;
        }
        @include sm-down-device(){
          gap: 50px;
        }
        .js-marquee{
            display: flex;
            align-items: center;
            gap: 110px;
            margin-right: 0 !important;
            @include fifteen-down-device(){
              gap: 70px;
            }
            @include sm-down-device(){
              gap: 50px;
            }
        }
    }
  }
}
/*=====================================
  41.Home4 Portfolio section
========================================*/
.div-tooltip-tit{
  display: none;
  position: absolute;
  z-index: 9;
  color: var(--white-color);
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 700;   
  line-height: 1.2; 
  background-color: var(--dark-primary-color2);
  padding: 8px 20px;
}
.div-tooltip-sub{
  display: none;
  color: rgba(#fff, 0.6);
  position: absolute;
  z-index: 9;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  background-color: var(--dark-primary-color2);
  padding: 10px 20px;
}
.portfolio-info-flow-section{
  overflow-x: hidden !important;
}
.eg-card2{
  position: relative;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  transition: .5s;
  .card-img{
    position: relative;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease-out;
    img{
      border-radius: 10px;
      transition: all 0.5s ease-out;
    }
    &::after{
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 1;
    }
  }
  .card-content{
      background: linear-gradient(180deg, rgba(11, 12, 12, 0.00) 24.31%, rgba(11, 12, 12, 0.90) 100%);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: unset;
      padding: 20px 25px;
      border-radius: 10px;
      display: flex ;
      justify-content: end;
      flex-direction: column;
      z-index: 9;
      transition: .5s;
      @include xxl-down-device(){
          padding: 20px 20px;
      }
      @include sm-down-device(){
        padding: 20px 15px;
      }
      span{
        color: rgba(#fff, 0.8);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.26px;
        text-transform: uppercase;
        margin-bottom: 10px;
      }
      
      h5{
          margin-bottom: 15px;
          @include sm-down-device(){
            margin-bottom: 10px;
          }
          a{
            color: var(--white-color);
            font-family: var(--font-inter);
            font-size: 25px;
            font-weight: 700;   
            line-height: 1.2; 
            transition: 0.5s;
            @include lg-device(){
              font-size: 22px;
            }
            @include sm-down-device(){
              font-size: 23px;
            }
            &:hover{
                color: var(--primary-color1);
            }
          }
      }
      .tag-list{
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        li{
          >a{
            border-radius: 15px;
            border: 1px solid rgba(#fff, 0.4);
            background: transparent;
            display: inline-block;
            color: var(--white-color);
            font-family: var(--font-inter);
            font-size: 12px;
            font-weight: 500;
            padding: 5px 15px;
            line-height: 1;
            transition: 0.5s;
            &:hover{
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
            }
          }
        }
      }
  }
  &.two{
    .card-img{
      img{
        min-height: 431px;
        object-fit: cover;
      }
    }
  }
  &:hover{
    .card-img{
      img{
        transform: scale(1.1);
      }
      &::after{
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
      }
    }
  }
  &.style-2{
    .card-img{
      border-radius: 5px;
      height: 100%;
      img{
        border-radius: 5px;
        height: 100%;
        object-fit: cover;
      }
    }
    .card-content{
      position: relative;
      background: unset;
      justify-content: center;
      padding-left: 60px;
      @include xxl-down-device(){
        padding: 20px 20px 20px 40px;
      }
      @include lg-device(){
        padding: 20px 20px 20px 30px;
      }
      @include lg-down-device(){
        padding: 25px 0 0;
      }
      span{
        color: rgba(var(--title-color-opc), 0.6);
      }
      h5{
        margin-bottom: 20px;
        @include lg-device(){
          margin-bottom: 15px;
        }
        @include sm-down-device(){
          margin-bottom: 15px;
        }
        a{
          color: var(--title-color);
          font-size: 40px;
          font-weight: 800;   
          @include xl-down-device(){
            font-size: 32px;
          }
          @include sm-down-device(){
            font-size: 25px;
          }
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 45px;
        @include xl-down-device(){
          margin-bottom: 30px;
          font-size: 15px;
        }
      }
      .tag-list{
        li{
          >a{
            border: 1px solid rgba(var(--primary-color2-opc), 0.4);
            color: var(--title-color);
            &:hover{
              color: var(--white-color);
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  &.style-3{
    overflow: hidden;
    .card-content-wrap{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9;
    }
  }
}
.home4-portfolio-section{
  .pt--40{
    padding-top: 40px;
    @include lg-down-device(){
      padding-top: 0;
    }
  }
}
/*=====================================
  42.Home4 Process section
========================================*/
.feature-card4{
  background-color: var(--dark-white-color);
  border-radius: 10px;
  padding: 25px 20px;
  .card-top-area{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    @include lg-device(){
      margin-bottom: 20px;
    }
    @include sm-down-device(){
      margin-bottom: 20px;
    }
    .number{
      span{
        font-family: var(--font-inter);
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 1.8px;
    
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px rgba(var(--primary-color1-opc), 0.3);
      }
    }
  }
  .content{
    h4{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 25px;
      font-weight: 700;
      line-height: 1.2;
  
      margin-bottom: 0;
      @include xl-device(){
        font-size: 23px;
      }
      @include sm-down-device(){
        font-size: 22px;
      }
    }
    ul{
      padding-top: 20px;
      li{
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.3px;
        border-bottom: 1px solid rgba(var(--text-color-opc), 0.1); 
        padding-bottom: 10px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: unset;
        }
        svg{
          fill: var(--text-color);
          min-width: 15px;
          max-width: 15px;
        }
      }
    }
  }
  &:hover{
    .icon{
      animation: zoomIn 0.7s linear;
    }
  }
  &.arrow1{
    position: relative;
    &::before{
      content: url(../img/home4/vector/process-arrow1.svg);
      position: absolute;
      top: 20%;
      right: -12%;
      z-index: 9;
      @include xl-down-device(){
        display: none;
      }
    }
  }
  &.arrow2{
    position: relative;
    &::before{
      content: url(../img/home4/vector/process-arrow2.svg);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -12%;
      z-index: 9;
      @include xl-down-device(){
        display: none;
      }
    }
  }
  &.arrow3{
    position: relative;
    &::before{
      content: url(../img/home4/vector/process-arrow3.svg);
      position: absolute;
      bottom: 35%;
      right: -12%;
      z-index: 9;
      @include xl-down-device(){
        display: none;
      }
    }
  }
}
.home4-process-section{
  .process-bottom-area{
    .process-bottom-title{
      margin-bottom: 50px;
      @include xl-down-device(){
        margin-bottom: 30px;
      }
      h2{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 58px;
        font-weight: 800;
        line-height: 1.3;
    
        margin-bottom: 0;
        @include xxl-down-device(){
          font-size: 50px;
        }
        @include xl-down-device(){
          font-size: 38px;
          margin-bottom: 20px;
        }
        @include md-down-device(){
          font-size: 32px;
        }
        @include sm-down-device(){
          font-size: 28px;
        }
        span{
          color: var(--text-color);
          font-weight: 500;
        }
      }
    }
    .process-bottom-content-and-img{
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.7;
        margin-bottom: 35px;
      }
      img{
        border-radius: 5px;
      }
    }
  }
}
/*=====================================
  43.Home4 Contact section
========================================*/
.home4-contact-section{
  background-image: url(../img/home4/home4-section-bg.png), linear-gradient(180deg, #121212 0%, #121212 100%);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 100px 0;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;
  @include xl-down-device(){
    padding: 90px 0;
    margin-left: 10px;
    margin-right: 10px;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  @include sm-down-device(){
    margin-left: 0;
    margin-right: 0;
    border-radius: unset;
  }
  .section-title3{
    max-width: 850px;
    width: 100%;
    @include xl-down-device(){
      max-width: 650px;
    }
    >span{
      border: 1px solid rgba(#fff, 0.2);
      color: var(--white-color);
    }
    h2{
      color: var(--white-color);
      font-size: 60px;
      @include xxl-down-device(){
        font-size: 50px;
      }
      @include xl-down-device(){
        font-size: 45px;
      }
      @include md-down-device(){
        font-size: 38px;
      }
      span{
        color: rgba(247, 246, 241, 0.60);
        font-weight: 500;
      }
    }
  }
  .button-area{
    width: 248px;
    height: 248px;
    border-radius: 50%;
    border: 1px solid rgba(#fff, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(30px);
    transition: 0.8s;
    @include lg-down-device(){
      transform: translateY(0px);
    }
    @include md-down-device(){
      width: 220px;
      height: 220px;
    }
    .details-button {
      background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
      color: var(--white-color);
      &::after{
        color: var(--white-color);
      }
      svg{
        stroke: var(--white-color);
      }
    }
    &:hover{
      box-shadow: inset 0 0 0 10em var(--primary-color1);
      .details-button{
        --background-size: 0%;
        --stroke-dashoffset: 26;
        --stroke-duration: .3s;
        --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
        --stroke-delay: .195s;
        &::after{
          opacity: 0;
          transition-delay: 0s;
        }
      }
    }
  }
  .marquee-area{
    padding-top: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    @include lg-down-device(){
      padding-top: 0;
    }
    .marquee_text{
      display: flex;
      align-items: center;
    }
    .js-marquee{
        display: flex;
        align-items: center;
        gap: 25px;
    }
    h6{
        color: rgba(#FFF, 0.5);
        font-family: var(--font-hankenGrotesk);
        font-size: 35px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.36px;
        text-transform: uppercase;     
        margin-bottom: 0;
    }
    svg{
      fill: var(--primary-color1);
    }
  }
}
/*=====================================
  44.Home4 Award section
========================================*/
.home4-award-section{
 position: relative;
 padding: 0 15%;
 @include eighteen-down-device(){
  padding: 0 11%;
 }
 @include seventeen-down-device(){
  padding: 0 9%;
 }
 @include xxl-device(){
  padding: 0 3%; 
 }
 @include xxl-down-device(){
  padding: 0 2.5%; 
 }
 @include xl-down-device(){
  padding: 0 20px; 
 }
 @include sm-down-device(){
  padding: 0;
 }
  .section-title-wrap{
    position: sticky;
    top: 100px;
    .vector{
      position: absolute;
      top: 0;
      right: -37px;
      @include lg-down-device(){
        display: none;
      }
      svg{
        fill: var(--text-color);
      }
    }
    // @include lg-down-device(){
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   gap: 20px;
    //   flex-wrap: wrap;
    // }
    .section-title3{
      h2{
        font-size: 58px;
        @include xxl-down-device(){
          font-size: 50px;
        }
        @include xl-down-device(){
          font-size: 42px;
        }
        @include md-down-device(){
          font-size: 38px;
        }
        @include sm-down-device(){
          // font-size: 28px;
        }
        span{
          color: var(--text-color);
          font-weight: 500;
        }
      }
    }
  }
  .sevices-wrap2 {
    position: relative;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 0;
    }
    &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
      background: rgba(var(--title-color-opc), .05);
      @include lg-down-device(){
        display: none;
      }
    }
    .single-services {
      transition: 0.5s;
      border-bottom: none;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      padding: 45px 0 45px 30px;
      border-bottom: 1px solid rgba(var(--title-color-opc), .05);
      @include lg-down-device(){
        border: 1px solid rgba(var(--title-color-opc), .05);
        border-bottom: none;
        padding: 35px 25px;
      }
      @include md-down-device() {
        flex-direction: column;
        align-items: start;
      }
      @include sm-down-device(){
        padding: 30px 20px;
      }
      &:last-child{
        border-bottom: unset;
        @include lg-down-device(){
          border-bottom: 1px solid rgba(var(--title-color-opc), .05);
        }
      }
      .services-img {
        width: 245px;
        height: 303px;
        border-radius: 200px 200px 5px 5px;
        position: absolute;
        top: 0px;
        left: 0;
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        overflow: hidden;
        pointer-events: none;
        @include md-down-device() {
          display: none;
          visibility: hidden;
        }
      }
      .content{
        span{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 18px;
          font-weight: 400;
          line-height: 1;
      
          display: inline-block;
          margin-bottom: 10px;
        }
        h5 { 
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 35px;
          font-weight: 700;
          line-height: 1.2;
          transition: 0.5s;
          margin-bottom: 10px;
          @include sm-down-device(){
            font-size: 30px;
          }
        }
        p {
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 18px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 0;
        }
      }
      .explore-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid rgba(var(--title-color-opc), 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        svg{
          fill: rgba(var(--title-color-opc), 0.3);
          transition: 0.5s;
        }
      }

      &:hover {
        .services-img {
          opacity: 1;
        }
        .explore-btn{
          background-color: var(--title-color);
          svg{
            fill: var(--dark-white-color);
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}
/*=====================================
  45.Home4 Teams section
========================================*/
.teams-card{
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(18, 18, 18, 0.10);
  background: var(--dark-white-color);
  .card-img-wrap{
    mask-image: url(../img/home4/home4-teams-card-bg.png);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-size: cover;
    display: block;
    position: relative;
    .card-img{
      position: relative;
      overflow: hidden;
      transition: all 0.5s ease-out;
      &::after{
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
      }
    }
    .overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(#0B0C0C, 0), rgba(#0B0C0C, 0.85));
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: 0.5s;
      .social-area{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
        .social-list{
          position: relative;
          width: 100%;
          height: 60px;
          margin: 0 auto;
          span,a{
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 100%;
            height: 135px;
            font-size: 25px;
            line-height: 214px;
            text-align: center;
            transform-origin: top center;
            &:nth-child(1){
              transform: rotate(50deg);
            }
            &:nth-child(2){
              transform: rotate(38deg);
            }
            &:nth-child(3){
              transform: rotate(20deg);
            }
            &:nth-child(4){
              transform: rotate(3deg);
            }
            &:nth-child(5){
              transform: rotate(-15deg);
            }
            &:nth-child(6){
              transform: rotate(-26deg);
            }
            &:nth-child(7){
              transform: rotate(-45deg);
            }
          }
          a{
            i{
              color: var(--white-color);
              font-size: 18px;
              transition: 0.5s;
            }
            &:hover{
              i{
                color: var(--primary-color1);
              }
            }
          }
          span{
            i{
              color: rgba(#fff, 0.5);
            }
          }
        }
      }
    }
  }
  .card-content{
    padding-top: 20px;
    text-align: center;
    line-height: 1;
    h4{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 25px;
      font-weight: 700;
      line-height: 1.2;
      transition: 0.5s;
      @include md-down-device(){
        font-size: 22px;
      }
      margin-bottom: 5px;
    }
    span{
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
    }
  }
  &:hover{
    .card-img-wrap{
      .card-img{
        &::after{
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }
      .overlay{
        opacity: 1;
        transform: scaleY(1);
      }
    }
  }
}
/*=====================================
  46.Home4 Testimonial section
========================================*/
.home4-testimonial-section{
  background-image: url(../img/home4/home4-section-bg.png), linear-gradient(180deg, #121212 0%, #121212 100%);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  padding: 120px 0;
  @include lg-device(){
    padding: 100px 0;
  }
  @include lg-down-device(){
    padding: 90px 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  .section-title-area{
    .section-title3{
      max-width: 850px;
      width: 100%;
      @include xl-down-device(){
        max-width: 650px;
      }
      >span{
        border: 1px solid rgba(#fff, 0.2);
        color: var(--white-color);
      }
      h2{
        color: var(--white-color);
        font-size: 60px;
        @include xxl-down-device(){
          font-size: 50px;
        }
        @include xl-down-device(){
          font-size: 45px;
        }
        @include md-down-device(){
          font-size: 38px;
        }
        span{
          color: rgba(247, 246, 241, 0.60);
          font-weight: 500;
        }
      }
    }
    .button-area{
      position: relative;
      bottom: unset;
      left: unset;
      @include md-down-device(){
        width: unset;
        height: unset;
        border: unset;
        &:hover{
          box-shadow: none;
        }
      }
    }
  }
  .testimonial-wrap{
    position: relative;
    .swiper-slide-active{
        p{
            animation: fadeInDown 1.7s;
        }
        span{
            animation: fadeInDown 1.7s;
        }
        .author-name-desig{
            animation: fadeInDown 1.7s;
        }
    }
    .testimonial-card2{
      display: flex;
      align-items: center;
      gap: 50px;
      @include xxl-down-device(){
        gap: 30px;
      }
      @include lg-down-device(){
        gap: 20px;
      }
      @include md-down-device(){
        flex-direction: column;
        align-items: flex-start;
      }
      .author-img{
        position: relative;
        padding-left: 80px;
        @include lg-down-device(){
          padding-left: 0;
        }
        img{
            height: 150px;
            min-width: 150px;
            max-width: 150px;
            border-radius: 50%;
        }
        &::before{
          content: url(../img/home4/vector/testi-quote.png);
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          @include lg-down-device(){
            display: none;
          }
        }
      }
      .content{
        >span{
            color: var(--primary-color1);
            font-family: var(--font-hankenGrotesk);
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 10px;
        }
        p{
            color: rgba(#fff, 0.7);
            font-family: var(--font-inter);
            font-size: 22px;
            font-weight: 400;     
            line-height: 1.8;  
            margin-bottom: 35px;
            @include md-down-device(){
              font-size: 20px;
              margin-bottom: 25px;
            }
            @include sm-down-device(){
              font-size: 18px;
            }
        }
        .author-name-desig{
          line-height: 1;
          h6{
              color:  var(--white-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 18px;
              font-weight: 600;     
              margin-bottom: 7px;  
          }
          span{
              color: rgba(#fff, 0.6);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 500;     
          }
        }
      }
    }
    .slider-btn-area{
        position: absolute;
        bottom: 10px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        max-width: 650px;
        width: 100%;
        z-index: 9;
        @include xxl-down-device(){
          max-width: 370px;
          gap: 30px;
        }
        @include lg-device(){
          max-width: 450px;
        }
        @include md-device(){
          bottom: 50px;
        }
        @include sm-down-device(){
          justify-content: end;
        }
        .dash{
            width: 100%;
            height: 1px;
            background-color: rgba(#fff, 0.1);
            @include sm-down-device(){
              display: none;
            }
        }
        .slider-btn-group{
          display: flex;
          align-items: center;
          justify-content: space-between;
          &.w-100{
              max-width: 100px;
              min-width: 100px;
              width: 100%;
          }
        }
    }                                              
  } 
  .button-area{
    position: absolute;
    bottom: 60px;
    left: 30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(#fff, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.8s;
    @include seventeen-down-device(){
      bottom: 30px;
    }
    @include xxl-device(){
      width: 180px;
      height: 180px;
      left: 10px;
      bottom: 10px;
    }
    @include xxl-down-device(){
      left: 15px;
      bottom: 20px;
    }
    @include xl-down-device(){
      display: none;
    }
    .details-button {
      background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
      color: var(--white-color);
      font-size: 15px;
      &::after{
        color: var(--white-color);
      }
      svg{
        stroke: var(--white-color);
      }
    }
    &:hover{
      box-shadow: inset 0 0 0 10em var(--primary-color1);
      .details-button{
        --background-size: 0%;
        --stroke-dashoffset: 26;
        --stroke-duration: .3s;
        --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
        --stroke-delay: .195s;
        &::after{
          opacity: 0;
          transition-delay: 0s;
        }
      }
    }
  }
  &::before{
    content: url(../img/home4/vector/home4-testi-section-arrow.svg);
    position: absolute;
    top: 100px;
    right: 100px;
    @include xxl-down-device(){
      top: 80px;
      right: 60px;
    }
    @include xl-down-device(){
      display: none;
    }
  }
}
/*=====================================
  47.Home4 Blog section
========================================*/
.blog-card2{
  .blog-card-img-wrap{
    position: relative;
    overflow: hidden;
    .card-img{
      position: relative;
      overflow: hidden;
      display: block;
      border-radius: 10px;
      transition: all 0.5s ease-out;
      img{
        min-height: 230px;
        object-fit: cover;
        border-radius: 10px;
        transition: all 0.5s ease-out;
      }
      &::after{
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 1;
      }
    }
    .date{
      position: absolute;
      top: 6px;
      left: 6px;
      text-align: center;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(#0B0C0C, 0.4);
      backdrop-filter: blur(22.5px);
      transition: 0.5s;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: center;
      @include sm-down-device(){
        width: 65px;
        height: 65px;
      }
      span{
        color: var(--white-color);
        text-align: center;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.22px;
    
        display: block;
        strong{
          font-size: 22px;
          font-weight: 700;
          font-family: var(--font-hankenGrotesk);
          margin-bottom: 5px;
          display: block;
          @include sm-down-device(){
            font-size: 20px;
          }
        }
      }
    }
  }
  .blog-card-content-wrap{
    padding-left: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include lg-down-device(){
      padding-left: 0;
      padding-top: 25px;
    }
    @include md-down-device(){
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    .blog-card-content{
      max-width: 380px;
      width: 100%;
      @include md-down-device(){
        max-width: unset;
      }
      .blog-meta{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        .category{
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;
          li{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            position: relative;
            a{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 13px;
              font-weight: 500;
              line-height: 1;
              text-decoration: underline;
              transition: 0.5s;
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
        .blog-comment{
          position: relative;
          padding-left: 20px;
          line-height: 1;
          &::before{
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
            background-color: rgba(var(--title-color-opc), 0.2);
            width: 1px;
            height: 12px;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            position: relative;
          }
        }
      }
      h4{
        margin-bottom: 15px;
        @include sm-down-device(){
          margin-bottom: 10px;
        }
        a{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 27px;
          font-weight: 600;
          line-height: 1.4;
      
          transition: 0.5s;
          @include xl-device(){
            font-size: 24px;
          }
          @include lg-device(){
            font-size: 22px;
          }
          @include sm-down-device(){
            font-size: 22px;
          }
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 0;
      }
    }
    .button-area{
      .read-more-btn{
        min-width: 120px;
        max-width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(var(--title-color-opc), 0.1);
        transition: 0.8s;
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        text-decoration: underline;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: 0.8s;
        svg{
          fill: var(--text-color);
          transition: 0.5s;
        }
        &:hover{
          box-shadow: inset 0 0 0 10em var(--primary-color1);
          color: var(--white-color);
          svg{
            transform: rotate(45deg);
            fill: var(--white-color);
          }
        }
      }
    }
  }
  &:hover{
    .blog-card-img-wrap{
      .card-img{
        img{
          transform: scale(1.1);
        }
        &::after{
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }
      .date{
        background-color: var(--primary-color1);
      }
    }
  }
  &.border--top{
    padding: 35px 0;
    border-top: 1px solid rgba(var(--title-color-opc), 0.1);
    @include md-down-device(){
      padding: 25px 0; 
    }
  }
  &.last-item{
    padding: 35px 0;
    border-top: 1px solid rgba(var(--title-color-opc), 0.1);
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    @include md-down-device(){
      padding: 25px 0; 
    }
  }
  &.style-2{
    .blog-card-img-wrap{
      .card-img{
        border-radius: 5px;
        img{
          min-height: 270px;
          border-radius: 5px;
        }
      }
    }
    .blog-card-content-wrap{
      display: block;
      padding-left: 60px;
      @include xxl-down-device(){
        padding-left: 45px;
      }
      @include lg-device(){
        padding-left: 30px;
      }
      @include lg-down-device(){
        padding-left: 0;
        padding-top: 25px;
      }
      .blog-card-content{
        max-width: 550px;
        margin-bottom: 45px;
        @include lg-device(){
          margin-bottom: 30px;
        }
        @include lg-down-device(){
          max-width: unset;
          margin-bottom: 25px;
        }
        @include sm-down-device(){
          margin-bottom: 20px;
        }
      }
      .button-area{
        .read-more-btn{
          min-width: unset;
          max-width: unset;
          height: unset;
          border-radius: unset;
          border: unset;
          svg{
            fill: var(--text-color);
            transition: 0.5s;
          }
          &:hover{
            box-shadow: none;
            color: var(--primary-color1);
            svg{
              transform: rotate(45deg);
              fill: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  &.style-3{
    .blog-card-img-wrap{
      .card-img{
        border-radius: 5px;
        img{
          border-radius: 5px;
        }
      }
    }
    .blog-card-content-wrap{
      display: block;
      padding-left: 40px;
      padding-top: 35px;
      @include xxl-down-device(){
        padding-left: 35px;
      }
      @include xl-down-device(){
        padding-left: 25px;
      }
      @include lg-down-device(){
        padding-left: 0;
        padding-top: 30px;
      }
      .blog-card-content{
        max-width: unset;
        margin-bottom: 30px;
        @include lg-device(){
          margin-bottom: 30px;
        }
        @include lg-down-device(){
          max-width: unset;
          margin-bottom: 25px;
        }
        @include sm-down-device(){
          margin-bottom: 20px;
        }
        h4{
          a{
            font-size: 40px;
            font-weight: 700;
            line-height: 1.2;
            @include xxl-down-device(){
              font-size: 36px;
            }
            @include md-down-device(){
              font-size: 30px;
            }
            @include sm-down-device(){
              font-size: 28px;
            }
          }
        }
      }
      .star-btn{
        a{
          width: 136px;
          height: 90px;
          .details-button{
            font-size: 15px;
          }
        }
      }
    }
  }
}
.home4-blog-section{
  .section-title3{
    max-width: 760px;
    width: 100%;
    h2{
      font-size: 60px;
      @include xxl-down-device(){
        font-size: 50px;
      }
      @include xl-down-device(){
        font-size: 45px;
      }
      @include md-down-device(){
        font-size: 38px;
      }
      @include sm-down-device(){
        // font-size: 28px;
      }
      span{
        color: var(--text-color);
        font-weight: 500;
      }
    }
  }
}
/*=====================================
  48.Home4 Footer section
========================================*/
.home4-footer-top-section{
  overflow: hidden;
  @include sm-down-device(){
    display: none;
    visibility: hidden;
  }
  .content{
    background: linear-gradient(180deg, rgba(48, 103, 255, 0.08) 0%, rgba(48, 103, 255, 0.10) 100%);
    padding: 55px 0 55px  100px;
    display: flex;
    gap: 35px;
    position: relative;
    @include fifteen-down-device(){
      padding: 45px 0 45px  30px;
    }
    h2{
      margin-bottom: 0;
      a{
        color: rgba(var(--text-color-opc), 0.5);
        font-family: var(--font-hankenGrotesk);
        font-size: 110px;
        font-weight: 400;
        line-height: 1;
        text-decoration: underline;
    
        transition: 0.5s;
      }
    }
    .sm-arrow{
      fill: rgba(var(--text-color-opc), 0.5);
      transition: 0.5s;
      @include xxl-down-device(){
        display: none;
      }
    }
    .arrow{
      position: absolute;
      top: 20px;
      right: 20px;
      
      svg{
        fill: rgba(var(--title-color-opc), 0.05);
        width: 202px;
        height: 204px;
      }
    }
    &:hover{
      h2{
        a{
          color: rgba(var(--title-color-opc), 0.7);
        }
      }
      .sm-arrow{
        fill: rgba(var(--title-color-opc), 0.7);
      }
    }
  }
}
.home4-footer-section{
  overflow: hidden;
  .home4-footer-wrap{
    background-color: #121212;
    .footer-top{
      padding: 110px 100px;
      @include seventeen-down-device(){
        padding: 110px 70px;
      }
      @include xxl-device(){
        padding: 110px 30px;
      }
      @include xxl-down-device(){
        padding: 90px 20px;
      }
      @include md-down-device(){
        padding: 70px 20px;
      }
      .footer-widget{
        .widget-title{
          margin-bottom: 25px;
          h4{
            color: var(--white-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.9px;
            text-transform: uppercase;
            margin-bottom: 0;
            position: relative;
            padding-bottom: 10px;
            &::after{
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 107px;
              height: 2px;
              border-radius: 10px;
              background: linear-gradient(90deg, #0B0C0C 0.01%, #FFF 0.02%, rgba(255, 255, 255, 0.00) 102.8%); 
            }
          }
        }
        h2{
          margin-bottom: 0;
          a{
            color: var(--white-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 50px;
            font-weight: 600;
            line-height: 1.2;
            text-decoration-line: underline;
            transition: 0.5s;
            @include seventeen-down-device(){
              font-size: 45px;
            }
            @include xxl-device(){
              font-size: 40px;
            }
            @include xxl-down-device(){
              font-size: 35px;
            }
            @include xl-down-device(){
              font-size: 28px;
            }
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
        .content{
          p{
            color: var(--white-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            padding-top: 20px;
            margin-bottom: 0;
            @include xl-down-device(){
              font-size: 15px;
              padding-top: 15px;
            }
          }
        }
        .menu-container{
          display: flex;
          gap: 30px;
          @include xl-device(){
            gap: 20px;
          }
          @include xl-down-device(){
            gap: 15px;
          }
          .widget-list{
            li{
              margin-bottom: 20px;
              line-height: 1;
              transition: .5s;
              position: relative;
              transform: translateX(0);
              @include xl-down-device(){
                margin-bottom: 15px;
              }
              &:last-child{
                margin-bottom: 0;
              }
              a{
                color: rgba(#fff, 0.7);
                font-family: var(--font-hankenGrotesk);
                font-size: 14px;
                font-weight: 500;
                line-height: 1.3; 
                letter-spacing: 0.34px;
                text-transform: uppercase;
                transition: 0.5s;
                @include xl-device(){
                  font-size: 15px;
                }
                @include xl-down-device(){
                  font-size: 15px;
                }
                @include sm-down-device(){
                  font-size: 14px;
                }
                &:hover{
                  color: var(--primary-color1);
                }
              }
              &::after{
                content: "";
                width: 10px;
                height: 1px;
                background-color: var(--primary-color1);
                position: absolute;
                left: -15px;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0;
                transition: .35s;
              }
              &:hover{
                transform: translateX(10px);
                &::after{
                  opacity: 1;
                }
              }
            }
          }
        }
        .footer-logo{
          margin-bottom: 35px;
          @include sm-down-device(){
            margin-bottom: 30px;
          }
          .logo-dark{
            display: block;
          }
          .logo-light{
            display: none;
          }
        }
        .social-area{ 
          padding-top: 50px;
          h6{
            color: var(--white-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 18px;
            font-weight: 400;
            line-height: 1.2;
            text-decoration: underline;
            margin-bottom: 20px;
          }
          .social-list{
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
            li{
              display: block;
              text-align: center;
              a{
                i{
                  color: rgba(#fff, 0.7);
                  transition: 0.5s;
                }
                span{
                  color: rgba(#fff, 0.7);
                  font-family: var(--font-hankenGrotesk);
                  font-size: 12px;
                  font-weight: 400;
                  line-height: 1;
                  display: block;
                  padding-top: 2px;
                  transition: 0.5s;
                }
              }
              &:hover{
                a{
                  i{
                    color: var(--primary-color1);
                  }
                  svg{
                    fill: var(--primary-color1);
                  }
                  span{
                    color: var(--primary-color1);
                  }
                }
              }
            }
          }
        }
        .footer-author-area{
          display: flex;
          gap: 15px;
          @include sm-down-device(){
            flex-wrap: wrap;
          }
          .author-img{
            img{
              min-width: 55px;
              max-width: 55px;
              height: 55px;
              border-radius: 50%;
            }
          }
          .author-content{
            .author-name-desig{
              line-height: 1;
              margin-bottom: 18px;
              h6{
                color: var(--white-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 20px;
                font-weight: 600;
                line-height: 1;
                margin-bottom: 10px;
              }
              span{
                color: rgba(#fff, 0.7);
                font-family: var(--font-hankenGrotesk);
                font-size: 14px;
                font-weight: 500;
                line-height: 1;
              }
            }
            p{
              color: var(--white-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 30px;
              font-style: italic;
              font-weight: 500;
              line-height: 1.5;
              margin-bottom: 35px;
              @include xl-down-device(){
                font-size: 22px;
                line-height: 1.4;
              }
              @include sm-down-device(){
                margin-bottom: 20px;
              }
            }
            .details-button {
              background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
              color: var(--white-color);
              font-size: 15px;
              &::after{
                color: var(--white-color);
              }
              svg{
                stroke: var(--white-color);
              }
            }
          }
        }
      }
    }
    .footer-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 100px;
      border-top: 1px solid rgba(#fff, 0.1);
      @include seventeen-down-device(){
        padding: 30px 70px;
      }
      @include xxl-device(){
        padding: 20px 30px;
      }
      @include xxl-down-device(){
        padding: 20px 20px;
      }
      @include lg-down-device(){
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
      }
      .copyright-area{
        p{
          color: rgba(#fff, 0.7);
          font-family: var(--font-hankenGrotesk);
          font-size: 14px;
          font-weight: 400;
          line-height: normal;
          margin-bottom: 0;
          a{ 
            color: rgba(#fff, 0.7);
            font-weight: 700;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
      .footer-bottom-right{
        ul{
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 45px;
          flex-wrap: wrap;
          line-height: 1;
          @include lg-down-device(){
            gap: 30px;
          }
          @include sm-down-device(){
            gap: 20px;
            justify-content: center;
          }
          li{
            a{
              color: rgba(#fff, 0.7);
              font-family: var(--font-hankenGrotesk);
              font-size: 15px;
              font-weight: 500;
              line-height: 1; 
              letter-spacing: 0.3px;
              text-decoration: underline;
              transition: 0.5s;
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
  }
  .contact-area{
    background: linear-gradient(180deg, rgba(48, 103, 255, 0.08) 0%, rgba(48, 103, 255, 0.10) 100%);
    padding: 65px 35px;
    height: 75%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    h6{
      color: var(--primary-color1);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      text-decoration: underline;
      margin-bottom: 10px;
    }
    a{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      transition: 0.5s;
      &:hover{
        color: var(--title-color);
      }
    }
    
  }
  &.style-2{
    background: #FBFFF1;
    .home4-footer-wrap{
      background-color: var(--dark-white-color);
      border-radius: 0 20px 0 0;
      @include xl-down-device(){
        border-radius: unset;
      }
      .footer-top{
        .footer-widget{
          .widget-title{
            h4{
              color: var(--title-color);
              &::after{
                background: linear-gradient(90deg, #0B0C0C 0.01%, rgba(11, 12, 12, 0) 102.8%);
              }
            }
          }
          .menu-container{
            .widget-list{
              li{
                a{
                  color: rgba(var(--title-color-opc), 0.7);
                  display: inline-block;
                  position: relative;
                  &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    width: 100%;
                    border-bottom: 1px solid var(--primary-color1);
                    transform-origin: right center;
                    transform: scale(0, 1);
                    transition: transform 0.5s;
                  }
                  &:hover{
                    color: var(--primary-color1);
                    &::after{
                      transform-origin: left center;
                      transform: scale(1, 1);
                    }
                  }
                }
                &::after{
                  display: none;
                }
                &:hover{
                  transform: translateX(0);
                }
              }
            }
          }
          .footer-logo{
            .logo-dark{
              display: block;
            }
            .logo-light{
              display: none;
            }
          }
          .footer-contact-area{
            h6{
              color: var(--primary-color1);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 500;
              line-height: 1;
              text-decoration: underline;
              margin-bottom: 10px;
            }
            a{
              color: rgba(var(--text-color-opc), 0.7);
              font-family: var(--font-inter);
              font-size: 17px;
              font-weight: 400;
              line-height: 1.6;
              transition: 0.5s;
              &:hover{
                color: var(--title-color);
              }
            }
            
          }
          .social-area{ 
            padding-top: 30px;
            @include sm-down-device(){
              padding-top: 20px;
            }
            h6{
              color: var(--title-color);
              @include sm-down-device(){
                margin-bottom: 15px;
              }
            }
            .social-list{
              li{
                display: block;
                text-align: center;
                a{
                  i{
                    color: rgba(var(--title-color-opc), 0.5);
                  }
                  span{
                    color: rgba(var(--title-color-opc), 0.7);
                  }
                }
                &:hover{
                  a{
                    i{
                      color: var(--primary-color1);
                    }
                    svg{
                      fill: var(--primary-color1);
                    }
                    span{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
          .footer-author-area{
            .author-content{
              .author-name-desig{
                h6{
                  color: var(--title-color);
                }
                span{
                  color: rgba(var(--title-color-opc), 0.7);
                }
              }
              p{
                color: var(--title-color);
              }
              .details-button {
                background-image: linear-gradient(0deg, #0B0C0C 0%, #0B0C0C 100%);
                color: var(--title-color);
                font-size: 15px;
                &::after{
                  color: var(--title-color);
                }
                svg{
                  stroke: var(--title-color);
                }
              }
            }
          }
        }
      }
      .footer-bottom{
        border-top: 1px solid rgba(var(--title-color-opc), 0.1);
        .copyright-area{
          p{
            color: rgba(var(--title-color-opc), 0.7);
            a{ 
              color: rgba(var(--title-color-opc), 0.7);
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
        .footer-bottom-right{
          ul{
            li{
              a{
                color: rgba(var(--title-color-opc), 0.7);
                &:hover{
                  color: var(--primary-color1);
                }
              }
            }
          }
        }
      }
    }
    .contact-area{
      background: #FBFFF1;;
      height: unset;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 40px 20px;
      @include xxl-down-device(){
        padding: 40px 15px;
      }
      h2{
        margin-bottom: 0;
        a{
          color: rgba(var(--text-color-opc), 0.2);
          font-family: var(--font-hankenGrotesk);
          font-size: 55px;
          font-weight: 700;
          line-height: 1;
          text-decoration-line: underline;
          writing-mode: vertical-lr;
          transition: 0.5s;
          @include xxl-down-device(){
            font-size: 50px;
          }
          &:hover{
            color: rgba(var(--text-color-opc), 0.5);
          }
        }
        
      }
    }
  }
}
/*=====================================
  49.Home5 Banner Section
========================================*/
.sub-title5{
  display: inline-flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  color: var(--text-color);
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  background-color: transparent;
  text-transform: uppercase; 
  border-radius: 100px;
  padding: 8px 12px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  svg{
    fill: #E62415;
  }
  &::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    border: 1px solid rgba(11, 12, 12, 0.10);
    background: #E1E3F3;
    z-index: -1;
  }
  &::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%) rotate(2deg);
    border-radius: 100px;
    background: rgba(11, 12, 12, 0.10);
    z-index: -1;
  }
  &.two{
    &::after{
      border: 1px solid rgba(11, 12, 12, 0.10);
      background: var(--dark-white-color);
    }
    &::before{
      background: rgba(11, 12, 12, 0.10);
    }  
  }
}
.home5-banner-section{
  background-image: url(../img/home5/banner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 220px 0 60px;
  position: relative;
  overflow: hidden;
  @include xxl-down-device(){
    padding: 170px 0 60px;
  }
  .banner-content{
    position: relative;
    h1{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 70px;
      font-weight: 900;
      line-height: 1.2;
  
      margin-bottom: 20px;
      span{
        text-decoration: underline;
        color: var(--primary-color1);
    
        font-style: italic;
      }
      @include lg-device(){
        font-size: 65px;
        margin-bottom: 30px;
      }
      @include lg-down-device(){
        font-size: 50px;
        margin-bottom: 30px;
      }
      @include md-down-device(){
        font-size: 45px;
        margin-bottom: 20px;
      }
      @include sm-down-device(){
        font-size: 40px;
        margin-bottom: 20px;
      }
    }
    p{
      max-width: 954px;
      width: 100%;
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
      @include md-down-device(){
        font-size: 15px;
      }
    }
    .banner-content-bottom{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      .rating-area{
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 1;
        .review{
          span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 5px;
            display: block;
          }
          .logo-dark{
            display: block;
          }
          .logo-light{
            display: none;
          }
        }
        .rating{
           .star{
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
            margin-top: 5px;
            line-height: 1;
            li{
              i{
                color: #E62415;
              }
            }
           }
           span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
           }
        }
      }
    }
  }
  .banner-bottom-section{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 4% 0px 10%;
    margin-top: -100px;
    @include xxl-down-device(){
      padding: 0px 2% 0px 5%;
    }
    .wrapper {
      --clip-path: circle(65px at left);
      --clip-path-hover: circle(70px at left);
      --clip-path-clicked: circle(100vw at left);
      --duration: .4s;
      --timing-function: ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100%;
      z-index: 999;
      .video-info {
          width: 140px;
          position: relative;
          height: 140px;
           h4{
              font-family: var(--font-inter);
              font-size: 30px;
              color: var(--white-color);
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 999999;
              display: none;
            }
          .video {
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: center;
            align-items: center;
            clip-path: var(--clip-path);
            transition: -webkit-clip-path var(--duration) var(--timing-function);
            transition: clip-path var(--duration) var(--timing-function);
            transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
            position: relative;
            top: 55px;
            left: 100px;
           
            &::before {
                position: absolute;
                top: -20px;
                left: -20px;
                width: 40px;
                height: 40px;
                background: url(../img/home5/icon/play-btn.svg);
                content: "";
                z-index: 999999999999;
                background-size: 100%;
            }
            video {
                position: fixed;
                top: 0;
                left: 0;
                min-width: 100%;
                min-height: auto;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
          }
      }
    }
    .banner-img{
      @include xxl-device(){
        max-width: 370px;
      }
      @include xxl-down-device(){
        max-width: 330px;
      }
      img{
        border-radius: 20px;
      }
    }
  }
     #video_check1{
        width: 200px;
        height: 200px;
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        border-radius: 40px !important;
        outline: none;
        z-index: 2;
        appearance: none;
        cursor: pointer;
        z-index: 9999999;
        &:focus{
            outline: 0;
        }
    }
    #video_check1:hover ~ .video {
        clip-path: var(--clip-path-hover);
    }
    #video_check1:checked {
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        bottom: 0;
    }
    #video_check1:checked ~ .video {
        clip-path: var(--clip-path-clicked);
    }
    #video_check1:checked ~ h4 {
        display: block;
    }
    #video_check1:checked ~ .video::before {
        background-image: url(../img/home5/icon/video-close.svg);
    }
    .scroll-down-btn{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 160px;
      animation: up-down 2s linear infinite alternate;
      z-index: 9;
      @include lg-down-device(){
        display: none;
      }
      a{
        width: 41px;
        height: 80px;
        border-radius: 110px;
        border: 1px solid rgba(var(--title-color-opc), 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        svg{
          fill: none;
          stroke: rgba(var(--title-color-opc), 0.5);
          transition: 0.5;
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            stroke: var(--white-color);
          }
        }
      }
    }
}
/*=====================================
  50.Home5 Partnership Section
========================================*/
.partnership-area{
  scroll-margin-top: 100px;
  .single-pertner{
    border-radius: 10px;
    background: #F8F8F8;   
    padding: 20px 30px; 
    position: relative;
    transition: 0.35s;
    svg{
      position: absolute;
      right: 0;
      top: 0;
      stroke: #EEEEEE;
      transition: 0.35s;
    }
    span{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 14px;
      font-weight: 600;
      display: inline-block;
      text-transform: uppercase;
      margin-bottom: 10px;
      transition: 0.35s;
    }
    .partner-logos{
      margin-bottom: 35px;
      transition: 0.35s;
      .white{
        display: none;
        visibility: hidden;
        transition: 0.35s;
      }
    }
    p{
      margin-bottom: 0;
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 500;
      line-height: 26px; 
      transition: 0.35s;
      @include lg-device(){
        font-size: 15px;
      }
    }
    &:hover{
      background-color: var(--title-color);
      svg{
        stroke: var(--primary-color1);
      }
      span{
        color: var(--dark-white-color);
      }
      p{
        color: var(--dark-white-color);
      }
      .partner-logos{
        .black{
          display: none;
          visibility: hidden;
        }
        .white{
          display: block;
          visibility: visible;
        }
      }
    }
  }
  .total-partner{
    a{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 15px;
      font-weight: 400;  
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #EEE;
      line-height: 1;
      padding: 11px 20px;
      transition: 0.5s;
      svg{
        fill: var(--title-color);
        transition: 0.5s;
      }
      &:hover{
        background-color: var(--primary-color1);
        border-color: var(--primary-color1);
        color: var(--white-color);
        svg{
          fill: var(--white-color);
          transform: rotate(45deg);
        }
      }
    }
  }
}
/*=====================================
  51.Home5 About Section
========================================*/
.home5-about-section{
  .about-content{
    >p{
      color: var(--text-color);
      font-family: Inter;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.8;  
      margin-bottom: 40px;
      @include md-down-device(){
        font-size: 15px;
      }
    }
     .eg-progress-wrap{
      .eg-progress-bar-single{
        .eg-progress-bar-title{
            h6{
                color: var(--text-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 15px;
                font-weight: 500;    
                margin-bottom: 18px;
            }
        }
        .eg-progress-bar{
            height: 3px;
            background-color: rgba(var(--primary-color1-opc), 0.5);
            border-radius: 25px;
            .experience-bar-per {
                height: 3px;
                background-color: var(--text-color);
                border-radius: 25px;
                width: 0;
                transition: 1s linear;
                position: relative;
                &:before {
                  content: attr(data-per);
                  position: absolute;
                  color: var(--text-color);
                  font-size: 14px;
                  font-weight: 500;
                  font-family: var(--font-hankenGrotesk);
                  line-height: 1;
                  top: -30px;
                  right: 0;
                  transform: translateX(50%);
                  z-index: 1;
                  @include sm-down-device(){
                    right: 10px;
                  }
                }
            }
        }
        
    }
    }
    .about-countdown-area{
      padding-top: 80px;
      @include lg-down-device(){
        padding-top: 50px;
      }
      ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        flex-wrap: wrap;
        .single-countdown{
          position: relative;
          display: flex;
          gap: 30px;
          &::after{
            content: '';
            height: 120px;
            width: 1px;
            background-color: rgba(var(--title-color-opc), 0.1);
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            @include xxl-down-device(){
              left: -15px;
            }
            @include xl-down-device(){
              display: none;
            }
          }
          &:first-child{
            &::after{
              display: none;
            }
          }
          .icon{
            svg{
              fill: var(--text-color);
            }
          }
          .content{
            @include lg-down-device(){
              padding-bottom: 0;
              border-bottom: unset;
            }
            .number{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              line-height: 1;
              display: flex;
              align-items: baseline;
              gap: 10px;
              margin-bottom: 10px;
              h5{
                font-size: 40px;
                font-weight: 800;
                margin-bottom: 0;
                line-height: 1;
                @include lg-down-device(){
                  font-size: 35px;
                }
              }
              span{
                font-size: 27px;
                font-weight: 500;
                @include lg-down-device(){
                  font-size: 22px;
                }
              }
            }
            p{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 0;
              @include lg-down-device(){
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  .about-right{
    position: relative;
    padding-bottom: 100px;
    @include lg-down-device(){
      padding-bottom: 0;
    }
    .banner-btn{
      position: absolute;
      right: 0;
      bottom: 0px;
      @include lg-down-device(){
        position: relative;
        right: unset;
        bottom: unset;
      }
    }
    .about-img{
      max-width: 470px;
      width: 100%;
      border-radius: 500px 500px 5px 0px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      @include lg-down-device(){
        display: none;
        visibility: hidden;
      }
      &::after{
        content: '';
        height: 99%;
        width: 100%;
        border-radius: 500px 500px 5px 0px;
        background: var(--title-color);  
        position: absolute;
        left: 15px;
        bottom: -10px;
        z-index: -1;
      }
      img{
        border-radius: 500px 500px 5px 0px;
      }
    }
    a{
      position: relative;
      line-height: 1;
      transition: 0.5s;
      height: 201px;
      width: 201px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .bg{
        line-height: 1;
        transition: 0.5s;
        svg{
            fill: var(--dark-white-color);
            stroke: rgba(var(--title-color-opc), 0.1);
            transition: 0.5s;
        }
      }
      .details-button{
          transition: 0.5s;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      &:hover{
          .bg{
              svg{
                  fill: var(--primary-color1);
                  stroke: var(--primary-color1);
              }
          }
          .details-button{
            --background-size: 0%;
            --stroke-dashoffset: 26;
            --stroke-duration: .3s;
            --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
            --stroke-delay: .195s;
            background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
            svg{
              stroke: var(--white-color);
            }
            color: var(--white-color);
            &::after{
              opacity: 0;
              transition-delay: 0s;
              color: var(--white-color);
            }
          }   
      }
    }
  }
}
/*=====================================
  52.Home5 Services Section
========================================*/
.home5-services-section{
  background: #F3ECEC;
  padding: 110px 7%;
  @include seventeen-down-device(){
    padding: 110px 5%;
  }
  @include xxl-down-device(){
    padding: 110px 1%;
  }
  @include lg-down-device(){
    padding: 90px 0%;
  }
  .banner-btn{
    padding-top: 50px;
    @include xl-down-device(){
      padding-top: 30px;
    }
    a{
      position: relative;
      line-height: 1;
      transition: 0.5s;
      height: 201px;
      width: 201px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .bg{
        line-height: 1;
        transition: 0.5s;
        svg{
            fill: transparent;
            stroke: rgba(var(--title-color-opc), 0.1);
            transition: 0.5s;
        }
      }
      .details-button{
          transition: 0.5s;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      &:hover{
          .bg{
              svg{
                  fill: var(--primary-color1);
                  stroke: var(--primary-color1);
              }
          }
          .details-button{
            --background-size: 0%;
            --stroke-dashoffset: 26;
            --stroke-duration: .3s;
            --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
            --stroke-delay: .195s;
            background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
            svg{
              stroke: var(--white-color);
            }
            color: var(--white-color);
            &::after{
              opacity: 0;
              transition-delay: 0s;
              color: var(--white-color);
            }
          } 
      }
    }
  }
  .services-card{
    height: 100%;
    display: flex;
    gap: 20px;
    padding: 30px 25px;
    border-left: 1px solid rgba(var(--title-color-opc), .1);
    border-bottom: 1px solid rgba(var(--title-color-opc), .1);
    @include xxl-down-device(){
      padding: 30px 20px;
    }
    @include sm-down-device(){
      flex-wrap: wrap;
    }
    .icon{
      svg{
        fill: var(--text-color);
        transition: all 0.5s ease-out;
      }
    }
    .services-content{
      .title-category{
        margin-bottom: 15px;
        h3{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 30px;
          font-weight: 700;
        
          margin-bottom: 2px;
          line-height: 1;
          @include xxl-device(){
            font-size: 25px;
          }
          @include xxl-down-device(){
            font-size: 25px;
          }
          @include sm-down-device(){
            font-size: 22px;
          }
        }
        span{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 18px;
          font-weight: 500;
          padding-left: 37px;
          line-height: 1;
          position: relative;
          &::after{
            content: '';
            height: 2px;
            width: 30px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(var(--title-color-opc), .6);
          }
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.7;
        margin-bottom: 0;
        @include md-down-device(){
          font-size: 15px;
        }
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 10px;
        margin-bottom: 30px;
        @include sm-down-device(){
          margin-bottom: 20px;
        }
        li{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.28px;
          padding-top: 5px;
          margin-right: 20px;
          i{
            color: var(--primary-color1);
            &::before{
              font-weight: 800 !important;
            }
          }
        }
      }
    }
    &.boder-bottom-none{
      border-bottom: none;
      @include sm-down-device(){
        border-bottom: 1px solid rgba(var(--title-color-opc), .1);
      }
    }
    &:hover{
      .icon{
        svg{
          transform: rotate(360deg);
        }
      }
    }
  }
}
/*=====================================
  53.Home5 Why Choose Section
========================================*/
.home5-why-choose-section{
  .why-choose-img{
    position: relative;
    z-index: 1;
    img{
      clip-path: polygon(0 0, 98% 2%, 98% 98%, 0% 100%);
      
    }
    &:after{
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background-color: rgba(var(--primary-color1-opc), .2);

    }
  }
  .why-choose-content{
    >p{
      color: var(--text-color);
      font-family: Inter;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.8;  
      margin-bottom: 40px;
      @include md-down-device(){
        font-size: 15px;
      }
    }
    .about-coundown-area{
      .single-countdown{
        text-align: center;
        padding: 35px;
        border-right: 1px solid rgba(var(--title-color-opc), 0.1);
        border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
        width: 100%;
        @include md-down-device(){
          border: 1px solid rgba(var(--title-color-opc), 0.1);
          border-bottom: none;
        }
        &.two{
          border-right: none;
          @include md-down-device(){
            border-right: 1px solid rgba(var(--title-color-opc), 0.1);
          }
        }
        &.three{
          border-bottom: none;
        }
        &.four{
          border-bottom: none;
          border-right: none;
          @include md-down-device(){
            border-right: 1px solid rgba(var(--title-color-opc), 0.1);
            border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
          }
        }
        .number{
          line-height: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          h2{
            font-family: var(--font-hankenGrotesk);
            font-size: 150px;
            font-weight: 900;
            letter-spacing: 4.5px;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px var(--title-color);
            margin-bottom: 0;
            line-height: 0.8;
            @include xl-down-device(){
              font-size: 130px;
            }
            @include sm-down-device(){
              font-size: 100px;
            }
          }
          span{
            font-family: var(--font-hankenGrotesk);
            font-size: 150px;
            font-weight: 900;
            letter-spacing: 4.5px;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px var(--title-color);
            line-height: 0.8;
            @include xl-down-device(){
              font-size: 130px;
            }
            @include sm-down-device(){
              font-size: 100px;
            }
          }
        }
        .content{
          background-color: var(--dark-white-color);
          padding-top: 20px;
          margin-top: -15px;
          position: relative;
          z-index: 1;
          p{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 0;
            @include lg-down-device(){
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
/*=====================================
  54.Home5 Industry Section
========================================*/
.home5-industry-section{
  .section-title5{
    p{
      max-width: 574px;
      width: 100%;
      margin-left: auto;
    }
  }

}
.industry-card{
  .industry-img{
    overflow: hidden;
    position: relative;
    border-radius: 10px 10px 0px 0px;
    img{
      border-radius: 10px 10px 0px 0px;
      transition: all 0.5s ease-out;
      @include lg-down-device(){
        width: 100%;
      }
    }
    &::after{
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 1;
    }
  }
  .industry-content{
    border: 1px solid rgba(var(--title-color-opc), 0.2);
    border-top: none;
    border-radius: 0px 0px 10px 10px;
    padding: 20px 20px;
    h5{
      color: var(--text-color);
      text-align: center;
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: 0.36px;    
      margin-bottom: 0;
      transition: 0.35s;
      &:hover{
        color: var(--primary-color1);
      }
    }
  }
  &:hover{
    .industry-img{
      img{
        transform: scale(1.1);
      }
      &::after{
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
      }
    }
  }
}
.star-btn{
  a{
      position: relative;
      line-height: 1;
      transition: 0.5s;
      height: 201px;
      width: 201px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .bg{
        line-height: 1;
        transition: 0.5s;
        svg{
            fill: transparent;
            stroke: rgba(var(--title-color-opc), 0.15);
            transition: 0.5s;
        }
      }
      .details-button{
          transition: 0.5s;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      &:hover{
          .bg{
              svg{
                  fill: var(--primary-color1);
                  stroke: var(--primary-color1);
              }
          }  
          .details-button{
            --background-size: 0%;
            --stroke-dashoffset: 26;
            --stroke-duration: .3s;
            --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
            --stroke-delay: .195s;
            background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
            svg{
              stroke: var(--white-color);
            }
            color: var(--white-color);
            &::after{
              opacity: 0;
              transition-delay: 0s;
              color: var(--white-color);
            }
          }
      }
    }
}
/*=====================================
  55.Home5 Team Section
========================================*/
.team-card2{
  border-radius: 500px 500px 10px 10px;
  border: 1px solid rgba(18, 18, 18, 0.10);
  background: var(--dark-white-color);
  padding: 10px;   
  transition: all 0.45s;
  .team-img{
    position: relative;
    border-radius: 500px 500px 0px 0px;
    transition: all 0.45s;
    img{
      transition: all 0.45s;
      border-radius: 500px 500px 0px 0px;
      @include xl-down-device(){
        width: 100%;
      }
    }
    .social-area{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: end;
      justify-content: center;
      padding-bottom: 20px;
      gap: 22px;
      border-radius: 500px 500px 0px 0px;
      background: linear-gradient(180deg, rgba(11, 12, 12, 0.00) 17.78%, #0B0C0C 100%);   
      position: absolute;
      left: 0;
      bottom: 0;  
      height: 10%;
      width: 100%;
      transition: all 0.45s;
      opacity: 0;
      @include xxl-device(){
        gap: 17px;
      }
      @include xxl-down-device(){
        gap: 17px;
      }
      li{
        line-height: 1;
        position: relative;
        a{
          color: var(--white-color);
          font-size: 20px;
          line-height: 1;
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
        &::after{
          content: '';
          height: 3px;
          width: 3px;
          border-radius: 50%;
          background-color: var(--white-color);
          opacity: .2;
          position: absolute;
          left: -12px;
          top: 50%;
          transform: translateY(-50%);
          @include xxl-device(){
            left: -12px;
          }
          @include xxl-down-device(){
            left: -11px;
          }
        }
        &:first-child{
          &::after{
            display: none;
            visibility: hidden;
          }
        }
      }
    }
  }
  .team-content{
    line-height: 1;
    padding: 15px 0;
    h4{
      margin-bottom: 3px;
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 25px;
      font-weight: 700;
    }
    span{
      line-height: 1;
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 400;  
    }
  }
  &:hover{
    border-radius: 10px;
    .team-img{
      border-radius: 10px;
      img{
        border-radius: 10px 10px 0 0;
      }
      .social-area{
        border-radius: 10px 10px 0 0;
        opacity: 1;
        height: 100%;
      }
    }
  }
}
.home5-team-section{
  background-color: #FFFAF0;
  padding: 110px 10%;
  @include eighteen-down-device(){
    padding: 110px 8%;
  }
  @include seventeen-down-device(){
    padding: 110px 5%;
  }
  @include xxl-device(){
    padding: 110px 3%;
  }
  @include xxl-down-device(){
    padding: 110px 1%;
  }
  @include lg-down-device(){
    padding: 90px 0%;
  }
}
/*=====================================
  56.Home5 Testimonial Section
========================================*/
.home5-testimonial-section{
  .testimonial-left{
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    z-index: 1;
    @include sm-down-device(){
      justify-content: start;
    }
    svg{
      stroke: #0B0C0C;
      opacity: 0.2;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      @include sm-down-device(){
        top: unset;
        bottom: 0;
        transform: translate(0);
      }
    }
    .testimonial-img{
      padding: 5px;
      border: 1px solid #eee;
      border-radius: 143px 143px 0px 143px;
      transform: translateX(-40px);
      @include lg-down-device(){
        transform: translateX(0);
      }
      img{
        border-radius: 143px 143px 0px 143px;
      }
    }
  }
  .testimonial-wrap{
    position: relative;
    .swiper-slide-active{
        p{
            animation: fadeInDown 1.7s;
        }
        span{
            animation: fadeInDown 1.7s;
        }
        .author-name-desig{
            animation: fadeInDown 1.7s;
        }
    }
    .testimonial-card2{
      display: flex;
      align-items: center;
      gap: 50px;
      @include xxl-down-device(){
        gap: 30px;
      }
      @include lg-down-device(){
        gap: 20px;
      }
      @include md-down-device(){
        flex-direction: column;
        align-items: flex-start;
      }
    
      .content{
        >span{
            color: var(--primary-color1);
            font-family: var(--font-hankenGrotesk);
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 10px;
        }
        p{
            color: rgba(var(--title-color-opc), 0.7);
            font-family: var(--font-inter);
            font-size: 22px;
            font-weight: 400;     
            line-height: 1.8;  
            margin-bottom: 35px;
            @include md-down-device(){
              font-size: 20px;
              margin-bottom: 25px;
            }
            @include sm-down-device(){
              font-size: 18px;
            }
        }
        .author-name-desig{
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 10px;
          .author-img{
            img{
              width: 59px;
              height: 59px;     
              border-radius: 50%;
            }
          }
          .content{
            h6{
                color:  var(--title-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 18px;
                font-weight: 600;     
                margin-bottom: 7px;  
            }
            span{
                color: rgba(var(--title-color-opc), 0.6);
                font-family: var(--font-inter);
                font-size: 14px;
                font-weight: 500;     
            }
          }
        }
      }
    }
    .slider-btn-area{
        position: absolute;
        bottom: 10px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        max-width: 550px;
        width: 100%;
        z-index: 9;
        @include xxl-down-device(){
          max-width: 370px;
          gap: 30px;
        }
        @include lg-device(){
          max-width: 450px;
        }
        @include md-device(){
          bottom: 50px;
        }
        @include sm-down-device(){
          justify-content: end;
        }
        .dash{
            width: 100%;
            height: 1px;
            background-color: rgba(var(--title-color-opc), 0.1);
            @include sm-down-device(){
              display: none;
            }
        }
        .slider-btn-group{
          display: flex;
          align-items: center;
          justify-content: space-between;
          &.w-100{
              max-width: 100px;
              min-width: 100px;
              width: 100%;
          }
        }
    }                                              
  } 
}
/*=====================================
  57.Home5 Blog Section
========================================*/
.home5-blog-section{
  .section-title5{
    p{
      max-width: 575px;  
      width: 100%;
      margin-left: auto;
    }
  }
  .w-85{
    width: 85%;
    @include lg-down-device(){
      width: 100%;
    }
  }
}
/*=====================================
  58.Home5 Portfolio Section
========================================*/
.portfolio-card{
  border: 1px solid #eee;
  border-radius: 10px;
  transition: 0.35s;
  .image-and-tag{
    position: relative;
    background-color: #eee;
    padding: 30px 40px 0;
    border-radius: 10px 10px 0 0;
    transition: 0.35s;
    @include xl-down-device(){
      padding: 20px 20px 0;
    }
    .tag{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
      transition: 0.35s;
      li{
        transition: 0.35s;
        a{
          line-height: 1;
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 500;   
          background-color: var(--white-color);   
          border-radius: 50px;
          padding: 5px 22px;
          transition: 0.35s;
          &:hover{
            color: var(--white-color);
            background-color: var(--primary-color1);
          }
        }
      }
    }
    .portfolio-img{
      position: relative;
      overflow: hidden;
      border-radius: 5px 5px 0 0;
      transition: 0.35s;
      img{
        border-radius: 5px 5px 0 0;
        transition: all 0.5s ease-out;
        @include lg-down-device(){
          object-fit: cover;
          min-height: 200px;
        }
      }
    }
    
  }
  .portfolio-content{
    padding: 28px 40px;
    position: relative;
    @include xl-down-device(){
      padding: 25px 20px;
    }
    h4{
      margin-bottom: 0;
      a{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 25px;
        font-weight: 600;
        line-height: 1.4;
    
        transition: 0.5s;   
        @include xl-down-device(){
          font-size: 22px;
        } 
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .details-btn{
      height: 50px;
      width: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #282828;   
      position: absolute;
      top: -25px;
      right: 70px;
      transition: 0.35s;
      @include xl-down-device(){
        right: 50px;
      }
      @include lg-down-device(){
        right: 30px;
        width: 45px;
        height: 45px;
      }
      svg{
        fill: var(--white-color);
        transition: 0.35s;
      }
      &:hover{
        background-color: var(--primary-color1);
        svg{
          transform: rotate(45deg);
        }
      }
    }
  }
  &:hover{
    .image-and-tag{
      .portfolio-img{
        img{
          transform: scale(1.1);
        }
      }
    }
    .portfolio-content{
      .details-btn{
        background-color: var(--primary-color1);
      }
    }
  }
}
.home5-portfolio-section{
  .section-title5{
    p{
      max-width: 575px;  
      width: 100%;
      margin-left: auto;
    }
  }
}
/*=====================================
  59.Home5 Contact Section
========================================*/
.home5-contact-section{
  background: #FBFFF1;
  overflow: hidden;
  position: relative;
  padding: 100px 0;
  @include xl-down-device(){
    padding: 90px 0;
  }
  @include md-down-device(){
    padding: 70px 0;
  }
  
  .star-btn{
    transform: translateY(30px);
    @include lg-down-device(){
      transform: translateY(0px);
    }
    a{
      width: 238px;
      height: 238px;
      @include sm-down-device(){
        width: 200px;
        height: 200px;
      }
      .bg{
        svg{
          @include sm-down-device(){
            width: 200px;
          }
        }
      }
      .details-button{
        @include sm-down-device(){
          font-size: 16px;
        }
      }
    }
  }
  .marquee-area{
    padding-top: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    @include lg-device(){
      padding-top: 45px;
    }
    @include lg-down-device(){
      padding-top: 0;
    }
    .marquee_text{
      display: flex;
      align-items: center;
    }
    .js-marquee{
        display: flex;
        align-items: center;
        gap: 25px;
    }
    h6{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 35px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.36px;
        text-transform: uppercase;     
        margin-bottom: 0;
        @include sm-down-device(){
          font-size: 30px;
        }
    }
    svg{
      fill: var(--primary-color1);
    }
  }
  .arrow{
    position: absolute;
    top: 0;
    right: 0;
    svg{
      fill: rgba(var(--text-color-opc), 0.05);
      @include xxl-down-device(){
        width: 150px;
        height: 150px;
      }
      @include xl-down-device(){
        width: 120px;
        height: 120px;
      }
      @include lg-down-device(){
        display: none;
      }
    }
  }
}
/*=====================================
  60.Breadcrumb Section
========================================*/
.breadcrumb-section{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 200px 0px 90px;
  @include lg-down-device(){
    padding: 160px 0px 80px;
  }
  .banner-wrapper{
    .banner-content{
      h1{
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 56px;
        font-weight: 800; 
        line-height: 1.2;
        margin-bottom: 0;
        @include md-down-device(){
          font-size: 50px;
        }
        @include sm-down-device(){
          font-size: 40px;
        }
      }
      .breadcrumb-list{
        padding: 0;
        margin: 0;
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50px;
        padding: 11px 22px;
        line-height: 1;
        margin-bottom: 12px;
        li{
          color: var(--white-color);
          font-family: var(--font-inter);
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 0.39px;
          text-transform: uppercase;   
          position: relative;
          padding-left: 16px;
          a{
            color: var(--primary-color1);
          } 
          &::before{
            content: "";
            width: 8px;
            height: 2px;
            border-radius: 50%;
            background-color: var(--white-color);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:first-child{
            padding-left: 0;
            &::before{
              display: none;
            }
          }
        }
      }
    }
    .scroll-down-btn{
      animation: up-down2 2s linear infinite alternate;
      display: flex;
      justify-content: center;
      padding-top: 50px;
      @keyframes up-down2 {
        0% {
            transform: translateY(40px);
        }
        50% {
            transform: translateY(20px);
        }
        100% {
            transform: translateY(40px);
        }
      }
      @include md-down-device(){
        display: none;
      }
      a{
        width: 41px;
        height: 80px;
        border-radius: 110px;
        border: 1px solid rgba(#fff, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        svg{
          fill: none;
          stroke: rgba(#fff, 0.5);
          transition: 0.5s;
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            stroke: var(--white-color);
          }
        }
      }
    }
  }
}
.scroll-margin{
  scroll-margin-top: 50px;
}
/*=====================================
  61.Case Study Details Page
========================================*/
.case-study-details-page{
  scroll-margin-top: 50px;
  .case-thumb{
    margin-bottom: 25px;
    img{
      border-radius: 10px;
    }
  }
  .case-details-content{
    h3{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 33px;
      font-weight: 700;
      line-height: 26px; 
      margin-bottom: 20px;
      padding-top: 32px;
      @include md-down-device(){
        font-size: 28px;
      }
    }
    p{
      margin-bottom: 12px;
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 400;
      line-height: 35px; 
      @include md-down-device(){
        font-size: 17px;
        line-height: 30px;
      }
    }
    .features{
      margin: 0;
      padding: 0;
      list-style: none;
      padding-top: 15px;
      li{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 13px;
        &:last-child{
          margin-bottom: 0;
        }
        svg{
          fill: var(--primary-color1);
          margin-right: 5px;
        }
      }
      &.two{
        columns: 2;
        @include md-down-device(){
          columns: 1;
        }
      }
    }
    .case-img-group{
      padding-top: 50px;
      margin-bottom: 25px;
      .case-img{
        img{
          border-radius: 10px;
        }
      }
    }
  }
  .case-sidebar{
    .case-info-wrap{
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: rgba(48, 103, 255, 0.03);    
      padding: 25px 35px;
      @include xl-down-device(){
        padding: 25px 25px;

      }
      h4{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        svg{
          fill: #E62415;
        }
      }
      .case-info{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          display: flex;
          align-items: center;
          gap: 20px;
          border-bottom: 1px solid var(--border-color);
          padding: 20px 0 15px;
          &:last-child{
            border-bottom: none;
            padding-bottom: 0;
          }
          .icon{
            svg{
              stroke: rgba(var(--title-color-opc), .2);
            }
          }
          .content{
            line-height: 1;
            span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 1;   
              display: inline-block;
              margin-bottom: 3px;
            }
            h5{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 20px;
              font-weight: 600;
              margin-bottom: 0;
              @include xl-down-device(){
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    .social-share-area{
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: rgba(48, 103, 255, 0.03);    
      padding: 25px 35px; 
      @include xl-down-device(){
        padding: 25px 25px;
      } 
      h4{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 22px;
        font-weight: 600;
        text-decoration-line: underline;
        margin-bottom: 20px;
      } 
      ul{
        display: flex;
        align-items: center;
        gap: 40px;
        @include xxl-down-device(){
          gap: 25px;
          flex-wrap: wrap;
        }
        li{
          line-height: 1;
          a{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 5px;
            transition: 0.35s;
            i{
              font-size: 16px;
            }
            span{
              display: block;
            }
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
}
.details-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(var(--title-color-opc), 0.1);
  border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
  @include md-down-device() {
    justify-content: center;
    flex-wrap: wrap;
  }

  .single-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.35s;
    @include lg-down-device(){
      gap: 15px;
    }
    .star-btn{
      a{
        width: 163px;
        height: 80px;
      }
      .nav-btn{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 5px;
        svg{
          fill: var(--primary-color1);
          transition: 0.5s;
        }
        span{
          color: var(--primary-color1);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 500;
          line-height: 1;
          text-transform: uppercase;
          text-decoration-line: underline;
          white-space: nowrap;
          transition: 0.5s;
        }
      }
      &:hover{
        .nav-btn{
          svg{
            fill: var(--white-color);
            transform: rotate(-45deg);
          }
          span{
            color: var(--white-color);
          }
        }
      }
    }
    .content {
      max-width: 301px;
      width: 100%;
      line-height: 1;
      transition: 0.35s;
      p{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 0;
      }
    }
    &.two{
      .star-btn{
        &:hover{
          .nav-btn{
            svg{
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }
} 
.relatate-case-study-section{
  .section-title5{
    h2{
      span{
        display: inline-block;
      }
    }
  }
}
/*=====================================
  62.Team Page
========================================*/
.team-card-section{
  scroll-margin-top: 50px;
  .star-btn{
    a{
      width: 235px;
      height: 235px;
    }
  }
}
/*=====================================
  63.Inner Page Pagination Section
========================================*/
.pagination-area{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  .paginations{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    .page-item{
      a{
        color: rgba(var(--text-color-opc), 0.5);
        font-family: var(--font-hankenGrotesk);
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        border: 1px solid rgba(var(--text-color-opc), 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          color: var(--white-color);
        }
      }
      &.active{
        a{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          color: var(--white-color);
        }
      }
      &.paginations-button{
        a{
          font-size: 15px;
          font-weight: 600;
          gap: 5px;
          width: unset;
          height: unset;
          padding: 11px 15px;
          svg{
            fill: rgba(var(--text-color-opc), 0.5);
            transition: 0.5s;
          }
          &:hover{
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }
}
/*=====================================
  64.Inner Page Sidebar area Section
========================================*/
.sidebar-area {
  .faq-content .accordion .accordion-item .accordion-header .accordion-button{
    font-size: 15px;
    text-transform: initial;
  }
  .widget-title {
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 22px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--title-color);
    display: inline-block;
    margin-bottom: 30px;
  }
  .single-widget {
    padding: 25px 35px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    @include lg-device(){
      padding: 25px 20px;
    }
    @include sm-down-device(){
      padding: 25px 20px;
    }
   .category-list{
      padding: 0;
      margin: 0;
      list-style: none;
      li {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        transition: 0.5s;
        &:last-child{
          margin-bottom: 0;
        }
        a{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          flex-wrap: wrap;
          gap: 5px;
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.3px;
          transition: 0.5s;
          span {
            display: flex;
            align-items: center;
            gap: 12px;
            svg{
              fill: var(--primary-color1);
              transition: 0.5s;
            }
          }
        }
        &:hover{
          a{
            color: var(--primary-color1);
            span{
              svg{
                transform: rotate(45deg);
              }
            }
          }
          &::before{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
          }
        }
      }
      &.two{
        li{
          a{
            span{
              color: var(--title-color);
              font-family: var(--font-inter);
              font-size: 12px;
              font-weight: 500;
              line-height: 1;
              padding: 2px 6px;
              border: 1px solid var(--text-color);
              border-radius: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: 0.5s;
            }
          }
          &:hover{
            a{
              span{
                border: 1px solid var(--primary-color1);
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
    .recent-post-widget {
      display: flex;
      align-items: center;
      gap: 15px;
      .recent-post-img {
        border-radius: 5px;
        img {
          min-width: 92px;
          max-width: 92px;
          height: 71px;
          border-radius: 5px;
        }
      }
      .recent-post-content {
        line-height: 1;
        >a {
          color: rgba(var(--text-color), 0.5);
          font-family: var(--font-inter);
          font-size: 12px;
          font-weight: 500;
      
          display: block;
          margin-bottom: 8px;
          transition: 0.5s;
          @include sm-down-device(){
            margin-bottom: 5px;
          }
          &:hover{
            color: var(--primary-color1);
          }
        }

        h6 {
          margin-bottom: 0;
          a {
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 18px;
            font-weight: 700;
            line-height: 20px;
            letter-spacing: 0.32px;
        
            transition: 0.5s;
            @include lg-device(){
              font-size: 14px;
            }
            @include sm-down-device(){
              font-size: 16px;
            }
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .tag-list {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
      @include lg-device() {
        gap: 14px;
      }
      li {
        a {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-inter);
          font-size: 13px;
          font-weight: 500;
          display: block;
          line-height: 1;
          padding: 9px 17px;
          border-radius: 100px;
          background: #F3F3F3;
          transition: 0.5s;
        }
        &:hover {
          a {
            color: var(--white-color);
            background-color: var(--primary-color1);
          }
        }
      }
    }
    .search-box {
      display: flex;
      align-items: center;
      input {
        width: 100%;
        padding: 8px 20px;
        font-family: var(--font-inter);
        font-size: 12px;
        height: 45px;
        border: 1px solid rgba(var(--primary-color1-opc), 0.3);
        &:focus{
          border: 1px solid #ddd;
        }
      }
      button {
        background-color: var(--primary-color1);
        min-width: 90px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        &::after {
          position: absolute;
          content: "";
          display: block;
          left: 15%;
          right: -20%;
          top: -4%;
          height: 150%;
          width: 150%;
          bottom: 0;
          border-radius: 2px;
          background-color: var(--title-color);
          transform: skewX(45deg) scale(0, 1);
          z-index: -1;
          transition: all 0.5s ease-out 0s;
        }
        i{
          color: var(--white-color);
          font-size: 22px;
        }
        @include sm-down-device() {
          min-width: 70px;
        }
        &:hover {
          color: var(--white-color);
          &::after {
            transform: skewX(45deg) scale(1, 1);
          }
        }
      }
    }
    .social-list{
      display: flex;
      align-items: center;
      gap: 30px;
      li{
        display: block;
        text-align: center;
        a{
          i{
            color: var(--text-color);
            transition: 0.5s;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            display: block;
            padding-top: 2px;
            transition: 0.5s;
          }
        }
        &:hover{
          a{
            i{
              color: var(--primary-color1);
            }
            svg{
              fill: var(--primary-color1);
            }
            span{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
} 
/*=====================================
  65.Pricing Plan Page
========================================*/
.pricing-plan-process-section{
  .feature-card4{
    border: 1px solid rgba(11, 12, 12, 0.05);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  }
}
/*=====================================
  66.Faq Page
========================================*/
.faq-section{
  .verticle-text{
    h2{
      color: rgba(var(--title-color-opc), 0.1);
      font-family: var(--font-hankenGrotesk);
      font-size: 100px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 5px;
      text-transform: uppercase;
      writing-mode: vertical-lr;
      margin-bottom: 0;
      @include lg-down-device(){
        writing-mode: unset;
        font-size: 80px;
      }
      @include md-down-device(){
        font-size: 60px;
      }
    }
  }
}
/*=====================================
  67.Contact Page
========================================*/
.contact-page{
  .contact-area{
    border-radius: 10px;
    border: 1px solid rgba(11, 12, 12, 0.08);
    background: var(--dark-white-color);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.03);
    padding: 70px 35px;
    @include xl-down-device(){
      padding: 50px 25px;
    }
    @include sm-down-device(){
      padding: 40px 25px;
    }
    .title{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 25px;
      font-weight: 600;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    .address{
      margin-bottom: 30px;
      span{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
        display: inline-block;
        margin-bottom: 30px;
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0;
      }
    }
    .working-hour{
      display: flex;
      align-items: center;
      gap: 20px;
      .icon{
        position: relative;
        svg{
          fill: var(--primary-color1);
        }
        &::after{
          content: "";
          height: 50px;
          width: 1px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -10px;
          background-color: rgba(var(--title-color-opc), 0.15);
        }
      }
      .content{
        >span{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          display: inline-block;
          margin-bottom: 7px;
        }
        h6{
          margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 18px;
          font-weight: 600;
          line-height: 1.3;
          span{
            color: var(--primary-color1);
          }
        }
      }
    }
  }
  .company-map{
    width: 100%;
    height: 100%;
    iframe{
      width: 100%;
      height: 100%;
      min-height: 350px;
      filter: grayscale(199%) invert(72%) contrast(122%);
      border-radius: 10px;
    }
  }
}
/*=====================================
  68.Shop Page
========================================*/
.product-card {
  border: 1px solid #ececec;
  padding: 5px;
  transition: 0.5s;
  position: relative;
  .product-card-img {
    position: relative;
    overflow: hidden;
    >a{
      img{
        transition: all 0.5s ease-out;
      }
      .batch{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        >span {
          width: 52px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--white-color);
          text-align: center;
          font-size: 13px;
          font-weight: 500;
          font-family: var(--font-rubik);
          letter-spacing: 0.3px;
          text-transform: uppercase;
          background-color: var(--primary-color1);
          z-index: 1;
        }
      }
    }
    .cart-area {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 100%;
      display: flex;
      justify-content: center;
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: 0.5s ease-in-out;
      .add-cart-btn {
        color: var(--white-color);
        text-align: center;
        font-size: 15px;
        font-family: var(--font-inter);
        font-weight: 500;
        background: var(--primary-color1);
        padding: 12px 18px;
        line-height: 1;
        display: flex;
        align-items: baseline;
        gap: 7px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        white-space: nowrap;
        transition: 0.5s;
        &::after {
          position: absolute;
          content: "";
          display: block;
          left: 15%;
          right: -20%;
          top: -4%;
          height: 150%;
          width: 150%;
          bottom: 0;
          border-radius: 2px;
          background-color: var(--primary-color2);
          transform: skewX(45deg) scale(0, 1);
          z-index: -1;
          transition: all 0.5s ease-out 0s;
        }
        &:hover{
          color: var(--dark-white-color);
          &::after {
            transform: skewX(45deg) scale(1, 1);
          }
        }
      }
    }
  }
  .product-card-content {
    padding: 30px 20px;
    text-align: center;
    h6 {
      margin-bottom: 10px;
      a {
        color: var(--title-color);
        font-size: 25px;
        font-family: var(--font-hankenGrotesk);
        font-weight: 700;
        letter-spacing: 0.5px;
    
        line-height: 1.3;
        transition: 0.5s;
        @include xl-down-device(){
          font-size: 23px;
        }
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    span{
      color: var(--title-color);
      font-size: 18px;
      font-family: var(--font-hankenGrotesk);
      font-weight: 600;
      margin-bottom: 8px;
      del {
        color: #ABABAB;
        font-size: 15px;
        font-weight: 400;
      }
    }

    .rating {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;

      ul {
        display: flex;
        align-items: center;
        gap: 4px;

        li {
          line-height: 1;
          i {
            color: #FFC200;
            font-size: 12px;
          }
        }
      }

      span {
        color: var(--text-color);
        font-size: 13px;
        font-family: var(--font-inter);
        font-weight: 400;
        line-height: 1;
      }
    }
  }
  .for-border {
    width: 0;
    &::before {
      content: "";
      position: absolute;
      right: -0.5px;
      top: 0;
      height: 0%;
      width: 0.5px;
      background: rgba(var(--title-color-opc), 0.6);
      transition: 0.3s;
      transition-delay: 0.5s;
    }
    &::after {
      content: "";
      position: absolute;
      left: -0.5px;
      bottom: 0;
      height: 0%;
      width: 0.5px;
      background: rgba(var(--title-color-opc), 0.6);
      transition: 0.3s;
      transition-delay: 0.6s;
    }
  }
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5px;
    width: 0%;
    height: 0.5px;
    background: rgba(var(--title-color-opc), 0.6);
    transition: 0.3s;
    transition-delay: 0.9s;
  }
  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.5px;
    width: 0%;
    height: 0.5px;
    background: rgba(var(--title-color-opc), 0.6);
    transition: 0.3s;
    transition-delay: 0.9s;
  }
  &:hover {
    .product-card-img {
      a{
        img{
          transform: scale(1.1);
        }
      }
      .cart-area {
        opacity: 1;
        transform: scaleY(1);
      }
    }
    &::before {
      width: 100%;
      transition-delay: 0s;
    }
    &::after {
      width: 100%;
      transition-delay: 0s;
    }
    .for-border {
      &::before {
        height: 100%;
        transition-delay: 0.3s;
      }
      &::after {
        height: 100%;
        transition-delay: 0.3s;
      }
    }
  }
}
/*=====================================
  69.Product Details Page
========================================*/
.product-details-top-section {
  .product-details-img {
    position: relative;
    @include lg-device() {
      flex-direction: column;
      gap: 40px;
    }
    @include sm-down-device() {
      flex-direction: column;
      gap: 40px;
    }
    .product-details-tab-img{
      position: relative;
      overflow: hidden;
      img{
        border-radius: 10px;
        @include lg-down-device(){
          width: 100%;
        }
      }
    }
    .nav-pills {
      padding-top: 30px;
      columns: 4;
      display: block;
      @include sm-down-device(){
        columns: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }
      .nav-link {
        background-color: unset;
        border-radius: unset;
        padding: 0;
        position: relative;
        img{
          border-radius: 10px;
          @include sm-down-device(){
            max-width: 100px;
            min-width: 100px;
          }
        }
        &::after{
          content: "";
          height: 100%;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: var(--title-color);
          opacity: 0.5;
          border-radius: 10px;
        }
        &.active {
          &::after{
            display: none;
          }
        }
      }
    }
  }
  .product-details-content {
    h1 {
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 35px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.7px;
  
      margin-bottom: 10px;
      @include lg-device() {
        font-size: 33px;
      }
      @include sm-down-device() {
        font-size: 30px;
        margin-bottom: 15px;
      }
    }
    .rating-review {
      display: flex;
      align-items: center;
      gap: 40px;
      margin-bottom: 20px;
      @include sm-down-device() {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
      }
      .rating {
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1;
        .star {
          display: flex;
          align-items: center;
          gap: 6px;
          i{
            font-size: 14px;
            color: #ffc107;
          }
        }
        a{
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-hankenGrotesk);
          font-size: 15px;
          font-weight: 400;
      
          transition: 0.5s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
    p {
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.48px;
      margin-bottom: 20px;
  
      @include lg-device() {
        font-size: 15px;
      }
    }
    .price-area {
      margin-bottom: 35px;
      @include lg-device() {
        margin-bottom: 30px;
      }
      span{
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 25px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
        del {
          color: #ABABAB;
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
    .quantity-area{
      margin-bottom: 35px;
      h6{
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.48px;
        margin-bottom: 20px;
        @include sm-down-device() {
          margin-bottom: 15px;
        }
      }
      .quantity-counter {
        display: flex;
        align-items: center;
        gap: 10px;
        a {
          width: 40px;
          height: 40px;
          background: rgba(var(--title-color-opc), 0.07);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--title-color);
          border-radius: 5px;
          transition: 0.5s;
          &:hover{
            background-color: var(--primary-color2);
            color: var(--dark-white-color);
          }
        }
        .quantity__input {
          max-width: 58px;
          width: 100%;
          height: 40px;
          border: 1px solid var(--primary-color2);
          background-color: var(--dark-white-color);
          border-radius: 5px;
          text-align: center;
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 0.48px;
          &:focus{
            border: 1px solid #ddd;
          }
        }
      }
    }
    .product-details-btn {
      display: flex;
      align-items: center;
      gap: 25px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 30px;
      flex-wrap: wrap;
      @include sm-down-device() {
        gap: 20px;
      }
      .primary-btn1{
        padding: 16px 30px;
      }
      .primary-btn2{
        padding: 16px 33px;
      }
    }
    .payment-method {
      margin-top: 25px;
      padding: 17px 30px;
      border: 1px solid var(--border-color);
      border-radius: 5px;
      max-width: 460px;
      width: 100%;
      margin-bottom: 20px;
      h6 {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.48px;
    
        margin-bottom: 15px;
      }
  
      .payment-card-list {
        display: flex;
        align-items: center;
        gap: 20px;
      }
    }
    .product-shipping-delivers{
      li{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
        }
        svg{
          fill: var(--primary-color1);
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0.32px;
      
          margin-bottom: 0;
          a{
            color: var(--text-color);
            background: linear-gradient(to bottom, #100C08 0%, #100C08 98%);
            background-size: 100% 2px;
            background-repeat: no-repeat;
            background-position: left 100%;
            transition: background-size 0.75s;
            &:hover{
              background-size: 0 2px;
              background-position: 0% 100%;
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .wishlist-area {
      padding-top: 20px;
      a {
        color: var(--text-colorr);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        transition: 0.5s;
        span {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          border: 1px solid var(--title-color);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.5s;
          svg {
            fill: var(--title-color);
            transition: 0.5s;
          }
        }
        &:hover {
          color: var(--primary-color1);
          span{
            border-color: var(--primary-color1);
            background-color: var(--primary-color1);
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }
}
.product-details-description {
  scroll-margin-top: 150px;
  .product-details-description-nav {
    .nav-tabs {
      border-bottom: 1px solid var(--border-color);
      padding-left: 80px;
      gap: 65px;
      @include lg-down-device() {
        gap: 50px;
      }
      @include md-down-device() {
        gap: 20px;
        padding-left: 0;
      }
      @include sm-down-device() {
        gap: 10px;
      }
      .nav-link {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.36px;
    
        border: none;
        background: linear-gradient(to bottom, rgba(var(--primary-color2-opc), 1) 0%, rgba(var(--primary-color2-opc), 1) 98%);
        background-size: 0px 3px;
        background-repeat: no-repeat;
        background-position: right 100%;
        transition: background-size .75s;
        @include sm-down-device() {
          padding-bottom: 5px;
          margin-right: 15px;
          padding: 0;
        }
        &.active {
          color: var(--title-color);
          font-weight: 500;
          background-size: 100% 3px;
          background-position: 0% 100%;
        }
      }
    }
  }
  .product-details-description-tab {
    .description-content {
      p {
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.45px;
        margin-bottom: 25px;
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
    .addithonal-information{
      .total-table2{
        margin-bottom: 0;
        tbody{
          tr{
            border-width: 1px;
            border-color: var(--border-color);
            td{
              border-width: 1px;
              border-color: var(--border-color);
              background: var(--dark-white-color);
              padding: 15px;
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              line-height: 30px;
              vertical-align: middle;
              @include md-down-device(){
                padding: 10px;
              }
              span{
                font-weight: 600;
                font-size: 16px;
                color: var(--title-color);
                font-family: var(--font-rubik);
                text-align: start;
                line-height: 26px;
                @include lg-up-device(){
                  width: 25%;
                }
              }
            }
          }
        }
      }
    }
    .reviews-area{
      .number-of-review{
        line-height: 1;
        margin-bottom: 40px;
        h4{
          line-height: 1;
          margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 24px;
          font-weight: 600;   
          @include sm-down-device(){
            font-size: 22px;
          }
        }
      }
      .comment{
        margin: 0;
        padding: 0;
        list-style: none;
        >li{
          margin-bottom: 40px;
          >.single-comment-area{
            margin-bottom: 24px;
          }
          &:last-child{
            margin-bottom: 0;
            >.single-comment-area{
              margin-bottom: 0;
            }
          }
        }
        .single-comment-area{
          display: flex;
          align-items: flex-start;
          gap: 20px;
          .author-img{
            img{
              max-width: 50px;
              min-width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }
          .comment-content{
            .author-and-review{
              .author-name-deg{
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
                flex-wrap: wrap;
                h6{
                  line-height: 1;
                  margin-bottom: 0;
                  color: var(--title-color);
                  font-family: var(--font-hankenGrotesk);
                  font-size: 15px;
                  font-weight: 600;
                }
                span{
                  color: var(--text-color);
                  font-family: var(--font-inter);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1;
                }
              }
              .review{
                gap: 5px;
                line-height: 1;
                li{
                  line-height: 1;
                  i{
                    color: #DDA701;
                    font-size: 12px;
                  }
                }
              }
            }
            p{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 28px;  
              margin-bottom: 12px;
            }
            .replay-btn{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              display: inline-flex;
              align-items: center;
              gap: 5px;
              line-height: 1;
              cursor: pointer;
              transition: 0.35s;
              svg{
                transition: 0.35s;
                fill: var(--text-color);
              }
              &:hover{
                color: var(--primary-color1);
                svg{
                  fill: var(--primary-color1);
                }
              }
            }
          }
        }
        .comment-replay{
          margin-left: 70px;
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          padding: 24px 0;
          >li{
            margin-bottom: 30px;
            &:last-child{
              margin-bottom: 0;
            }
          }
        }
      }
    }
    .review-form{
      background-color: var(--dark-white-color);
      border: 1px solid var(--border-color);
      box-shadow: 4px 3px 40px 0px rgba(16, 33, 34, 0.06);
      padding: 50px 40px;
      border-radius: 10px;
      @include lg-device(){
        padding: 40px 30px;
      }
      @include sm-down-device(){
        padding: 40px 25px;
      }
      .number-of-review{
        line-height: 1;
        margin-bottom: 30px;
        h4{
          line-height: 1;
          margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 24px;
          font-weight: 600;   
        }
      }
      .form-inner2{
        .review-rate-area{
          margin-bottom: 15px;
          p {
            margin-bottom: 5px;
            color: var(--title-color);
          }   
          .rate {
            float: left;
            &:not(:checked){
              > input {
                position: absolute;
                top: -9999px;
              }
              > label {
                float: right;
                width: 1em;
                overflow: hidden;
                white-space: nowrap;
                cursor: pointer;
                font-size: 16px;
                line-height: 1;
                color: #ccc;
                padding-right: 8px;
                display: inline-block;
                margin-right: 8px;
                &::before {
                  content: '\F586';
                  font-family: bootstrap-icons!important;
                }
              }
              
            }
            input:checked ~ label {
              color: #DDA701;
            }
          } 
          .rate:not(:checked) > label:hover,
          .rate:not(:checked) > label:hover ~ label {
            color: #DDA701;
          }
          input:checked + label:hover,
          input:checked + label:hover ~ label,
          input:checked ~ label:hover,
          input:checked ~ label:hover ~ label,
          label:hover ~ input:checked ~ label {
            color: #DDA701;
          }
        }
      }
      .primary-btn1{
        padding: 16px 35px;
      }
    }
  }
}
/*=====================================
  70. Cart Page
========================================*/
.cart-page{
  .cart-widget-title{
    margin-bottom: 35px;
    @include lg-down-device(){
      margin-bottom: 25px;
    }
    h4{
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 30px;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 0;
    }
  }
  .cart-shopping-wrapper{
    .cart-table{
      width: 100%;
      @include md-down-device(){
        margin-bottom: 30px;
      }
      thead{
        tr{
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          th{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
            padding: 20px 15px;
            @include md-down-device(){
              display: none;
            }
            &:first-child{
              padding-left: 0;
            }
          }
        }
      }
      tbody{
        tr{
          @include md-down-device(){
          border-bottom: 1px solid var(--border-color);
          }
          td{
            padding: 30px 15px;
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
            span{
              color: var(--text-color);
            }
            &:first-child{
              padding-left: 0;
            }
            @include md-down-device(){
              text-align: right;
            }
            .product-info-wrapper{
              display: flex;
              align-items: center;
              gap: 20px;
              @include md-down-device(){
                align-items: flex-end;
                flex-direction: column;
              }
              .product-info-img{
                 img{
                  border-radius: 5px;
                  max-width: 120px;
                 }
              }
              .product-info-content{
                h6{
                  color: var(--title-color);
                  font-family: var(--font-hankenGrotesk);
                  font-size: 18px;
                  font-weight: 700;
                  line-height: 1.4;
                  margin-bottom: 10px;
                }
                p{
                  color: var(--text-color);
                  font-family: var(--font-inter);
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 1;
                  margin-bottom: 35px;
                  span{
                    color: var(--title-color);
                    font-weight: 600;
                  }
                }
                ul{
                  display: flex;
                  align-items: center;
                  gap: 20px;
                  @include md-down-device(){
                    justify-content: flex-end;
                  }
                  li{
                    color: var(--text-color);
                    font-family: var(--font-inter);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1;
                    cursor: pointer;
                    position: relative;
                    transition: 0.5s;
                    &:last-child{
                      &::before{
                        content: '';
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: -10px;
                        width: 1px;
                        height: 11px;
                        background-color: rgba(var(--title-color-opc), 0.2);
                      }
                    }
                    .quantity-area {
                      position: absolute;
                      top: -30px;
                      right: -60px;
                      opacity: 0;
                      transform: scaleY(0);
                      transform-origin: bottom;
                      @include lg-down-device(){
                        right: unset;
                        left: -60px;
                      }
                      .quantity {
                        display: flex;
                        gap: 5px;
                        a {
                          height: 24px;
                          width: 34px;
                          border-radius: 4px;
                          background: rgba(var(--title-color-opc), 0.07);
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-size: 20px;
                          color: var(--title-color);
                          font-weight: 600;
                          cursor: pointer;
                          transition: 0.35s;
                          i{
                            color: var(--title-color);
                            transition: 0.35s;
                          }
                          &:hover {
                            background: var(--primary-color2);
                            color: var(--dark-white-color);
                            i{
                              color: var(--dark-white-color);
                            }
                          }
                        }
                        input {
                          height: 24px;
                          width: 34px;
                          border-radius: 4px;
                          border: 1px solid var(--primary-color2);
                          background-color: var(--dark-white-color);
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-size: 14px;
                          color: var(--title-color);
                          font-weight: 600;
                          text-align: center;
                        }
                      }
                      &.active{
                        opacity: 1;
                        transform: scaleY(1);
                        animation: fade-down 0.3s linear;
                      }
                    }
                    &:hover {
                      color: rgb(255, 72, 32);
                      &:last-child{
                        color: var(--primary-color1);
                      }
                    }
                  }
                }
              }
            }
            @include md-down-device() {
              display: block;
              width: 100%;
              text-align: right;
              position: relative;
              padding: 15px;

              &::before {
                content: attr(data-label);
                position: absolute;
                left: 15px;
                color: var(--title-color);
                font-family: var(--font-inter);
                font-size: 18px;
                font-weight: 500;
            
                @include sm-down-device(){
                  font-size: 13px;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
    .details-button {
      background-image: linear-gradient(0deg, #3067FF 0%, #3067FF 100%);
      color: var(--primary-color1);
      &::after{
        color: var(--primary-color1);
      }
      svg{
        stroke: var(--primary-color1);
      }
    }
  }
  .cart-order-sum-area{
    @include lg-up-device(){
      padding-left: 15px;
    }
    .order-summary-wrap{
      padding: 40px 30px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      @include lg-device(){
        padding: 40px 25px;
      }
      @include sm-down-device(){
        padding: 35px 25px;
      }
      .order-summary-list{
        width: 100%;
        li{
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          margin-bottom: 30px;
          line-height: 1;
          &:first-child{
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
          }
          span{
              color: var(--title-color);
              font-family: var(--font-inter);
              font-size: 16px;
              font-weight: 700;
              line-height: 1;
              display: inline-block;
            }
          .order-info{
            text-align: right;
            p{
              color: var(--text-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 16px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 5px;
            }
            strong{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 16px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 0;
            }
          }
          .coupon-area{
            width: 100%;
            margin-bottom: 10px;
            span{
              margin-bottom: 15px;
            }
            .form-inner{
              position: relative;
              input{
                width: 100%;
                height: 45px;
                padding: 10px 100px 10px 20px;
                border-radius: 5px;
                &::placeholder{
                  color: rgba(var(--title-color-opc), .5);
                }
                &:focus{
                  border-color: #eee;
                }
              }
              .apply-btn{
                padding: 13px 23px;
                border-radius: 0 5px 5px 0;
                background-color: var(--primary-color2);
                border: 1px solid var(--dark-title-color);
                color: var(--dark-white-color);
                font-family: var(--font-hankenGrotesk);
                font-size: 17px;
                font-weight: 500;
                letter-spacing: 0.48px;
            
                line-height: 1;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: 0.5s;
                overflow: hidden;
                z-index: 1;
                white-space: nowrap;
                position: absolute;
                top: 0;
                right: 0;
                &::after{
                  position: absolute;
                  content: "";
                  display: block;
                  left: 15%;
                  right: -20%;
                  top: -4%;
                  height: 150%;
                  width: 150%;
                  bottom: 0;
                  border-radius: 2px;
                  background-color: var(--dark-white-color);
                  transform: skewX(45deg) scale(0, 1);
                  z-index: -1;
                  transition: all 0.5s ease-out 0s;
                }
                &:hover{
                  color: var(--title-color);
                  &::after{
                    transform: skewX(45deg) scale(1, 1);
                  }
                }
              }
            }
          }
          &:last-child{
            margin-bottom: 40px;
            span{
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }
      >.primary-btn1{
        width: 100%;
        justify-content: center;
        padding: 18px 25px;
      }
    }
  }
}
/*=====================================
  71. Checkout Page
========================================*/
.checkout-page{
  .checkout-form-wrapper{
    .checkout-form-title{
      margin-bottom: 30px;
      h4{
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 30px;
        font-weight: 700; 
        @include md-down-device(){
          font-size: 26px;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        margin-bottom: 0;
      }
    }
    .checkout-form{
      border-radius: 10px;
      border: 1px solid var(--border-color);
      padding: 45px 35px 50px;
      @include md-down-device(){
        padding: 45px 20px 50px;
      }
      .form-check{
        min-height: unset;
        margin-bottom: 0;
        .form-check-input{
            cursor: pointer;
            height: 14px;
            width: 14px;
            
            margin-top: 8px;
            &:focus{
                box-shadow: none;
            }
            &:checked{
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
            }
        }
        .form-check-input[type=checkbox]{
            border-radius: 3px;
        }
        .form-check-label{
            cursor: pointer;
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 600;    
            line-height: 1.2;
        }
      }
    }
  }
  .cart-menu{
    min-height: 10rem;
    z-index: 99;
    transform-origin: top;
  }
  .cart-body {
    ul {
      margin-bottom: 50px;
      .single-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
        &:last-child {
          margin-bottom: 0;
        }
        .item-area {
          display: flex;
          align-items: center;
          gap: 20px;
          position: relative;
          width: 100%;
          .close-btn {
            background: transparent;
            transition: 0.35s;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(#FF4820, 0.14);
            i {
              color: rgba(255, 72, 32, 1);
              line-height: 1;
              font-size: 20px;
              transition: 0.35s;
            }
            &:hover{
              background-color: #FF4820;
              i{
                color: var(--white-color);
              }
            }
          }
          .main-item {
            display: flex;
            gap: 15px;
            width: 100%;

            @include md-down-device() {
              gap: 12px;
            }
            .item-img {
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              img {
                height: 70px;
                max-width: 90px;
                min-width: 90px;
                border-radius: 5px;
                @include md-down-device() {
                  width: 45px;
                  height: unset;
                }
              }
            }
            .content-and-quantity{
              width: 100%;
            }
            .content {
              line-height: 1;
              margin-bottom: 10px;
              span {
                font-family: var(--font-hankenGrotesk);
                font-weight: 600;
                font-size: 14px;
                color: var(--text-color);
                display: inline-block;
              }
              h6 {
                margin-bottom: 0;
                line-height: 1;
                a {
                  font-family: var(--font-inter);
                  font-weight: 600;
                  font-size: 16px;
                  line-height: 1.5;
                  color: var(--title-color);
                  transition: 0.5s;
                  @include md-down-device() {
                    font-size: 14px;
                  }
                  &:hover{
                    color: var(--primary-color1);
                  }
                }
              }
            }
          }
        }
        .quantity-area {
          .quantity {
            display: flex;
            gap: 5px;
            a {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              background: rgba(var(--title-color-opc), 0.07);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              color: var(--title-color);
              font-weight: 600;
              cursor: pointer;
              transition: 0.35s;
              i{
                color: var(--title-color);
                transition: 0.35s;
              }
              &:hover {
                background: var(--primary-color2);
                color: var(--dark-white-color);
                i{
                  color: var(--dark-white-color);
                }
              }
            }
            input {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              border: 1px solid var(--border-color);
              background-color: var(--dark-white-color);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: var(--title-color);
              font-weight: 600;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .cart-footer {
    justify-content: flex-start;
    padding: 0;
    border-top: 1px solid var(--border-color);
    .pricing-area {
      width: 100%;
      ul {
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        padding: 10px 0px 10px;
        &:last-child{
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 30px;
        }
        li {
          font-family: var(--font-inter);
          font-weight: 600;
          font-size: 16px;
          color: var(--title-color);
          display: flex;
          justify-content: space-between;
          width: 100%;
        }
        &.total{
          li{
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }
    .primary-btn1{
      width: 100%;
      justify-content: center;
    }
  }
  .choose-payment-method{
    margin-bottom: 40px;
    line-height: 1;
    h6{
      margin-bottom: 10px;
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 600;
    }
    .payment-option{
      line-height: 1;
      ul{
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 30px;
        li{
          width: 110px;
          height: 68px;  
          background-color: var(--white-color);
          border: 1px solid var(--border-color);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          .checked {
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            background: #D2E7EF;
            clip-path: polygon(0 0, 0% 100%, 100% 0);
            border-top-left-radius: 5px;
            i{
              opacity: 0;
              color: var(--white-color);
              margin-left: 2px;
            }
          }
          &.active{
            .checked {
              background: var(--primary-color1);
              i{
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
/*=====================================
  72. Error Page
========================================*/
.error-page{
  padding: 170px 0 120px;
  @include xxl-down-device(){
    padding: 130px 0 120px;
  }
  @include lg-down-device(){
    padding: 120px 0 90px;
  }
  .error-content{
    text-align: center;
    h2{
      color: var(--text-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 95px;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 0;
      @include lg-down-device(){
        font-size: 85px;
      }
      @include sm-down-device(){
        font-size: 65px;
      }
    }
    h1{
      color: var(--primary-color1);
      font-family: var(--font-inter);
      font-size: 300px;
      font-weight: 800;
      text-transform: uppercase;
      line-height: 0.4;
      margin-bottom: 85px;
      @include lg-down-device(){
        font-size: 250px;
        margin-bottom: 75px;
      }
      @include sm-down-device(){
        font-size: 150px;
        margin-bottom: 50px;
      }
    }
    h3{
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 80px;
      font-weight: 500;
      line-height: 1;
      text-transform: uppercase;
      margin-bottom: 50px;
      @include lg-down-device(){
        margin-bottom: 30px;
      }
      @include sm-down-device(){
        font-size: 50px;
        margin-bottom: 20px;
      }
    }
    p{
      max-width: 790px;
      width: 100%;
      margin: 0 auto;
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 30px;
      @include sm-down-device(){
        font-size: 15px;
        margin-bottom: 20px;
      }
    }
    .star-btn{
      a{
        width: 154px;
        height: 90px;
        .details-button{
          font-size: 15px;
        }
      }
    }
  }
}
/*=====================================
  73. Portfolio Details Page
========================================*/
.portfolio-details-page{
  scroll-margin-top: 50px;
  .portfolio-details-thumb{
    img{
      border-radius: 20px;
      @include md-down-device(){
        border-radius: 10px;
      }
    }
  }
  .portfolio-details-content{
    img{
      border-radius: 20px;
      @include md-down-device(){
        border-radius: 10px;
      }
    }
    h3{
      color: var(--title-color);
      font-family: var(--font-hankenGrotesk);
      font-size: 33px;
      font-weight: 700;
      line-height: 26px; 
  
      margin-bottom: 20px;
      @include md-down-device(){
        font-size: 28px;
      }
    }
    p{
      margin-bottom: 12px;
      color: var(--text-color);
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 400;
      line-height: 35px; 
      margin-bottom: 35px;
      &:last-child{
        margin-bottom: 0;
      }
      @include md-down-device(){
        font-size: 17px;
        line-height: 30px;
      }
    }
    .features{
      margin: 0;
      padding: 0;
      list-style: none;
      columns: 2;
      @include md-down-device(){
        columns: 1;
      }
      li{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 13px;
        &:last-child{
          margin-bottom: 0;
        }
        svg{
          fill: var(--primary-color1);
          margin-right: 5px;
        }
      }
    }
    .portfolio-img-group{
      padding-top: 50px;
      margin-bottom: 25px;
      .portfolio-img{
        img{
          border-radius: 10px;
        }
      }
    }
  }
  .portfolio-sidebar{
    .portfolio-info-wrap{
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: rgba(48, 103, 255, 0.03);    
      padding: 35px 30px;
      @include xl-down-device(){
        padding: 25px;
      }
      .portfolio-info{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          display: flex;
          align-items: center;
          gap: 20px;
          border-bottom: 1px solid var(--border-color);
          padding-bottom: 20px;
          margin-bottom: 15px;
          &:last-child{
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
          }
          .icon{
            svg{
              stroke: rgba(var(--title-color-opc), .2);
            }
          }
          .content{
            line-height: 1;
            span{
              color: var(--text-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 1;   
              display: inline-block;
              margin-bottom: 3px;
            }
            h5{
              color: var(--title-color);
              font-family: var(--font-hankenGrotesk);
              font-size: 20px;
              font-weight: 600;
              margin-bottom: 0;
              @include xl-down-device(){
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
  .portfolio-details-banner{
    position: relative;
    img{
      border-radius: 10px;
    }
    .portfolio-details-banner-content{
      background: linear-gradient(190deg, rgba(23, 23, 23, 0.90) 20.03%, rgba(23, 23, 23, 0.10) 92.25%);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      padding: 70px 35px;
      @include sm-down-device(){
        padding: 45px 15px;
      }
      h2{
        color: var(--white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 45px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0.45px;
        margin-bottom: 35px;
        @include sm-down-device(){
          font-size: 42px;
          margin-bottom: 30px;
        }
        span{
          color: var(--primary-color1);
          font-style: italic;
          font-weight: 500;
          display: block;
        }
      }
    }
  }
}
/*=====================================
  74. Service Details Page
========================================*/
.service-details-page{
  .service-details-top-area{
    .service-details-top-content{
      h2{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 60px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 30px;
        @include xl-down-device(){
          font-size: 50px;
          margin-bottom: 20px;
        }
        @include md-down-device(){
          font-size: 45px;
        }
        span{
          color: var(--text-color);
          font-weight: 400;
          display: block;
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.9;
        margin-bottom: 40px;
        @include lg-device(){
          font-size: 15px;
          margin-bottom: 30px;
        }
        @include md-down-device(){
          margin-bottom: 25px;
        }
      }
      .key-features{
        padding: 0;
        margin: 0;
        list-style: none;
        columns: 2;
        @include sm-down-device(){
          columns: 1;
        }
        li{
          color: var(--text-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 17px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.34px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
          @include lg-device(){
            font-size: 16px;
          }
          &:last-child{
            margin-bottom: 0;
          }
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
    .service-details-img{
      img{
        border-radius: 5px;
      }
    }
  }
}
.service-details-feature-section{
  .section-title5{
    position: sticky;
    top: 100px;
  }
  .service-feature-list{
    padding: 0;
    margin: 0;
    list-style: none;
    .single-feature{
      display: flex;
      gap: 20px;
      padding-bottom: 25px;
      margin-bottom: 35px;
      border-bottom: 1px solid var(--border-color);
      @include sm-down-device(){
        gap: 15px;
      }
      &:last-child{
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: unset;
      }
      .icon{
        min-width: 60px;
        max-width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(var(--primary-color1-opc), 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
          fill: var(--primary-color1);
        }
      }
      .content{
        h5{
          color: var(--title-color);
          font-family: var(--font-hankenGrotesk);
          font-size: 22px;
          font-weight: 600;
          line-height: 1.2;
      
          margin-bottom: 10px;
          @include sm-down-device(){
            font-size: 20px;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.7;
          margin-bottom: 0;
          @include sm-down-device(){
            font-size: 15px;
          }
        }
      }
    }
  }
}
.service-details-tools-section{
  .tools-card{
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    padding: 32px 20px;
    .tools-name{
      span{
        color: var(--dark-title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
      }
    }
  }
}
/*=====================================
  75. Blog Details Page
========================================*/
.blog-details {
  .blog-details-thumb{
    position: relative;
    .batch{
      position: absolute;
      top: 20px;
      left: 15px;
      span{
        color: var(--dark-white-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-style: italic;
        font-weight: 500;
        line-height: 1;
    
        border-radius: 50px;
        border: 1px solid var(--white-color);
        background: var(--title-color);
        padding: 6px 26px;
      }
    }
    img{
      border-radius: 5px;
    }
  }
  .blog-details-author-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 60px;
    gap: 15px;
    flex-wrap: wrap;
    @include lg-down-device(){
      margin-bottom: 50px;
      padding: 20px 0;
    }
    .author-area {
      display: flex;
      align-items: center;
      gap: 10px;

      .author-img {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .author-content {
        h6{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 500;
          line-height: 1;
          margin-bottom: 0;
          a{
            color: var(--primary-color1);
          }
        }
      }
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        color: var(--text-color);
        font-family: var(--font-inter);
        font-weight: 500;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0.3px;
    
        margin-right: 50px;
        position: relative;
        transition: 0.25s ease;

        @include sm-device() {
          margin-right: 20px;
        }

        @include sm-down-device() {
          margin-right: 16px;
          font-size: 12px;
          line-height: 1.2;
        }

        &:hover {
          a {
            color: var(--primary-color1);
            svg{
              fill: var(--primary-color1);
            }
          }
        }
        &::before {
          content: "";
          position: absolute;
          right: -15px;
          top: 3px;
          width: 2px;
          height: 10px;
          line-height: 5px;
          background-color: var(--primary-color1);
          border-radius: 4px;
          @include sm-device() {
            right: -10px;
          }
          @include sm-down-device() {
            right: -10px;
          }
        }
        &:last-child {
          margin-right: 0;

          &::before {
            display: none;
            visibility: hidden;
          }
        }
        svg {
          width: 14px;
          margin-right: 10px;
          fill: var(--text-color);
          transition: 0.25s ease;

          @include sm-device() {
            margin-right: 5px;
          }

          @include sm-down-device() {
            margin-right: 5px;
          }
        }

        a {
          color: var(--text-color);
        }
      }
    }
  }
  .blog-details-content {
    margin-bottom: 90px;
    @include lg-device(){
      margin-bottom: 80px;
    }
    @include lg-down-device(){
      margin-bottom: 70px;
    }
    h3 {
      font-family: var(--font-hankenGrotesk);
      font-weight: 800;
      font-size: 35px;
      line-height: 1.2;
  
      color: var(--title-color);
      margin-bottom: 15px;
      @include xl-down-device(){
        font-size: 32px;
      }
      @include md-down-device(){
        font-size: 30px;
      }
    }
    p {
      font-family: var(--font-inter);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.8;
      color: var(--text-color);
      margin-bottom: 35px;
      @include lg-down-device(){
        font-size: 17px;
        margin-bottom: 25px;
      }
      @include sm-down-device() {
        font-size: 15px;
      }
    }
    img{
      border-radius: 5px;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
      columns: 2;
      @include sm-down-device(){
        columns: unset;
      }
      li{
        color: var(--text-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.34px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        @include md-down-device(){
          font-size: 16px;
        }
        &:last-child{
          margin-bottom: 0;
        }
        svg{
          fill: var(--primary-color1);
        }
      }
    }
    .first-para {
      margin-bottom: 10px;
      @include sm-down-device() {
        margin-bottom: 15px;
      }
      &::first-letter {
        font-size: 75px;
        float: left;
        line-height: 1;
        color: var(--title-color);
        font-weight: 500;
        @include sm-down-device() {
          font-size: 60px;
        }
      }
    }
    .second-para {
      margin-bottom: 65px;
      @include lg-down-device(){
        margin-bottom: 40px;
      }
      @include md-down-device() {
        margin-bottom: 35px;
      }
    }
    blockquote{
      position: relative;
      .quotes{
        fill: none;
        stroke: rgba(var(--primary-color1-opc), 0.15);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .blockquote-text {
      margin-bottom: 35px;
      color: rgba(var(--text-color-opc), 0.6);
      font-size: 22px;
      @include md-down-device() {
        margin-bottom: 25px;
        font-size: 18px;
      }
      @include sm-down-device(){
        margin-bottom: 20px;
      }
    }
    .third-para {
      margin-bottom: 45px;
    }
    .blockquote-author {
      font-family: var(--font-hankenGrotesk);
      font-weight: 600;
      font-size: 30px;
      line-height: 1;
      color: var(--title-color);
      margin-bottom: 0;
      @include sm-down-device() {
        margin-bottom: 0px;
      }
    }
    .post-details-img {
      img {
        @include sm-device() {
          width: 100%;
        }

        @include sm-down-device() {
          width: 100%;
        }
      }
    }
    .post-tags-social {
      margin-top: 70px;
      margin-bottom: 34px;

      @include md-down-device() {
        margin-top: 50px;
      }

      .tags {
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          gap: 20px;

          @include md-device() {
            gap: 8px;
          }

          @include md-down-device() {
            margin-bottom: 10px;
          }

          @include sm-down-device() {
            gap: 10px;
          }

          @include threefifty-down-device() {
            gap: 6px;
          }

          li {
            a {
              font-family: var(--font-prompt);
              font-style: normal;
              font-weight: 400;
              font-size: 15px;
              line-height: 1;
          
              color: #ACACAC;
              transition: 0.5s;

              @include threefifty-down-device() {
                font-size: 14px;
              }

              span {
                color: rgba(255, 76, 96, 0.5);
              }

              &:hover {
                color: var(--primary-one);
              }
            }
          }
        }
      }

      .social {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 20px;

        @include md-down-device() {
          justify-content: flex-start;
        }

        p {
          font-family: var(--font-prompt);
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 1;
      
          color: #2C2C2C;
          margin: 0;
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          gap: 30px;

          li {
            transition: 0.5s;

            a {
              font-size: 18px;
              color: var(--border-color2);
              transition: 0.5s;

              &:hover {
                color: var(--primary-one);
              }
            }
          }
        }
      }
    }
  }
  .blog-tag-and-social-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .blog-tag{
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      h6{
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        li{
          a{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .social-list{
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;
      li{
        display: block;
        text-align: center;
        a{
          i{
            color: var(--text-color);
            transition: 0.5s;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            display: block;
            padding-top: 2px;
            transition: 0.5s;
          }
        }
        &:hover{
          a{
            i{
              color: var(--primary-color1);
            }
            svg{
              fill: var(--primary-color1);
            }
            span{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  .comment-area{
    scroll-margin-top: 150px;
  }
  .comment-title{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    h4{
    color: var(--title-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 25px;
    font-weight: 500;  
    margin-bottom: 0;
    line-height: 1;
    white-space: nowrap;
    }
    .dash{
    position: relative;
    width: 100%;
    &::after{
      content: '';
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: var(--border-color);
    }
    }
  }
  .comment{
    margin: 0;
    padding: 0;
    list-style: none;
    >li{
      margin-bottom: 40px;
      >.single-comment-area{
        margin-bottom: 24px;
      }
      &:last-child{
        margin-bottom: 0;
        >.single-comment-area{
          margin-bottom: 0;
        }
      }
    }
    .single-comment-area{
      display: flex;
      align-items: flex-start;
      gap: 20px;
      .author-img{
        img{
          max-width: 50px;
          min-width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .comment-content{
        .author-name-deg{
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          flex-wrap: wrap;
          h6{
            line-height: 1;
            margin-bottom: 0;
            color: var(--title-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 18px;
            font-weight: 600;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;  
          margin-bottom: 12px;
        }
        .replay-btn{
          color: var(--text-color);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 600;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          line-height: 1;
          cursor: pointer;
          transition: 0.35s;
          svg{
            transition: 0.35s;
            fill: var(--text-color);
          }
          &:hover{
            color: var(--primary-color1);
            svg{
              fill: var(--primary-color1);
            }
          }
        }
      }
    }
    .comment-replay{
      margin: 0;
      padding: 0;
      list-style: none;
      margin-left: 70px;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 24px 0;
      >li{
        margin-bottom: 30px;
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  }
  .inquiry-form{
    background: rgba(var(--primary-color1-opc), 0.1);
    border-radius: 20px;
    padding: 45px 40px 50px;
    @include md-down-device(){
      padding: 45px 20px 50px;
    }
    .title{
      margin-bottom: 30px;
      h4{
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-hankenGrotesk);
        font-size: 30px;
        font-weight: 600; 
        margin-bottom: 0;
      }
     
    }
  } 
}





/*=====================================
  76. All Dark Page Css
========================================*/

body.dark{
  .primary-btn3{
    border: 1px solid #3067FF;
    border-bottom: 3px solid #3067FF;
  }
  .details-button {
    background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
  }
  .load-btn{
    &::after {
      background-color: var(--primary-color1);
    }
    span {
      background-image: linear-gradient(0deg, #0B0C0C 0%, #0B0C0C 100%);
      &::after{
        color: var(--dark-primary-color2);
      }
      svg{
        stroke: var(--dark-primary-color2);
      }
    }
    &:hover {
      // color: var(--dark-title-color);
      span{
        color: var(--white-color);
        svg{
          stroke: var(--white-color);
        }
      }
    }
  }
  .form-inner{
    input{
      background-color: var(--light-black-color);
      border: unset;
    }
    textarea{
      background-color: var(--light-black-color);
      border: unset;
    }
  }
  header.style-1{
    .header-logo{
      .logo-dark{
        display: none;
      }
      .logo-light{
        display: block;
      }
    }
    .company-logo{
      .logo-dark{
        display: none;
      }
      .logo-light{
        display: block;
      }
    }
    @media only screen and (max-width: 991px){
      .mobile-logo-area{
        .mobile-logo-wrap{
          .logo-dark{
            display: none;
          }
          .logo-light{
            display: block;
          }
        }
      }
    }
  }
  header.style-1 .main-menu > ul > li ul.sub-menu > li > a::before {
    background: linear-gradient(90deg, #5f5f5f, var(--primary-color1), #5f5f5f);
  }
  header.style-2 .main-menu > ul > li ul.sub-menu > li > a::before {
    background: linear-gradient(90deg, #5f5f5f, var(--primary-color1), #5f5f5f);
  }
  header.style-3 .main-menu > ul > li ul.sub-menu > li > a::before {
    background: linear-gradient(90deg, #5f5f5f, var(--primary-color1), #5f5f5f);
  }
  header.style-3{
    .header-logo{
      .logo-dark{
        display: none;
      }
      .logo-light{
        display: block;
      }
    }
    .company-logo{
      .logo-dark{
        display: none;
      }
      .logo-light{
        display: block;
      }
    }
  }
  .sidebar-menu{
    .sidebar-menu-top-area{
      .sidebar-menu-logo{
        .logo-light{
          display: block;
        }
        .logo-dark{
          display: none;
        }
      }
    }
  }
  .home1-banner-section{
    .banner-content{
      .banner-content-bottom{
        .rating-area{
          .review{
            .logo-dark{
              display: none;
            }
            .logo-light{
              display: block;
            }
          }
        }
      }
    }
  }
  .home5-banner-section{
    .banner-content{
      .banner-content-bottom{
        .rating-area{
          .review{
            .logo-dark{
              display: none;
            }
            .logo-light{
              display: block;
            }
          }
        }
      }
    }
  }
  .home1-solution-section{
    background-color: var(--light-black-color);
    background-image: unset;
  }
  .service-card{
    .explore-btn{
      background: linear-gradient(to bottom, #fff 0%, #fff 98%);
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: left 100%;
      &:hover{
        background-size: 0 1px;
        background-position: 0% 100%;
      }
    }
  }
  .portfolio-section{
    .portfolio-bottom-area{
      .pagination-area{
        background-color: var(--light-black-color);
        .swiper-pagination{
          border-top: 1px solid rgba(#fff, 0.1);
        }
      }
    }
  }
  .home1-approach-section{
    .single-approach{
      .approach-content-wrap{
        background-image: unset;
        background-color: var(--light-black-color);
        &::before{
          background: linear-gradient(180deg, rgba(36, 38, 39, 0) 0%, rgba(36, 38, 39, 0.76) 26.46%, 
          #242627 45.7%);
        }
      }
    }
  }
  .testimonial-card-wrapper{
    .testimonial-card{
      .logo-and-rating{
        .logo{
          .light{
            display: none;
          }
          .dark{
            display: block;
          }
        }
      }
    }
  }
  .home1-testimonial-section{
    background-image: url(../img/home1/testimonial-bg.png), linear-gradient(180deg, #0B0C0C 0%, #0B0C0C 100%);
    .testimonial-content{
      .rating-area{
        li{
          .single-rating{
            .review{
              .logo-dark{
                display: none;
              }
              .logo-light{
                display: block;
              }
            }
          }
          &::before{
            background-color: rgba(#FFF, 0.2);
          }
        }
      }
    }
  }
  .contact-section{
    .contact-form-wrap{
      .contact-form-area{
        background-image: unset;
      }
    }
  }
  .footer-section{
    background-color: #000;
    background-image: unset;
    .footer-top{
      .rating-area{
        li{
          .single-rating{
            .review{
              .logo-dark{
                display: none;
              }
              .logo-light{
                display: block;
              }
            }
          }
          &::before{
            background-color: rgba(#fff, 0.2);
          }
        }
      }
      .footer-widget{
        .widget-title{
          h4{
            &::after{
              background: linear-gradient(90deg, #0B0C0C 0.01%, #FFF 0.02%, rgba(255, 255, 255, 0.00) 102.8%);
              opacity: 0.4;
            }
          }
        }
      }
      .footer-logo-area{
        .logo-bg{
          .light{
            display: none;
          }
          .dark{
            display: block;
          }
        }
        .logo{
          .light{
            display: none;
          }
          .dark{
            display: block;
          }
        }
      }
      .footer-logo{
        .logo-dark{
          display: none;
        }
        .logo-light{
          display: block;
        }
      }
    }
    &.style-2{
      background-image: unset;
      background-color: var(--light-black-color);
    }
    &.style-3{
      background-image: unset;
      background-color: var(--light-black-color);
    }
    &.style-4{
      background-image: unset;
      background-color: var(--light-black-color);
    }
  }
  .section-title2{
    >span{
      background-color: var(--light-black-color);
      color: var(--white-color);
      border: 1px solid rgba(var(--title-color-opc), 0.08);
    }
  }
  .home2-banner-section{
    background-image: url(../img/home2/home2-banner-bg-dark.png);
    .banner-content{
      >span{
        background-color: var(--light-black-color);
        color: var(--white-color);
        border: 1px solid rgba(var(--title-color-opc), 0.08);
      }
    }
    .banner-img{
      .light-img{
        display: none;
      }
      .dark-img{
        display: block;
      }
    }
  }
  .home2-service-section{
    background-color: var(--light-black-color);
    .section-title2{
      span{
        background-color: var(--black-color);
      }
    }
  }
  .home2-about-section{
    .about-title{
      >span{
        background-color: var(--light-black-color);
        color: var(--white-color);
        border: 1px solid rgba(var(--title-color-opc), 0.08);
      }
    }
    .about-feature-card{
      background-color: var(--light-black-color);
    }
  }
  .home2-process-section{
    background: var(--light-black-color);
    .section-title2{
      span{
        background-color: var(--black-color);
      }
    }
    .process-slider-area{
      .slider-btn-area{
        border: 1px solid rgba(var(--title-color-opc), 0.1);
        .content{
          border-left: 1px solid rgba(var(--title-color-opc), 0.1);
          border-right: 1px solid rgba(var(--title-color-opc), 0.1);
        }
      }
      .single-process{
        .number{
          span{
            color: var(--white-color);
          }
          &::before{
            border: 1px solid rgba(var(--title-color-opc), 0.1);
          }
          &::after{
            background: rgba(#fff, 0.08);
          }
        }
      }
      &::before{
        background: rgba(#fff, 0.08); 
      }
    }
    &.two{
      .section-title5{
        .sub-title5.two{
          &::after{
            border: 1px solid rgba(18, 31, 31, 0.10);
            background: #323333;
          }
          &::before{
            background: rgba(67, 67, 67, 1);
          }  
        }
       
      }
      .process-slider-area{
        .single-process{
          .number{
            span{
              color: var(--white-color);
            }
            &::before{
              border: 1px solid rgba(var(--title-color-opc), 0.1);
            }
            &::after{
              background: rgba(#fff, 0.08);
            }
          }
        }
      }
    }
  }
  .home2-marketing-agency-section{
    background-image: unset;
    background-color: #1C1D26;
    .section-title2{
      >span{
        background-color: var(--black-color);
      }
    }
    .graf-img{
      .light{
        display: none;
      }
      .dark{
        display: block;
      }
    }
  }
  .home2-testimonial-section{
    .testimonial-content{
      background-color: var(--light-black-color);
      .section-title2{
        span{
          background: var(--black-color);
          border: none;
        }
      }
    }
    .testimonial-wrap{
      background-color: transparent;
      .rating-area{
        li{
          .single-rating{
            .review{
              .logo-dark{
                display: none;
              }
              .logo-light{
                display: block;
              }
            }
          }
          &::before{
            background-color: rgba(#fff, 0.2);
          }
        }
      }
    }
  }
  .home2-contact-section{
    background-image: unset;
    background-color: var(--light-black-color);
    .section-title2{
      >span{
        background-color: var(--black-color);
      }
    }
  }
  .home3-process-section{
    .process-card{
      background-color: var(--light-black-color);
    }
  }
  .pricing-card{
    &.three{
      background: rgba(var(--primary-color1-opc), 0.1);
    }
    .pricing-content{
      ul{
        li{
          &::before{
            background: linear-gradient(90deg, rgba(5, 45, 57, 0.75) 0%, rgba(5, 45, 57, 0) 81.82%);
          }
        }
      }
    }
  }
  .home3-project-management-section{
    .project-management-tab-wrapper{
      .project-management-nav{
        .nav-tabs{
          .nav-link{
            background: linear-gradient(to bottom, rgba(#fff, 1) 0%, rgba(#fff, 1) 98%);
            background-size: 0px 3px;
            background-repeat: no-repeat;
            background-position: right 100%;
            transition: background-size .75s;
            &.active {
              background-size: 100% 3px;
              background-position: 0% 100%;
            }
          }
        }
      }
      .project-management-tab{
        .project-management-tab-content{
          background-image: unset;
          background-color: var(--light-black-color);
        }
      }
    }
  }
  .home3-testimonial-section{
    background-image: unset;
    background-color: var(--light-black-color);
  }
  .home3-feature-section{
    .feature-content-wrap{
      .single-feature{
        .icon{
          background-color: var(--light-black-color);
          svg{
            fill: var(--white-color);
          }
        }
      }
    }
  }
  .home3-faq-section{
    background-image: unset;
    background-color: var(--light-black-color);
  }
  .home4-banner-section{
    background-image: url(../img/home4/home4-banner-bg-dark.png), linear-gradient(180deg, #121212 0%, #121212 100%);
    .banner-img{
      &.light{
        display: none;
      }
      &.dark{
        display: block;
      }
    }
  }
  .home4-about-section{
    .about-coundown-area{
      .single-countdown{
        .content{
          background-color: #000;
          p{
            color: rgba(#fff, 0.6);
          }
        }
      }
    }
  }
  .feature-card.two::after {
    opacity: 1;
  }
  .feature-card.two .icon .icon-bg svg {
    fill: rgba(var(--primary-color1-opc), 0.2);
  }
  .home2-pricing-plan-section .pricing-plan-tab-area nav .nav-tabs {
    border: 1px solid rgba(63, 68, 75, 0.4);
  }
  .partnership-area{
    .total-partner{
      a{
        border-color: #4d4d4d;
        &:hover{
          border-color: var(--primary-color1);
        }
      }
    }
    .single-pertner{
      background: #242627;
      svg{
        stroke: #474747;
      }
      span{
        color: var(--title-color);
      }
      .partner-logos{
        .black{
          display: none;
          visibility: hidden;
        }
        .white{
          display: block;
          visibility: visible;
        }
      }
      p{
        color: var(--text-color);
      }
      &:hover{
        background-color: var(--title-color);
        svg{
          stroke: var(--primary-color1);
        }
        span{
          color: var(--dark-white-color);
        }
        p{
          color: var(--dark-white-color);
        }
        .partner-logos{
          .white{
            display: none;
            visibility: hidden;
          }
          .black{
            display: block;
            visibility: visible;
          }
        }
      }
    }
  }
  .home5-banner-section{
    background-image: url(../img/home2/home2-banner-bg-dark.png);
  }
  .home5-services-section{
    background-color: #242627;
  }
  .home5-why-choose-section{
    .why-choose-content{
      .about-coundown-area{
        .single-countdown{
          .content{
            background-color: #000;
          }
        }
      }
    }
  }
  .sub-title5{
    color: var(--text-color);
    &::after{
      border: 1px solid rgba(11, 12, 12, 0.10);
      background: #3b3b3b;
    }
    &::before{
      background: rgba(241, 244, 255, 0.20);
    }
    &.two{
      &::after{
        border: 1px solid rgba(18, 31, 31, 0.10);
        background: #323333;
      }
      &::before{
        background: rgba(67, 67, 67, 1);
      }  
    }
  }
  .home5-team-section{
    background-color: var(--light-black-color);
  }
  .portfolio-card{
    border: 1px solid #242627;
    .image-and-tag{
      background-color: var(--light-black-color);
      .tag{
        li{
          a{
            background-color: #000;  
            &:hover{
              color: var(--white-color);
              background-color: var(--primary-color1);
            }
          }
        }
      }
    }
    .portfolio-content{
      h4{
        a{
          color: var(--title-color);  
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
  }
  .home4-footer-section{
    &.style-2{
      background: var(--light-black-color);
      .home4-footer-wrap{
        .footer-top{
          .footer-widget{
            .widget-title{
              margin-bottom: 25px;
              h4{
                &::after{
                  background: linear-gradient(90deg, #0B0C0C 0.01%, #FFF 0.02%, rgba(255, 255, 255, 0.00) 102.8%); 
                }
              }
            }
            .footer-logo{
              .logo-dark{
                display: none;
              }
              .logo-light{
                display: block;
              }
            }
          }
        }
      }
      .contact-area{
        background: var(--light-black-color);
      }
    }
  }
  .home5-contact-section{
    background: var(--light-black-color);
  }
  .case-study-card{
    &.style-2{
      .card-content{
        .learn-more-btn{
          background: linear-gradient(to bottom, #fff 0%, #fff 98%);
          background-size: 100% 1px;
          background-repeat: no-repeat;
          background-position: left 100%;
          transition: background-size 0.75s;
          &:hover{
            background-size: 0 1px;
            background-position: 0% 100%;
          }
        }
      }
    }
  }
  .product-card{
    border: 1px solid rgba(#FFF, 0.15);
  }
  .checkout-page{
    background-color: var(--light-black-color);
    .checkout-form-wrapper{
      .checkout-form{
        background-color: var(--dark-white-color);
        .form-inner{
          input{
            // background-color: var(--black-color);
          }
          textarea{
            // background-color: var(--black-color);
          }
        }
      }
    }
  }
  .blog-details{
    .inquiry-form{
      background: var(--dark-white-color);
    }
  }
  .sidebar-area .single-widget .tag-list li a {
    background: transparent;
    border: 1px solid var(--border-color);
    &:hover{
      background: var(--primary-color1);
    }
  }
}
.tt-style-switch {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 30%;
  right: 0;
  width: 40px;
  height: 35px;
  background-color: #444;
  font-size: 16px;
  color: #fff !important;
  cursor: pointer;
  z-index: 9999;
  border-radius: 50px 0 0 50px;
  transition: all .2s
}

.tt-style-switch .bi {
  color: #fff;
  z-index: 9999
}


body:not(.is-mobile) .tt-style-switch:hover {
  width: 45px;
  background-color: red;
  color: #fff
}

.tt-stsw-dark,
.tt-stsw-light {
  line-height: 0
}

.tt-style-switch:not(.is-dark) .tt-stsw-dark {
  display: none
}

.tt-style-switch.is-dark .tt-stsw-light {
  display: none
}

@media(min-width:769px) {
  body.tt-sliding-sidebar-right-on .tt-style-switch {
      right: auto;
      left: 0;
      border-radius: 0 50px 50px 0
  }
}



@keyframes zoomIn {
  0% {
      opacity: 0;
      -webkit-transform: scale3d(.8, .8, .8);
      transform: scale3d(.8, .8, .8);
  }

  50% {
      opacity: 1;
  }
}

@keyframes bounceInDown {

  0%,
  60%,
  75%,
  90%,
  100% {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100px, 0);
      transform: translate3d(0, -100px, 0);
  }

  60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
  }

  75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
  }

  90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
  }

  100% {
      -webkit-transform: none;
      transform: none;
  }
}