/*-------------
Project Name: Neckle - Real Estate HTML Template
Version:    1.1


1. Mixins Css
2. Global Css
3. Topbar
4. Header
5. Banner
6. Home About Area
7. Most Search Area
8. Recent Product Area
9. why Choose Section
10. Recommendded apartment Section
11. project location Section
12. Team Section
13. Testimonial Section
14. News Section
15. Footer Section
16. dream Property Section
17. Featured Property Section
18. Recent Launched project Section
19. How We Work Section
20. Our Brief History Section
21. Home2 Testimonial Section
22. Home3 BAnner Section
23. Brand Category Section
24. Home3 Featured Project Section
25. Home3 Recent Launched Project Section
26. Home3 Inner Banner Section
27. Home3 Testimonial Section
28. Home4 Banner Section
29. Home4 Apartment Type Section
30. Home4 About Section
31. Home4 Latest Car Section
32. Home4 Inner Banner Section
33. Home5 banner Section
34. Home5 Brand Category Section
35. Home5 Featured Project Section
36. Home5 About Section
37. Home5 Testimonial Section
38. Home6 Banner Section
39. Home6 Search Section
40. Home6 Brand Category Section
41. Home6 About Section
42. Inner Pages Banner
43. Property Map Area
44. neckle Gallery
45. Poperty Details Area
46. Product Details Area
47. Product Page
48. Blog  Page
49. Checkout  Page
50. Cart  Page
51. Faq  Page
52. Pricing Plan  Page
53. Contact Page
54. Error  Page
55. Customer Feedback Page
56. Reaturn and Exchange Page
57. Pricing Checkout Page
58. Dashboard Pages
---------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');


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


:root {
  --font-montserrat: 'Poppins', sans-serif;
  --font-open-sans: 'Roboto', sans-serif;
  // Colors ---------------
  --white-color: #fff;
  --black-color: #000;
  --black-color2: #000;
  --title-color: #000;
  --text-color: #000;
  // Theme Color
  --primary-color1: #df0101;
}


/*================================================
1. Mixins Css
=================================================*/

// xl-device=====

@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;
  }
}


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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-montserrat);
  color: var(--title-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  &.home-5{
    padding: 0px 6.3%;
    @include seventeen-down-device() {
      padding-left: 3%;
      padding-right: 3%;
    }
  
    @include xxl-down-device() {
      padding-left: 2%;
      padding-right: 2%;
    }
    @include sm-down-device() {
      padding-left: 0%;
      padding-right: 0%;
    }
  }
  &.style-2{
    background-color: #FAF8FB;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  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-open-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.sec-mar{
  margin: 100px 0;
  @include lg-down-device() {
    margin: 8ch 0;
  }
}
.pt-120 {
  padding-top: 120px;

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

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

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

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

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

.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-120 {
  margin-bottom: 120px;
}

.mb-100 {
  margin-bottom: 110px;
  @include lg-down-device(){
    margin-bottom: 80px;
  }
}
.mt-100 {
  margin-top: 110px !important;
  @include lg-down-device(){
    margin-top: 80px !important;
  }
}
.mb-90 {
  margin-bottom: 90px;
  @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;
}
.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 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-44 {
  margin-bottom: 44px;

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

.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;
}

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

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

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

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

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

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

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

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

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

// section title

.section-title1 {
  span {
    font-family: var(--font-open-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.2em;
    color: var(--primary-color1);
    display: inline-block;
    margin-bottom: 5px;

    @include sm-down-device() {
      font-size: 16px;
    }
  }

  h2 {
    margin-bottom: 0;
    font-family: var(--font-montserrat);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.3;
    color: var(--title-color);

    @include xxl-device() {
      font-size: 38px;
    }

    @include xxl-down-device() {
      font-size: 38px;
    }

    @include sm-down-device() {
      font-size: 30px;
    }
  }
}

.section-title-2 {
  h2 {
    color: var(--title-color);
    font-size: 40px;
    font-family: var(--font-montserrat);
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.3;

    @include xxl-device() {
      font-size: 38px;
    }

    @include xxl-down-device() {
      font-size: 38px;
    }

    @include sm-down-device() {
      font-size: 30px;
    }
  }

  p {
    color: #5E5E5E;
    margin-bottom: 0;
  }
}

// Button
.primary-btn1 {
  border-radius: 5px;
  background-color: var(--primary-color1);
  font-family: var(--font-open-sans);
  font-weight: 600;
  font-size: 13px;
  color: #13141A;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  svg {
    fill: var(--title-color);
    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: #0A1019;
    transform: skewX(45deg) scale(0, 1);
    z-index: -1;
    transition: all 0.5s ease-out 0s;
  }

  &:hover {
    color: var(--white-color);

    svg {
      fill: var(--white-color);
    }

    &::after {
      transform: skewX(45deg) scale(1, 1);
    }
  }
}

.primary-btn2 {
  border-radius: 5px;
  background-color: #000042;
  font-family: var(--font-open-sans);
  font-weight: 600;
  font-size: 15px;
  color: #13141A;
  white-space: nowrap;
  padding: 10px 20px;
  display: inline-flex;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;

  svg {
    fill: var(--title-color);
    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: #0A1019;
    transform: skewX(45deg) scale(0, 1);
    z-index: -1;
    transition: all 0.5s ease-out 0s;
  }

  &:hover {
    color: var(--white-color);

    svg {
      fill: var(--white-color);
    }

    &::after {
      transform: skewX(45deg) scale(1, 1);
    }
  }
}

.primary-btn3 {
  border-radius: 5px;
  background-color: #df0101;
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 15px;
  color: #13141A;
  padding: 19px 25px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  line-height: 1;

  svg {
    fill: var(--title-color);
    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: #0A1019;
    transform: skewX(45deg) scale(0, 1);
    z-index: -1;
    transition: all 0.5s ease-out 0s;
  }
  &.two{
    width: 100%;
    justify-content: center;
    svg{
      path{
        transition: 0.5s;
        &:first-child{
          transition: 0.5s;
          fill: none;
          stroke: var(--title-color);
        }
      }
    }
  }
  &:hover {
    color: var(--white-color);

    svg {
      fill: var(--white-color);
    }
    &.two{
      svg{
        path{
          &:first-child{
            fill: none;
            stroke: var(--white-color);
          }
        }
      }
    }
    &::after {
      transform: skewX(45deg) scale(1, 1);
    }
  }
}
.primary-btn6{
  border-radius: 5px;
  background-color: var(--title-color);
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 15px;
  color: var(--white-color);
  padding: 11px 28px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 5px;
  border: 1px solid var(--title-color);
  svg {
    fill: var(--white-color);
    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(--white-color);
    transform: skewX(45deg) scale(0, 1);
    z-index: -1;
    transition: all 0.5s ease-out 0s;
  }

  &:hover {
    color: var(--title-color);

    svg {
      fill: var(--title-color);
    }

    &::after {
      transform: skewX(45deg) scale(1, 1);
    }
  }
}
.primary-btn7{
  border-radius: 5px;
  background-color: var(--title-color);
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 15px;
  color: var(--white-color);
  padding: 8px 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 5px;
  border: 1px solid rgba(29, 29, 29, 0.30);
  svg {
    fill: var(--white-color);
    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(--white-color);
    transform: skewX(45deg) scale(0, 1);
    z-index: -1;
    transition: all 0.5s ease-out 0s;
  }

  &:hover {
    border-color: var(--title-color);
    color: var(--title-color);
    svg {
      fill: var(--title-color);
    }
    &::after {
      transform: skewX(45deg) scale(1, 1);
    }
  }
}

.view-btn {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 15px;
  color: var(--title-color);
  position: relative;
  display: inline-block;
  padding: 3px 12px;
  transition: .5s;

  &::after {
    content: '';
    border: 1px solid var(--primary-color1);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(-5deg);
    transition: .5s;
  }

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

    &::after {
      content: '';
      transform: rotate(0deg);
    }
  }
}
// Nice Select
.select{
  margin-bottom: 25px;
}
.nice-select {
  width: 100%;
  background: #F3F3F3;
  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-open-sans);
    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-open-sans);
      font-size: 13px;
      font-weight: 400;  
      padding-left: 25px;
      padding-right: 25px;
      display: flex;
      align-items:  center;
      justify-content: space-between;
      width: 100%;
      
      &:hover{
        color: var(--title-color);
        background-color: transparent;
        font-weight: 500;
      }
      &.selected{
        font-weight: 600;
        // color: var(--title-color);
        // background-color: rgba(#DF0101, .07);
      }
    }
  }
}
// Preloader
.preloader-close-btn{
  position: absolute;
  right: 20px;
  top: 30px;
  font-size: 16px;
  transition: ease-in-out 0.5s linear;
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;

}
.egns-preloader {
  min-width: 100%;
  min-height: 100%;
  position: fixed !important;
  z-index: 999999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  &.close{
    display: none;
    visibility: hidden;
  }
}

.egns-preloader::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: -1
}

.circle-border {
  width: 100%;
  max-width: 140px;
  height: 100%;
  max-height: 140px;
  border: 0 solid var(--primary-color1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  border-radius: 50%;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, .1)
}

.circle-border svg {
  fill: var(--primary-color1)
}

.circle-border svg path {
  stroke: var(--primary-color1)
}

.circle-border .moving-circle {
  width: 10px;
  height: 10px;
  background: var(--primary-color1);
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circle 2s linear infinite
}

.circle-border .moving-circle:nth-child(2) {
  width: 10px;
  height: 10px;
  background: var(--primary-color1);
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circle 2.25s linear infinite
}

.circle-border .moving-circle:nth-child(3) {
  width: 10px;
  height: 10px;
  background: var(--primary-color1);
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circle 2.5s linear infinite
}

@keyframes circle {
  0% {
      transform: rotate(0deg) translate(-70px) rotate(0deg)
  }
  100% {
      transform: rotate(360deg) translate(-70px) rotate(-360deg)
  }
}

#outline {
  stroke-dasharray: 2.42777px, 242.77666px;
  stroke-dashoffset: 0;
  animation: anim 1.6s linear infinite
}

@keyframes anim {
  12.5% {
      stroke-dasharray: 33.98873px, 242.77666px;
      stroke-dashoffset: -26.70543px
  }
  43.75% {
      stroke-dasharray: 84.97183px, 242.77666px;
      stroke-dashoffset: -84.97183px
  }
  100% {
      stroke-dasharray: 2.42777px, 242.77666px;
      stroke-dashoffset: -240.34889px
  }
}
/*=====================================
     3. Topbar
========================================*/
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 11%;
  border-bottom: 1px solid #eee;
  background-color: #fff;

  @include xxl-device() {
    padding: 15px 3%;
  }

  @include xxl-down-device() {
    padding: 15px 3%;
    
  }


  @include lg-down-device() {
    display: none;
    visibility: hidden;
  }

  .search-area {
    max-width: 690px;
    width: 100%;

    @include xxl-device() {
      max-width: 500px;
    }

    @include xxl-down-device() {
      max-width: 500px;
    }

    @include xl-down-device() {
      max-width: 350px;
    }

    form {
      width: 100%;

      .form-inner {
        display: flex;
        align-items: center;
        max-width: 690px;
        width: 100%;

        input {
          background: #FAF8FB;
          border: 1px solid #EEEEEE;
          border-radius: 5px 0px 0px 5px;
          width: 100%;
          height: 52px;
          padding: 10px 30px;
          font-family: var(--font-open-sans);
          font-weight: 400;
          font-size: 14px;
          color: var(--text-color);
          &:focus{
            background-color: var(--white-color);
            border-color: var(--primary-color1);
          }
        }

        button {
          width: 68px;
          height: 52px;
          border-radius: 0px 5px 5px 0px;
          background-color: var(--title-color);

          i {
            color: var(--white-color);
          }
          transition: 0.5s;
          position: relative;
          overflow: hidden;
          z-index: 1;
          &::after {
            position: absolute;
            content: "";
            display: block;
            left: 15%;
            right: -20%;
            top: -4%;
            height: 150%;
            width: 150%;
            bottom: 0;
            border-radius: 0px 5px 5px 0px;
            background-color: var(--primary-color1);
            transform: skewX(45deg) scale(0, 1);
            z-index: -1;
            transition: all 0.5s ease-out 0s;
          }
        
          &:hover {
            color: var(--white-color);
        
            &::after {
              transform: skewX(45deg) scale(1, 1);
            }
          }
        }
      }
    }
  }

  .topbar-right {
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
  
      .content {
        position: relative;
        line-height: 1;
  
        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
  
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
  
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;

      li {
        line-height: 1;
        .sell-btn{
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          color: #13141A;
          background-color: transparent;
          transition: 0.35s;

          svg {
            fill: var(--primary-color1);
            transition: 0.35s;
          }

          &.primary-btn1 {
            svg {
              fill: var(--title-color);
            }
          }

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

            svg {
              fill: var(--primary-color1);
            }
          }    
        }
        button{
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          color: #13141A;
          transition: 0.35s;
          svg {
            fill: var(--primary-color1);
            transition: 0.35s;
          }

          &.primary-btn1 {
            svg {
              fill: var(--title-color);
            }
          }

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

            svg {
              fill: var(--primary-color1);
            }
          }
        }
        a {
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          color: #13141A;
          transition: 0.35s;
          svg {
            fill: var(--primary-color1);
            transition: 0.35s;
          }

          &.primary-btn1 {
            svg {
              fill: var(--title-color);
            }
          }

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

            svg {
              fill: var(--primary-color1);
            }
          }
        }
      }
    }
  }

  &.style-2 {
    border-bottom: 1px solid rgba(#fff, 0.15);
    background-color: transparent;
    .top-bar-items {
      @include md-down-device(){
        display: none;
        visibility: hidden;
      }
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 30px;

        li {
          a {
            font-family: var(--font-montserrat);
            font-style: normal;
            font-weight: 600;
            font-size: 13px;
            line-height: 1;
            color: var(--white-color);
            transition: 0.35s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }

    .search-area {
      max-width: 401px;
      width: 100%;

      .form-inner {
        max-width: 401px;
        width: 100%;

        input {
          background: #000000;
          border: 1px solid rgba(255, 255, 255, 0.16);
          color: #FFFFFF;
          padding: 10px 20px;

          &::placeholder {
            color: rgba(#FFFFFF, 0.8);
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
          }
          &:focus{
            background-color: transparent;
            border-color: var(--primary-color1);
          }
        }

        button {
          background-color: var(--primary-color1);

          i {
            color: var(--title-color);
          }
          transition: 0.5s;
          position: relative;
          overflow: hidden;
          z-index: 1;
          &::after {
            position: absolute;
            content: "";
            display: block;
            left: 15%;
            right: -20%;
            top: -4%;
            height: 150%;
            width: 150%;
            bottom: 0;
            border-radius: 0px 5px 5px 0px;
            background-color: var(--black-color);
            transform: skewX(45deg) scale(0, 1);
            z-index: -1;
            transition: all 0.5s ease-out 0s;
          }
        
          &:hover {
            color: var(--white-color);
            i{
              color: var(--white-color);
            }
            &::after {
              transform: skewX(45deg) scale(1, 1);
            }
          }
          
        }
      }
    }

    .topbar-right {
    
      .hotline-area {
        display: flex;
        align-items: center;
        gap: 20px;
       
        .icon {
          svg {
            fill: var(--white-color);
          }
        }

        .content {
          position: relative;
          line-height: 1;

          span {
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 14px;
            line-height: 1;
            color: rgba(#000000, 0.8);
            margin-bottom: 5px;
            display: inline-block;
          }

          h6 {
            margin-bottom: 0;
            line-height: 1;

            a {
              font-family: var(--font-montserrat);
              font-weight: 600;
              font-size: 16px;
              line-height: 20px;
              color: var(--white-color);
              transition: 0.5s;
              &:hover{
                color: var(--primary-color1);
              }
            }
          }

          &::after {
            content: "";
            height: 32px;
            width: 1px;
            background-color: rgba(#FFFFFF, 0.5);
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  &.style-5{
    padding: 15px 8%;
    @include xxl-device() {
      padding: 15px 3%;
    }
  
    @include xxl-down-device() {
      padding: 15px 3%;
    }
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;

      .content {
        position: relative;
        line-height: 1;

        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;

            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .topbar-right {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 30px;
  
        li {
          line-height: 1;
  
          a {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 13px;
            color: #13141A;
  
            svg {
              fill: var(--primary-color1);
            }
  
            &.primary-btn1 {
              svg {
                fill: var(--title-color);
              }
            }
  
            &:hover {
              color: var(--primary-color1);
  
              svg {
                fill: var(--primary-color1);
              }
            }
          }
          button {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 13px;
            color: #13141A;
  
            svg {
              fill: var(--primary-color1);
            }
  
            &.primary-btn1 {
              svg {
                fill: var(--title-color);
              }
            }
  
            &:hover {
              color: var(--primary-color1);
  
              svg {
                fill: var(--primary-color1);
              }
            }
          }
        }
      }
    }
    .logo-and-menu{
      display: flex;
      align-items: center;
      gap: 70px;
      @include xxl-down-device(){
        gap: 30px;
      }
      .menu{
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 30px;
          @include xxl-down-device(){
            gap: 20px;
          }
          li{
            a{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 13px;
              font-weight: 600;  
              transition: 0.35s;
              &:hover{
                color: var(--primary-color1);

              }
            }
          }
        }
      }
    }
  }
  &.style-6{
    padding: 15px 8%;
    @include xxl-device() {
      padding: 15px 3%;
    }
  
    @include xxl-down-device() {
      padding: 15px 3%;
    }
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;

      .content {
        position: relative;
        line-height: 1;

        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
          }
        }
      }
    }
    .topbar-right {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 30px;
  
        li {
          line-height: 1;
  
          a {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 13px;
            color: var(--title-color);
  
            svg {
              fill: var(--title-color);
            }
  
            &.primary-btn1 {
              svg {
                fill: var(--title-color);
              }
            }
          }
          button {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 13px;
            color: var(--title-color);
  
            svg {
              fill: var(--title-color);
            }
  
            &.primary-btn1 {
              svg {
                fill: var(--title-color);
              }
            }
          }
        }
      }
    }
    .logo-and-menu{
      display: flex;
      align-items: center;
      gap: 70px;
      @include xxl-down-device(){
        gap: 30px;
      }
      .menu{
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 30px;
          @include xxl-down-device(){
            gap: 20px;
          }
          li{
            a{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 13px;
              font-weight: 600;  
              transition: 0.35s;
              &:hover{
                color: var(--title-color);

              }
            }
          }
        }
      }
    }
  }

}



.modal-dialog{
 @include sm-down-device(){
  margin: 0;
 }
}
// signUp
.signUp-modal{
  overflow-y: scroll;
  .modal-dialog{
    max-width: 670px;
    width: 100%;
    .modal-content{
      border-radius: 10px;
      border: none;
      padding: 70px 35px;
      background-color: var(--white-color);
      position: relative;
      @include sm-down-device(){
        padding: 70px 20px;
      }
      .modal-header{
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 35px;
        .btn-close{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(#FF4820, 0.14);
          position: absolute;
          right: 20px;
          top: 20px;
          padding: 0;
          margin: 0;
          opacity: 1;
          background-image: none;
          line-height: 1;
          transition: 0.35s;
          i{
            color: #FF4820;
            font-size: 24px;
            line-height: 1;
            transition: 0.35s;
          }
          &:hover{
            background-color: #FF4820;
            i{
              color: #fff;
            }
          }
        }
        h4{
          color: #000;
          text-align: center;
          font-family: var(--font-montserrat);
          font-size: 24px;
          font-weight: 700;

        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 16px;
          font-weight: 400;
          margin-bottom: 0;
          text-align: center;
          button{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 15px;
            font-weight: 600;     
            background-color: transparent;
          }
        }
      }
      .modal-body{
        padding: 0;
      }
      .form-inner{
        position: relative;
        label{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 500;
          display: inline-block;
          margin-bottom: +5px;
        }
        input{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FBF7FB;  
          height: 50px; 
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 400;     
          padding: 10px 20px;
          width: 100%;  
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          &:focus{
            border: 1px solid #DF0101;
            background: #FFF;   
          }
        }
        i{
          position: absolute;
          right: 20px;
          bottom: 10px;
          color: var(--primary-color1);
          cursor: pointer;
        }
        .primary-btn2{
          width: 100%;
          justify-content: center;
          text-align: center;
        }
        
      }
      .form-agreement{
        input[type=checkbox]{
          display: none;
          visibility: hidden;
        }
        label{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
        }
        input[type=checkbox] + label:before{
          content: "";
          -webkit-appearance: none;
          background: #FFFFFF;
          border: 1px solid var(--primary-color1);
          border-radius: 2px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
          padding: 5px;
          display: inline-block;
          position: relative;
          vertical-align: middle;
          cursor: pointer;
          margin-right: 5px;
        }
        input[type=checkbox]:checked + label:after{
          content: "";
          display: block;
          position: absolute;
          top: 11px;
          left: 4px;
          width: 4px;
          height: 8px;
          border: 1px solid var(--title-color);
          border-width: 0 1px 1px 0;
          transform: rotate(45deg);
        }
        .forgot-pass{
          color: #2A64F8;
          font-family: var(--font-montserrat);
          font-size: 13px;
          font-weight: 600;    
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      .terms-conditon{
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 30px; 
        padding-top: 15px;
        margin-bottom: 50px;
        a{
          font-weight: 600;
          color: var(--text-color);
          transform: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
        &.two{
          margin-bottom: 0;
          p{
            margin-bottom: 0;
          }
        }
      }
      .social-icon{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;
        li{
          a{
            height: 35px;
            width: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #eee;
            transition: 0.35s;
            &:hover{
              border-color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  &.sell-with-us{
    .modal-dialog{
      .modal-content{
        .modal-header{
          justify-content: flex-start;
          align-items: flex-start;
          padding-bottom: 0;
          border-bottom: none;
          h4{
            text-align: start;
          }
        }
        .modal-body{
          padding: 0;
        }
        .form-inner{
          position: relative;
          textarea{
            border-radius: 5px;
            border: 1px solid #EEE;
            outline: none;
            background: #FBF7FB;  
            min-height: 100px; 
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;     
            padding: 10px 20px;
            width: 100%;  
            &:focus{
              border: 1px solid #DF0101;
              background: #FFF;   
            }
          }
          .primary-btn2{
            width: unset;
            justify-content: center;
            text-align: center;
            padding: 10px 36px;
          }
          
        }
      }
    }
  }
  &.two{
    .modal-dialog{
      max-width: 1140px;
    @include lg-down-device(){
      max-width: 670px;
      width: 100%;
    }
      .modal-content{
        border-radius: 5px;
        border: none;
        padding: 0 !important;
        background-color: var(--white-color);
        position: relative;
        @include sm-down-device(){
          padding: 70px 20px;
        }
        .login-wrapper{
          display: flex;
          align-items: center;
          .login-img{
            position: relative;
            img{
              border-radius: 5px 0 0 5px;
            }
            @include lg-down-device(){
              display: none;
              visibility: hidden;
            }
            .logo{
              position: absolute;
              top: 40px;
              left: 30px;
            }
          }
          .login-content{
            width: 50%;
            padding: 70px;
            @include xl-down-device(){
              padding: 70px 30px;
            }
            @include lg-down-device(){
              width: 100%;
            }
            @include sm-down-device(){
              padding: 70px 20px;
            }
            .login-header{
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding-bottom: 15px;
              margin-bottom: 35px;
              .btn-close{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(#FF4820, 0.14);
                position: absolute;
                right: 20px;
                top: 20px;
                padding: 0;
                margin: 0;
                opacity: 1;
                background-image: none;
                line-height: 1;
                transition: 0.35s;
                i{
                  color: #FF4820;
                  font-size: 24px;
                  line-height: 1;
                  transition: 0.35s;
                }
                &:hover{
                  background-color: #FF4820;
                  i{
                    color: #fff;
                  }
                }
              }
              h4{
                color: #000;
                text-align: center;
                font-family: var(--font-montserrat);
                font-size: 24px;
                font-weight: 700;
      
              }
              p{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 16px;
                font-weight: 400;
                margin-bottom: 0;
                text-align: center;
                button{
                  color: var(--title-color);
                  font-family: var(--font-montserrat);
                  font-size: 15px;
                  font-weight: 600;     
                  background-color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
}


.adSearch-modal{
  .modal-dialog{
    .modal-content{
      border-radius: 10px;
      border: none;
      padding: 70px 35px;
      background-color: var(--white-color);
      position: relative;
      @include sm-down-device(){
        padding: 70px 20px;
      }
      .main-title{
        margin-bottom: 25px;
      }
      .btn-close{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(#FF4820, 0.14);
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 0;
        margin: 0;
        opacity: 1;
        background-image: none;
        line-height: 1;
        transition: 0.35s;
        i{
          color: #FF4820;
          font-size: 24px;
          line-height: 1;
          transition: 0.35s;
        }
        &:hover{
          background-color: #FF4820;
          i{
            color: #fff;
          }
        }
      }
      .modal-body{
        padding: 0;
      }
      .form-inner{
        position: relative;
        label{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 500;
          display: inline-block;
          margin-bottom: +5px;
        }
        input{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FBF7FB;  
          height: 50px; 
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;     
          padding: 10px 20px;
          width: 100%;  
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          &:focus{
            border: 1px solid #DF0101;
            background: #FFF;   
          }
        }
        textarea{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FBF7FB;  
          height: 50px; 
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;     
          padding: 10px 20px;
          width: 100%;  
          min-height: 100px;
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          &:focus{
            border: 1px solid #DF0101;
            background: #FFF;   
          }   
        }
        i{
          position: absolute;
          right: 20px;
          bottom: 10px;
          color: var(--primary-color1);
          cursor: pointer;
        }
        .primary-btn2{
          width: 100%;
          justify-content: center;
          text-align: center;
        }
        .primary-btn3{
          padding: 10px 36px
        }
        
      }
      h5{
        color: #000;
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;  
      }
      .apply-btn{
        border-top: 1px solid #eee;
        .primary-btn2{
          padding: 10px 34px;
        }
      }
    }
  }
}
.massage-modal{
  .modal-dialog{
    margin-top: 100px;
    margin-bottom: 100px;
    overflow-y: auto;
    .modal-content{
      border-radius: 10px;
      border: none;
      padding: 70px 35px;
      background-color: var(--white-color);
      position: relative;
      @include sm-down-device(){
        padding: 70px 20px;
      }
      .modal-author-wrapper{
        border-radius: 10px;
        border: 1px solid #EEE;    
        padding: 20px 30px;
        margin-bottom: 50px;
        @include sm-down-device(){
          padding: 20px;
        }
        .author-area{
          display: flex;
          align-items: center;
          gap: 20px;
          .author-img{
            width: 120px;
            height: 93px;   
            img{
              border-radius: 5px;
            } 
          }
          .author-content{
            line-height: 1;
            h6{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 16px;
              font-weight: 700;
              margin-bottom: 3px;     
            }
            span{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 12px;
              font-weight: 600;
              display: inline-block;
              margin-bottom: 13px;
            }
            ul{
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 14px;
              padding-top: 15px;
              position: relative;
              &::after{
                content: '';
                width: 160px;
                height: 1px;    
                background: linear-gradient(90deg, #FFF 0%, #DF0101 0.01%, rgba(255, 255, 255, 0.00) 100%);
                position: absolute;
                left: 0;
                top: 0;
              }
              li{
                a{
                  height: 24px;
                  width: 24px;
                  border-radius: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 15px;
                  border: 1px solid #EEE;
                  background: #FFF;  
                  transition: 0.35s;
                  
                  i{
                    color: var(--primary-color1);
                    font-size: 14px;
                    transition: 0.35s;
                  } 
                  &:hover{
                    background-color: var(--primary-color1);
                    border-color: var(--primary-color1);
                    i{
                      color: var(--title-color);
                    }
                  }
                }
              }
            }
          }
        }
        .contact-info{
          background-color: #F6EFF7;
          border-radius: 5px;
          padding: 25px 30px; 
          .single-contact{
            margin-bottom: 10px;
  
            &:last-child{
              margin-bottom: 0;
              a{
                span{
                  i{
                    color: #F44336;
                  }
                }
              }
            }
            a{
              display: flex;
              align-items: center;
              justify-content: space-between;
              span{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 10px;
                cursor: pointer;
                transition: 0.35s;
                &:hover{
                  color: var(--primary-color1);
                }
              }
              i{
                font-size: 25px;
                color: #00D264;
              }
            }
          }
        }
      }
      .main-title{
        margin-bottom: 25px;
      }
      .btn-close{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(#FF4820, 0.14);
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 0;
        margin: 0;
        opacity: 1;
        background-image: none;
        line-height: 1;
        transition: 0.35s;
        i{
          color: #FF4820;
          font-size: 24px;
          line-height: 1;
          transition: 0.35s;
        }
        &:hover{
          background-color: #FF4820;
          i{
            color: #fff;
          }
        }
      }
      .modal-body{
        padding: 0;
      }
      .form-inner{
        position: relative;
        line-height: 1;
        label{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 500;
          display: block;
          margin-bottom: 10px;
          &.containerss {
            display: flex;
            width: 100%;
            position: relative;
            padding-left: 20px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            span{
              color: var(--title-color);
              font-family: var(--font-open-sans);
              font-size: 15px;
              font-weight: 400;
              line-height: 1.4;
              @include sm-down-device(){
                font-size: 14px;
              }
            }
            input {
              position: absolute;
              opacity: 0;
              cursor: pointer;
              height: 0;
              width: 0;
              &:checked ~ .checkmark {
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
                border-radius: 2px;
                // &::after {
                //   display: block;
                // }
                &::after {
                  content: url(../img/inner-page/icon/checkbox-check.svg);
                  left: 3.5px;
                  top: -7px;
                  position: absolute;
                }
              }
            }
            .checkmark {
              position: absolute;
              top: 3px;
              left: 0;
              height: 14px;
              width: 14px;
              background-color: var(--primary-color1);
              border: 1px solid var(--primary-color1);
              border-radius: 2px;
            }
            &:hover{
              input ~ .checkmark {
                border-color: var(--primary-color1);
              }
            }
          }
        }
        input{
          border-radius: 5px;
          background: var(--white-color);
          color: var(--text-color);
          font-family: var(--font-open-sans);
          border: 1px solid #EEE;
          font-size: 13px;
          font-weight: 400;
          height: 50px;
          width: 100%;
          padding: 10px 20px;
          &::placeholder{
            color: var(--text-color);
          }
          &:focus{
            border: 1px solid var(--primary-color1);
          }
        }
        textarea{
          border-radius: 5px;
          background: var(--white-color);
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          width: 100%;
          padding: 20px 20px;
          outline: none;
          border: 1px solid #EEE;
          min-height: 120px;

          &::placeholder{
            color: rgba(#13141A, .5);
          }
        }
        i{
          position: absolute;
          right: 20px;
          bottom: 15px;
          color: var(--primary-color1);
          cursor: pointer;
        }
        .primary-btn3{
          padding: 17px 25px;
          justify-content: center;
        }
        .nice-select{
          background-color: var(--white-color);
        }
        .iti {
          width: 100%;
          input{
            padding-left: 82px;
          }
        }
        .iti__flag-container{
          top: 8px;
          left: 8px;
        }
        .iti__selected-flag{
          padding-left: 16px;
          width: 60px;
          height: 34px;
          background-color: #FAF8FB;
          border: 1px solid #eee;
        }
        .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
          background-color: transparent;
        }
        .iti__country-list{
          max-width: 280px;
          box-shadow: unset;
          background-color: white;
          border: 1px solid var(--primary-color1);
          .iti__country.iti__highlight{
            background-color: rgba(#DF0101, .5);
          }
          li{
            font-family: var(--font-montserrat);
            font-weight: 400;
            span{
              font-family: var(--font-montserrat);
              font-weight: 400;
            }
          }
        }
      }
      h5{
        color: #000;
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;  
      }
      .modal-btn-group{
        display: inline-flex;
        gap: 20px;
        .primary-btn2{
          padding: 10px 34px;
          &.two{
            background-color: #F6EFF7;
            &::after{
              background-color: red;
            }
          }
        }
      }
    }
  }
}
/*=====================================
     4. Header
========================================*/

header.style-1 {
  position: relative;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 11%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid #eee;
  background-color: var(--white-color);

  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--white-color);
    z-index: 999;

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

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

    }


  }

  .header-logo {
    padding: 15px 0;

    @include sm-down-device() {
      img {
        max-width: 165px;
        width: 100%;
      }
    }
  }

  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }

  &.style-2 {
    background-color: transparent;

    .menu-button {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;

      svg {
        fill: var(--white-color);
      }

      span {
        font-family: var(--font-montserrat);
        font-style: normal;
        font-weight: 600;
        font-size: 13px;
        line-height: 1;
        color: var(--white-color);
      }
    }

    .main-menu {
      >ul {
        li {
          &:hover {
            i {
              color: var(--primary-color1);
              font-size: 20px;
            }
          }

          a {
            color: var(--white-color);
          }

          &.menu-item-has-children {
            &::after {
              color: var(--white-color);
            }
          }
        }
      }
    }

    .nav-right {
      .modal-btn {
        color: var(--white-color);
        transition: 0.35s;

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

      .header-right {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 30px;

          li {
            line-height: 1;

            a {
              display: flex;
              align-items: center;
              gap: 5px;
              font-family: var(--font-open-sans);
              font-weight: 600;
              font-size: 13px;
              color: var(--white-color);
              transition: 0.35s;

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

              svg {
                fill: var(--primary-color1);
              }
            }

            .primary-btn1 {
              color: var(--title-color);

              &:hover {
                color: unset;
              }

              svg {
                fill: var(--title-color);
              }
            }
          }
        }
      }
    }
  }

  .nav-right {
    gap: 45px;

    @include xl-down-device() {
      gap: 25px;
    }
    @include lg-down-device() {
      gap: 0px;
    }

    .modal-btn {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--title-color);
      background-color: transparent;
      padding: 0;
      transition: 0.35s;

      svg {
        line-height: 1;
        transition: 0.35s;
        fill: var(--title-color);
      }

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

        svg {
          fill: var(--primary-color1);
        }
      }
    }
    .primary-btn3 {
      padding: 13px 18px;
      gap: 5px;
    }
    .mobile-menu-btn {
      display: none;
      visibility: hidden;

      @include lg-down-device() {
        display: flex;
        margin-left: 50px;
        flex-direction: column;
        align-items: end;
        visibility: visible;

        justify-content: center;
        position: relative;

        span {
          height: 2px;
          width: 25px;
          background-color: var(--title-color);
          display: flex;
          transition: transform 0.5s ease-in;
          position: absolute;
          top: 0px;

          &::before {
            transition-duration: 0.5s;
            position: absolute;
            width: 35px;
            height: 2px;
            background-color: var(--title-color);
            content: "";
            top: -10px;
            right: 0;
          }

          &::after {
            transition-duration: 0.5s;
            position: absolute;
            width: 15px;
            height: 2px;
            right: 0;
            background-color: var(--title-color);
            content: "";
            top: 10px;
          }
        }

        &.active {
          span {
            background-color: transparent;

            &::before {
              transform: rotateZ(45deg) translate(8px, 6px);
              width: 35px;
            }

            &::after {
              transform: rotateZ(-45deg) translate(8px, -6px);
              width: 35px;
            }
          }
        }
      }
    }
  }

  .main-menu {
    display: inline-block;
    position: relative;
    
    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        &.position-inherit{
          position: inherit;
          @include lg-down-device(){
            position: relative;
          }
          >a{
            &::after {
              content: "\f282";
              font-family: "bootstrap-icons";
              font-weight: 500;
              position: absolute;
              top: 15px;
              right: 2px;
              font-size: 14px;
              color: var(--text-color);
              transition: all .55s ease-in-out;
              // transition: all 0.42s ease-in-out;
  
              @include xl-down-device() {
                right: -7px;
              }
  
              @include lg-down-device() {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
        &: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(--title-color);
          display: block;
          text-transform: capitalize;
          padding: 15px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;

          @include xl-down-device() {
            padding: 15px 10px;
          }
          @include lg-down-device() {
            padding: 32px 9px;
          }



        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--text-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(--primary-color1);

            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--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(--text-color1);
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid rgba(233, 228, 228, .5);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, #DF0101, #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, #DF0101, #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;
                }

              }
            }

            &: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(--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;
                }
              }
            }

            &:last-child {
              border-bottom: none;
            }
          }
        }
        .mega-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          min-width: 1040px;
          background: var(--white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          padding: 45px 40px;
          border-radius: 0 0 10px 10px;
          transform-origin: top;
          @include xl-down-device(){
            min-width: 935px;
          }
          @include lg-down-device(){
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding: 0;
            padding-left: 10px;
          }
          .menu-row{
            display: flex;
            @include lg-down-device(){
              display: block;
            }
            
            .menu-single-item{
              display: block;
              padding: 0;
              padding-right: 70px;
              position: relative;
              flex-basis: 33.33%;
              @include xl-down-device(){
                padding-right: 55px;
              }
              @include lg-down-device(){
                padding-right: 0px;
                margin-bottom: 15px;
                flex-basis: unset;
                &:last-child{
                  margin-bottom: 0;
                }
              }
              &::after{
                content: '';
                height: 100%;
                width: 1px;
                background-color: #eee;
                position: absolute;
                right: 27px;
                top: 0;
                @include xl-down-device(){
                  right: 18px;
                }
                @include lg-down-device(){
                  display: none;
                  visibility: hidden;
                }
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                @include lg-down-device(){
                  color: #b5b5b5;
                  position: relative;
                  padding-left: 15px;
                  &::before{
                    height: 8px;
                    width: 8px;
                    background-color: #b5b5b5;
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 14px;
                    font-weight: 500; 
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    &:hover{
                      color: var(--primary-color1);
                    }
                    @include lg-down-device(){
                      font-size: 12px;
                      font-weight: 600;
                      border-bottom: 1px solid rgba(233, 228, 228, .5);
                      img{
                        display: none;
                        visibility: hidden;
                      }
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--text-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                  &:hover{
                    color: var(--primary-color1);
                    i{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
        }


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 14px;
            color: var(--text-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xl-down-device() {
              right: 2px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

          >ul.sub-menu {
            @include lg-up-device() {
              display: block;
              animation: fade-down 0.45s linear;
            }
          }
          .mega-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 {
            color: var(--primary-color1);
          }

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

        // @include lg-device(){
        //     &:hover{
        //         pointer-events: none;
        //     }
        // }

        &.active {
          >a {
            color: 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;
      }
    }
    .topbar-right {
      padding-top: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.93);
  
      a {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
  
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--primary-color1);
        }
  
        &.primary-btn3 {
          justify-content: center;
  
          svg {
            fill: var(--title-color);
          }
        }
  
        &:hover {
          color: var(--primary-color1);
  
          svg {
            fill: var(--primary-color1);
          }
        }
      }
      .header-cart-btn{
        background-color: transparent;
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--title-color);
        background-color: transparent;
        padding: 0;
        transition: 0.35s;  
        margin-bottom: 25px;
      }
    }
  
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 40px;
  
      .content {
        position: relative;
        line-height: 1;
  
        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
  
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
  
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #fff;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 0px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding-left: 10px;

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  color: var(--primary-color1);
                  margin-left: 10px;
                }
              }

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

              i {
                color: var(--primary-color1);
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }
  &.dashboard-header{
    margin-left: 305px;
    padding: 0 60px;
    max-width: calc(100% - 305px);
    width: 100%;
    @include seventeen-down-device(){
      margin-left: 270px;
      max-width: calc(100% - 270px);
    }
    @include xxl-device(){
      margin-left: 235px;
      max-width: calc(100% - 235px);
    }
    @include fifteen-down-device(){
      .nav-right{
        .primary-btn3{
          display: none !important;
          visibility: hidden;
        }
        
      }
    }
    @include xl-device(){
      margin-left: 220px;
      max-width: calc(100% - 220px);
    }
    @include xl-down-device(){
      margin-left: 200px;
      max-width: calc(100% - 200px);
      padding: 0 20px;
    }
    @include lg-down-device(){
      padding: 15px 20px;
      margin-left: 0px;
      max-width: calc(100%);
      &.sticky{
        padding: 15px 20px !important; 
      }
      .header-cart-btn{
        display: none !important;
        visibility: hidden;
      }
      .main-menu{
        display: none;
        visibility: hidden;
      }
      &.slide{
        margin-left: 200px;
        max-width: calc(100% - 200px);
      }
      .mobile-menu-btn{
        visibility: visible;
          display: flex;
          margin-left: 50px;
          flex-direction: column;
          align-items: end;
          visibility: visible;
  
          justify-content: center;
          position: relative;
  
          span {
            height: 2px;
            width: 25px;
            background-color: var(--title-color);
            display: flex;
            transition: transform 0.5s ease-in;
            position: absolute;
            top: 0px;
  
            &::before {
              transition-duration: 0.5s;
              position: absolute;
              width: 35px;
              height: 2px;
              background-color: var(--title-color);
              content: "";
              top: -10px;
              right: 0;
            }
  
            &::after {
              transition-duration: 0.5s;
              position: absolute;
              width: 15px;
              height: 2px;
              right: 0;
              background-color: var(--title-color);
              content: "";
              top: 10px;
            }
          }
  
          &.active {
            span {
              background-color: transparent;
  
              &::before {
                transform: rotateZ(45deg) translate(8px, 6px);
                width: 35px;
              }
  
              &::after {
                transform: rotateZ(-45deg) translate(8px, -6px);
                width: 35px;
              }
            }
          }
      }
    }
    @include md-down-device(){
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 120px;
        max-width: calc(100% - 120px);
      }
    }
    @include sm-down-device(){
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 80px;
        max-width: calc(100% - 80px);
      }
    }
  }
}

header.style-2 {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 11%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid rgba(#fff, 0.15);
  background-color: transparent;

  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }
  @include xl-down-device() {
    padding: 13px 3%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--title-color);
    z-index: 999;

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

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

    }


  }

  .header-logo {

    @include sm-down-device() {
      img {
        max-width: 165px;
        width: 100%;
      }
    }
  }

  .header-right {
    @include xl-down-device() {
      display: none;
      visibility: hidden;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;

      

      li {
        line-height: 1;

        a {
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          color: var(--white-color);
          transition: 0.35s;

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

          svg {
            fill: var(--primary-color1);
          }
        }

        .primary-btn1 {
          color: var(--title-color);
          svg {
            fill: var(--title-color);
          }
          &:hover {
            color: var(--white-color);
            svg {
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }

  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }

  .menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.35s;

    svg {
      fill: var(--white-color);
      transition: 0.35s;
    }

    span {
      font-family: var(--font-montserrat);
      font-style: normal;
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
      color: var(--white-color);
      transition: 0.35s;
    }

    &:hover {
      svg {
        fill: var(--primary-color1);
      }

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

  .nav-right {
    gap: 45px;

    @include xl-down-device() {
      gap: 30px;
    }
    .primary-btn3 {
      padding: 13px 18px;
      gap: 5px;
    }
    .search-btn{
      a{
        svg{
          fill: var(--white-color);
          transition: 0.35s;
          &:hover{
            fill: var(--primary-color1);
          }
        }
      }
    }
    .header-user-btn{
      background-color: transparent;
      svg{
        fill: var(--white-color);
        transition: 0.35s;
        &:hover{
          fill: var(--primary-color1);
        }
      }
    }
  


  }

  .main-menu {
    display: inline-block;
    position: relative;
    @include xl-down-device(){
      display: none;
      visibility: hidden;
    }
    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        &.position-inherit{
          position: inherit;
          @include lg-down-device(){
            position: relative;
          }
          >a{
            &::after {
              content: "\f282";
              font-family: "bootstrap-icons";
              font-weight: 500;
              position: absolute;
              top: 15px;
              right: 2px;
              font-size: 14px;
              color: var(--white-color);
              transition: all .55s ease-in-out;
              // transition: all 0.42s ease-in-out;
  
              @include xl-down-device() {
                right: 2px;
              }
  
              @include lg-down-device() {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
        &: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;
          text-transform: capitalize;
          padding: 15px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;

          @include lg-down-device() {
            padding: 32px 9px;
          }



        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--text-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(--primary-color1);

            &::before {
              content: '\F2EA';
            }
          }
        }

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

          @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 xl-down-device() {
                right: 0;
              }
            }

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

            a {
              display: block;
              padding: 15px 25px;
              color: var(--text-color1);
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid rgba(233, 228, 228, .5);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, #DF0101, #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, #DF0101, #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;
                }

              }
            }

            &: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(--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: 910px) {
                margin-left: 10px;
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

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

            &:last-child {
              border-bottom: none;
            }
          }
        }
        .mega-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          min-width: 1040px;
          background: var(--white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          padding: 45px 40px;
          border-radius: 0 0 10px 10px;
          transform-origin: top;
          @include seventeen-down-device(){
            margin-left: -6rem;
          }
          @include xl-down-device(){
            min-width: 935px;
          }
          @include xl-down-device(){
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding: 0;
            padding-left: 10px;
          }
          .menu-row{
            display: flex;
            @include xl-down-device(){
              display: block;
            }
            
            .menu-single-item{
              display: block;
              padding: 0;
              padding-right: 60px;
              position: relative;
              flex-basis: 33.33%;
              @include xl-down-device(){
                padding-right: 0px;
                margin-bottom: 15px;
                &:last-child{
                  margin-bottom: 0;
                }
              }
              &::after{
                content: '';
                height: 100%;
                width: 1px;
                background-color: #eee;
                position: absolute;
                right: 27px;
                top: 0;
                @include xl-down-device(){
                  right: 18px;
                }
                @include xl-down-device(){
                  display: none;
                  visibility: hidden;
                }
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                @include lg-down-device(){
                  color: #b5b5b5;
                  position: relative;
                  padding-left: 15px;
                  &::before{
                    height: 8px;
                    width: 8px;
                    background-color: #b5b5b5;
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 14px;
                    font-weight: 500; 
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    &:hover{
                      color: var(--primary-color1);
                    }
                    @include xl-down-device(){
                      font-size: 12px;
                      font-weight: 600;
                      border-bottom: 1px solid rgba(233, 228, 228, .5);
                      img{
                        display: none;
                        visibility: hidden;
                      }
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  color: var(--title-color);
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--text-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                  &:hover{
                    color: var(--primary-color1);
                    i{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
        }


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 14px;
            color: var(--text-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xl-down-device() {
              right: 2px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

          >ul.sub-menu {
            @include xl-up-device() {
              display: block;
              animation: fade-up 0.45s linear;
            }
          }
          .mega-menu{
            @include xl-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 {
            color: var(--primary-color1);
          }

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

        // @include lg-device(){
        //     &:hover{
        //         pointer-events: none;
        //     }
        // }

        &.active {
          >a {
            color: 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;
      }
    }

  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #fff;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  color: var(--primary-color1);
                  margin-left: 10px;
                }
              }

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

              i {
                color: var(--primary-color1);
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }

}

header.style-3 {
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid rgba(#fff, 0.15);
  background-color: transparent;
  position: relative;
  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }
  @include xl-down-device() {
    padding: 0px 1%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--title-color);
    z-index: 999;

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

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

    }


  }
  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }

  .header-logo{
    @include lg-device(){
      max-width: 180px;
    }
    @include lg-down-device(){
      padding: 20px 0px;
    }
  }
  .nav-right {
    gap: 30px;
    @include xl-down-device(){
      gap: 15px;
    }
    .modal-btn{
      background-color: transparent;
      width: 35px;
      height: 35px;    
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--primary-color1);
      transition: 0.35s;
      svg{
        fill: var(--primary-color1);
        transition: 0.35s;
      }
      &:hover{
        background-color: var(--primary-color1);
        svg{
          fill: var(--title-color);
        }
      }
    }
    .primary-btn3{
      font-size: 13px;
      gap: 5px;
      border-radius: 20px;
      padding: 13px 23px;
    }
    .mobile-menu-btn {
      display: none;
      visibility: hidden;

      @include lg-down-device() {
        display: flex;
        margin-left: 50px;
        flex-direction: column;
        align-items: end;
        visibility: visible;

        justify-content: center;
        position: relative;

        span {
          height: 2px;
          width: 25px;
          background-color: var(--white-color);
          display: flex;
          transition: transform 0.5s ease-in;
          position: absolute;
          top: 0px;

          &::before {
            transition-duration: 0.5s;
            position: absolute;
            width: 35px;
            height: 2px;
            background-color: var(--white-color);
            content: "";
            top: -10px;
            right: 0;
          }

          &::after {
            transition-duration: 0.5s;
            position: absolute;
            width: 15px;
            height: 2px;
            right: 0;
            background-color: var(--white-color);
            content: "";
            top: 10px;
          }
        }

        &.active {
          span {
            background-color: transparent;

            &::before {
              transform: rotateZ(45deg) translate(8px, 6px);
              width: 35px;
            }

            &::after {
              transform: rotateZ(-45deg) translate(8px, -6px);
              width: 35px;
            }
          }
        }
      }
    }
  }

  .main-menu {
    display: inline-block;
    position: relative;
    
    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        &.position-inherit{
          position: inherit;
          @include lg-down-device(){
            position: relative;
          }
          >a{
            &::after {
              content: "\f282";
              font-family: "bootstrap-icons";
              font-weight: 500;
              position: absolute;
              top: 24px;
              right: 2px;
              font-size: 14px;
              color: var(--white-color);
              transition: all .55s ease-in-out;
              // transition: all 0.42s ease-in-out;
  
              @include xxl-down-device() {
                right: -5px;
              }
              @include xl-down-device() {
                right: -11px;
              }
  
              @include lg-down-device() {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
        &: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;
          text-transform: capitalize;
          padding: 24px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;
          @include xxl-down-device(){
            padding: 24px 12px;
          }
          @include xl-down-device(){
            padding: 24px 5px;
          }

          @include lg-down-device() {
            padding: 32px 9px;
            color: var(--title-color);
          }
        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--text-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(--primary-color1);

            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--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(--text-color1);
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid rgba(233, 228, 228, .5);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, #DF0101, #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, #DF0101, #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;
                }

              }
            }

            &: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(--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) {
                margin-left: 10px;
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

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

            &:last-child {
              border-bottom: none;
            }
          }
        }
        .mega-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          min-width: 1040px;
          background: var(--white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          padding: 45px 40px;
          border-radius: 0 0 10px 10px;
          transform-origin: top;
          @include seventeen-down-device(){
            margin-left: -5rem;
          }
          @include xl-down-device(){
            min-width: 935px;
          }
          @include lg-down-device(){
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding: 0;
            padding-left: 10px;
            margin-left: 0;
          }
          .menu-row{
            display: flex;
            @include lg-down-device(){
              display: block;
            }
            
            .menu-single-item{
              display: block;
              padding: 0;
              padding-right: 70px;
              position: relative;
              flex-basis: 33.33%;
              @include xl-down-device(){
                padding-right: 55px;
              }
              @include lg-down-device(){
                padding-right: 0px;
                margin-bottom: 15px;
                flex-basis: unset;
                &:last-child{
                  margin-bottom: 0;
                }
              }
              &::after{
                content: '';
                height: 100%;
                width: 1px;
                background-color: #eee;
                position: absolute;
                right: 27px;
                top: 0;
                @include xl-down-device(){
                  right: 18px;
                }
                @include lg-down-device(){
                  display: none;
                  visibility: hidden;
                }
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                @include lg-down-device(){
                  color: #b5b5b5;
                  position: relative;
                  padding-left: 15px;
                  &::before{
                    height: 8px;
                    width: 8px;
                    background-color: #b5b5b5;
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 14px;
                    font-weight: 500; 
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    &:hover{
                      color: var(--primary-color1);
                    }
                    @include lg-down-device(){
                      font-size: 12px;
                      font-weight: 600;
                      border-bottom: 1px solid rgba(233, 228, 228, .5);
                      img{
                        display: none;
                        visibility: hidden;
                      }
                      &:hover{
                        padding-left: 10px;
                      }
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  color: var(--title-color);
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--title-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                  &:hover{
                    color: var(--primary-color1);
                    i{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
        }


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 24px;
            right: 10px;
            font-size: 14px;
            color: var(--white-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xxl-down-device() {
              right: 3px;
            }
            @include xl-down-device() {
              right: -2px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

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

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

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

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

        // @include lg-device(){
        //     &:hover{
        //         pointer-events: none;
        //     }
        // }

        &.active {
          >a {
            color: 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;
      }
    }
    .topbar-right {
      padding-top: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.93);
      .primary-btn3 {
        justify-content: center;
        width: 100%;
        

        svg {
          fill: var(--title-color);
        }
      }
      a {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
  
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--primary-color1);
        }
  
        
  
        &:hover {
          color: var(--primary-color1);
  
          svg {
            fill: var(--primary-color1);
          }
        }
      }
      .sell-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
        background-color: transparent;
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--primary-color1);
        }
  
        &.primary-btn3 {
          justify-content: center;
  
          svg {
            fill: var(--title-color);
          }
        }
  
        &:hover {
          color: var(--primary-color1);
  
          svg {
            fill: var(--primary-color1);
          }
        }
      }
    }
  
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 40px;
  
      .content {
        position: relative;
        line-height: 1;
  
        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
  
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
  
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #fff;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  color: var(--primary-color1);
                  margin-left: 10px;
                }
              }

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

              i {
                color: var(--primary-color1);
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }

}

header.style-4 {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 11%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid rgba(#fff, 0.15);
  background-color: transparent;
  position: absolute;

  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--title-color);
    z-index: 888;

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

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

    }


  }

  .header-logo {
    padding: 15px 0;

    @include sm-down-device() {
      img {
        max-width: 165px;
        width: 100%;
      }
    }
  }

  .header-right {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;

      @include xl-down-device() {
        display: none;
        visibility: hidden;
      }

      li {
        line-height: 1;

        >a{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 26px;
          width: 26px;
          border-radius: 50%;
          border: 1px solid rgba(#fff, .4);
          background-color: #1A151A;
          gap: 5px;
          transition: 0.35s;
          cursor: pointer;
          svg {
            fill: var(--primary-color1);
          }
          &:hover {
            background-color: var(--primary-color1);
            svg {
              fill: var(--title-color);
            }
          }
        }
        .search-btn{
          >a{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 26px;
            width: 26px;
            border-radius: 50%;
            border: 1px solid rgba(#fff, .4);
            background-color: #1A151A;
            gap: 5px;
            transition: 0.35s;
            cursor: pointer;
            svg {
              fill: var(--primary-color1);
            }
            &:hover {
              background-color: var(--primary-color1);
              svg {
                fill: var(--title-color);
              }
            }
          }
        }

        .primary-btn1 {
          color: var(--title-color);

          &:hover {
            color: unset;
          }

          svg {
            fill: var(--title-color);
          }
        }
      }
    }
  }

  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }

  .menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.35s;

    svg {
      fill: var(--white-color);
      transition: 0.35s;
    }

    span {
      font-family: var(--font-montserrat);
      font-style: normal;
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
      color: var(--white-color);
      transition: 0.35s;
    }

    &:hover {
      svg {
        fill: var(--primary-color1);
      }

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

  .nav-right {
    gap: 45px;

    @include xl-down-device() {
      gap: 30px;
    }

 
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
      svg{
        fill: var(--white-color);
      }
      .content {
        position: relative;
        line-height: 1;

        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#fff, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 1;
          color: var(--white-color);
          margin-bottom: 5px;
          display: inline-block;
        }

        h6 {
          margin-bottom: 0;
          line-height: 1;

          a {
            font-family: var(--font-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--white-color);
            transition: 0.5s;

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

    .modal-dialog {
      min-height: 100vh;
      max-width: 620px;
      margin: 0 0 0 auto;

      @include md-down-device() {
        max-width: unset;
        width: 100%;
      }

      .modal-content {
        padding: 65px 60px;
        min-height: 100vh;
        position: relative;

        @include md-down-device() {
          padding: 50px 20px;
        }

        .modal-header {
          padding: 0;
          padding-bottom: 15px;
          border-bottom: 1px solid rgba(238, 238, 238, 0.933333);

          .modal-title {
            font-family: var(--font-montserrat);
            font-weight: 700;
            font-size: 24px;
            color: var(--title-color);
            margin-bottom: 0;
          }

          .close-btn {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background: rgba(255, 72, 32, 0.14);
            transition: .5s;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              color: rgba(255, 72, 32, 1);
              line-height: 1;
              font-size: 20px;
              transition: .5s;
            }

            &:hover {
              background: rgba(255, 72, 32, 1);

              i {
                color: var(--white-color);
              }
            }
          }
        }

        .modal-body {
          padding: 40px 0;

          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            min-height: 500px;

            .single-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 30px;

              &:last-child {
                margin-bottom: 0;
              }

              .item-area {
                display: flex;
                align-items: center;
                gap: 15px;

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

                .close-btn {
                  height: 28px;
                  min-width: 28px;
                  border-radius: 50%;
                  background: rgba(255, 72, 32, 0.14);
                  transition: .5s;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  i {
                    color: rgba(255, 72, 32, 1);
                    line-height: 1;
                    font-size: 20px;
                    transition: .5s;
                  }

                  &:hover {
                    background: rgba(255, 72, 32, 1);

                    i {
                      color: var(--white-color);
                    }
                  }
                }

                .main-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 20px;
                  min-width: 350px;
                  width: 100%;

                  @include md-down-device() {
                    gap: 12px;
                    min-width: 100%;
                  }

                  .item-img {
                    background: #F3F3F3;
                    border-radius: 5px;
                    min-width: 90px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    @include md-down-device() {
                      height: 60px;
                      min-width: 55px;
                    }

                    img {
                      height: 60px;
                      width: 55px;

                      @include md-down-device() {
                        width: 45px;
                        height: unset;
                      }
                    }
                  }

                  .content {
                    line-height: 1;
                    padding-right: 40px;

                    span {
                      font-family: var(--font-montserrat);
                      font-weight: 600;
                      font-size: 18px;
                      color: var(--title-color);
                      display: inline-block;
                      margin-bottom: 3px;
                    }

                    h6 {
                      margin-bottom: 0;
                      line-height: 1;

                      a {
                        font-family: var(--font-montserrat);
                        font-weight: 500;
                        font-size: 15px;
                        line-height: 1.5;
                        color: var(--title-color);

                        strong {
                          font-weight: 600;
                        }

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

              .quantity-area {
                .quantity {
                  display: flex;
                  flex-direction: column;
                  gap: 5px;

                  a {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    color: var(--title-color);
                    font-weight: 600;
                    cursor: pointer;
                    transition: 0.35s;

                    &:hover {
                      background: var(--primary-color1);
                      border: 1px solid --primary-color1;
                    }
                  }

                  input {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: var(--title-color);
                    font-weight: 600;
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        .modal-footer {
          justify-content: flex-start;
          padding: 0;
          border-top: 1px solid rgba(238, 238, 238, 0.933333);
          position: sticky;
          width: 100%;
          left: 0;
          bottom: 0;

          .pricing-area {
            border-bottom: 1px solid rgba(238, 238, 238, 0.933333);
            width: 100%;
            padding: 10px 0px 15px;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              width: 100%;

              li {
                font-family: var(--font-montserrat);
                font-weight: 500;
                font-size: 15px;
                color: var(--title-color);
                display: flex;
                justify-content: space-between;
                width: 100%;
              }
            }
          }

          .footer-button {
            padding-top: 40px;
            width: 100%;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 30px;

              @include sm-down-device() {
                flex-wrap: wrap;
                gap: 15px;
              }

              li {
                width: 100%;

                a {
                  width: 100%;
                  justify-content: center;
                }

                &:first-child {
                  a {
                    background-color: var(--title-color);
                    color: var(--white-color);
                  }
                }
              }
            }
          }

        }
      }
    }

    .mobile-menu-btn {
      display: none;
      visibility: hidden;

      @include lg-down-device() {
        display: flex;
        margin-left: 50px;
        flex-direction: column;
        align-items: end;
        visibility: visible;

        justify-content: center;
        position: relative;

        span {
          height: 2px;
          width: 25px;
          background-color: var(--title-color);
          display: flex;
          transition: transform 0.5s ease-in;
          position: absolute;
          top: 0px;

          &::before {
            transition-duration: 0.5s;
            position: absolute;
            width: 35px;
            height: 2px;
            background-color: var(--title-color);
            content: "";
            top: -10px;
            right: 0;
          }

          &::after {
            transition-duration: 0.5s;
            position: absolute;
            width: 15px;
            height: 2px;
            right: 0;
            background-color: var(--title-color);
            content: "";
            top: 10px;
          }
        }

        &.active {
          span {
            background-color: transparent;

            &::before {
              transform: rotateZ(45deg) translate(8px, 6px);
              width: 35px;
            }

            &::after {
              transform: rotateZ(-45deg) translate(8px, -6px);
              width: 35px;
            }
          }
        }
      }
    }


  }

  .main-menu {
    display: inline-block;

    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;

        @include xl-down-device() {
          padding: 0px;
        }

        &: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;
          text-transform: capitalize;
          padding: 15px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: capitalize;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;

          @include lg-down-device() {
            padding: 32px 9px;
          }



        }

        i {
          font-size: 20px;
          text-align: center;
          color: var(--white-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(--primary-color1);

            &::before {
              content: '\F2EA';
            }
          }
        }

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

          @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 25px;
              color: var(--title-color);
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid #ddd;

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, #DF0101, #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: #ddd;

                &::before {
                  background: linear-gradient(90deg, #ddd, #DF0101, #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;
                }

              }
            }

            &: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(--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;
                }
              }
            }

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


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 00;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 14px;
            color: var(--white-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xl-down-device() {
              right: 2px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

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

          @keyframes fade-up {
            0% {
              opacity: 0;
              transform: translateY(10px);
              visibility: hidden;
            }

            100% {
              opacity: 1;
              transform: translateY(0px);
              visibility: visible;
            }
          }

        }

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

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

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

        }

        // @include lg-device(){
        //     &:hover{
        //         pointer-events: none;
        //     }
        // }

        &.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;
      }
    }

  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #0066cc;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  color: var(--primary-color1);
                  margin-left: 10px;
                }
              }

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

              i {
                color: var(--primary-color1);
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }

}

header.style-5 {
  width: 100%;
  z-index: 555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid transparent;
  background-color: #0066cc;
    position: relative;

  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background-color: var(--white-color);
    z-index: 555;

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

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

    }


  }

  .header-logo {
    padding: 15px 0;

    @include sm-down-device() {
      img {
        max-width: 165px;
        width: 100%;
      }
    }
  }

  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }


  .nav-right {
    gap: 45px;

    @include xl-down-device() {
      gap: 20px;
    }
    .search-btn{
      a{
        transition: 0.35s;
        svg{
          fill: var(--title-color);
          transition: 0.35s;
        }
        &:hover{
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
    button{
      background-color: transparent;
      transition: 0.35s;
      svg{
        fill: var(--title-color);
        transition: 0.35s;
      }
      &:hover{
        svg{
          fill: var(--primary-color1);
        }
      }
    }
  
    .primary-btn3{
      font-size: 13px;
      gap: 5px;
      padding: 13px 17px;
      @include lg-down-device(){
        display: none;
        visibility: hidden;
      }
    }

    .modal-dialog {
      min-height: 100vh;
      max-width: 620px;
      margin: 0 0 0 auto;

      @include md-down-device() {
        max-width: unset;
        width: 100%;
      }

      .modal-content {
        padding: 65px 60px;
        min-height: 100vh;
        position: relative;

        @include md-down-device() {
          padding: 50px 20px;
        }

        .modal-header {
          padding: 0;
          padding-bottom: 15px;
          border-bottom: 1px solid rgba(238, 238, 238, 0.933333);

          .modal-title {
            font-family: var(--font-montserrat);
            font-weight: 700;
            font-size: 24px;
            color: var(--title-color);
            margin-bottom: 0;
          }

          .close-btn {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background: rgba(255, 72, 32, 0.14);
            transition: .5s;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              color: rgba(255, 72, 32, 1);
              line-height: 1;
              font-size: 20px;
              transition: .5s;
            }

            &:hover {
              background: rgba(255, 72, 32, 1);

              i {
                color: var(--white-color);
              }
            }
          }
        }

        .modal-body {
          padding: 40px 0;

          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            min-height: 500px;

            .single-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 30px;

              &:last-child {
                margin-bottom: 0;
              }

              .item-area {
                display: flex;
                align-items: center;
                gap: 15px;

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

                .close-btn {
                  height: 28px;
                  min-width: 28px;
                  border-radius: 50%;
                  background: rgba(255, 72, 32, 0.14);
                  transition: .5s;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  i {
                    color: rgba(255, 72, 32, 1);
                    line-height: 1;
                    font-size: 20px;
                    transition: .5s;
                  }

                  &:hover {
                    background: rgba(255, 72, 32, 1);

                    i {
                      color: var(--white-color);
                    }
                  }
                }

                .main-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 20px;
                  min-width: 350px;
                  width: 100%;

                  @include md-down-device() {
                    gap: 12px;
                    min-width: 100%;
                  }

                  .item-img {
                    background: #F3F3F3;
                    border-radius: 5px;
                    min-width: 90px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    @include md-down-device() {
                      height: 60px;
                      min-width: 55px;
                    }

                    img {
                      height: 60px;
                      width: 55px;

                      @include md-down-device() {
                        width: 45px;
                        height: unset;
                      }
                    }
                  }

                  .content {
                    line-height: 1;
                    padding-right: 40px;

                    span {
                      font-family: var(--font-montserrat);
                      font-weight: 600;
                      font-size: 18px;
                      color: var(--title-color);
                      display: inline-block;
                      margin-bottom: 3px;
                    }

                    h6 {
                      margin-bottom: 0;
                      line-height: 1;

                      a {
                        font-family: var(--font-montserrat);
                        font-weight: 500;
                        font-size: 15px;
                        line-height: 1.5;
                        color: var(--title-color);

                        strong {
                          font-weight: 600;
                        }

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

              .quantity-area {
                .quantity {
                  display: flex;
                  flex-direction: column;
                  gap: 5px;

                  a {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    color: var(--title-color);
                    font-weight: 600;
                    cursor: pointer;
                    transition: 0.35s;

                    &:hover {
                      background: var(--primary-color1);
                      border: 1px solid --primary-color1;
                    }
                  }

                  input {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: var(--title-color);
                    font-weight: 600;
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        .modal-footer {
          justify-content: flex-start;
          padding: 0;
          border-top: 1px solid rgba(238, 238, 238, 0.933333);
          position: sticky;
          width: 100%;
          left: 0;
          bottom: 0;

          .pricing-area {
            border-bottom: 1px solid rgba(238, 238, 238, 0.933333);
            width: 100%;
            padding: 10px 0px 15px;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              width: 100%;

              li {
                font-family: var(--font-montserrat);
                font-weight: 500;
                font-size: 15px;
                color: var(--title-color);
                display: flex;
                justify-content: space-between;
                width: 100%;
              }
            }
          }

          .footer-button {
            padding-top: 40px;
            width: 100%;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 30px;

              @include sm-down-device() {
                flex-wrap: wrap;
                gap: 15px;
              }

              li {
                width: 100%;

                a {
                  width: 100%;
                  justify-content: center;
                }

                &:first-child {
                  a {
                    background-color: var(--title-color);
                    color: var(--white-color);
                  }
                }
              }
            }
          }

        }
      }
    }

    .mobile-menu-btn {
      display: none;
      visibility: hidden;

      @include lg-down-device() {
        display: flex;
        margin-left: 50px;
        flex-direction: column;
        align-items: end;
        visibility: visible;

        justify-content: center;
        position: relative;

        span {
          height: 2px;
          width: 25px;
          background-color: var(--title-color);
          display: flex;
          transition: transform 0.5s ease-in;
          position: absolute;
          top: 0px;

          &::before {
            transition-duration: 0.5s;
            position: absolute;
            width: 35px;
            height: 2px;
            background-color: var(--title-color);
            content: "";
            top: -10px;
            right: 0;
          }

          &::after {
            transition-duration: 0.5s;
            position: absolute;
            width: 15px;
            height: 2px;
            right: 0;
            background-color: var(--title-color);
            content: "";
            top: 10px;
          }
        }

        &.active {
          span {
            background-color: transparent;

            &::before {
              transform: rotateZ(45deg) translate(8px, 6px);
              width: 35px;
            }

            &::after {
              transform: rotateZ(-45deg) translate(8px, -6px);
              width: 35px;
            }
          }
        }
      }
    }


  }

  .main-menu {
    display: inline-block;
    position: relative;
    
    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        @include xl-down-device(){
          padding: 0 4px;

        }
        &.position-inherit{
          position: inherit;
          @include lg-down-device(){
            position: relative;
          }
          >a{
            &::after {
              content: "\f282";
              font-family: "bootstrap-icons";
              font-weight: 500;
              position: absolute;
              top: 15px;
              right: 2px;
              font-size: 14px;
              color: var(--text-color);
              transition: all .55s ease-in-out;
              // transition: all 0.42s ease-in-out;
  
              @include xl-down-device() {
                right: 2px;
              }
  
              @include lg-down-device() {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
        &: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(--title-color);
          display: block;
          text-transform: capitalize;
          padding: 15px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;

          @include lg-down-device() {
            padding: 32px 9px;
          }



        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: #000000;
          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(--primary-color1);

            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--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() {
                font-size: 20px;
                top: 8px;
                right: 0;
              }
            }

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

            a {
              display: block;
              padding: 15px 15px;
              color: #df0101;
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid rgba(233, 228, 228, .5);

              &::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                background: linear-gradient(90deg, #fff, #DF0101, #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, #DF0101, #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;
                }

              }
            }

            &: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(--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) {
                margin-left: 10px;
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

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

            &:last-child {
              border-bottom: none;
            }
          }
        }
        .mega-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          min-width: 1040px;
          background: var(--white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          padding: 45px 40px;
          border-radius: 0 0 10px 10px;
          transform-origin: top;
          @include xl-down-device(){
            min-width: 935px;
          }
          @include lg-down-device(){
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding: 0;
            padding-left: 10px;
          }
          .menu-row{
            display: flex;
            @include lg-down-device(){
              display: block;
            }
            
            .menu-single-item{
              display: block;
              padding: 0;
              padding-right: 70px;
              position: relative;
              flex-basis: 33.33%;
              @include xl-down-device(){
                padding-right: 55px;
              }
              @include lg-down-device(){
                padding-right: 0px;
                margin-bottom: 15px;
                flex-basis: unset;
                &:last-child{
                  margin-bottom: 0;
                }
              }
              &::after{
                content: '';
                height: 100%;
                width: 1px;
                background-color: #eee;
                position: absolute;
                right: 27px;
                top: 0;
                @include xl-down-device(){
                  right: 18px;
                }
                @include lg-down-device(){
                  display: none;
                  visibility: hidden;
                }
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                @include lg-down-device(){
                  color: #b5b5b5;
                  position: relative;
                  padding-left: 15px;
                  &::before{
                    height: 8px;
                    width: 8px;
                    background-color: #b5b5b5;
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 14px;
                    font-weight: 500; 
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    &:hover{
                      color: var(--primary-color1);
                    }
                    @include lg-down-device(){
                      font-size: 12px;
                      font-weight: 600;
                      border-bottom: 1px solid rgba(233, 228, 228, .5);
                      img{
                        display: none;
                        visibility: hidden;
                      }
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--text-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                  &:hover{
                    color: var(--primary-color1);
                    i{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
        }


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 14px;
            color: var(--text-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xl-down-device() {
              right: 6px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

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

          @keyframes fade-down {
            0% {
              opacity: 0;
              transform: scaleY(0);
              visibility: hidden;
            }

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

        }

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

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

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

        &.active {
          >a {
            color: 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;
      }
    }
    .topbar-right {
      padding-top: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.93);
      .primary-btn3 {
        justify-content: center;
        width: 100%;
        svg {
          fill: var(--title-color);
        }
      }
      a {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
  
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--primary-color1);
        }
  
        
  
        &:hover {
          color: var(--primary-color1);
  
          svg {
            fill: var(--primary-color1);
          }
        }
      }
      .sell-btn{
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
        background-color: transparent;
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--primary-color1);
        }
  
        &.primary-btn3 {
          justify-content: center;
  
          svg {
            fill: var(--title-color);
          }
        }
  
        &:hover {
          color: var(--primary-color1);
  
          svg {
            fill: var(--primary-color1);
          }
        }
      }
    }
  
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 40px;
  
      .content {
        position: relative;
        line-height: 1;
  
        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
  
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
  
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #fff;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  color: var(--primary-color1);
                  margin-left: 10px;
                }
              }

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

              i {
                color: var(--primary-color1);
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }

}
header.style-6 {
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8%;
  transition: all 0.8s ease-out 0s;
  border-bottom: 1px solid transparent;
  background-color: var(--white-color);
    position: relative;

  @include xxl-device() {
    padding: 0px 3%;
  }

  @include xxl-down-device() {
    padding: 0px 3%;
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background-color: var(--white-color);
    z-index: 999;

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

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

    }


  }

  .header-logo {
    padding: 15px 0;

    @include sm-down-device() {
      img {
        max-width: 165px;
        width: 100%;
      }
    }
  }

  .menu-close-btn {
    i {
      color: var(--white-color);
    }
  }


  .nav-right {
    gap: 45px;

    @include xl-down-device() {
      gap: 20px;
    }

    .modal-btn {
      background-color: transparent;
      transition: 0.35s;
      svg{
        fill: var(--title-color);
        transition: 0.35s;
      }

    }
    .primary-btn6{
      font-family: var(--font-montserrat);
      padding: 5px 16px;
      @include lg-down-device(){
        display: none;
        visibility: hidden;
      }
    }

    .modal-dialog {
      min-height: 100vh;
      max-width: 620px;
      margin: 0 0 0 auto;

      @include md-down-device() {
        max-width: unset;
        width: 100%;
      }

      .modal-content {
        padding: 65px 60px;
        min-height: 100vh;
        position: relative;

        @include md-down-device() {
          padding: 50px 20px;
        }

        .modal-header {
          padding: 0;
          padding-bottom: 15px;
          border-bottom: 1px solid rgba(238, 238, 238, 0.933333);

          .modal-title {
            font-family: var(--font-montserrat);
            font-weight: 700;
            font-size: 24px;
            color: var(--title-color);
            margin-bottom: 0;
          }

          .close-btn {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.14);
            transition: .5s;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              color: rgba(0,0,0, 1);
              line-height: 1;
              font-size: 20px;
              transition: .5s;
            }

            &:hover {
              background: rgba(0, 0, 0, 1);

              i {
                color: var(--white-color);
              }
            }
          }
        }

        .modal-body {
          padding: 40px 0;

          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            min-height: 500px;

            .single-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 30px;

              &:last-child {
                margin-bottom: 0;
              }

              .item-area {
                display: flex;
                align-items: center;
                gap: 15px;

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

                .close-btn {
                  height: 28px;
                  min-width: 28px;
                  border-radius: 50%;
                  background: rgba(0, 0, 0, 0.14);
                  transition: .5s;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  i {
                    color: rgba(0, 0, 0, 1);
                    line-height: 1;
                    font-size: 20px;
                    transition: .5s;
                  }

                  &:hover {
                    background: rgba(0, 0, 0, 1);

                    i {
                      color: var(--white-color);
                    }
                  }
                }

                .main-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 20px;
                  min-width: 350px;
                  width: 100%;

                  @include md-down-device() {
                    gap: 12px;
                    min-width: 100%;
                  }

                  .item-img {
                    background: #F3F3F3;
                    border-radius: 5px;
                    min-width: 90px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    @include md-down-device() {
                      height: 60px;
                      min-width: 55px;
                    }

                    img {
                      height: 60px;
                      width: 55px;

                      @include md-down-device() {
                        width: 45px;
                        height: unset;
                      }
                    }
                  }

                  .content {
                    line-height: 1;
                    padding-right: 40px;

                    span {
                      font-family: var(--font-montserrat);
                      font-weight: 600;
                      font-size: 18px;
                      color: var(--title-color);
                      display: inline-block;
                      margin-bottom: 3px;
                    }

                    h6 {
                      margin-bottom: 0;
                      line-height: 1;

                      a {
                        font-family: var(--font-montserrat);
                        font-weight: 500;
                        font-size: 15px;
                        line-height: 1.5;
                        color: var(--title-color);

                        strong {
                          font-weight: 600;
                        }

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

              .quantity-area {
                .quantity {
                  display: flex;
                  flex-direction: column;
                  gap: 5px;

                  a {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    color: var(--title-color);
                    font-weight: 600;
                    cursor: pointer;
                    transition: 0.35s;

                    &:hover {
                      background: var(--title-color);
                      border: 1px solid var(--title-color);
                      color: var(--white-color);
                    }
                  }

                  input {
                    height: 24px;
                    width: 34px;
                    border-radius: 4px;
                    background: #F3F3F3;
                    border: 1px solid rgba(238, 238, 238, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: var(--title-color);
                    font-weight: 600;
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        .modal-footer {
          justify-content: flex-start;
          padding: 0;
          border-top: 1px solid rgba(238, 238, 238, 0.933333);
          position: sticky;
          width: 100%;
          left: 0;
          bottom: 0;

          .pricing-area {
            border-bottom: 1px solid rgba(238, 238, 238, 0.933333);
            width: 100%;
            padding: 10px 0px 15px;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              width: 100%;

              li {
                font-family: var(--font-montserrat);
                font-weight: 500;
                font-size: 15px;
                color: var(--title-color);
                display: flex;
                justify-content: space-between;
                width: 100%;
              }
            }
          }

          .footer-button {
            padding-top: 40px;
            width: 100%;

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 30px;

              @include sm-down-device() {
                flex-wrap: wrap;
                gap: 15px;
              }

              li {
                width: 100%;

                a {
                  width: 100%;
                  justify-content: center;
                }

                &:first-child {
                  a {
                    background-color: var(--title-color);
                    color: var(--white-color);
                  }
                }
              }
            }
          }

        }
      }
    }

    .mobile-menu-btn {
      display: none;
      visibility: hidden;

      @include lg-down-device() {
        display: flex;
        margin-left: 50px;
        flex-direction: column;
        align-items: end;
        visibility: visible;

        justify-content: center;
        position: relative;

        span {
          height: 2px;
          width: 25px;
          background-color: var(--title-color);
          display: flex;
          transition: transform 0.5s ease-in;
          position: absolute;
          top: 0px;

          &::before {
            transition-duration: 0.5s;
            position: absolute;
            width: 35px;
            height: 2px;
            background-color: var(--title-color);
            content: "";
            top: -10px;
            right: 0;
          }

          &::after {
            transition-duration: 0.5s;
            position: absolute;
            width: 15px;
            height: 2px;
            right: 0;
            background-color: var(--title-color);
            content: "";
            top: 10px;
          }
        }

        &.active {
          span {
            background-color: transparent;

            &::before {
              transform: rotateZ(45deg) translate(8px, 6px);
              width: 35px;
            }

            &::after {
              transform: rotateZ(-45deg) translate(8px, -6px);
              width: 35px;
            }
          }
        }
      }
    }


  }

  .main-menu {
    display: inline-block;
    position: relative;
    
    .mobile-menu-logo {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      >li {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        &.position-inherit{
          position: inherit;
          @include lg-down-device(){
            position: relative;
          }
          >a{
            &::after {
              content: "\f282";
              font-family: "bootstrap-icons";
              font-weight: 500;
              position: absolute;
              top: 15px;
              right: 2px;
              font-size: 14px;
              color: var(--text-color);
              transition: all .55s ease-in-out;
              // transition: all 0.42s ease-in-out;
  
              @include xl-down-device() {
                right: 2px;
              }
  
              @include lg-down-device() {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
        &: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(--title-color);
          display: block;
          text-transform: capitalize;
          padding: 15px 20px;
          position: relative;
          font-family: var(--font-montserrat);
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
          transition: all .5s ease-out 0s;
          position: relative;

          @include lg-down-device() {
            padding: 32px 9px;
          }



        }
        
        i {
          font-size: 20px;
          text-align: center;
          color: var(--text-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 {
            &::before {
              content: '\F2EA';
            }
          }
        }

        ul.sub-menu {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          display: none;
          min-width: 220px;
          background: var(--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 xl-down-device() {
                right: 0;
                font-size: 20px;
                top: 8px;
              }
            }

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

            a {
              display: block;
              padding: 15px 15px;
              color: var(--text-color1);
              font-weight: 600;
              text-transform: uppercase;
              font-size: 12px;
              line-height: 1.3;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-bottom: 1px solid rgba(233, 228, 228, .5);

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

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

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

            }

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

                &::before {
                  display: none;
                }

              }
            }

            .sub-menu {
              left: 220px;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--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) {
                margin-left: 10px;
                position: unset;
                max-width: 230px;
                min-width: 215px;
                background: transparent;
                top: 0;
              }

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

            &:last-child {
              border-bottom: none;
            }
          }
        }
        .mega-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          margin: 0;
          min-width: 1040px;
          background: var(--white-color);
          box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
          text-align: left;
          padding: 45px 40px;
          border-radius: 0 0 10px 10px;
          transform-origin: top;
          @include xl-down-device(){
            min-width: 935px;
          }
          @include lg-down-device(){
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);
            padding: 0;
            padding-left: 10px;
          }
          .menu-row{
            display: flex;
            @include lg-down-device(){
              display: block;
            }
            
            .menu-single-item{
              display: block;
              padding: 0;
              padding-right: 70px;
              position: relative;
              flex-basis: 33.33%;
              @include xl-down-device(){
                padding-right: 55px;
              }
              @include lg-down-device(){
                padding-right: 0px;
                margin-bottom: 15px;
                flex-basis: unset;
                &:last-child{
                  margin-bottom: 0;
                }
              }
              &::after{
                content: '';
                height: 100%;
                width: 1px;
                background-color: #eee;
                position: absolute;
                right: 27px;
                top: 0;
                @include xl-down-device(){
                  right: 18px;
                }
                @include lg-down-device(){
                  display: none;
                  visibility: hidden;
                }
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                @include lg-down-device(){
                  color: #b5b5b5;
                  position: relative;
                  padding-left: 15px;
                  &::before{
                    height: 8px;
                    width: 8px;
                    background-color: #b5b5b5;
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 14px;
                    font-weight: 500; 
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    @include lg-down-device(){
                      font-size: 12px;
                      font-weight: 600;
                      border-bottom: 1px solid rgba(233, 228, 228, .5);
                      img{
                        display: none;
                        visibility: hidden;
                      }
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--text-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                }
              }
            }
          }
        }


        &.menu-item-has-children {
          &::after {
            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: 500;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 14px;
            color: var(--text-color);
            transition: all .55s ease-in-out;
            // transition: all 0.42s ease-in-out;

            @include xl-down-device() {
              right: 2px;
            }

            @include lg-down-device() {
              display: none;
              visibility: hidden;
            }
          }
        }

        &:hover {

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

          @keyframes fade-down {
            0% {
              opacity: 0;
              transform: scaleY(0);
              visibility: hidden;
            }

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

        }


      }

      li.menu-item-has-children>i {
        display: block;
      }
    }
    .topbar-right {
      padding-top: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.93);
      .primary-btn6 {
        justify-content: center;
        width: 100%;
        svg {
          fill: var(--title-color);
        }
        &:hover{
          color: var(--white-color);
          svg{
            fill: var(--white-color);
          }
        }
      }
      a {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
  
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--title-color);
        }
  
      
      }
      .sell-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        background-color: transparent;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: #13141A;
        margin-bottom: 25px;
  
        &:last-child {
          margin-bottom: 0;
        }
  
        svg {
          fill: var(--title-color);
        }
  
        &.primary-btn6 {
          justify-content: center;
  
          svg {
            fill: var(--title-color);
          }
          &:hover{
            color: var(--white-color);
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  
    .hotline-area {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 40px;
  
      .content {
        position: relative;
        line-height: 1;
  
        &::after {
          content: '';
          height: 32px;
          width: 1px;
          background-color: rgba(#13141A, 0.2);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
  
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          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-montserrat);
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: var(--title-color);
            transition: 0.5s;
          }
        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      justify-content: center !important;
    }

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

    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      padding: 30px 20px !important;
      z-index: 99999;
      height: 100%;
      overflow: auto;
      background: #fff;
      border-right: 1px solid #eee;
      -webkit-transform: translateX(-260px);
      transform: translateX(-100%);
      -webkit-transition: -webkit-transform .3s ease-in;
      transition: -webkit-transform .3s ease-in;
      transition: transform .3s ease-in;
      transition: transform .3s ease-in, -webkit-transform .3s ease-in;
      box-shadow: 0px 2px 20px rgba(#000, 0.03);

      &.show-menu {
        transform: translateX(0);
      }

      .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
      }

      .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
      }

      ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;

        li {
          display: block;
          position: relative;
          padding: 0 5px;

          i {
            display: block;
          }

          a {
            padding: 10px 0;
            display: block;
          }

          ul.sub-menu {
            position: static;
            min-width: 200px;
            background: 0 0;
            border: none;
            opacity: 1;
            visibility: visible;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
            display: none;
            margin-top: 0 !important;
            transform: translateY(0px);

            >li {
              border-bottom: 1px solid transparent;

              a {
                color: var(--title-color);
                padding: 12px 0px;

                &:hover {
                  margin-left: 10px;
                }
              }
              i {
                right: -13px;
              }
            }
          }

          .bi {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
          }
        }
      }
    }

  }

}
.header-and-filter-area{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;

  .filter-area{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10%;

    @include xxl-device() {
      padding: 15px 3%;
    }
  
    @include xxl-down-device() {
      padding: 15px 3%;
    }
    &::after{
      content: '';
      height: 1px;
      width: 100%;
      background: radial-gradient(50% 50.00% at 50% 50.00%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .filter-wrap{
      display: flex;
      align-items: center;
      width: 100%;
      gap: 16px;
      @include xxl-down-device(){
        justify-content: center;
      }
      form{
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 5px;
        border: 1px solid rgba(239, 185, 63, 0.40);
        background: #16191E;
        padding: 8px 15px;
        max-width: 970px;
        width: 100%;
        @include fifteen-down-device(){
          max-width: 930px;
        }
        .form-inner{
          max-width: 185px;
          min-width: 185px;
          .nice-select{
            min-width: 150px;
            height: 34px;
            padding-left: 18px;
            padding-right: 36px;
            background-color: #292929;
            border-color: #292929;
            .current{
              color: rgba(#fff, .6);
              font-weight: 600;
            }
            &.open{
              .current{
                color: #fff;
              }
              &::after{
                right: 18px;
                border-color: #Fff;
              }
            }
           
            &::after{
              right: 18px;
              border-color: rgba(#fff, .6);
            }
            .list{
              background-color: #292929;
              .option{
                color: rgba(#fff, .6);
                &.selected{
                  background-color: transparent;
                  color: var(--white-color);
                }
                &:hover{
                  color: rgba(#fff, .8);
                }
              }
            }
            
          }
          &:first-child{
            max-width: 225px;
            min-width: 225px;
            @include fifteen-down-device(){
              max-width: 185px;
              min-width: 185px;
            }
          }
          button{
            padding: 11px 18px;
            line-height: 1;
          }
        }
      }
      .advanced-btn{
        button{
          color: var(--white-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600; 
          transition: 0.35s;
          white-space: nowrap;
          background-color: transparent;
          svg{
            transition: 0.35s;
            fill: var(--white-color);
          }
          &:hover{
            color: var(--primary-color1);
            svg{
              fill: var(--primary-color1);
            }
          }
        }
      }
    }
    .hotline-area {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 20px;
      width: 100%;
      .icon {
        position: relative;

        &::after {
          content: '';
          width: 1px;
          height: 40px;
          background-color: rgba(#fff, 0.5);
          position: absolute;
          right: -11px;
          top: 50%;
          transform: translateY(-50%);
        }

        svg {
          fill: var(--primary-color1);
        }
      }

      .content {
        line-height: 1;

        span {
          color: var(--white-color);
          font-size: 14px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          line-height: 1;
          display: inline-block;
          margin-bottom: 10px;
        }

        h6 {
          margin-bottom: 0;
          line-height: 1;

          a {
            color: var(--primary-color1);
            font-size: 20px;
            font-family: var(--font-montserrat);
            font-weight: 600;
            line-height: 1;
            transition: .35s;

            &:hover {
              color: var(--white-color);
            }
          }
        }

      }
    }
  }
}
.menu-insight{

  span{
    display: flex;
    align-items: center;
    gap: 8px;
    svg{
      fill: rgba(#5E5E5E, .6);
    }
    color: var(--text-color);
    font-family: var(--font-open-sans);
    font-size: 16px;
    font-weight: 400;
  }
  .insight-wrap{
    padding-top: 40px;
    .insights-content{
      margin-bottom: 20px;
      h6{
        margin-bottom: 0;
        a{
          padding: 0;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;
          line-height: 26px;  
          transition: 0.35s;   
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
    .insights-img{
      a{
        padding: 0;
        img{
          border-radius: 5px;
        }
      }
    }
    .explore-more-btn{
      a{
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
}
.sidebar-menu {
  &::-webkit-scrollbar {
    width: 0px;
  }

  .menu-close-btn {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.35s;
    i {
      font-size: 18px;
    }
    &:hover{
      background-color: var(--black-color);
      color: var(--white-color);
    }
  }
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    >li {
      display: inline-block;
      position: relative;
      padding: 0 8px;
      padding-left: 0;

      a {
        padding-left: 0;
      }

      a {
        color: var(--title-color);
        display: block;
        text-transform: capitalize;
        padding: 32px 9px;
        position: relative;
        font-family: var(--font-montserrat);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 13px;
        transition: all .5s ease-out 0s;
        position: relative;
      }
      
      i {
        font-size: 20px;
        text-align: center;
        color: var(--text-color);
        font-style: normal;
        position: absolute;
        right: -5px;
        top: 35px;
        z-index: 999;
        cursor: pointer;
        display: none;
        transition: all .5s ease-out 0s;
        opacity: 1;

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

          &::before {
            content: '\F2EA';
          }
        }
      }

      ul.sub-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        margin: 0;
        display: none;
        min-width: 220px;
        background: var(--white-color);
        text-align: left;

        >li {
          i {
            position: absolute;
            top: 10px;
            right: 6px;
            display: block;
            color: var(--text-color);
            font-size: 20px;
          }

          .dropdown-icon {
            color: var(--text-color);
            opacity: 1;
            top: 6px;
            font-size: 20px;
            right: 0px;
          }

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

          a {
            display: block;
            padding: 12px 25px;
            color: var(--text-color1);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 12px;
            line-height: 1.3;
            -webkit-transition: all .4s ease-out 0s;
            transition: all .4s ease-out 0s;
            position: relative;
            border-bottom: 1px solid rgba(233, 228, 228, .5);

            &::before {
              content: '';
              position: absolute;
              bottom: -1px;
              left: 0;
              background: linear-gradient(90deg, #fff, #DF0101, #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;
            }

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

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

          }

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

              &::before {
                display: none;
              }

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

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

          }
          .sub-menu {
            left: 220px;
            top: 0;
            &::before {
              display: none;
              visibility: hidden;
            }

              margin-left: 10px;
              position: unset;
              max-width: 230px;
              min-width: 215px;
              background: transparent;
              top: 0;

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

          &:last-child {
            border-bottom: none;
          }
        }
      }
      .mega-menu{
        display: none;
        left: 0;
        right: 0;
        top: auto;
        margin: 0;
        text-align: left;
          position: static;
          min-width: 200px;
          background: 0 0;
          border: none;
          opacity: 1;
          visibility: visible;
          -webkit-box-shadow: none;
          box-shadow: none;
          -webkit-transform: none;
          transform: none;
          -webkit-transition: none;
          transition: none;
          display: none;
          margin-top: 0 !important;
          transform: translateY(0px);
          padding: 0;
          padding-left: 10px;
          .menu-row{
            
            .menu-single-item{
              display: block;
              padding: 0;
              position: relative;
              padding-right: 0px;
              margin-bottom: 15px;
              &:last-child{
                margin-bottom: 0;
              }
              &:last-child{
                padding-right: 0;
                &::after{
                  display: none;
                  visibility: hidden;
                }
              }
              h6{
                margin-bottom: 10px;
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;   
                color: #b5b5b5;
                position: relative;
                padding-left: 15px;
                &::before{
                  height: 8px;
                  width: 8px;
                  background-color: #b5b5b5;
                  border-radius: 50%;
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
              >ul{
                li{
                  display: block;
                  line-height: 1;
                  padding: 0;
                  a{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);;
                    font-size: 12px;
                    font-weight: 600;
                    border-bottom: 1px solid rgba(233, 228, 228, .5);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    line-height: 1;
                    padding: 12px 0;
                    &:hover{
                      color: var(--primary-color1);
                      padding-left: 10px;
                    }
                    img{
                      display: none;
                      visibility: hidden;
                    }
                  }
                }
              }
              .explore-more-btn{
                padding-top: 20px;
                a{
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  border-bottom: none;
                  font-weight: 600;
                  i{
                    font-size: 20px;
                    text-align: center;
                    color: var(--text-color);
                    font-style: normal;
                    position: relative;
                    right: unset;
                    top: unset;
                    cursor: pointer;
                    display: flex;
                    transition: all 0.5s ease-out 0s;
                    opacity: 1;    
                  }
                  &:hover{
                    color: var(--primary-color1);
                    i{
                      color: var(--primary-color1);
                    }
                  }
                }
              }
            }
          }
      }

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

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

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

      &.active {
        >a {
          color: 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;
    }
  }


  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  padding: 30px 20px !important;
  z-index: 99999;
  height: 100%;
  overflow: auto;
  background: #fff;
  border-right: 1px solid #eee;
  -webkit-transform: translateX(-260px);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .3s ease-in;
  transition: -webkit-transform .3s ease-in;
  transition: transform .3s ease-in;
  transition: transform .3s ease-in, -webkit-transform .3s ease-in;
  box-shadow: 0px 2px 20px rgba(#000, 0.03);

  &.show-menu {
    transform: translateX(0);
  }

  .mobile-menu-logo {
    text-align: left;
    padding-top: 20px;
    display: block;
    padding-bottom: 8px;
  }

  .menu-list {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  ul {
    float: none;
    text-align: left;
    padding: 5px 0px 20px 0;

    li {
      display: block;
      position: relative;
      padding: 0 5px;

      i {
        display: block;
      }

      a {
        padding: 10px 0;
        display: block;
      }

      ul.sub-menu {
        position: static;
        min-width: 200px;
        background: 0 0;
        border: none;
        opacity: 1;
        visibility: visible;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transform: none;
        transform: none;
        -webkit-transition: none;
        transition: none;
        display: none;
        margin-top: 0 !important;
        transform: translateY(0px);

        >li {
          border-bottom: 1px solid transparent;

          a {
            color: var(--title-color);
            padding: 12px 0px;

            &:hover {
              color: var(--primary-color1);
              margin-left: 10px;
            }
          }

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

          i {
            color: var(--primary-color1);
            right: -13px;
          }
        }
      }

      .bi {
        top: 10px;
        font-size: 20px;
        color: var(--title-color);
      }
    }
  }

  .mobile-logo-area {
    border-bottom: 1px solid rgba(238, 238, 238, 0.93);
    padding-bottom: 25px;
  }

  .menu-list {
    border-bottom: 1px solid rgba(238, 238, 238, 0.93);
    padding-top: 30px;
  }

  .topbar-right {
    padding-top: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.93);

    a {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-open-sans);
      font-weight: 600;
      font-size: 13px;
      color: #13141A;
      margin-bottom: 25px;

      &:last-child {
        margin-bottom: 0;
      }

      svg {
        fill: var(--primary-color1);
      }

      &.primary-btn3 {
        justify-content: center;

        svg {
          fill: var(--title-color);
        }
      }

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

        svg {
          fill: var(--primary-color1);
        }
      }
    }
    .sell-btn{
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-open-sans);
      font-weight: 600;
      font-size: 13px;
      color: #13141A;
      margin-bottom: 25px;
      background-color: transparent;

      &:last-child {
        margin-bottom: 0;
      }

      svg {
        fill: var(--primary-color1);
      }

      &.primary-btn3 {
        justify-content: center;

        svg {
          fill: var(--title-color);
        }
      }

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

        svg {
          fill: var(--primary-color1);
        }
      }
    }
    .primary-btn3{
      width: 100%;
      justify-content: center;
    }
  }

  .hotline-area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 40px;

    .content {
      position: relative;
      line-height: 1;

      &::after {
        content: '';
        height: 32px;
        width: 1px;
        background-color: rgba(#13141A, 0.2);
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
      }

      span {
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 14px;
        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-montserrat);
          font-weight: 600;
          font-size: 16px;
          line-height: 20px;
          color: var(--title-color);
          transition: 0.5s;

          &:hover {
            color: var(--primary-color1);
          }
        }
      }
    }
  }
}
.search-bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background-color: var(--black-color);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: 0.8s;
  &.slide{
    transform: scaleY(1);
    opacity: 1;
  }
  .close-btn{
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #292929;
    border-color: 1px solid #292929;
    display: flex;
    align-items: center;    
    justify-content: center;
    line-height: 1;
    transition: 0.35s;
    i{
      color: rgba(#fff, .6);
      font-size: 26px;
      line-height: 1;
      transition: 0.35s;
    }
    &:hover{
      border-color: var(--primary-color1);
      background-color: var(--primary-color1);
      i{
        color: var(--title-color);
      }
    }
  }
  .filter-wrap{
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    justify-content: center;
    @include lg-down-device(){
      flex-wrap: wrap;
    }
    form{
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 5px;
      border: 1px solid rgba(#DF0101, 0.20);
      background: #1F1F1F;
      padding: 8px 15px;
      max-width: 970px;
      width: 100%;
      @include fifteen-down-device(){
        max-width: 930px;
      }
      @include xl-down-device(){
        max-width: unset;
        width: unset;
      }
      @include lg-down-device(){
        flex-wrap: wrap;
      }
      .form-inner{
        max-width: 185px;
        min-width: 185px;
        @include xl-down-device(){
          max-width: unset;
          min-width: unset;
        }
        @include lg-down-device(){
          width: 100%;
          display: flex;
          justify-content: center;
        }
        .nice-select{
          min-width: 150px;
          height: 50px;
          padding-left: 18px;
          padding-right: 36px;
          background-color: #292929;
          border-color: #292929;
          .current{
            color: rgba(#fff, .6);
            font-weight: 600;
          }
          
          &::after{
            right: 18px;
            border-color: rgba(#fff, .6);
          }
          .list{
            background-color: #292929;
            .option{
              color: rgba(#fff, .6);
              &.selected{
                background-color: transparent;
                color: var(--white-color);
              }
              &:hover{
                color: rgba(#fff, .8);
              }
            }
          }
          
        }
        &:first-child{
          max-width: 225px;
          min-width: 225px;
          @include fifteen-down-device(){
            max-width: 185px;
            min-width: 185px;
          }
          @include xl-down-device(){
            max-width: unset;
           min-width: unset;
          }
          @include lg-down-device(){
            width: 100%;
          }
        }
        button{
          padding: 17px 18px;
          line-height: 1;
          @include lg-down-device(){
            justify-content: center;
          }
        }
      }
    }
    .advanced-btn{
      button{
        color: var(--white-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600; 
        transition: 0.35s;
        white-space: nowrap;
        background-color: transparent;
        svg{
          transition: 0.35s;
          fill: var(--white-color);
        }
        &:hover{
          color: var(--primary-color1);
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
  }

}

/*=====================================
     5. Banner
========================================*/
.banner-section1 {
  background-image: url(../img/home1/bannar1-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 90px 8% 90px 11%;
  position: relative;
  @include xxl-device(){
    padding: 90px 3%;
  }

  @include xxl-down-device() {
    padding: 90px 3%;
  }
  .banner-content {
    max-width: 705px;
    width: 100%;

    h6{
      margin-bottom: 20px;
      color: var(--primary-color1);
      font-family: var(--font-open-sans);
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
      span{
        position: relative;
        display: inline-block;
        margin-right: 120px;
        &::after{
          content: '';
          height: 1px;
          width: 80px;
          background-color: rgba(#16191E, .2);
          position: absolute;
          right: -100px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    h1, h2 {
      font-family: var(--font-montserrat);
      font-weight: 700;
      font-size: 70px;
      line-height: 1.11;
      color: var(--title-color);
      margin-bottom: 20px;

      @include xxl-down-device() {
        font-size: 60px;
      }

      @include sm-down-device() {
        font-size: 50px;
      }
    }

    p {
      font-size: 18px;
      color: var(--text-color);
      line-height: 34px;
      margin-bottom: 0;
    }
    .banner-content-bottom {
      padding-top: 45px;
      display: flex;
      gap: 55px;

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 15px;
      }
      .view-dt-btn{
        display: flex;
        align-items: center;
      }
      .rating {
        line-height: 1;
        a {
          display: inline-block;

          .review-top {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 8px;

            .star {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 5px;

                li {
                  line-height: 1;

                  i {
                    font-size: 12px;
                    color: #DDA701;
                  }
                }
              }
            }
          }

          .content {
            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 18px;

              li {
                font-family: var(--font-open-sans);
                font-weight: 400;
                font-size: 14px;
                line-height: 1;
                color: var(--text-color);
                position: relative;

                span {
                  font-weight: 600;
                }

                &::after {
                  content: '';
                  height: 10px;
                  width: 1px;
                  background-color: var(--text-color);
                  position: absolute;
                  left: -10px;
                  top: 50%;
                  transform: translateY(-50%);
                }

                &:first-child {
                  &::after {
                    display: none;
                    visibility: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .banner-img-area{
    position: relative;
    >img{
      border-radius: 10px;
    }
    .price-and-features-area{
      position: absolute;
      left: -100px;
      bottom: 33px;
      max-width: 470px;
      width: 100%;
      border-radius: 5px;
      background: #F8F1F9;   
      padding: 25px 40px 30px;
      z-index: 2;
      @include xxl-down-device(){
        left: -50px;
      }
      @include xl-down-device(){
        left: 0px;
        bottom: 0;
      }
      &::before{
        content: '';
        height: 102%;
        width: 100%;
        border-radius: 5px;
        background: var(--title-color);
        position: absolute;
        bottom: 3px;
        right: 4px;
        z-index: -1;
      }
      .price-and-location{
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        .price{
          line-height: 1;
          strong{
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 700;   
          }
          del{
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 600;     
          }
        }
        .location{
          a{
            color: var(--white-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: 0.35s;  
            &:hover{
              color: var(--primary-color1);
            } 
          }
        }
      }
      .features{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-top: 1px solid #353535;
        border-bottom: 1px solid #353535;
        padding: 16px 0;
        li{
          line-height: 1;
          color: #ebe9e9;
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600; 
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }
  .pagination-and-btn{
    position: absolute;
    bottom: 73px;
    display: inline-flex;
    align-items: center;
    gap: 35px;
    @include xxl-down-device(){
      bottom: 30px;
    }
    @include md-down-device(){
      display: none;
      visibility: hidden;
    }
    .banner-swiper-pagination{
      display: flex;
      align-items: center;
      gap: 0;
      .swiper-pagination-bullet{
        padding: 0;
        margin: 0;
        height: 1px;
        width: 100px;
        background-color: rgba(#16191E, .1);
        opacity: 1;
        &.swiper-pagination-bullet-active{
          background-color: var(--primary-color1);
        }
      }
    }
    .btn-group{
      display: inline-flex;
      gap: 20px;
      align-items: center;
      .slider-btn{
        height: 34px;
        width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--primary-color1);
        border-radius: 50%;
        transition: 0.35s;
        opacity: .4;
        svg{
          fill: var(--primary-color1);
          transition: 0.35s;
        }
        &:hover{
          opacity: 1;
          background-color: var(--primary-color1);
          svg{
            fill: var(--title-color);
          }
        }
      }
    }


  }
 
  .swiper-slide-active  {
    .price-and-features-area{
      animation: fadeInRights 1.7s;
    }
    .banner-content {
      h6{
        animation: fadeInLeft 1.2s;
      }
      h1{
        animation: fadeInLeft 1.6s;
      }
      h2{
        animation: fadeInLeft 1.6s;
      }
      p{
        animation: fadeInLeft 2s;
      }
      .banner-content-bottom{
        animation: fadeInLeft 2.4s;
      }
    }
  }
}
@keyframes fadeInLeft {
  0% {
      opacity: 0;
      -webkit-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
      transform: translateX(-50px);
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
  }
}
@keyframes fadeInRights {
  0% {
      opacity: 0;
      -webkit-transform: translateX(100px);
      -ms-transform: translateX(100px);
      transform: translateX(100px);
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
  }
}


.banner-section2 {
  position: relative;
  .banner2-swiper-pagination{
    position: absolute;
    right: 50px;
    top: 50%;
    z-index: 111;
    width: unset;
    left: unset;
    display: flex;
    flex-direction: column;
    gap: 30px;
    @include md-down-device(){
      display: none;
      visibility: hidden;
    }
    .swiper-pagination-bullet{
      height: 8px;
      width: 8px;
      background-color: var(--white-color);
      position: relative;
      opacity: .8;
      &::after{
        content: "";
        height: 14px;
        width: 14px;
        border-radius: 50%;
        border: 1px solid var(--white-color);
        position: absolute;
        left: -3px;
        top: -3px;   
      }
      &.swiper-pagination-bullet-active{
        background-color: var(--primary-color1);
        opacity: 1;
        &::after{
          border: 1px solid var(--primary-color1);
        }
      }
    }
  }

  .banner-wrapper{
    
    background-size: cover;
    background-repeat: no-repeat;
    padding: 321px 0 167px 0px;
    overflow: hidden;
    position: relative;
    padding-left: 11%;
  
    @include xxl-device() {
      padding: 260px 0 167px 0px;
      padding-left: 5%;
    }
  
    @include xxl-down-device() {
      padding: 260px 0 167px 0px;
      padding-left: 5%;
    }
    @include md-down-device() {
      padding: 220px 0 120px 0px;
      padding-left: 5%;
    }
  
    @include sm-down-device() {
      padding-left: 10px;
      padding-right: 10px;
    }
    .banner-content {
      max-width: 625px;
      width: 100%;
  
      h1, h2 {
        font-family: var(--font-montserrat);
        font-style: normal;
        font-weight: 700;
        font-size: 75px;
        line-height: 1.2;
        color: var(--white-color);
        margin-bottom: 15px;
  
        @include xxl-down-device() {
          font-size: 60px;
        }
  
        @include sm-down-device() {
          font-size: 50px;
        }
      }
  
      p {
        font-family: var(--font-open-sans);
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.7;
        color: var(--white-color);
        margin-bottom: 40px;
      }
  
      .banner-content-bottom {
        display: flex;
        gap: 55px;
  
        @include sm-down-device() {
          flex-wrap: wrap;
          gap: 15px;
        }
  
        .rating {
          a {
            display: inline-block;
  
            .review-top {
              display: flex;
              align-items: center;
              gap: 20px;
              margin-bottom: 8px;
  
              .star {
                ul {
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  line-height: 1;
                  display: flex;
                  align-items: center;
                  gap: 5px;
  
                  li {
                    line-height: 1;
  
                    i {
                      font-size: 12px;
                      color: #DDA701;
                    }
                  }
                }
              }
            }
  
            .content {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                align-items: center;
                gap: 18px;
  
                li {
                  font-family: var(--font-open-sans);
                  font-weight: 400;
                  font-size: 14px;
                  line-height: 1;
                  color: var(--white-color);
                  position: relative;
  
                  span {
                    font-weight: 600;
                  }
  
                  &::after {
                    content: '';
                    height: 10px;
                    width: 1px;
                    background-color: var(--white-color);
                    position: absolute;
                    left: -10px;
                    top: 50%;
                    transform: translateY(-50%);
                  }
  
                  &:first-child {
                    &::after {
                      display: none;
                      visibility: hidden;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

.text-slider2 {
  overflow: hidden;
  background: #13141A;
  padding: 30px 0;

  .marquee_text {

    .js-marquee {
      display: flex;
      align-items: center;
      gap: 50px;
      color: #FFF;
      font-size: 16px;
      font-family: Montserrat;
      font-weight: 600;
    }
  }
}

.topbar-header {
  position: absolute;
  z-index: 777;
  left: 0;
  top: 0;
  width: 100%;
}

.quick-link-area {
  background-color: var(--title-color);
  padding: 30px 11%;

  @include xxl-device() {
    padding: 30px 3%;
  }

  @include xxl-down-device() {
    padding: 30px 3%;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include lg-down-device() {
      columns: 2;
      display: block;
    }

    @include sm-down-device() {
      columns: 1;
      display: block;
    }

    li {
      line-height: 1;
      position: relative;

      @include lg-down-device() {
        display: flex;
        justify-content: center;

        &:nth-child(odd) {
          margin-bottom: 30px;
        }
      }

      @include sm-down-device() {
        margin-bottom: 30px;
        justify-content: flex-start;

        &:last-child {
          margin-bottom: 0;
        }
      }

      &::after {
        content: '';
        height: 46px;
        width: 1px;
        background-color: rgba(#fff, 0.5);
        position: absolute;
        left: -134px;
        top: 50%;
        transform: translateY(-50%);

        @include seventeen-down-device() {
          left: -120px;
        }

        @include xl-down-device() {
          left: -75px;
        }

        @include lg-down-device() {
          display: none;
          visibility: hidden;
        }
      }

      &:first-child {
        &::after {
          display: none;
          visibility: hidden;
        }
      }

      a {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        color: var(--white-color);
        display: flex;
        align-items: center;
        gap: 10px;
        transition: 0.35s;

        svg {
          fill: var(--white-color);
          transition: 0.35s;
        }
        &:hover{
          color: var(--primary-color1);
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
  }
}

/*=====================================
     6. Home About Area
========================================*/
.home1-about-section{
  .about-img{
    img{
      border-radius: 10px;   
    }
  }
  .about-content-wrap{
    @include lg-up-device(){
      padding-left: 35px;
    }
    >h6{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      padding-top: 20px;
      margin-bottom: 5px;
    }
    p{
      color: var(--text-color);
      line-height: 30px;
    }
    .about-features{
      margin: 0;
      padding: 0;
      list-style: none;
      padding-top: 15px;
      margin-bottom: 50px;
      .single-features{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        transition: 0.35s;
        position: relative;
        padding: 20px 0;
        &::after, &::before{
          content: '';
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &::before{
          bottom: unset;
          top: 0;
        }
        .icon-content{
          display: flex;
          align-items: center;
          gap: 15px;
          .icon{
            line-height: 1;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
              transition: 0.35s;
              .vector{
                fill: rgba(#16191E, .1);
              }
            }
          }
          .content{
            line-height: 1;
            h6{
              color: #000;
              font-family: var(--font-montserrat);
              font-size: 16px;
              font-weight: 600; 
              margin-bottom: 0;
            }
            p{
              font-size: 14px;
              line-height: 22px;
              color: var(--text-color);
              margin-bottom: 0;
            }
          }
        }
        .sent-btn{
          a{
            width: 30px;
            height: 30px;    
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:#FAF8FB;
            border-radius: 50%;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
            }
          }
        }
        &:hover{
          .icon-content{
            .icon{
              svg{
                fill: var(--primary-color1);
                .vector{
                  fill: var(--primary-color1);
                }
              }
            }
          }
          .sent-btn{
            a{
              background-color: var(--primary-color1);
            }
          }
        }
      }
    }
    .author-and-exp-area{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      transform: translateX(-50%);
      width: 100%;
      @include xxl-down-device(){
        transform: translateX(-62%);
      }
      @media screen and (max-width: 1300px) {
        transform: translateX(-70%);
      }
      @include xl-down-device(){
        flex-wrap: wrap;
        transform: unset;
        gap: 20px;
      }
      .author-area{
        min-width: 649px;     
        border-radius: 5px;
        border: 1px solid #EEE;
        background: #FFF;    
        padding: 30px 40px;
        position: relative;
        @include xl-down-device(){
          min-width: 100%;
        }
        @include sm-down-device(){
          padding: 30px 25px;
        }
        &:before{
          content: '';
          width: 4px;
          height: 100%;
          background-color: var(--primary-color1);
          border-radius: 5px 0 0 5px;
          position: absolute;
          left: -1px;
          top: 0;
        }
        p{
          color: #000;
          font-family: var(--font-montserrat);
          font-size: 18px;
          font-weight: 600;
          line-height: 30px;
          margin-bottom: 12px;
        }
        .name-deg{
          span{
            display: inline-block;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 12px;
            font-weight: 600;  
            padding-left: 55px;  
            position: relative;
            line-height: 1.5;
            &::before{
              content: '';
              width: 40px;
              height: 1px;  
              background-color: var(--primary-color1);   
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            strong{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 600;
              display: inline-block;
              padding-right: 5px;
            } 
          }
        }
        
      }
      .exp-area{
        .number{
          h2{
            background-image: url(../img/home1/about-text-bg.png);
            background-position: center;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: var(--font-montserrat);
            font-size: 150px;
            font-weight: 800;
            line-height: 1;    
          }
        }
        h5{
          color: #000;
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          line-height: 30px;
          margin-left: 118px;
          margin-top: -56px;
          width: 100%;
          @include md-down-device(){
            width: unset;
          }
      
          span{
            color: var(--white-color);
          }
        }
      }
    }
  }
}
.home2-about-area{
  .about-img{
    margin-bottom: 40px;
    img{
      border-radius: 10px;   
    }
  }
  .activetis{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    line-height: 1;
    min-width: 630px;
    position: relative;
    padding: 20px 0;
    @include xl-down-device(){
      min-width: 100%;
      padding: 20px 20px;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    &::before{
      content: '';
      height: 1px;
      width: 100%;
      background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
      position: absolute;
      left: 0;
      top: 0;
    }
    &::after{
      content: '';
      height: 1px;
      width: 100%;
      background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .single-activiti{
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 1;
      .content{
        .number{
          line-height: 1;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          h5{
            margin-bottom: 0;
            line-height: 1;
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 700;
          }
          span{
            line-height: 1;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600; 
          margin-bottom: 0;
          line-height: 22px;
        }
      }
    }
  }
  .about-content-wrap{
    @include lg-up-device(){
      padding-left: 35px;
    }
    >h6{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      padding-top: 20px;
      margin-bottom: 5px;
    }
    p{
      color: var(--text-color);
      line-height: 30px;
    }
    .author-and-img{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-top: 25px;
      @include xxl-down-device(){
        gap: 120px;
      }
      @include lg-down-device(){
        gap: 30px;
      }
      @include md-down-device(){
        flex-wrap: wrap;
      }
      .author-area{
        img{
          margin-bottom: 15px;
        }
        .author-name-deg{
          line-height: 1;
          h6{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 600;   
            margin-bottom: 5px;  
          }
          span{
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
/*=====================================
     6. Brand Category
========================================*/
.view-btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  p {
    font-family: var(--font-open-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--title-color);
    margin-bottom: 0;
    text-align: center;
  }
}
.width-90{
  max-width: 90px;
  min-width: 90px;
}
.home1-apartment-types{
  position: relative;

  .apartment-types1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    background: #FAF8FB;
    padding: 35px 20px;
    z-index: 1;
    transition: all ease 0.35s;

    .brand-icon {
      margin-bottom: 24px;
      transition: all ease 0.35s;
      svg{
        fill: var(--title-color);
        transition: all ease 0.35s;
      }
    }
    .category-content{
      line-height: 1;
      text-align: center;
      transition: all ease 0.35s;
      h6{
        color: var(--title-color);
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600;   
        margin-bottom: 8px;
        line-height: 1;
        transition: all ease 0.35s;
      }
      span{
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        transition: all ease 0.35s;
      }
    }

    &:hover {
      background-color: var(--title-color);
      .brand-icon{
        svg{
          fill: var(--white-color);
        }
      }
      .category-content{
        h6{
          color: var(--white-color);
        }
        span{
          color: var(--white-color);
        }
      }
    }
  }

 

  .view-btn-area {
    background-color: var(--white-color);
    max-width: 500px;
    margin: 0 auto;
  }

  .slick-arrow {
    position: absolute;
    top: unset;
    bottom: -90px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 1px solid var(--title-color);
    z-index: 9;
    transition: 0.35s;
    opacity: .5;

    &::before {
      content: url(../img/home1/icon/arrow-left.svg);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: 0.35s;
    }

    &:hover {
      opacity: 1;
      border-color: var(--primary-color1);
      background-color: var(--primary-color1);
    }
  }

  .slick-prev {
    left: 12px;
  }

  .slick-next {
    right: 12px;

    &::before {
      content: url(../img/home1/icon/arrow-right.svg);
    }
  }
}

/*=====================================
     7. Most Search Area
========================================*/
.most-search-area {
  background: #FAF8FB;
  padding-left: 8%;
  padding-right: 8%;
  .slider-btn {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 1px solid var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    @include lg-down-device(){
      display: none;
      visibility: hidden;
    }
    &.next-12{
      right: -3px;
      left: unset;
    }
    svg {
      fill: var(--primary-color1);
      transition: 0.35s;
    }

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

      svg {
        fill: var(--white-color);
      }
    }
  }
  @include seventeen-down-device() {
    padding-left: 3%;
    padding-right: 3%;
  }

  @include xxl-down-device() {
    padding-left: 2%;
    padding-right: 2%;
  }

  .nav-tabs {
    border-bottom: unset;
    gap: 20px;
    li {
      padding: 0;

      button {
        padding: 9px 15px;
        border: none;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        color: var(--title-color);
        border-radius: 0;
        border: 1px solid rgba(22, 25, 30, 0.15);
        border-radius: 5px;
        &.active {
          color: var(--white-color);
          background-color: var(--title-color);
          border-color: var(--title-color);
        }
      }
    }
  }
  &.style-2{
    .slider-btn{
      position: relative;
      left: unset;
      top: unset;
      right: unset;
      transform: unset;
    }
  }
}

.product-card {
  padding: 10px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  transition: 0.35s;
  position: relative;

  .new {
    font-family: var(--font-open-sans);
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    color: var(--black-color);
    background-color: var(--primary-color1);
    display: inline-block;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 20px;
    border-radius: 10px 0;
  }

  .product-img {
    position: relative;
    border-radius: 5px;
    transition: 0.35s;
    .batch{
      line-height: 1.5;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      span{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 12px;
        font-weight: 600; 
        line-height: 1;
        background-color: var(--primary-color1);
        border-radius: 5px 0px 5px 0px;
        padding: 4px 12px;
        &.red{
          background-color: #FF5E3A ;
          color: #fff;
        }
        &.black{
          background-color: var(--title-color);
          color: #fff;
        }
      }
    }

    .number-of-img {
      position: absolute;
      left: 20px;
      top: 17px;
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 14px;
      color: var(--white-color);
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5px;
      line-height: 1;
      transition: 0.35s;
      opacity: 0;
    }

    .fav {
      position: absolute;
      top: 17px;
      right: 20px;
      z-index: 2;
      transition: 0.35s;
      line-height: 1;
      opacity: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      svg {
        fill: var(--title-color);
        transition: 0.35s;
      }

      &:hover {
        svg {
          fill: var(--primary-color1);
        }
      }
    }

    .slider-btn-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      transition: 0.35s;
      opacity: 0;

      .swiper-arrow {
        height: 26px;
        width: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(#13141A, 0.6);
        cursor: pointer;
        transition: 0.35s;

        svg {
          fill: var(--white-color);
          transition: 0.35s;
        }

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

      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50.27%);
      transition: 0.35s;
      opacity: 0;
    }

    img {
      border-radius: 5px;

      @include md-down-device() {
        width: 100%;
      }
    }
  }

  .product-content {
    padding: 15px;
    padding-top: 25px;

    @include fifteen-down-device() {
      padding: 15px 10px;
    }
    .countdown-timer{
      width: 208px;
      height: 35px;
      line-height: 1;
      border-radius: 5px;
      border: 1px solid #EEE;
      background: #FFF;  
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        li{
          line-height: 1;
          color: var(--title-color);
          text-align: center;
          font-family: var(--font-open-sans);
          font-size: 16px;
          font-weight: 700; 
          display: flex;
          align-items: center;
        }
      }
    }
    .location {
      line-height: 1;
      margin-bottom: 7px;

      a {
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        color: var(--title-color);
      }
    }
    h5 {
      margin-bottom: 15px;
      line-height: 1;

      a {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2;
        color: var(--title-color);
        transition: 0.35s;

        &:hover {
          color: var(--primary-color1);
        }
      }
    }
    .features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 7px;
      position: relative;
      padding-bottom: 15px;
      flex-wrap: wrap;

      @include seventeen-down-device() {
        gap: 15px;
      }

      @include xxl-down-device() {
        gap: 5px;
        flex-wrap: wrap;
      }

      &::after {
        content: '';
        background-color: #eee;
        position: absolute;
        left: 50%;
        height: 1px;
        width: 80%;
        bottom: 0;
        transform: translateX(-50%);
      }

      li {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        color: var(--text-color);
        margin-right: 5px;

        @include fifteen-down-device() {
          font-size: 12px;
        }

        @include xxl-down-device() {
          padding-right: 5px;
        }

        svg {
          fill: var(--text-color);
        }
      }
    }

    .content-btm {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20px;

      .view-btn2 {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: var(--title-color);
        display: flex;
        align-items: center;
        gap: 7px;
        transition: 0.35s;

        svg {
          path {
            fill: var(--primary-color1);

            &:first-child {
              fill: none;
              stroke: var(--primary-color1);
            }
          }
        }

        &:hover {
          color: var(--primary-color1);
        }
      }
      .price {
        line-height: 1;
        position: relative;
  
        strong {
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 18px;
          line-height: 1;
          color: var(--title-color);
          display: block;
        }
        del{
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 14px;
          line-height: 1;
          color: var(--text-color);
        }
      }
    }
  }
  &.auction{

    .product-content{
      position: relative;
      z-index: 99;
      padding-top: 0;
      margin-top: -17px;
    }
  }
  &.style-2 {
    background: #FAF8FB;

    .product-content {
      padding-top: 20px;

      .content-top {
        display: flex;
        justify-content: space-between;
        gap: 20px;

        .price {
          margin-bottom: 7px;
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 18px;
          line-height: 22px;
          color: var(--title-color)
        }

        .company-logo {
          height: 56px;
          width: 62px;
          background: #FFFFFF;
          border: 1px solid #EEEEEE;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-35px);
          z-index: 99;
        }
      }

      .launch-date {
        margin-bottom: 30px;

        p {
          margin-bottom: 0;
          font-size: 16px;
          line-height: 19px;
          color: var(--text-color);

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

          span {
            color: var(--black-color);
            display: inline-block;
            padding-left: 35px;
            position: relative;

            &::before {
              content: '';
              height: 1px;
              width: 16px;
              background-color: var(--text-color);
              position: absolute;
              left: 8px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }

      .launch-btn {
        .primary-btn1 {
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 14px;
          line-height: 17px;
          justify-content: center;
          padding: 13px 20px;
          width: 100%;
          justify-content: center;
        }
      }
    }
    &.compare{
      border-radius: 10px;
      border: 1px solid rgba(238, 238, 238, 0.93);
      background: #FFF;
      position: relative;
      .close-btn{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--primary-color1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.35s;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
        i{
          font-size: 20px;
          font-weight: 700;
          transition: 0.35s;
        }
        &:hover{
          background-color: red;
          i{
            color: var(--white-color);
          }
        }
      }
      .product-content {
        padding-top: 40px;
        position: relative;
        
        .content-top {
          margin-bottom: 13px;
          .company-logo {
            height: 50px;
            width: 50px;
            background: #FFFFFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99;
            top: -25px;
          }
        }
        .change-model{
          height: 48px;
          .nice-select{
            height: 48px;
            border-radius: 5px;
            border: 1px solid rgba(238, 238, 238, 0.93);
            background: #FAF8FB;  
          }
        }
      }
    }
  }

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

    .product-img {
      .number-of-img {
        opacity: 1;
      }

      .fav {
        opacity: 1;
      }

      .slider-btn-group {
        opacity: 1;
      }

      &::after {
        opacity: 1;
      }
    }
  }
}

.slider-btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);

  &.style-2 {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
  }

  &.style-3 {
    width: unset;
  }

  .slider-btn {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 1px solid var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;

    svg {
      fill: var(--primary-color1);
      transition: 0.35s;
    }

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

      svg {
        fill: var(--white-color);
      }
    }
  }
}

/*=====================================
     8. Recent Product Area
========================================*/
.recent-product-section {
  .nav-tabs {
    border-bottom: unset;
    gap: 20px;
    li {
      padding: 0;

      button {
        padding: 9px 15px;
        border: none;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        color: var(--title-color);
        border-radius: 0;
        border: 1px solid rgba(22, 25, 30, 0.15);
        border-radius: 5px;
        &.active {
          color: var(--white-color);
          background-color: var(--title-color);
          border-color: var(--title-color);
        }
      }
    }
  }
}

/*=====================================
     9. why Choose Section
========================================*/
.why-choose-area {
  background-image: url(../img/home1/why-choose-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  .choose-card {
    background: linear-gradient(116.81deg, #fff 0%, rgba(#fff, .7) 100%) padding-box, linear-gradient(-90deg, rgba(#ccf4e0, .1), rgba(#DF0101, .4)) border-box;
    border: 1px solid transparent;
    background-origin: padding-box, border-box;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 40px 30px;
    position: relative;
    z-index: 1;
    transition: 0.35s;

    @include lg-device() {
      padding: 30px 20px;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      background: linear-gradient(116.81deg, #fff 100%, rgba(#fff, 1) 100%) padding-box, linear-gradient(-90deg, rgba(#DF0101, 1), rgba(#DF0101, 1)) border-box;
      border: 1px solid transparent;
      background-origin: padding-box, border-box;
      background-repeat: no-repeat;
      z-index: -1;
      opacity: 0;
      transition: 0.35s;
    }

    &:hover {
      &::after {
        opacity: 1;
      }
    }

    .choose-top {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 15px;

      h5 {
        font-family: var(--font-montserrat);
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: var(--title-color);
        margin-bottom: 0;

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

    p {
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 16px;
      line-height: 26px;
      color: var(--text-color);
      margin-bottom: 0;
    }

    .more-btn {
      padding-top: 20px;

      a {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: var(--title-color);
        display: flex;
        align-items: center;
        gap: 5px;
        transition: 0.35s;

        span {
          height: 18px;
          width: 18px;
          border-radius: 50%;
          background-color: var(--primary-color1);
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 17px;
            color: var(--title-color);
          }
        }

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

  .our-activetis {
    padding: 40px 0;
    border-bottom: 1px solid rgba(#13141A, 0.1);
    border-top: 1px solid rgba(#13141A, 0.1);

    .single-activiti {
      display: flex;
      align-items: center;
      gap: 20px;

      .content {
        .number {
          display: flex;
          align-items: center;
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 20px;
          line-height: 24px;
          color: var(--title-color);
          margin-bottom: 4px;

          h5 {
            margin-bottom: 0;
            line-height: 1;
          }
        }

        p {
          margin-bottom: 0;
          color: var(--text-color);
          line-height: 22px;
        }
      }
    }

    .divider {
      position: relative;

      &::after {
        height: 41px;
        width: 1px;
        background-color: rgba(#13141A, 0.16);
        position: absolute;
        right: 0;
        top: 50%;
        left: unset;
        transform: translateY(-50%);

        @include lg-down-device() {
          display: none;
          visibility: hidden;
        }
      }
    }
  }

  .trustpilot-review {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 30px;

    >strong {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 18px;
      line-height: 22px;
      color: var(--black-color);
    }

    p {
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: var(--text-color);
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;

      strong {
        font-weight: 600;
      }

      a {
        color: var(--text-color);
        text-decoration: underline;
      }
    }
  }

  .divider {
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      height: 1px;
      width: 80%;
      background-color: #eee;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
  }
  &.two{
    .rating {
      min-width: 270px;
    
      a {
        display: inline-block;
        border-radius: 10px;
        border: 1px solid #EEE;
        padding: 10px 20px 15px;
    
        .review-top {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 8px;
    
          .star {
            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              line-height: 1;
              display: flex;
              align-items: center;
              gap: 5px;
    
              li {
                line-height: 1;
    
                i {
                  font-size: 12px;
                  color: #DDA701;
                }
              }
            }
          }
        }
    
        .content {
          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 18px;
    
            li {
              font-family: var(--font-open-sans);
              font-weight: 400;
              font-size: 14px;
              line-height: 1;
              color: var(--text-color);
              position: relative;
    
              span {
                font-weight: 600;
              }
    
              &::after {
                content: '';
                height: 10px;
                width: 1px;
                background-color: var(--text-color);
                position: absolute;
                left: -10px;
                top: 50%;
                transform: translateY(-50%);
              }
    
              &:first-child {
                &::after {
                  display: none;
                  visibility: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
}
.home2-why-choose-section{
  background-image: url(../img/home1/why-choose-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  .why-choose-content-area{
    max-width: 500px;
    width: 100%;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      .single-choose{
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding-left: 18px;
        padding-bottom: 30px;
        padding-top: 35px;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        position: relative;
        transition: 0.35s;
        @include sm-down-device(){
          flex-wrap: wrap;
        }
        &::before{
          content: '';
          height: 100%;
          width: 1px;
          position: absolute;
          left: 0;
          top: 0;
          background-color: var(--primary-color1);
          transition: 0.35s;
          opacity: 0;
        }
        &:first-child{
          padding-top: 0;
        }
        &:last-child{
          padding-bottom: 0;
          border-bottom: none;
        }
        &:hover{
          &::before{
            opacity: 1;
          }
        }
        .icon{
          line-height: 1;
          height: 70px;
          min-width: 70px;
          max-width: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: var(--white-color);
          border: 1px solid var(--primary-color1 );
        }
        .content{
          line-height: 1;
         
          h5{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            span{
              color: var(--primary-color1);
            }
          }
          p{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .why-choose-img-wrap{
    position: relative;
    .logo-area{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 102px;
      width: 102px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      img{
        position: relative;
        z-index: 1;
      }
      &::after{
        content: '';
        background-color: #16191E;
        border: 6px solid var(--primary-color1);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: rotate(45deg);
        z-index: -1;
        border-radius: 5px;
      }
    }
    .choose-img{
      img{
        border-radius: 10px;
        @include lg-down-device(){
          width: 100%;
        }
      }
    }
  }
  .trustpilot-review {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 30px;
    border-top: 1px solid #eee;

    >strong {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 18px;
      line-height: 22px;
      color: var(--black-color);
    }

    p {
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: var(--text-color);
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;

      strong {
        font-weight: 600;
      }

      a {
        color: var(--text-color);
        text-decoration: underline;
        transition: 0.35s;

        strong {
          transition: 0.35s;
        }

        &:hover {
          color: var(--primary-color1);
        }
      }
    }
  }
}
/*=====================================
     10. Recommendded apartment Section
========================================*/
.recommended-apartment-section {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  &::after {
    content: '';
    background-color: var(--title-color);
    width: 100%;
    height: 300px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;

    @include fifteen-down-device(){
      height: 260px;
    }
    @include xxl-down-device() {
      height: 220px;
    }

    @include xl-down-device() {
      display: none;
      visibility: hidden;
    }
  }

  @include lg-down-device() {
    background-color: var(--title-color);
  }
  .aparment-img{
    min-width: 645px;
    @include fifteen-down-device(){
      min-width: 500px;
    }
    @include xxl-down-device(){
      min-width: 400px;
    }
    @include xl-down-device(){
      display: none;
    }
  }
  .recomended-content-wrap{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    @include xl-down-device(){
      background-color: var(--title-color);
      padding: 40px 20px;
    }
    @include md-down-device(){
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    
    .section-title1{
      max-width: 425px;
      width: 100%;
      h2{
        color: var(--white-color);
      }
    }
    .recomended-content{
      max-width: 336px;
      width: 100%;
      position: relative;
      p{
        color: #FFF;
        font-family: var(--font-open-sans);
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
      }
    }
  }

 
}

/*=====================================
     11. project location Section
========================================*/
.project-location-area{
  .project-card{
    border-radius: 10px;
    position: relative;
    img{
      border-radius: 10px;
      @include sm-down-device(){
        width: 100%;
      }
    }
    .location-content-wrap{
      background: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 40px 30px;
      overflow: hidden;
      transition: 0.5s;
      .location-content{
        transform: translateY(55px);
        transition: 0.5s;
        h5{
          margin-bottom: 0px;
          a{
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 700;
            transition: 0.35s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
        span{
          color: var(--white-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600; 
          line-height: 1;
        }
        .veiw-btn{
          opacity: 0;
          transition: 0.5s;
          a{
            padding-top: 20px;
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600; 
            display: flex;
            align-items: center;
            gap: 6px;
            
            transition: 0.35s;              
            span{
              width: 20px;
              height: 20px;
              border-radius: 50%; 
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: var(--primary-color1);
              transition: 0.35s;              
              svg{
                fill: var(--title-color);
                transition: 0.35s;              
              }
            }
            &:hover{
              color: var(--primary-color1);
              svg{
                transform: rotate(45deg);
              }
            }
          }
        }
        
      }
      &:hover{
        .location-content{
          transform: translateY(0);
          .veiw-btn{
            opacity: 1;
          }
        }
      }
   
    }
  }
}


/*=====================================
     12. Team Section
========================================*/
.home1-team-section{
  background: #FAF8FB;
  .slider-btn{
    background-color: #fff;
  }
  .single-team-card{
    .team-img{
      border-radius: 10px;
      position: relative;
      transition: 0.35s;
      .social-area{
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        left: 20px;
        top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-direction: column;
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: 0.35s;
        li{
          a{
            height: 26px;
            width: 26px;
            border-radius: 50%;
            background-color: var(--white-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.35s;
            i{
              color: var(--title-color);
              transition: 0.35s;
            }
            &:hover{
              background-color: var(--primary-color1);
            }
          }
        }
      }
      img{
        border-radius: 10px;
        @include sm-down-device(){
          width: 100%;
        }
      }  
      .contact-btn{
        position: absolute;
        right: 15px;
        bottom: -16px;
        .primary-btn3{
          font-size: 13px;
          gap: 6px;
          padding: 9px 13px;
          background-color: var(--white-color);
          border: 1px solid rgba(#DF0101, .5);
          &::after{
            background-color: var(--primary-color1);
          }
          &:hover{
            color: var(--title-color);
          }

        }
      }
    }
    .team-content{
      padding-top: 22px;
      h6{
        margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 18px;
          font-weight: 700;
          transition: 0.35s;
      }
      span{
        line-height: 1;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 600; 
      }
    }
    &.style-2{
      .team-img{ 
        .contact-btn{
          right: unset;
          left: 15px;
          bottom: -16px;
        }
      }
      .team-content{
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .social-area {
          display: flex;
          align-items: center;
          gap: 8px;
          transition: 0.45s;
          position: relative;
          .social-icons {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            opacity: 0;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: 0.45s;
            position: absolute;
            bottom: 38px;
            a {
              height: 30px;
              width: 30px;
              line-height: 30px;
              background-color: var(--title-color);
              border: 1px solid var(--title-color);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: 0.45s;
              color: var(--white-color);
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
          .share-icon {
            height: 30px;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--title-color);
            border: 1px solid var(--title-color);
            border-radius: 50%;
            transition: 0.45s;
            cursor: pointer;
            svg {
              fill: var(--white-color);
              transition: 0.45s;
            }
            &:hover{
              background-color: var(--primary-color1);
              border: 1px solid var(--primary-color1);
              svg{
                fill: var(--title-color);
              }
            }
          }
          &:hover{
            .social-icons {
              opacity: 1;
              transform: scaleY(1);
            }
          }
        }
      }
    }
    &.style-3{
      .team-content{
        padding-top: 20px;
        text-align: center;
        h6{
          margin-bottom: 0;
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 18px;
            font-weight: 700;
            transition: 0.35s;
        }
        .social-area{
          border-top: 1px solid rgba(#1D1D1D, 0.1);
          padding-top: 14px;
          margin-top: 4px;
          .social-icons{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            li{
              a {
                height: 26px;
                width: 26px;
                line-height: 26px;
                background-color: var(--white-color);
                border: 1px solid var(--white-color);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.45s;
                color: var(--title-color);
                &:hover{
                  color: var(--white-color); 
                  background-color: var(--title-color);
                  border-color: var(--title-color);
                }
              }
            }
          }
        }
      }
    }
    &:hover{
      .team-img{
        .social-area{
          transform: scaleX(1);
          opacity: 1;
        }
      }
    }
  }
}

/*=====================================
     13. Testimonial Section
========================================*/
.customar-feedback-area {
  .customer-feedback-left {
    background-image: url(../img/home1/customer-feedbac-bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding: 50px 20px;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 60px;
    position: relative;

    &::after {
      content: '';
      height: 1px;
      width: 144px;
      background-color: rgba(#13141A, 0.25);
      position: absolute;
      left: 50%;
      top: 54%;
      transform: translate(-50%, -50%);
    }

    .trustpilot {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      h5 {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 20px;
        line-height: 24px;
        color: var(--title-color);
        margin-bottom: 10px;
      }

      span {
        font-family: var(--font-open-sans);
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: var(--title-color);
        display: inline-block;
        padding-top: 6px;
        margin-bottom: 10px;

        strong {
          font-weight: 600;
        }
      }
    }

    .google {
      display: flex;
      align-items: center;
      flex-direction: column;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 5px;
        padding-top: 7px;
        margin-bottom: 5px;

        li {
          line-height: 1;

          i {
            font-style: 14px;
            color: #DDA701;
          }
        }
      }

      span {
        font-family: var(--font-open-sans);
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: var(--title-color);
        display: inline-block;
        padding-top: 6px;

        strong {
          font-weight: 600;
        }
      }
    }
  }

  .customer-feedback-right {

    .feedback-card {
      padding: 40px 30px;
      background: #FAF8FB;
      border-radius: 10px;
      border: 1px solid transparent;
      transition: 0.35s;

      .feedback-top {
        display: flex;
        align-items: end;
        justify-content: space-between;
        margin-bottom: 15px;

        .stat-area {
          display: flex;
          flex-direction: column;

          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 5px;
            padding-top: 7px;
            margin-bottom: 5px;

            li {
              line-height: 1;

              i {
                font-style: 13px;
                color: #DDA701;
              }
            }
          }

          img {
            margin-bottom: 5px;
          }

          span {
            font-family: var(--font-open-sans);
            font-weight: 600;
            font-size: 14px;
            line-height: 19px;
            color: var(--title-color);
          }
        }
      }

      p {
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
        color: var(--text-color);
      }

      .author-name {
        h6 {
          margin-bottom: 0;
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 14px;
          line-height: 17px;
          color: var(--title-color);
          padding-left: 30px;
          position: relative;

          &::after {
            content: '';
            height: 1px;
            width: 20px;
            background-color: var(--title-color);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      &:hover {
        border-color: var(--primary-color1);
      }
    }
  }
  &.style-2{
    .slider-btn-group{
      .slider-btn{
          background-color: transparent;
          border-color: rgba(#13141A, .2);
          svg{
            fill: rgba(#13141A,.2);
          }
          &:hover{
            background-color: var(--title-color);
            border-color: var(--title-color);
            svg{
              fill: var(--white-color);
            }     
          }
        }
        .view-btn{
          &::after{
            border-color: #000;
          }
          &:hover{
            color: #000;
          }
        }
    }
  }

  .sub-title {
    z-index: 1;
    margin-bottom: 40px;
    display: flex;
    align-items: center;

    h6 {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      color: var(--title-color);
      margin-bottom: 0;
      background-color: var(--white-color);
      z-index: 5;
      position: relative;
      white-space: nowrap;
      padding: 0 20px 0 0;

    }

    .dash {
      position: relative;
      width: 100%;

      &::after {
        content: '';
        height: 1px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #eee;
      }
    }

  }

  .partner-slider {
    overflow: hidden;

    .js-marquee {
      display: flex;
      align-items: center;
      gap: 100px;
      margin-right: 0 !important;
    }
  }
}

.trusted-partner-section {
  .sub-title {
    z-index: 1;
    margin-bottom: 40px;
    display: flex;
    align-items: center;

    h6 {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      color: var(--title-color);
      margin-bottom: 0;
      background-color: var(--white-color);
      z-index: 5;
      position: relative;
      white-space: nowrap;
      padding: 0 20px 0 0;

    }

    .dash {
      position: relative;
      width: 100%;

      &::after {
        content: '';
        height: 1px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #eee;
      }
    }

  }

  .partner-slider {
    overflow: hidden;

    .js-marquee {
      display: flex;
      align-items: center;
      gap: 100px;
      margin-right: 0 !important;
      @include sm-down-device(){
        gap: 40px;
      }
    }
  }
}

/*=====================================
     14. News Section
========================================*/
.news-section {
  background: #FAF8FB;
  &.two{
    background-image: url(../img/home1/why-choose-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  &.five{
    background-color: transparent;
  }

  .news-card {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 10px;

    .news-img {
      position: relative;
      border-radius: 5px;

      img {
        border-radius: 5px;
        width: 100%;
      }

      .date {
        position: absolute;
        right: -10px;
        bottom: -15px;

        a {
          background-color: var(--primary-color1);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
          display: flex;
          height: 30px;
          align-items: center;
          justify-content: center;
          padding: 3px 30px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          line-height: 18px;
          color: var(--title-color);
          transition: 0.35s;
        }
      }
    }

    .content {
      padding-top: 30px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;

      >h6 {
        margin-bottom: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 20px;

        a {
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 18px;
          line-height: 30px;
          color: var(--title-color);
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }

      .news-btm {
        .author-area {
          display: flex;
          align-items: center;
          gap: 10px;

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

          .author-content {
            display: inline-grid;

            h6 {
              margin-bottom: 3px;
              font-family: var(--font-montserrat);
              font-weight: 600;
              font-size: 15px;
              line-height: 18px;
              color: var(--title-color);
            }

            a{
              font-family: var(--font-open-sans);
              font-weight: 600;
              font-size: 12px;
              line-height: 16px;
              color: var(--text-color);
              transition: 0.35s;
              &:hover{
                color: var(--primary-color1);
              }
            }
            span {
              font-family: var(--font-open-sans);
              font-weight: 600;
              font-size: 12px;
              line-height: 16px;
              color: var(--text-color);
            }
          }
        }
      }
    }
    &.style-2{
      .date {
        position: absolute;
        left: -10px;
        right: unset;
        bottom: -15px;
        display: flex;
        align-items: center;
        gap: 20px;
        background-color: var(--primary-color1);
        clip-path: polygon(100% 0, 93% 50%, 100% 100%, 0 100%, 0 0);
        padding: 0px 22px;
        line-height: 1;
        a {
          clip-path: unset;
          background-color: transparent;
          display: flex;
          height: 30px;
          align-items: center;
          justify-content: center;
          padding: 0;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          line-height: 1;
          color: var(--title-color);
          position: relative;
          &::after{
            content: '';
            height: 10px;
            width: 1px;
            background-color: rgba(#13141A, 0.5);
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
          }
          &:first-child{
            &::after{
              display: none;
            }
          }
        }
      }
      .social-area{
        display: flex;
        align-items: center;
        gap: 8px;
        transition: .45s;
        position: relative;
        .share-icon{
          height: 30px;
          width: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #F6F6F6;
          border: 1px solid var(--primary-color1);
          border-radius: 50%;
          transition: 0.45s;
          cursor: pointer;
          svg{
            fill: var(--title-color);
            transition: 0.45s;
          }
          &:hover{
            background-color: var(--primary-color1);
          }
        }
        .social-icons{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 8px;
          opacity: 0;
          transform: scaleX(0);
          transform-origin: right;
          transition: .45s;
          position: absolute;
          right: 38px;
          li{
            a{
              height: 30px;
              width: 30px;
              line-height: 30px;
              background-color: #F6F6F6;
              border: 1px solid var(--primary-color1);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: .45s;
              color: var(--title-color);
              &:hover{
                background-color: var(--primary-color1);
              }
            }
          }
        }
        &:hover{
          .social-icons{
            opacity: 1;
            transform: scaleX(1);
          }
        }
      }
    }
    &.dark{
      .date {
        a {
          background-color: var(--white-color);
          color: var(--title-color);
          border: 1px solid #eee;
        }
      }
      .content {
        >h6 {
          a {
            &:hover{
              color: var(--title-color);
            }
          }
        }
  
        .news-btm {
          .author-area {
  
            .author-content {
  
              a{
                &:hover{
                  color: var(--title-color);
                }
              }
            }
          }
        }
      }  
    }
  }
  &.six{
    background-color: rgba(#FAF8FB, .4);
    .slider-btn-group2{
      .slider-btn{
        &:hover{
          background-color: var(--title-color);
          color: var(--white-color);
          svg{
            fill: var(--white-color);
          }
        }
      }
    }
  }
}

/*=====================================
     15. Footer Section
========================================*/
footer {
  background: var(--title-color);

  .footer-top {
    padding: 90px 11%;

    @include seventeen-down-device() {
      padding: 90px 6%;
    }

    @include xxl-down-device() {
      padding: 90px 5%;
    }

    @include xxl-down-device() {
      padding: 90px 3%;
    }

    @include lg-down-device() {
      padding: 70px 2%;
    }
  }

  .footer-widget {
    .widget-title {
      margin-bottom: 23px;

      h5 {
        margin-bottom: 0;
        color: #40E0D0;
        font-size: 20px;
        font-family: var(--font-montserrat);
        font-weight: 600;
      }
    }

    .menu-container {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          a {
            color: #B3B3B3;
            font-size: 15px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            transition: 0.35s;
            display: flex;
            align-items: center;
            gap: 7px;

            svg {
              fill: #B3B3B3;
              transition: 0.35s;
              opacity: 0;
            }

            &:hover {
              color: var(--white-color);

              svg {
                fill: var(--primary-color1);
                opacity: 1;
              }
            }
          }
        }
      }
    }

    .app-download {
      padding-top: 10px;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-bottom: 28px;
          &:last-child{
            margin-bottom: 0;
          }

          a {
            display: inline-block;
            padding: 14px;
            border-radius: 5px;
            border: 1px solid rgba(#fff, 0.1);
          }
        }
      }
    }
  }

  .footer-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 11% 35px;

    @include seventeen-down-device() {
      padding: 0px 6% 35px;
    }

    @include xxl-down-device() {
      padding: 0px 5% 35px;
    }

    @include xl-down-device() {
      padding: 0px 3% 35px;
      flex-direction: column;
      gap: 40px;
    }

    @include lg-down-device() {
      padding: 0px 2% 35px;
    }

    .contact-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 70px;

      @include xl-down-device() {
        gap: 40px;

      }

      @include md-down-device() {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
      }

      .hotline-area {
        display: flex;
        align-items: center;
        gap: 20px;

        .icon {
          position: relative;

          &::after {
            content: '';
            width: 1px;
            height: 40px;
            background-color: rgba(#fff, 0.2);
            position: absolute;
            right: -11px;
            top: 50%;
            transform: translateY(-50%);
          }

          svg {
            fill: var(--primary-color1);
          }
        }

        .content {
          line-height: 1;

          span {
            color: #B3B3B3;
            font-size: 14px;
            font-family: var(--font-open-sans);
            font-weight: 600;
            line-height: 1;
            display: inline-block;
            margin-bottom: 10px;
          }

          h6 {
            margin-bottom: 0;
            line-height: 1;

            a {
              color: var(--primary-color1);
              font-size: 20px;
              font-family: var(--font-montserrat);
              font-weight: 600;
              line-height: 1;
              transition: .35s;

              &:hover {
                color: var(--white-color);
              }
            }
          }

        }
      }
    }
  }

  .newsletter-area{
    .form-inner{
      label{
        color: #FFF;
        font-family: var(--font-montserrat);
        font-size: 15px;
        font-weight: 600;
      }
      .input-area{
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: #0E1014;  
        height: 44px; 
        min-width: 340px;
        padding: 7px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include sm-down-device(){
          min-width: 300px;
        }
        input{
          background: #0E1014;   
          width: 100%;
          color: #B3B3B3;
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 400;
          &::placeholder{
            color: var(--text-color);
          }
        }
        button{
          min-width: 30px;
          height: 30px;    
          border-radius: 50%;
          background-color: #DF010133;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.35s;
          svg{
            transition: 0.35s;
            fill: var(--primary-color1);
          }
          &:hover{
            background-color: var(--primary-color1);
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }

  .footer-btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(#fff, 0.05);
    padding: 17px 11%;

    @include seventeen-down-device() {
      padding: 17px 6%;
    }

    @include xxl-down-device() {
      padding: 17px 5%;
    }

    @include xxl-down-device() {
      padding: 17px 3%;
    }

    @include lg-down-device() {
      padding: 17px 2%;
    }

    @include md-down-device() {
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }

    .copyright-area {
      p {
        margin-bottom: 0;
        color: var(--white-color);
        font-size: 14px;
        font-weight: 400;
        font-family: var(--font-open-sans);

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

    .social-area {
      display: flex;
      align-items: center;
      gap: 15px;

      h6 {
        color: var(--white-color);
        font-size: 14px;
        font-family: var(--font-open-sans);
        font-weight: 400;
        margin-bottom: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 15px;

        li {
          a {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border-radius: 15px;
            border: 1px solid rgba(#fff, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color1);
            transition: 0.35s;

            &:hover {
              color: var(--title-color);
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  &.style-2{
    border-radius: 30px 30px 0 0;
  }
  &.style-3{
    .footer-widget {
      .menu-container {
        ul {
          li {
            a {
              &:hover {
                color: var(--white-color);
                svg {
                  fill: var(--white-color);
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
    .footer-center {
      .contact-area {
        .hotline-area {
          .icon {
            svg {
              fill: var(--white-color);
            }
          }
          .content {
            h6 {
              a {
                color: var(--white-color);
              }
            }
  
          }
        }
      }
    }
    .footer-btm {
      .copyright-area {
        p {
          a {
            color: var(--white-color);
          }
        }
      }
  
      .social-area {
        ul {
          li {
            a {
              color: rgba(#fff, 0.5);
  
              &:hover {
                color: var(--title-color);
                background-color: var(--white-color);
                border-color: var(--white-color);
              }
            }
          }
        }
      }
    }
    .newsletter-area{
      .form-inner{
        .input-area{
          button{
            min-width: 30px;
            height: 30px;    
            border-radius: 50%;
            background-color: rgba(#fff, .2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.35s;
            svg{
              transition: 0.35s;
              fill: var(--white-color);
            }
            &:hover{
              background-color: var(--white-color);
              svg{
                fill: var(--title-color);
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
     16. dream Property Section
========================================*/
.explore-btn2 {
  color: var(--title-color);
  font-size: 16px;
  font-family: var(--font-montserrat);
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: 0.35s;
  line-height: .7;
  white-space: nowrap;

  i {
    font-size: 20px;
    // transition: 0.35s;
  }

  &:hover {
    color: var(--primary-color1);
  }
  &.two{
    &:hover {
      color: var(--title-color);
    }   
  }
}

.dream-property-area{
  background-image: url(../img/home2/dream-car-bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  .filter-area {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: 35px;
    padding: 12px;
    gap: 15px;
  }

  .nav-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    li {
      button {
        color: var(--text-color);
        font-size: 16px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        line-height: 1;
        padding-top: 0;
        padding-bottom: 0;
        @include lg-down-device(){
          padding: 0;
        }

        &.active {
          background: transparent;
          color: var(--title-color);
        }

        &:hover {
          background: transparent;
          color: var(--title-color);
        }
      }
    }
  }
  .car-category {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFF;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .35s;

    @include sm-down-device() {
      padding: 25px 20px;
    }

    &:hover {
      border: 1px solid var(--primary-color1);
    }

    .icon {
      margin-bottom: 20px;
    }

    .content {
      line-height: 1;

      h6 {
        color: var(--title-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 2px;
        line-height: 20px;
      }

      span {
        color: var(--text-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 0;
        line-height: 20px;
      }
    }
  }
}

/*=====================================
     17. Featured Property Section
========================================*/
.featured-car-section {
  padding-left: 9%;
  padding-right: 9%;
  @include seventeen-down-device() {
    padding-left: 3%;
    padding-right: 3%;
  }
  @include xxl-down-device() {
    padding-left: 2%;
    padding-right: 2%;
  }
  .slider-btn-group2 {
    max-width: 90px;
    width: 100%;
  }
  .feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: 0.35s;
    .product-img {
      position: relative;
      border-radius: 10px;
      transition: 0.35s;
      .number-of-img {
        position: absolute;
        left: 20px;
        top: 17px;
        font-family: var(--font-open-sans);
        font-weight: 400;
        font-size: 14px;
        color: var(--white-color);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 5px;
        line-height: 1;
        transition: 0.35s;
        opacity: 0;
      }
      .fav {
        position: absolute;
        top: 17px;
        right: 20px;
        z-index: 2;
        transition: 0.35s;
        line-height: 1;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
          fill: var(--title-colort);
          transition: 0.35s;
        }
        &:hover {
          background-color: var(--primary-color1);
        }
      }
      .slider-btn-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        transition: 0.35s;
        opacity: 0;
        .swiper-arrow {
          height: 26px;
          width: 26px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(#13141A, 1);
          cursor: pointer;
          transition: 0.35s;
          svg {
            fill: var(--white-color);
            transition: 0.35s;
          }
          &:hover {
            background-color: var(--primary-color1);
          }
        }
      }
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50%;
        z-index: 1;
        border-radius: 10px;
        background: linear-gradient(0deg, rgba(19, 20, 26, 0.80) 0%, rgba(19, 20, 26, 0.00) 100%);
        transition: 0.35s;
      }
      img {
        border-radius: 10px;
        @include md-down-device() {
          width: 100%;
        }
      }
    }
    .product-content {
      position: absolute;
      bottom: 20px;
      left: 30px;
      right: 30px;
      z-index: 1;
      @include fifteen-down-device(){
        left: 25px;
        right: 25px;
      }
      .price {
        line-height: 1;
        margin-bottom: 8px;
        strong {
          color: var(--white-color);
          font-size: 18px;
          font-family: var(--font-montserrat);
          font-weight: 600;
          line-height: 1;
        }
      }
      h5 {
        margin-bottom: 0;
        a {
          color: var(--white-color);
          font-size: 20px;
          font-family: var(--font-montserrat);
          font-weight: 600;
        }
      }
      .features {
        margin: 0;
        padding: 0;
        list-style: none;
        display: none;
        flex-wrap: wrap;
        align-items: center;
        gap: 13px;
        border-top: 1px solid rgba(#fff, 0.16);
        padding-top: 15px;
        margin-top: 10px;
        li {
          display: flex;
          align-items: center;
          gap: 5px;
          color: var(--white-color);
          font-size: 13px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          line-height: 1;
          @include xxl-device(){
            margin-right: 10px;
          }
          @include xxl-down-device(){
            margin-right: 10px;
          }
          &:last-child{
            margin-right: 0;
          }
          svg {
            fill: var(--white-color);
          }
        }
      }
    }
    &:hover {
      .product-img {
        .number-of-img {
          opacity: 1;
        }
        .slider-btn-group {
          opacity: 1;
        }
      }
      .product-content {
        .features {
          display: flex;
          animation: fade-up 0.45s linear;
        }
      }
    }
  }
}

.slider-btn-group2 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .slider-btn {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(#DF0101, 0.4);
    cursor: pointer;
    transition: 0.35s;

    svg {
      fill: var(--primary-color1);
    }

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

      svg {
        fill: var(--title-color);
      }
    }

  }
  &.style-6{
    max-width: 90px;
    width: 100%;
    .slider-btn {
      &:hover {
        background-color: var(--title-color);
  
        svg {
          fill: var(--white-color);
        }
      }
  
    }
  }
  &.dark{
    .slider-btn {
      border: 1px solid rgba(#1d1d1d, 0.16);
      svg {
        fill: rgba(#1d1d1d, 0.16);
      }
      &:hover {
        background-color: var(--title-color);
        svg {
          fill: var(--white-color);
        }
      }
    }
  }
}

/*=====================================
   18. Recent Launched project Section
========================================*/
.recent-launched-project {
  .slider-btn-group2 {
    max-width: 90px;
    min-width: 90px;
    width: 100%;
  }
  .tab-and-slider-btn-group{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    .slider-btn-group2{
      position: relative;
      @include sm-down-device(){
        display: none;
        visibility: hidden;
      }
      &::after{
        content: '';
        width: 1px;
        height: 34px;   
        opacity: 0.2;
        background: #16191E;  
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);      
      }
    }
  }
  .nav-tabs {
    border-bottom: unset;
    flex-wrap: nowrap;
    gap: 20px;
    @include md-down-device(){
      flex-wrap: wrap;
    }
    li {
      padding: 0;

      button {
        padding: 9px 15px;
        border: none;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        color: var(--title-color);
        border-radius: 0;
        border: 1px solid rgba(22, 25, 30, 0.15);
        border-radius: 5px;
        &.active {
          color: var(--white-color);
          background-color: var(--title-color);
          border-color: var(--title-color);
        }
      }
    }
  }
  .slider-and-explore-btn-group{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    flex-wrap: wrap;
    .explore-more-btn {
      position: relative;
      &::after {
        content: "";
        width: 1px;
        height: 34px;
        opacity: 0.2;
        background: #16191E;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }   
  }
}

.product-card2 {
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 10px;
  transition: 0.35s;

  .product-img {
    border-radius: 10px;
    position: relative;
    transition: 0.35s;

    .date {
      position: absolute;
      left: -89px;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg) scaleX(0);
      transition: 0.35s;
      opacity: 0;

      button {
        color: var(--black-color);
        font-size: 14px;
        font-family: var(--font-open-sans);
        font-weight: 400;
        background-color: var(--primary-color1);
        border-radius: 0px 0px 30px 30px;
        padding: 2px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 190px;
      }
    }

    .fav {
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background-color: var(--white-color);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 14px;
      top: 14px;
      transition: 0.35s;

      svg {
        fill: var(--title-color);
      }

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

    img {
      border-radius: 10px;

      @include md-down-device() {
        width: 100%;
      }
    }
  }

  .product-content {
    position: relative;
    padding: 27px 10px 15px 10px;
    line-height: 1;
    .company-logo {
      position: absolute;
      right: 20px;
      top: -22px;
    }

    .details-btn {
      position: absolute;
      right: 20px;
      top: -19px;

      a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #FAF8FB;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .35s;

        i {
          font-size: 24px;
          color: #cbc5c5;
          // line-height: 1;
          transform: rotate(-45deg);
          transition: .35s;
        }
      }
    }

    .price {
      line-height: 1;
      margin-bottom: 10px;

      strong {
        color: var(--title-color);
        font-size: 18px;
        font-family: var(--font-montserrat);
        font-weight: 700;
        line-height: 1;
      }
    }

    h6 {
      margin-bottom: 8px;
      line-height: 1;

      a {
        color: var(--title-color);
        font-size: 18px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        transition: 0.35s;

        &:hover {
          color: var(--primary-color1);
        }
      }
    }
    span{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 13px;
      font-weight: 600; 
      line-height: 1;
    }
  }

  &.two {
    .product-content {
      .price{
        line-height: 1;
        strong{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;
        }
      }
      h6{
        margin-bottom: 12px;
      }
      .features {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 7px;
        position: relative;
        padding-top: 15px;
        flex-wrap: wrap;
  
        @include seventeen-down-device() {
          gap: 15px;
        }
  
        @include xxl-down-device() {
          gap: 5px;
          flex-wrap: wrap;
        }
  
        &::after {
          content: '';
          background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.00) 100%); 
          position: absolute;
          left: 50%;
          height: 1px;
          width: 80%;
          top: 0;
          transform: translateX(-50%);
        }
  
        li {
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          line-height: 18px;
          color: var(--text-color);
          margin-right: 5px;
  
          @include fifteen-down-device() {
            font-size: 12px;
          }
  
          @include xxl-down-device() {
            padding-right: 5px;
          }
  
          svg {
            fill: var(--text-color);
          }
        }
      }
    }
  }

  &:hover {
    border: 1px solid var(--primary-color1);

    .product-img {
      .date {
        opacity: 1;
        transform: translateY(-50%) rotate(-90deg) scaleX(1);
      }
    }

    .product-content {
      .details-btn {
        a {
          background-color: var(--primary-color1);

          i {
            color: var(--title-color);
            transform: rotate(0deg);
          }
        }
      }
    }
  }
  &.drak{
    .product-img {
      .fav {
        &:hover {
          background-color: var(--title-color);
          svg {
            fill: var(--white-color);
          }
        }
      }
    }
    .product-content {
  
  
      h6 {
        a {
          &:hover {
            color: var(--title-color);
          }
        }
      }
    }
    &:hover{
      border: 1px solid var(--title-color);
      .product-content {
        .details-btn {
          a {
            background-color: var(--title-color);
  
            i {
              color: var(--white-color);
            }
          }
        }
      }   
    }
  }
}


/*=====================================
   19. How We Work Section
========================================*/
.how-it-work-section {
  background: #FAF8FB;
  padding: 90px 0;
  &.style-2{
    border-radius: 30px;
    background: #F6F6F6; 
  }
  .video-btn {
    a {
      color: var(--white-color);
      font-size: 15px;
      font-family: var(--font-montserrat);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
      border-radius: 5px;
      border: 1px solid var(--title-color);
      background: var(--title-color);
      padding: 5px 18px;
      position: relative;
      z-index: 1;
      overflow: hidden;
      transition: all 0.5s ease-out 0s;
      i {
        line-height: 1;
        color: var(--white-color);
        transition: all 0.5s ease-out 0s;
      }

      &::after {
        position: absolute;
        content: "";
        display: block;
        left: 8%;
        right: -20%;
        top: -4%;
        height: 150%;
        width: 150%;
        bottom: 0;
        border-radius: 2px;
        background-color: #fff;
        transform: skewX(45deg) scale(0, 1);
        z-index: -1;
        transition: all 0.5s ease-out 0s;
      }

      &:hover {
        color: var(--title-color);
        i{
          color: var(--title-color);
        }

        svg {
          fill: var(--title-color);
        }

        &::after {
          transform: skewX(45deg) scale(1, 1);
        }
      }
    }
  }

  .single-work-process {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.35s;
    max-width: 250px;
    width: 100%;
    margin: 0 auto;

    .step {
      height: 34px;
      width: 34px;
      border-radius: 50%;
      border: 1px solid rgba(19, 20, 26, 0.50);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;

      span {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        color: var(--title-color);
        font-size: 15px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        background-color: var(--primary-color1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .icon {
      height: 70px;
      width: 70px;
      border-radius: 50%;
      background-color: var(--white-color);
      border: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.35s;
      margin-bottom: 13px;
    }

    .content {
      h6 {
        color: var(--title-color);
        font-size: 18px;
        font-family: var(--font-montserrat);
        font-weight: 700;
        margin-bottom: 8px;
      }

      p {
        color: var(--text-color);
        font-size: 16px;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 26px;
        margin-bottom: 0;
      }
    }

    &:hover {
      .icon {
        background-color: var(--primary-color1);
      }
    }
  }

  .work-process-group {
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      height: 1px;
      width: 100%;
      background-color: #eee;
      position: absolute;
      top: 17px;
      left: 0;
      z-index: -1;

      @include lg-down-device() {
        display: none;
        visibility: hidden;
      }
    }
  }

  .trustpilot-review {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 30px;

    >strong {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 18px;
      line-height: 22px;
      color: var(--black-color);
    }

    p {
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: var(--text-color);
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;

      strong {
        font-weight: 600;
      }

      a {
        color: var(--text-color);
        text-decoration: underline;
        transition: 0.35s;

        strong {
          transition: 0.35s;
        }

        &:hover {
          color: var(--primary-color1);
        }
      }
    }
  }
  &.style-3{
    .work-process-group {
      &::after {
          display: none;
          visibility: hidden;
      }
      .single-work-process {
        position: relative;
        .steps {
          position: absolute;
          right: -51px;
          top: 20px;
          @include xxl-down-device(){
            right: -28px;
          }
          @include lg-down-device(){
            position: relative;
            right: unset;
            top: unset;
            margin-bottom: 20px;
          }
          &::before{
            content: '';
            position: absolute;
            right: 30px;
            width: 90px;
            height: 1px;
            background-color: rgba(29, 29, 29, 0.07);
            top: 50%;
            transform: translateY(-50%);
            z-index: -1;
            @include lg-down-device(){
              display: none;
              visibility: hidden;
            }
          }
          &::after{
            content: '';
            position: absolute;
            left: 30px;
            width: 90px;
            height: 1px;
            background-color: rgba(29, 29, 29, 0.07);
            top: 50%;
            transform: translateY(-50%);
            z-index: -1;
            @include lg-down-device(){
              display: none;
              visibility: hidden;
            }

          }
          span {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: var(--black-color2);
            font-size: 15px;
            font-family: var(--font-montserrat);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(29, 29, 29, 0.20);
          }
        }
    
        &:hover {
          .icon {
            background-color: var(--white-color);
          }
        }
      }
    }
  }
  &.style-4{
    background-image: url(../img/home3/home3-how-it-work-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    .work-process-group {
      
      &::after {
          display: none;
          visibility: hidden;
      }
      .single-work-process {
        position: relative;
        margin: unset;
        .steps {
          position: absolute;
          right: -207px;
          top: 20px;
          @include xxl-down-device(){
            right: -171px;
          }
          @include xl-down-device(){
            right: -122px;
          }
          @include lg-down-device(){
            display: none;
          }
        }
        .icon {
          svg{
            fill: var(--primary-color1);
            transition: 0.35s;
          }
        }
        &:hover {
          .icon {
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }
}

/*=====================================
   20. Our Brief History Section
========================================*/
.brief-history-section{
  .brief-history-card{
    text-align: center;
    .brief-history-card-img{
      margin-bottom: 40px;
      img{
        border-radius: 50%;
      }
    }
    .brief-history-card-content{
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 8px;
      }
      p{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0;
      }
    }
  }
}
/*=====================================
   21. Home2 Testimonial Section
========================================*/
.home2-testimonial-section {
  .slider-btn-group2 {
    max-width: 90px;
    min-width: 90px;
    width: 100%;
  }

  .rating {
    min-width: 270px;

    a {
      display: inline-block;
      border-radius: 10px;
      border: 1px solid #EEE;
      padding: 10px 20px 15px;

      .review-top {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 8px;

        .star {
          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 5px;

            li {
              line-height: 1;

              i {
                font-size: 12px;
                color: #DDA701;
              }
            }
          }
        }
      }

      .content {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 18px;

          li {
            font-family: var(--font-open-sans);
            font-weight: 400;
            font-size: 14px;
            line-height: 1;
            color: var(--text-color);
            position: relative;

            span {
              font-weight: 600;
            }

            &::after {
              content: '';
              height: 10px;
              width: 1px;
              background-color: var(--text-color);
              position: absolute;
              left: -10px;
              top: 50%;
              transform: translateY(-50%);
            }

            &:first-child {
              &::after {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
      }
    }
  }

  .feedback-card {
    padding: 40px 30px;
    background: #FAF8FB;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: 0.35s;
    border: 1px solid rgba(238, 238, 238, 0.93);

    .feedback-top {
      display: flex;
      align-items: end;
      justify-content: space-between;
      margin-bottom: 15px;

      .stat-area {
        display: flex;
        flex-direction: column;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 5px;
          padding-top: 7px;
          margin-bottom: 5px;

          li {
            line-height: 1;

            i {
              font-style: 13px;
              color: #DDA701;
            }
          }
        }

        img {
          margin-bottom: 5px;
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 19px;
          color: var(--title-color);
        }
      }

      .services {
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 19px;
          color: var(--title-color);
        }
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 32px;
      color: var(--text-color);
      margin-bottom: 15px;

      strong {
        font-weight: 700;
      }
    }

    .author-name {
      display: flex;
      align-items: center;
      gap: 6px;

      h6 {
        margin-bottom: 0;
        font-family: var(--font-montserrat);
        font-weight: 700;
        font-size: 14px;
        line-height: 17px;
        color: var(--title-color);
        padding-left: 30px;
        position: relative;

        &::after {
          content: '';
          height: 1px;
          width: 20px;
          background-color: var(--title-color);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      span {
        color: var(--text-color);
        font-size: 12px;
        font-family: var(--font-open-sans);
        font-weight: 600;
      }
    }

    &:hover {
      border-color: var(--primary-color1);
    }
  }
}
/*=====================================
   22. Home3 BAnner Section
========================================*/
.home3-banner-area{
  position: relative;
  .banner-bg{
    height: 840px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    @include xxl-device(){
      height: 650px;
    }
    @include xxl-down-device(){
      height: 650px;
    }
  }
  .banner-wrapper{
    position: absolute;
    bottom: 100px;
    z-index: 9;
    width: 100%;
    left: 0;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    @include xxl-device() {
      padding: 0px 3%;
    }
  
    @include xxl-down-device() {
      padding: 0px 3%;
    }
    @include lg-down-device(){
      flex-wrap: wrap;
      gap: 50px;
    }
    .banner-content{
      h1{
        color: var(--white-color);
        font-family: var(--font-montserrat);
        font-size: 75px;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 25px;
        @include xxl-device(){
          font-size: 60px;
        }
        @include xxl-down-device(){
          font-size: 60px;
        }
        @include md-down-device(){
          font-size: 55px;
        }
        // @include md-down-device(){
        //   font-style: 30px;
        // }
      }
      .banner-feature{
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;
          li{
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 600;
            position: relative;
            margin-right: 25px;
            line-height: 1;
            &:last-child{
              margin-right: 0;
            }
            span{
              color: var(--primary-color1);
            }
            &::after{
              content: '';
              height: 8px;
              width: 8px;
              border-radius: 50%;
              background-color: rgba(#fff, .4);
              position: absolute;
              left: -22px;
              top: 50%;
              transform: translateY(-50%);
            }
            &:first-child{
              &::after{
                display: none;
                visibility: hidden;
              }
            }
          }
        }
      }
      .trustpilot-review {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 40px;
    
        >strong {
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 18px;
          line-height: 22px;
          color: var(--white-color);
        }
    
        p {
          font-family: var(--font-open-sans);
          font-weight: 400;
          font-size: 15px;
          line-height: 20px;
          color: var(--white-color);
          margin-bottom: 0;
          padding-left: 10px;
          padding-right: 10px;
          text-align: center;
    
          strong {
            font-weight: 600;
          }
    
          a {
            color: var(--white-color);
            text-decoration: underline;
            transition: 0.35s;
    
            strong {
              transition: 0.35s;
            }
    
            &:hover {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .slider-btn-group{
      @include md-down-device(){
        display: none;
        visibility: hidden;
      }
      .slider-btn{
        min-width: 34px;
        background-color: transparent;
        border-color: rgba(#fff, .5);
        svg{
          fill: rgba(#fff, .5);
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            fill: var(--title-color);
          }
        }
      }
      .paginations {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      .swiper-pagination-bullet{
        width: 30px;
        height: 3px;
        background-color: #D9D9D9;
        border-radius: 10px;
        opacity: 1;
      }
      .swiper-pagination-bullet-active{
        background-color: var(--primary-color1);
      }
    }
  }
}

/*=====================================
   23. Brand Category Section
========================================*/
.brand-category-section, .home3-project-location-area{
  .slider-btn-group2 {
    max-width: 90px;
    width: 100%;
  }
}
.home3-about-section{
  background-image: url(../img/home3/about-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  .about-content-wrap{
    @include lg-up-device(){
      padding-right: 35px;
    }
    >h6{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      padding-top: 20px;
      margin-bottom: 5px;
    }
    p{
      color: var(--text-color);
      line-height: 30px;
    }
  
    .author-area{
      padding-top: 20px;
      img{
        margin-bottom: 15px;
      }
      .author-name-deg{
        line-height: 1;
        h6{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;   
          margin-bottom: 5px;  
        }
        span{
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
  .office-location-area{
    @include lg-down-device(){
      max-width: 635px;
      width: 100%;
    }
    .slider-btn-group2{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
      width: 95%;
      .slider-btn{
        background-color: rgba(#DF0101, .4);
        svg{
          fill: var(--white-color);
        }
        &:hover{
          background-color: var(--primary-color1);
        }
      }
    }
    .about-img-wrap{
      position: relative;
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 24px;
     
      .logo-area {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-36%, -50%);
        height: 102px;
        width: 102px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        &::after {
          content: "";
          background-color: #16191E;
          border: 6px solid var(--primary-color1);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transform: rotate(45deg);
          z-index: -1;
          border-radius: 5px;
        }
      }
      
    }
    .office-address{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 0;
        position: relative;
        padding-right: 40px;
        &::after{
          content: '';
          height: 1px;
          width: 20px;
          background-color: #D9D9D9;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
        }
      }
      a{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
  .our-activetis {
    padding: 40px 0 0;
    border-top: 1px solid rgba(#13141A, 0.1);
    .divider {
      position: relative;
      &::after {
        height: 41px;
        width: 1px;
        background-color: rgba(#1D1D1D, 0.16);
        position: absolute;
        right: 0;
        top: 50%;
        left: unset;
        transform: translateY(-50%);
  
        @include md-down-device() {
          display: none;
          visibility: hidden;
        }
      }
    }
    .single-activiti {
      display: flex;
      align-items: center;
      gap: 20px;

      .content {
        .number {
          display: flex;
          align-items: center;
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 20px;
          line-height: 24px;
          color: var(--title-color);
          margin-bottom: 4px;

          h5 {
            margin-bottom: 0;
            line-height: 1;
          }
        }

        p {
          margin-bottom: 0;
          color: var(--text-color);
          line-height: 22px;
        }
      }
    }
  }

}
.home3-apartment-type-section{
  .single-category3{
    padding: 25px;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    border-radius: 29px;
    transition: 0.35s;
    .brand-icon{
      width: 104px;
      height: 104px;    
      border-radius: 50%;
      background-color: #FAF8FB;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.35s;
      margin-left: auto;
      margin-right: auto;
      svg{
        fill: var(--title-color);
        transition: 0.35s;
      }
    }
    .category-content{
      text-align: center;
      h6{
        color: var(--title-color);
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600;  
        margin-bottom: 0;
        line-height: 1;
      }
      span{
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 600;  
      }
    }
    &:hover{
      
      border: 1px solid var(--primary-color1);
      .brand-icon{
        svg{
          fill: var(--primary-color1);
        }
      }
    }
  }
}

/*=====================================
   24. Home3 Featured Project Section
========================================*/

.home3-featured-projects-area{
  padding-left: 8%;
  padding-right: 8%;

  @include seventeen-down-device() {
    padding-left: 3%;
    padding-right: 3%;
  }

  @include xxl-down-device() {
    padding-left: 2%;
    padding-right: 2%;
  }

}
.product-card3 {
  transition: 0.35s;
  position: relative;
  .product-img {
    position: relative;
    transition: 0.35s;
    .batch{
      line-height: 1.5;
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 2;
      span{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 12px;
        font-weight: 600; 
        line-height: 1;
        background-color: var(--primary-color1);
        border-radius: 5px;
        padding: 4px 12px;
        &.red{
          background-color: #FF5E3A ;
          color: #fff;
        }
        &.black{
          background-color: var(--title-color);
          color: #fff;
        }
      }
    } 
    .fav {
      position: absolute;
      top: 17px;
      right: 20px;
      z-index: 2;
      transition: 0.35s;
      line-height: 1;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--white-color);
      svg {
        fill: var(--title-color);
        transition: 0.35s;
      }

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

    .slider-btn-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      transition: 0.35s;
      opacity: 0;

      .swiper-arrow {
        height: 26px;
        width: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(#13141A, 0.6);
        cursor: pointer;
        transition: 0.35s;

        svg {
          fill: var(--white-color);
          transition: 0.35s;
        }

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

      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50.27%);
      transition: 0.35s;
      opacity: 0;
    }

    img {
      @include md-down-device() {
        width: 100%;
      }
    }
  }

  .product-content {
    padding: 20px 0 0;

    @include fifteen-down-device() {
      padding: 20px 10px 0px;
    }
    .features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      @include seventeen-down-device() {
        gap: 15px;
      }

      @include xxl-down-device() {
        gap: 5px;
        flex-wrap: wrap;
      }

      li {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        color: var(--text-color);

        @include fifteen-down-device() {
          font-size: 12px;
        }

        @include xxl-down-device() {
          padding-right: 5px;
        }

        svg {
          fill: var(--text-color);
        }
      }
    }
    h5 {
      margin-bottom: 0px;
      line-height: 1;

      a {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2;
        color: var(--title-color);
        transition: 0.35s;

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

    .price-location {
      display: flex;
      align-items: center;
      gap: 30px;
      line-height: 1;
      margin-bottom: 10px;

      .price {
        line-height: 1;
        position: relative;

        &::after {
          content: '';
          height: 13px;
          width: 1px;
          background-color: rgba(#13141A, 0.3);
          position: absolute;
          right: -15px;
          top: 50%;
          transform: translateY(-50%);
        }

        strong {
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 20px;
          line-height: 1;
          color: var(--title-color);
        }
      }

      .location {
        line-height: 1;

        a {
          display: flex;
          align-items: center;
          gap: 4px;
          line-height: 1;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          color: var(--title-color);
        }
      }
    }
  }
  &.style-2{
    .product-content {
      padding: 22px 0 0;
      position: relative;
  
      @include fifteen-down-device() {
        padding: 22px 10px 0px;
      }
  
      h5 {
        margin-bottom: 7px;
        a {
          font-size: 18px;
          color: var(--title-color);
  
          &:hover {
            color: var(--primary-color1);
          }
        }
      }
      .price-tag{
        line-height: 1;
        margin-bottom: 10px;
        span{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;     
        }
      }
      .features {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        border-top: 1px solid #eee;
        padding-top: 12px;
        @include seventeen-down-device() {
          gap: 15px;
        }
  
        @include xxl-down-device() {
          gap: 5px;
          flex-wrap: wrap;
        }
  
        li {
          display: flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          line-height: 18px;
          color: var(--text-color);
  
          @include fifteen-down-device() {
            font-size: 12px;
          }
  
          @include xxl-down-device() {
            padding-right: 5px;
          }
  
          svg {
            fill: var(--text-color);
          }
        }
      }
    }
  }
  &.style-3{
    .features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      padding-top: 10px;
      @include seventeen-down-device() {
        gap: 15px;
      }

      @include xxl-down-device() {
        gap: 5px;
        flex-wrap: wrap;
      }

      li {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        color: var(--text-color);

        @include fifteen-down-device() {
          font-size: 12px;
        }

        @include xxl-down-device() {
          padding-right: 5px;
        }

        svg {
          fill: var(--text-color);
        }
      }
    }
  }
  &.style-4{
    .product-img {
      &::after {
        display: none;
      }
    }
    .product-content{
      span{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 600;
      }
    }
  }
  &:hover {
    border-color: var(--primary-color1);

    .product-img {

      .slider-btn-group {
        opacity: 1;
      }

      &::after {
        opacity: 1;
      }
    }
  }
}
/*=====================================
   25. Home3 Recent Launched Project Section
========================================*/
.home3-recent-launched-section{
  .slider-btn-group2 {
    max-width: 90px;
    min-width: 90px;
    width: 100%;
  }
  .tab-and-slider-btn-group{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    .slider-btn-group2{
      position: relative;
      @include sm-down-device(){
        display: none;
        visibility: hidden;
      }
      &::after{
        content: '';
        width: 1px;
        height: 34px;   
        opacity: 0.2;
        background: #16191E;  
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);      
      }
    }
  }
  .nav-tabs {
    border-bottom: unset;
    flex-wrap: nowrap;
    gap: 20px;
    @include md-down-device(){
      flex-wrap: wrap;
    }
    li {
      padding: 0;

      button {
        padding: 8px 15px;
        border: none;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        color: var(--title-color);
        border-radius: 0;
        border: 1px solid rgba(22, 25, 30, 0.15);
        border-radius: 50px;
        &.active {
          color: var(--white-color);
          background-color: var(--title-color);
          border-color: var(--title-color);
        }
      }
    }
  }
}
/*=====================================
   26. Home3 Inner Banner Section
========================================*/
.home3-inner-banner{
  background-color: var(--title-color);
  padding: 90px 0;
  display: flex;
  align-items: center;
  position: relative;
  @include lg-down-device(){
    padding: 50px 0;
  }
  .section-title-2{
    h2{
      color: var(--white-color);
    }
    p{
      color: var(--white-color);
      margin-bottom: 40px;
    }
    .primary-btn3{
      border-radius: 0;
      padding: 17px 25px;
    }
  }
  .inner-banner-img{
    position: absolute;
    right: 0;
    bottom: 0;
    @include xxl-down-device(){
      max-width: 550px;
    }
    @include xl-down-device(){
      display: none;
      visibility: hidden;
    }
  }
}

/*=====================================
   27. Home3 Testimonial Section
========================================*/
.home3-testimonial-area {
  position: relative;
  padding: 100px 0px 0px;
  @include lg-down-device(){
    padding: 0;
  }
  .slider-btn{
    @include md-down-device(){
      display: none;
      visibility: hidden;
    }
  }
  .sm-img-group{
    margin: 0;
    padding: 0;
    list-style: none;
    @include lg-down-device(){
      display: none;
      visibility: hidden;
    }
    li{
      position: absolute;
      img{
        border-radius: 50%;
      }
      &:nth-child(1){
        top: 0;
        left: 20%;
        img{
          width: 92px;
          height: 92px;
        }
      }
      &:nth-child(2){
        top: 0;
        right: 20%;
        img{
          width: 74px;
          height: 74px;
        }
      }
      &:nth-child(3){
        right: 8%;
        top: 18%;
        img{
          width: 54px;
          height: 54px;
        }
      }
      &:nth-child(4){
        left: 8%;
        bottom: 30%;
        img{
          width: 68px;
          height: 68px;
        }
      }
      &:nth-child(5){
        bottom: 23%;
        left: 25%;
        @include xxl-down-device(){
          display: none;
          visibility: hidden;
        }
        img{
          width: 54px;
          height: 54px;
        }
      }
      &:nth-child(6){
        right: 11%;
        bottom: 12%;
        img{
          width: 90px;
          height: 90px;
        }
      }
    
    }
  }
  .testimonial-slider3{
    max-width: 740px;
    width: 100%;
    margin: 0 auto 50px;
  }
    .testimonial-wrap{
     
      .author-image-area{
        height: 85px;
        width: 85px;
        border-radius: 50%;
        border: 1px solid var(--title-color);
        position: relative;
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
        .quat{
          height: 26px;
          width: 26px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--title-color);
          background-color: var(--white-color);
          position: absolute;
          right: -13px;
          top: 25%;
        }
        >img{
          height: 79px;
          width: 79px;
          border-radius: 50%;
        }
      }
      .review{
        margin-bottom: 10px;
        h6{
          color: #13141A;
          text-align: center;
          font-family: var(--font-open-sans);
          font-size: 16px;
          font-weight: 700; 
          margin-bottom: 0;  
          padding-top: 3px;  
        }
      }
      .content{
        margin-bottom: 15px;
        p{
          color: var(--text-color);
          font-family: var(--font-montserrat);
          font-size: 22px;
          font-weight: 400;
          line-height: 36px;  
          margin-bottom: 0;
          @include sm-down-device(){
            font-sizw: 20px;
            line-height: 33px;
          }
        }
      }
      .author-name{
        h5{
          color: var(--title-color);
          text-align: center;
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 0;
        }
      }
    }
    .trustpilot-review {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
  
      >strong {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        color: var(--black-color);
      }
  
      p {
        font-family: var(--font-open-sans);
        font-weight: 400;
        font-size: 15px;
        line-height: 20px;
        color: var(--text-color);
        margin-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
  
        strong {
          font-weight: 600;
        }
  
        a {
          color: var(--text-color);
          text-decoration: underline;
        }
      }
    }
}
/*=====================================
   28. Home4 Banner Section
========================================*/
.home4-banner-area{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.25) 100%), url(../img/home4/hme4-banner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 277px 0 215px;
  display: flex;
  align-items: center;
  position: relative;
  @include xxl-down-device(){
    padding: 210px 0 145px;
  }

  .banner-content {
    max-width: 705px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    h6{
      margin-bottom: 20px;
      color: var(--primary-color1);
      font-family: var(--font-open-sans);
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
    }

    h1, h2 {
      font-family: var(--font-montserrat);
      font-weight: 700;
      font-size: 70px;
      line-height: 1.11;
      color: var(--white-color);
      margin-bottom: 20px;

      @include xxl-down-device() {
        font-size: 60px;
      }

      @include sm-down-device() {
        font-size: 50px;
      }
    }

    p {
      font-size: 18px;
      color: var(--white-color);
      line-height: 34px;
      margin-bottom: 0;
    }
    .banner-content-bottom {
      padding-top: 45px;
      display: flex;
      justify-content: center;
      gap: 55px;

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 15px;
      }
      .view-dt-btn{
        display: flex;
        align-items: center;
      }
      .rating {
        line-height: 1;
        a {
          display: inline-block;

          .review-top {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 8px;

            .star {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 5px;

                li {
                  line-height: 1;

                  i {
                    font-size: 12px;
                    color: #DDA701;
                  }
                }
              }
            }
          }

          .content {
            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 18px;

              li {
                font-family: var(--font-open-sans);
                font-weight: 400;
                font-size: 14px;
                line-height: 1;
                color: var(--white-color);
                position: relative;

                span {
                  font-weight: 600;
                }

                &::after {
                  content: '';
                  height: 10px;
                  width: 1px;
                  background-color: var(--white-color);
                  position: absolute;
                  left: -10px;
                  top: 50%;
                  transform: translateY(-50%);
                }

                &:first-child {
                  &::after {
                    display: none;
                    visibility: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.explore-more-btn{
  a{
    color: var(--title-color);
    font-family: var(--font-montserrat);
    font-size: 15px;
    font-weight: 600; 
    transition: 0.35s;
    white-space: nowrap;
    &:hover{
      color: var(--primary-color1);
    }
  }
  &.two{
    position: relative;
    &::after{
      content: '';
      width: 1px;
      height: 34px;  
      background-color: rgba(#000, .2);
      position: absolute;
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &.three{
    @include xl-down-device(){
      &::after{
        display: none;
        visibility: hidden;
      }
    }
  }
}
/*=====================================
   29. Home4 Apartment Type Section
========================================*/
.home4-apartment-type{
  .car-category {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFF;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .35s;

    @include sm-down-device() {
      padding: 25px 20px;
    }

    &:hover {
      border: 1px solid var(--primary-color1);
    }

    .icon {
      margin-bottom: 20px;
    }

    .content {
      line-height: 1;

      h6 {
        color: var(--title-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 2px;
        line-height: 20px;
      }

      span {
        color: var(--text-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 0;
        line-height: 20px;
      }
    }
  }
}
/*=====================================
   30. Home4 About Section
========================================*/
.home4-about-section{
  .about-content-wrap{
    @include lg-up-device(){
      padding-right: 35px;
    }
    >h6{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      padding-top: 20px;
      margin-bottom: 5px;
    }
    p{
      color: var(--text-color);
      line-height: 30px;
    }
    .about-features{
      margin: 0;
      padding: 0;
      list-style: none;
      padding-top: 15px;
      margin-bottom: 50px;
      .single-features{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        transition: 0.35s;
        position: relative;
        padding: 20px 0;
        &::after, &::before{
          content: '';
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &::before{
          bottom: unset;
          top: 0;
        }
        .icon-content{
          display: flex;
          align-items: center;
          gap: 15px;
          .icon{
            line-height: 1;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
              transition: 0.35s;
              .vector{
                fill: rgba(#16191E, .1);
              }
            }
          }
          .content{
            line-height: 1;
            h6{
              color: #000;
              font-family: var(--font-montserrat);
              font-size: 16px;
              font-weight: 600; 
              margin-bottom: 0;
            }
            p{
              font-size: 14px;
              line-height: 22px;
              color: var(--text-color);
              margin-bottom: 0;
            }
          }
        }
        .sent-btn{
          a{
            width: 30px;
            height: 30px;    
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:#FAF8FB;
            border-radius: 50%;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
            }
          }
        }
        &:hover{
          .icon-content{
            .icon{
              svg{
                fill: var(--primary-color1);
                .vector{
                  fill: var(--primary-color1);
                }
              }
            }
          }
          .sent-btn{
            a{
              background-color: var(--primary-color1);
            }
          }
        }
      }
    }
    .author-and-exp-area{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      transform: translateX(-50%);
      width: 100%;
      @include xxl-down-device(){
        transform: translateX(-62%);
      }
      @media screen and (max-width: 1300px) {
        transform: translateX(-70%);
      }
      @include xl-down-device(){
        flex-wrap: wrap;
        transform: unset;
        gap: 20px;
      }
      .author-area{
        min-width: 649px;     
        border-radius: 5px;
        border: 1px solid #EEE;
        background: #FFF;    
        padding: 30px 40px;
        position: relative;
        @include xl-down-device(){
          min-width: 100%;
        }
        @include sm-down-device(){
          padding: 30px 25px;
        }
        &:before{
          content: '';
          width: 4px;
          height: 100%;
          background-color: var(--primary-color1);
          border-radius: 5px 0 0 5px;
          position: absolute;
          left: -1px;
          top: 0;
        }
        p{
          color: #000;
          font-family: var(--font-montserrat);
          font-size: 18px;
          font-weight: 600;
          line-height: 30px;
          margin-bottom: 12px;
        }
        .name-deg{
          span{
            display: inline-block;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 12px;
            font-weight: 600;  
            padding-left: 55px;  
            position: relative;
            line-height: 1.5;
            &::before{
              content: '';
              width: 40px;
              height: 1px;  
              background-color: var(--primary-color1);   
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            strong{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 600;
              display: inline-block;
              padding-right: 5px;
            } 
          }
        }
        
      }
      .exp-area{
        .number{
          h2{
            background-image: url(../img/home1/about-text-bg.png);
            background-position: center;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: var(--font-montserrat);
            font-size: 150px;
            font-weight: 800;
            line-height: 1;    
          }
        }
        h5{
          color: #000;
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          line-height: 30px;
          margin-left: 118px;
          margin-top: -56px;
          width: 100%;
          @include md-down-device(){
            width: unset;
          }
      
          span{
            color: var(--white-color);
          }
        }
      }
    }
  }
  .about-img-wrap{
    margin-bottom: 30px;
    img{
      border-radius: 10px;
    }
  }
  .slider-btn-group2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    width: 95%;
    .slider-btn{
      background-color: rgba(#DF0101, .4);
      svg{
        fill: var(--white-color);
      }
      &:hover{
        background-color: var(--primary-color1);
      }
    }
  }
  .activetis{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    line-height: 1;
    min-width: 630px;
    position: relative;
    padding: 20px 0;
    @include xl-down-device(){
      min-width: 100%;
      padding: 20px 20px;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    &::before{
      content: '';
      height: 1px;
      width: 100%;
      background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
      position: absolute;
      left: 0;
      top: 0;
    }
    &::after{
      content: '';
      height: 1px;
      width: 100%;
      background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .single-activiti{
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 1;
      .content{
        .number{
          line-height: 1;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          h5{
            margin-bottom: 0;
            line-height: 1;
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 700;
          }
          span{
            line-height: 1;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600; 
          margin-bottom: 0;
          line-height: 22px;
        }
      }
    }
  }
}
.product-card4{
  padding: 10px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  transition: 0.35s;
  position: relative;
  .product-img {
    position: relative;
    transition: 0.35s;
    .batch{
      line-height: 1.5;
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 2;
      span{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 12px;
        font-weight: 600; 
        line-height: 1;
        background-color: var(--primary-color1);
        border-radius: 5px;
        padding: 4px 12px;
        &.red{
          background-color: #FF5E3A ;
          color: #fff;
        }
        &.black{
          background-color: var(--title-color);
          color: #fff;
        }
      }
    }
    .fav {
      position: absolute;
      top: 17px;
      right: 20px;
      z-index: 2;
      transition: 0.35s;
      line-height: 1;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--white-color);
      svg {
        fill: var(--title-color);
        transition: 0.35s;
      }

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

    .slider-btn-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      transition: 0.35s;
      opacity: 0;

      .swiper-arrow {
        height: 26px;
        width: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(#13141A, 0.6);
        cursor: pointer;
        transition: 0.35s;

        svg {
          fill: var(--white-color);
          transition: 0.35s;
        }

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

      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50.27%);
      transition: 0.35s;
      opacity: 0;
      border-radius: 5px 5px 0 0;
    }

    img {
      border-radius: 5px 5px 0 0;
      @include md-down-device() {
        width: 100%;
      }
    }
  }
  .product-content{
    padding: 25px 15px 15px;
    @include fifteen-down-device() {
      padding: 25px 10px 15px;
    }
    .location{
      margin-bottom: 7px;
      a{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        line-height: 1;
        font-weight: 600; 
        display: flex;
        align-items: center;
        gap: 4px;
        transition: 0.35s;
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    h6{
      margin-bottom: 14px; 
      a{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600;
        transition: 0.35s;
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 5px;
      position: relative;
      padding-bottom: 15px;
      padding-top: 12px;
      margin-bottom: 30px;
      flex-wrap: wrap;
      

      &::after {
        content: '';
        background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.20) 100%);
        position: absolute;
        left: 50%;
        height: 1px;
        width: 100%;
        bottom: 0;
        transform: translateX(-50%);
      }
      &::before {
        content: '';
        background: radial-gradient(50% 50.00% at 50% 50.00%, #EEE 0%, rgba(238, 238, 238, 0.20) 100%);
        position: absolute;
        left: 50%;
        height: 1px;
        width: 100%;
        top: 0;
        transform: translateX(-50%);
      }

      li {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        color: var(--text-color);
        margin-right: 15px;

        @include fifteen-down-device() {
          font-size: 12px;
        }
      }
    }
    .button-and-price{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .primary-btn3{
        font-size: 14px;
        font-family: var(--font-montserrat);
        padding: 13px 17px;
      }
      .price-area{
        line-height: 1;
        position: relative;
        padding-left: 12px;
        span{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 12px;
          font-weight: 600; 
          line-height: 1;
          display: inline-block;
          margin-bottom: 10px;
        }
        h6{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 18px;
          font-weight: 700;  
          margin-bottom: 0;
          line-height: 1;
        }
        del{
          color: var(--text-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 600;
          padding-top: 8px;
          display: inline-block;
        }
      }
    }
  }
  &.style-2{
    .product-content{
      h6{
        margin-bottom: 0px; 
      }
      .exp-date{
        display: flex;
        p{
          margin-bottom: 14px;
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;
          span{
            color: var(--title-color);
            display: inline-block;
            padding-left: 40px;
            position: relative;
            &::after{
              content: '';
              height: 2px;
              width: 20px;
              opacity: 0.20000000298023224;
              background: #5E5E5E;
              position: absolute;
              top: 50%;
              left: 10px;
            }
          }
        }
      }
      .button-and-price{
        .primary-btn3{
          font-size: 15px;
          font-family: var(--font-montserrat);
          padding: 5px 18px;
        }
      }
    }
  }
  &:hover {
    border-color: var(--primary-color1);

    .product-img {
      .number-of-img {
        opacity: 1;
      }

      .fav {
        opacity: 1;
      }

      .slider-btn-group {
        opacity: 1;
      }

      &::after {
        opacity: 1;
      }
    }
  }
  &.style-3{
    .product-img {
      position: relative;
      transition: 0.35s;
      .fav {
        &:hover {
          background-color: var(--title-color);
          svg{
            fill: var(--white-color);
          }
        }
      }
      .slider-btn-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        transition: 0.35s;
        opacity: 0;
  
        .swiper-arrow {
          &:hover {
            background-color: var(--title-color);
          }
  
        }
      }
    
    }
    .product-content{
      .location{
        a{
          &:hover{
            color: var(--title-color);
          }
        }
      }
      h6{
        a{
          &:hover{
            color: var(--title-color);
          }
        }
      }
      .button-and-price{
        .primary-btn7{
          padding: 11px 14px;
        }
      }
    }
    &:hover {
      border-color: var(--title-color);
  
      .product-img {
        .number-of-img {
          opacity: 1;
        }
  
        .fav {
          opacity: 1;
        }
  
        .slider-btn-group {
          opacity: 1;
        }
  
        &::after {
          opacity: 1;
        }
      }
    }
  }
}

.slider-btn-pagination{
  display: flex;
  align-items: center;
  gap: 15px;
  .slider-btn{
    line-height: 1;
    i{
      line-height: 1;
      font-size: 24px;
      vertical-align: -webkit-baseline-middle;
      color: var(--title-color);
      transition: 0.35s;
      &:hover{
        color: var(--primary-color1);
      }
    }
  }
  .pagination{
    width: unset;
    .swiper-pagination-bullet{
      height: 8px;
      width: 8px;
      background-color: #E9E9E9;
      opacity: 1;
    }
    .swiper-pagination-bullet-active{
      height: 10px;
      width: 10px;
      background-color: var(--primary-color1);
    }
  }
}
/*=====================================
   31. Home4 Latest Car Section
========================================*/
.home4-featured-project-section{
  background: #FAF8FB;
}

.used-car-filter-area{
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: none;
    li{
      .nav-link{
        padding: 0;
        border: none;
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 500;
        border-radius: 25px;
        padding: 10px 20px;
        line-height: 1;
        &.active{
          background-color: var(--title-color);
          color: var(--white-color);
        }
      }
    }
  }
}
.home4-recent-project-area{
    .tab-and-slider-btn-group{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    flex-wrap: wrap;
    @include sm-down-device(){
      gap: 20px;
    }
    .explore-more-btn{
      position: relative;
      
      &::after{
        content: '';
        width: 1px;
        height: 34px;   
        opacity: 0.2;
        background: #16191E;  
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        @include sm-down-device(){
          display: none;
          visibility: hidden;
        }      
      }
    }
  }
  .nav-tabs {
    border-bottom: unset;
    flex-wrap: nowrap;
    gap: 5px;
    @include md-down-device(){
      flex-wrap: wrap;
    }
    li {
      padding: 0;

      button {
        padding: 8px 15px;
        border: none;
        font-family: var(--font-open-sans);
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
        color: var(--title-color);
        border-radius: 0;
        border: 1px solid transparent;
        border-radius: 50px;
        &.active {
          color: var(--white-color);
          background-color: var(--title-color);
          border-color: var(--title-color);
        }
      }
    }
  }
}
/*=====================================
   32. Home4 Inner Banner Section
========================================*/
.home4-inner-banner-section{
  background: #13141A;
  position: relative;
  .section-title-2{
    max-width: 600px;
    width: 100%;
      h2{
        color: var(--white-color);
        margin-bottom: 12px;
      }
      p{
        color: var(--white-color);
        margin-bottom: 40px;
      }
      .sell-btn-and-contact-info{
        display: flex;
        align-items: center;
        gap: 30px;
        @include sm-down-device(){
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }
        .primary-btn3{
          color: var(--title-color);
          padding: 15px 21px;
          svg{
            fill: var(--title-color);
          }
          &:hover{
            &::after{
              background-color: var(--white-color);
            }
          }
        }
        >span{
          color: rgba(#fff, .5);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;      
        }
        .hotline-area {
          display: flex;
          align-items: center;
          gap: 20px;
  
          .icon {
            position: relative;
  
            &::after {
              content: '';
              width: 1px;
              height: 40px;
              background-color: rgba(#fff, 0.2);
              position: absolute;
              right: -11px;
              top: 50%;
              transform: translateY(-50%);
            }
  
            svg {
              fill: var(--primary-color1);
            }
          }
  
          .content {
            line-height: 1;
  
            span {
              color: #B3B3B3;
              font-size: 14px;
              font-family: var(--font-open-sans);
              font-weight: 600;
              line-height: 1;
              display: inline-block;
              margin-bottom: 10px;
            }
  
            h6 {
              margin-bottom: 0;
              line-height: 1;
  
              a {
                color: var(--primary-color1);
                font-size: 20px;
                font-family: var(--font-montserrat);
                font-weight: 600;
                line-height: 1;
                transition: .35s;
  
                &:hover {
                  color: var(--white-color);
                }
              }
            }
  
          }
        }
      }
  }
  .inner-banner-img {
    position: absolute;
    right: 0;
    bottom: 0;
    @include xxl-down-device(){
      max-width: 600px;
    }
    @include xl-down-device(){
      display: none;
      visibility: hidden;
    }
  }
  .inner-banner-img2{
    position: relative;
    z-index: 1;
    width: 100%;
    @include xl-down-device(){
      display: none;
      visibility: hidden;
    }
    .banner-img{
      position: absolute;
      bottom: -78px;
      right: 0;
      z-index: 2;
      @include xl-down-device(){
        display: none;
        visibility: hidden;
      }
    }
    &::after{
      content: '';   
      width: 304px;
      height: 304px; 
      border-radius: 304px;
      background: #2D2929;     
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }
  }

  &.style-2{
    background-color: transparent;
    height: 375px;
    display: flex;
    align-items: center;
    @include xl-down-device(){
      height: unset;
      background-color: var(--black-color2);
      padding: 80px  0;
    }
    &::after{
      content: '';
      height: 100%;
      width: 100%;
      background-color: var(--black-color2);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: -1;
      @include xl-down-device(){
        display: none;
        visibility: hidden;
      }
    }
    .section-title-2{
      max-width: 600px;
      width: 100%;
        h2{
          color: var(--white-color);
          margin-bottom: 12px;
        }
        p{
          color: var(--white-color);
          margin-bottom: 40px;
        }
        .sell-btn-and-contact-info{
          display: flex;
          align-items: center;
          gap: 30px;
          @include sm-down-device(){
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
          }
          .primary-btn6{
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.30);
            color: var(--white-color);
            padding: 9px 24px;
            svg{
              fill: var(--white-color);
            }
            &:hover{
              color: var(--title-color);
              svg{
                fill: var(--title-color);
              }
              &::after{
                background-color: var(--white-color);
              }
            }
          }
          >span{
            color: rgba(#fff, .5);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 600;      
          }
          .hotline-area {
            display: flex;
            align-items: center;
            gap: 20px;
    
            .icon {
              position: relative;
    
              &::after {
                content: '';
                width: 1px;
                height: 40px;
                background-color: rgba(#fff, 0.2);
                position: absolute;
                right: -11px;
                top: 50%;
                transform: translateY(-50%);
              }
    
              svg {
                fill: var(--white-color);
              }
            }
    
            .content {
              line-height: 1;
    
              span {
                color: #B3B3B3;
                font-size: 13px;
                font-family: var(--font-open-sans);
                font-weight: 600;
                line-height: 1;
                display: inline-block;
                margin-bottom: 10px;
              }
    
              h6 {
                margin-bottom: 0;
                line-height: 1;
    
                a {
                  color: var(--white-color);
                  font-size: 20px;
                  font-family: var(--font-montserrat);
                  font-weight: 600;
                  line-height: 1;
                  transition: .35s;
    
                  &:hover {
                    color: var(--white-color);
                  }
                }
              }
    
            }
          }
        }
    }
  }
}
/*=====================================
   33. Home5 banner Section
========================================*/
.home5-banner-area{
  position: relative;
  border-radius: 30px;
  @include md-down-device(){
    border-radius: 0;
  }
  .paginations111{
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
    width: unset;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    .swiper-pagination-bullet{
      position: relative;
      opacity: 1;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background-color: transparent;
      border: 1px solid rgba(#fff, .5);
      &::after{
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(#fff, .5);
      }
      &.swiper-pagination-bullet-active{
        border-color: var(--primary-color1);
        &::after{
          background-color: var(--primary-color1);
        }
      }
    }
  }
  .banner-bg{
    height: 633px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 30px;
    @include md-down-device(){
      border-radius: 0;
    }
  }
  .banner-content {
    max-width: 970px;
    width: 100%;
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50% );
    z-index: 2;
  
    h1 {
      font-family: var(--font-montserrat);
      font-style: normal;
      font-weight: 700;
      font-size: 75px;
      line-height: 1.2;
      color: var(--white-color);
      margin-bottom: 8px;

      @include xxl-down-device() {
        font-size: 60px;
      }

      @include sm-down-device() {
        font-size: 50px;
      }
    }

    p {
      font-family: var(--font-open-sans);
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 1.7;
      color: var(--white-color);
      margin-bottom: 40px;
    }

    .banner-content-bottom {
      display: flex;
      justify-content: center;
      gap: 55px;

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 15px;
      }

      .rating {
        a {
          display: inline-block;

          .review-top {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 8px;

            .star {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 5px;

                li {
                  line-height: 1;

                  i {
                    font-size: 12px;
                    color: #DDA701;
                  }
                }
              }
            }
          }

          .content {
            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 18px;

              li {
                font-family: var(--font-open-sans);
                font-weight: 400;
                font-size: 14px;
                line-height: 1;
                color: var(--white-color);
                position: relative;

                span {
                  font-weight: 600;
                }

                &::after {
                  content: '';
                  height: 10px;
                  width: 1px;
                  background-color: var(--white-color);
                  position: absolute;
                  left: -10px;
                  top: 50%;
                  transform: translateY(-50%);
                }

                &:first-child {
                  &::after {
                    display: none;
                    visibility: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.home5-about-area{
  .about-content-wrap{
    @include lg-up-device(){
      padding-right: 50px;
    }
    >h6{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      padding-top: 20px;
      margin-bottom: 5px;
    }
    p{
      color: var(--text-color);
      line-height: 30px;
    }
  
    .author-area{
      padding-top: 20px;
      img{
        margin-bottom: 15px;
      }
      .author-name-deg{
        line-height: 1;
        h6{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;   
          margin-bottom: 5px;  
        }
        span{
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
  .activetis{
    border-radius: 10px;
    border: 1px solid #EEE;  
    padding: 15px 40px;
    position: relative;
    @include xl-device(){
      padding: 15px 25px;
    }
    &::after{
      content: '';
      height: 96%;
      width: 2px;
      background-color: var(--primary-color1);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .single-activiti{
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 16px;
      border-bottom: 1px solid #eee;
      padding: 25px 0;
      &:last-child{
        border-bottom: none;
      }
      .icon{
        line-height: 1;
      }
      .content{
        line-height: 1;
        .number{
          display: flex;
          align-items: center;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          h5{
            margin-bottom: 0;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 0;
        }
      }
    }
  }
}

/*=====================================
   34. Home5 Brand Category Section
========================================*/
.home5-brand-category-area{
  border-radius: 30px;
  background: #FAF8FB;
  .slider-btn-group2{
    max-width: 90px;
    min-width: 90px;
    width: 100%;
  }
}
.single-category5{
  border-radius: 10px;
  border: 1px solid #EEE;
  background: var(--white-color);
  padding: 25px;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
  .category-icon{
    margin-bottom: 20px;
  }
  .category-content{
    border-bottom: 1px solid #EEE;
    padding-bottom: 10px;
    margin-bottom: 20px;
    h5{
      margin-bottom: 0;
      line-height: 1;
      a{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 18px;
        font-weight: 600;    
        transition: 0.35s;
        &:hover {
          color: var(--primary-color1);
        }
      }
    }
    span{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
    }
  }
  .explore-btn5{
    a{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      gap: 10px;
      align-items: center;
      transition: 0.35s;     
      i{
        height: 24px;
        min-width: 24px;
        max-width: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--primary-color1);
        color: var(--title-color);
        background-color: var(--primary-color1);
        font-size: 20px;
        transform: rotate(-45deg);
        transition: 0.35s;
      }
    }
  }
  &:hover{
    border-color: var(--primary-color1);
    .explore-btn5{
      a{
          i{
            background-color: var(--primary-color1);
            transform: rotate(0deg);
          }
      }
    }
  }
}
/*=====================================
   35. Home5 Featured Project Section
========================================*/
.home5-featured-project-area{
  .slider-and-explore-btn-group{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    flex-wrap: wrap;
    .explore-more-btn {
      position: relative;
      &::after {
        content: "";
        width: 1px;
        height: 34px;
        opacity: 0.2;
        background: #16191E;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }   
  }
}
/*=====================================
   36. Home5 About Section
========================================*/
.home5-why-neckle-area{
  border-radius: 30px;
  background-image: url(../img/home5/home5-why-choose-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  .neckle-content{
    max-width: 520px;
    width: 100%;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      .single-feature{
        display: flex;
        align-items: flex-start;
        gap: 25px;
        margin-bottom: 20px;
        transition: 0.35s;
        &:last-child{
          margin-bottom: 0;
        }
        .feature-icon{
          min-width: 59px;
          max-width: 59px;
          height: 59px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          border: 1px solid rgba(22, 25, 30, 0.10);
          background: #FFF;   
          position: relative;
          transition: 0.35s;
          svg{
            fill: var(--primary-color1);
            transition: 0.35s;
          }
          &:hover{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
            svg{
              fill: var(--white-color);
            }
          }
        }
        .feature-content{
          h5{
            margin-bottom: 5px;
            color: #000;
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 500;  
          }
          p{
            margin-bottom: 0;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 15px;
            font-weight: 400;
            line-height: 26px;    
          }
        }
        &:hover{
          .feature-icon{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
            svg{
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }

  .neckle-img-group{
    display: flex;
    align-items: flex-end;
    gap: 30px;
    @include sm-down-device(){
      gap: 15px;
    }
    .left-img-group{
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 30px;
      @include sm-down-device(){
        gap: 15px;
      }
      .logo-area {
        position: absolute;
        left: 88%;
        top: 38%;
        height: 102px;
        width: 102px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        @include xxl-down-device(){
          left: 86%;
          top: 36%;
        }
        @include xl-down-device(){
          left: 82%;
          top: 34%;
        }
        @include lg-down-device(){
          left: 88%;
          top: 38%;
        }
        &::after{
            content: "";
            background-color: #16191E;
            border: 6px solid var(--primary-color1);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transform: rotate(45deg);
            z-index: -1;
            border-radius: 5px;
        }
      }
      .choose-img-1{
        img{
          border-radius: 10px;
        }
      }
    }
    .right-img{
      .choose-img-3{
        img{
          border-radius: 10px;
        }
      }
    }
  }
}
.slider-btn-and-exp-btn{
  display: flex;
  align-items: center;
  gap: 40px;
  .slider-btn-group2 {
    max-width: 90px;
    min-width: 90px;
  }
}
/*=====================================
   37. Home5 Testimonial Section
========================================*/
.home5-testimonial-section{
  border-radius: 30px;
  background: #F6F6F6;
  .rating {
    min-width: 270px;

    a {
      display: inline-block;
      border-radius: 10px;
      border: 1px solid #EEE;
      padding: 10px 20px 15px;

      .review-top {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 8px;

        .star {
          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 5px;

            li {
              line-height: 1;

              i {
                font-size: 12px;
                color: #DDA701;
              }
            }
          }
        }
      }

      .content {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 18px;

          li {
            font-family: var(--font-open-sans);
            font-weight: 400;
            font-size: 14px;
            line-height: 1;
            color: var(--text-color);
            position: relative;

            span {
              font-weight: 600;
            }

            &::after {
              content: '';
              height: 10px;
              width: 1px;
              background-color: var(--text-color);
              position: absolute;
              left: -10px;
              top: 50%;
              transform: translateY(-50%);
            }

            &:first-child {
              &::after {
                display: none;
                visibility: hidden;
              }
            }
          }
        }
      }
    }
  }

  .feedback-card {
    padding: 40px 30px;
    background: var(--white-color);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: 0.35s;
    border: 1px solid #eee;

    .feedback-top {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 15px;

      .stat-area {
        display: flex;
        flex-direction: column;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 5px;
          padding-top: 7px;
          margin-bottom: 5px;

          li {
            line-height: 1;

            i {
              font-style: 13px;
              color: #DDA701;
            }
          }
        }

        img {
          margin-bottom: 5px;
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 19px;
          color: var(--title-color);
        }
      }

      .services {
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 19px;
          color: var(--title-color);
        }
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 32px;
      color: var(--text-color);
      margin-bottom: 23px;
      text-align: center;
    }

    .author-name {
      display: flex;
      align-items: center;
      justify-content: center;

      h6 {
        margin-bottom: 0;
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 18px;
        line-height: 17px;
        color: var(--title-color);
        position: relative;
      }
    }

    &:hover {
      border-color: var(--primary-color1);
    }
  }
  .trustpilot-review {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    >strong {
      font-family: var(--font-montserrat);
      font-weight: 600;
      font-size: 18px;
      line-height: 22px;
      color: var(--black-color);
    }

    p {
      font-family: var(--font-open-sans);
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: var(--text-color);
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;

      strong {
        font-weight: 600;
      }

      a {
        color: var(--text-color);
        text-decoration: underline;
      }
    }
  }
}
/*=====================================
  38. Home6 Banner Section
========================================*/
.home6-banner-area{
  background-image: url(../img/home6/banner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 95px 8% 130px;
  
  @include xxl-device() {
    padding: 95px 3% 130px;
  }

  @include xxl-down-device() {
    padding: 95px 3% 130px;
  }
  @include sm-down-device() {
    padding: 95px 0% 130px;
  }
  .banner-content {
    >span{
      color: var(--black-color2);
      font-family: var(--font-montserrat);
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
      display: inline-block;
      position: relative;
      &::after{
      content: '';
      position: absolute;
      right: -70px;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      width: 51px;    
      background-color: rgba(#1d1d1d, .15);  
    }
    }
    h1 {
      font-family: var(--font-montserrat);
      font-style: normal;
      font-weight: 700;
      font-size: 75px;
      line-height: 1.2;
      color: var(--title-color);
      margin-bottom: 15px;

      @include xxl-down-device() {
        font-size: 60px;
      }

      @include sm-down-device() {
        font-size: 50px;
      }
    }

    p {
      font-family: var(--font-open-sans);
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 1.7;
      color: var(--text-color);
      margin-bottom: 40px;
    }

    .banner-content-bottom {
      display: flex;
      gap: 55px;

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 15px;
      }
      .primary-btn7{
        padding: 18px 28px;
      }
      .rating {
        a {
          display: inline-block;

          .review-top {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 8px;

            .star {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 5px;

                li {
                  line-height: 1;

                  i {
                    font-size: 12px;
                    color: #DDA701;
                  }
                }
              }
            }
          }

          .content {
            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 18px;

              li {
                font-family: var(--font-open-sans);
                font-weight: 400;
                font-size: 14px;
                line-height: 1;
                color: var(--title-color);
                position: relative;

                span {
                  font-weight: 600;
                }

                &::after {
                  content: '';
                  height: 10px;
                  width: 1px;
                  background-color: var(--title-color);
                  position: absolute;
                  left: -10px;
                  top: 50%;
                  transform: translateY(-50%);
                }

                &:first-child {
                  &::after {
                    display: none;
                    visibility: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .banner-img-group{
    .top-img-group{
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 15px;
      margin-bottom: 15px;
      .top-left-card{
        background-color: var(--white-color);
        border: 1px solid #eee;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 195px;
        width: 195px;
        border-radius: 73px 73px 0px 70px;
        position: relative;
        &::after{
          content: url('../img/home6/icon/banner-shep.svg');
          position: absolute;
          left: -45px;
          top: -22px;
          @include sm-down-device(){
            display: none;
            visibility: hidden;
          }
        }
        .icon{
          margin-bottom: 20px;
        }
        h4{
          color: var(--black-color2);
          text-align: center;
          font-family: var(--font-montserrat);
          font-size: 22px;
          margin-bottom: 5px;
          font-weight: 600;  
          line-height: 1;
        }
        span{
          color: var(--text-color);
          text-align: center;
          font-family: var(--font-open-sans);
          font-size: 16px;
          font-weight: 600;   
          line-height: 1;     
        }
      }
      .top-right-img{
        img{
          border-radius: 73px 73px 73px 0;
        }
      }
    }
    .bottom-img-group{
      display: flex;
      gap: 15px;
      .bottom-left-img{
        img{
          border-radius: 73px 0 73px 73px;
        }
      }
      .bottom-right-img{
        img{
          border-radius: 0 73px 73px 73px;
        }
      }
    }
  }
}
/*=====================================
  39. Home6 Search Section
========================================*/
.home6-search-area{
  margin-top: -70px;
  position: relative;
  z-index: 99;
  form{
    border-radius: 10px;
    border: 1px solid rgba(29, 29, 29, 0.10);
    background: var(--white-color);    
    padding: 22px 40px 30px;
    @include xl-down-device(){
      padding: 22px 20px 30px;
    }
    .form-inner{
      width: 100%;
      gap: 15px;
      button{
        justify-content: center;
        background-color: var(--black-color2);
        color: var(--white-color);
        border: 1px solid var(--black-color2);
        padding: 17px 32px;
        svg{
          fill: var(--white-color);
        }
        &::after{
          background-color: var(--white-color);
        }
        &:hover{
          color: var(--black-color2);
          svg{
            fill: var(--black-color2);
          }
        }
      }
      label{
        color: var(--black-color2);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;  
        line-height: 1;
        display: inline-flex;
        margin-bottom: 12px;
      }
      .nice-select {
        padding: 0px 20px;
        &::after{
          right: 23px;
        }
        &:focus{
          border-color: var(--title-color);
        }
        .list{
          option{
            padding-left: 20px;
            padding-right: 20px;
          }
        }
      }
    }
  }
  &.two{
    form{
      border-radius: 10px;
      border: 1px solid rgba(29, 29, 29, 0.10);
      background: var(--white-color);    
      padding: 22px 40px 30px;
      @include xl-down-device(){
        padding: 22px 20px 30px;
      }
      .form-inner{
        width: 100%;
        gap: 15px;
        label{
          color: var(--title-color);
        }
        
        button{
          justify-content: center;
          padding: 17px 32px;
          line-height: 1;
          &.primary-btn3{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
            color: var(--title-color1);
          }
        }
        .nice-select {
          &:focus{
            border-color: var(--primary-color1);
          }
        }
      }
    }
  }
}
.home6-filter-area{
  position: relative;
  padding: 12px 0;
  gap: 20px;
  @include md-down-device(){
    flex-wrap: wrap;
  }
  &::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.20) 100%);
  }
  &::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.20) 100%);
  }
  .nav-tabs{
    border: none;
    gap: 15px;
    .nav-item{
      border: none;
      .nav-link{
        padding: 0;
        line-height: 1;
        border: none;
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;
        border-radius: 25px;
        padding: 9px 20px;
        border: 1px solid transparent;
          background: transparent;
        &:focus-visible{
          outline: none;
        }
        &.active{
          border: 1px solid #EEE;
          background: #F8F8F8;
          color: var(--black-color2);
        }
      }
    }
  }
}
/*=====================================
   40. Home6 Brand Category Section
========================================*/
.home6-apartment-section{
  background-image: url(../img/home6/home6-apartment-bg.png);
  .car-category {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #FFF;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .35s;

    @include sm-down-device() {
      padding: 25px 20px;
    }



    .icon {
      margin-bottom: 20px;
      transition: .35s;
      svg{
        fill: var(--title-color);
        transition: .35s;
      }
    }

    .content {
      line-height: 1;
      transition: .35s;

      h6 {
        color: var(--title-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 2px;
        line-height: 20px;
        transition: .35s;
      }

      span {
        color: var(--text-color);
        font-size: 14px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        margin-bottom: 0;
        line-height: 20px;
        transition: .35s;
      }
    }
    &:hover {
      border: 1px solid var(--title-color);
      background-color: var(--title-color);
      .icon{
        svg{
          fill: var(--white-color);
        }
      }
      .content {
        line-height: 1;
  
        h6 {
          color: var(--white-color);
        }
  
        span {
          color: var(--white-color);
        }
      }
    }
  }
  .our-activetis {
    padding: 40px 0 0;
    border-top: 1px solid rgba(#13141A, 0.1);

    .single-activiti {
      display: flex;
      align-items: center;
      gap: 20px;

      .content {
        .number {
          display: flex;
          align-items: center;
          font-family: var(--font-montserrat);
          font-weight: 700;
          font-size: 20px;
          line-height: 24px;
          color: var(--title-color);
          margin-bottom: 4px;

          h5 {
            margin-bottom: 0;
            line-height: 1;
          }
        }

        p {
          margin-bottom: 0;
          color: var(--text-color);
          line-height: 22px;
        }
      }
    }
  }
  .divider {
    position: relative;
    &::after {
      height: 41px;
      width: 1px;
      background-color: rgba(#1D1D1D, 0.16);
      position: absolute;
      right: 0;
      top: 50%;
      left: unset;
      transform: translateY(-50%);

      @include md-down-device() {
        display: none;
        visibility: hidden;
      }
    }
  }
}
/*=====================================
   41. Home6 About Section
========================================*/
.home6-about-area{
  .about-content-wrap{
    @include lg-up-device(){
      padding-right: 35px;
    }
    .section-title1{
      span{
        color: var(--text-color);   
      }
    }
    .about-features{
      margin: 0;
      padding: 0;
      list-style: none;
      padding-top: 45px;
      margin-bottom: 50px;
      .single-features{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        transition: 0.35s;
        position: relative;
        padding: 20px 0;
        &::after, &::before{
          content: '';
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &::before{
          bottom: unset;
          top: 0;
        }
        .icon-content{
          display: flex;
          align-items: center;
          gap: 15px;
          .icon{
            line-height: 1;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
              transition: 0.35s;
              .vector{
                fill: rgba(#16191E, .1);
              }
            }
          }
          .content{
            line-height: 1;
            h6{
              color: #000;
              font-family: var(--font-montserrat);
              font-size: 16px;
              font-weight: 600; 
              margin-bottom: 0;
            }
            p{
              font-size: 14px;
              line-height: 22px;
              color: var(--text-color);
              margin-bottom: 0;
            }
          }
        }
        .sent-btn{
          a{
            width: 30px;
            height: 30px;    
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:#FAF8FB;
            border-radius: 50%;
            transition: 0.35s;
            svg{
              fill: var(--title-color);
            }
          }
        }
        &:hover{
          .icon-content{
            .icon{
              svg{
                fill: var(--title-color);
                .vector{
                  fill: var(--title-color);
                }
              }
            }
          } 
          .sent-btn{
            a{
              background-color: var(--title-color);
              svg{
              fill: var(--white-color);
              }
            }
          }
        }
      }
    }
  }
  .about-right{
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;
    }
    .about-img{
      padding-top: 25px;
      img{
        border-radius: 10px;
      }
    }
  }
}
.eg-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  thead{
    tr{
      th{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600;
        padding: 8px 20px;
        border-width: 1px;
        border-color: rgba(#eee, .93);
        background-color: #FAF8FB;
      }
    }
  }
  tbody{
    tr{
      td{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400; 
        padding: 8px 20px;
        border-width: 1px;
        border-color: rgba(#eee, .93);  
        strong{
          font-weight: 600;
        }
        .primary-btn2{
          padding: 5px 22px;
        }  
      }
    }
  }
  &.compare-table{
    thead{
      tr{
        th{
          @include sm-down-device(){
            &:first-child{
              display: none;
              visibility: hidden;
            }
          }
        }
      }
    }
    tbody{
      tr{
        td{
          width: 33.33%;
          @include sm-down-device(){
            width: 50%;
            &:first-child{
              display: none;
              visibility: hidden;
            }
          }
        }
      }
    }
  }
}
.compare-modal{
  .modal-header{
    .modal-title{
      font-size: 22px;
      font-weight: 700;
      font-family: var(--font-montserrat);
    }
    .btn-close{
      padding: 0;
      margin: 0;
      height: 34px;
      width: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--primary-color1);
      opacity: 1;
      background-image: none;
      i{
        line-height: 1;
        font-size: 22px;
      }
      &:focus{
        box-sizing: none;
      }
    }
  }
  .compare-top {
    background: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    padding: 30px 15px;

    .single-car {
      .content {
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 12px;
          line-height: 1;
          color: var(--text-color);
        }

        h6 {
          margin-bottom: 0;

          &.title {
            margin-bottom: 5px;

            a {
              font-family: var(--font-montserrat);
              font-weight: 600;
              font-size: 16px;
              line-height: 20px;
              color: var(--title-color);
              transition: .35s;

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

            }
          }

          &.price {
            font-family: var(--font-montserrat);
            font-weight: 600;
            font-size: 20px;
            line-height: 17px;
            color: var(--title-color);
          }
        }
      }
    }

    .vs {
      padding: 0 12px;
      transform: translateY(-40px);

      span {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color1);
        font-family: var(--font-montserrat);
        font-weight: 500;
        font-size: 12px;
        color: var(--black-color);

        &::after {
          content: '';
          height: 90px;
          width: 1px;
          background-color: var(--primary-color1);
          position: absolute;
          bottom: -90px;
        }

        &::before {
          content: '';
          width: 9px;
          height: 1px;
          background-color: var(--primary-color1);
          position: absolute;
          bottom: -90px;
        }
      }
    }
  }
  .compare-btm{
    width: 100%;
  }
  &.two{
    .modal-header{
      .btn-close{
        background-color: var(--black-color);
        i{
          color: var(--white-color);
        }
      }
    }
    .compare-top {
      .single-car {
        .content {
          h6 {
            &.title {
              a {
                &:hover {
                  color: var(--title-color);
                }
              }
            }
          }
        }
      }
  
      .vs {
        padding: 0 12px;
        transform: translateY(-40px);
  
        span {
          background-color: var(--black-color);
          color: var(--white-color);
  
          &::after {
            background-color: var(--black-color);
          }
  
          &::before {
            background-color: var(--black-color);
          }
        }
      }
    }
    .compare-btm{
      width: 100%;
    }
    tbody{
      tr{
        td{ 
          .primary-btn2{
            background-color: var(--black-color);
            padding: 5px 22px;
            color: var(--white-color);
            border: 1px solid var(--black-color);
            &::after{
              background-color: var(--white-color);
            }
            &:hover{
              color: var(--black-color);
            }
          }  
        }
      }
    }
  }
}
/*=====================================
   42. Inner Pages Banner
========================================*/
.inner-page-banner{
  background-image: linear-gradient(rgba(#000, 0.25),rgba(#000, 0.25)), url(../img/inner-page/inner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 150px 0;
  &.style-2{
    height: 150px;
  }
  &.style-3{
    height: 60px;
  }
  .banner-wrapper{
    padding: 0px 11%;
    @include xxl-device(){
      padding: 0px 3%;
    }
    @include xxl-down-device(){
      padding: 0px 3%;
    }
    @include xl-down-device(){
      padding: 0px 1%;
    }
  }


  .banner-content {
    max-width: 705px;
    width: 100%;
    h1 {
      font-family: var(--font-montserrat);
      font-weight: 700;
      font-size: 50px;
      color: var(--white-color);
      margin-bottom: 20px;
      line-height: 1.2;
      margin-bottom: 0;
      @include sm-down-device() {
        font-size: 50px;
      }
    }
    .breadcrumb-list{
      margin: 0;
      padding: 0;
      padding-top: 25px;
      list-style: none;
      line-height: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      li{
        line-height: 1;
        color: var(--white-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;
        position: relative;
        padding-left: 18px;
       
        &::before{
          content: '';
          height: 1px;
          width: 10px;
          background-color: var(--primary-color1);
          position: absolute;
          left: 0;
          top: 50%;
          opacity: 1;
          z-index: 9;
        }
        &:first-child{
          padding-left: 0;
          &::before{
            display: none;
            visibility: hidden;
          }
        }
        a{
          color: var(--primary-color1);
          transition: 0.35s;
          &:hover{
            color: var(--white-color);
          }
        }
  
      }
    }
    &.style-2{
      .price-model-and-fav-area{
        display: flex;
        align-items: center;
        gap: 100px;
        margin-bottom: 10px;
        @include sm-down-device(){
          flex-direction: column;
          align-items: flex-start;
          gap: 5px;
          margin-bottom: 20px;
        }
        .price-and-model{
          display: flex;
          align-items: center;
          gap: 20px;
          @include sm-down-device(){
            flex-wrap: wrap;
            gap: 2px;
          }
          .price{
            line-height: 1;
            @include sm-down-device(){
              padding-right: 15px;
            }
            h3{
              margin-bottom: 0;
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 30px;
              font-weight: 600;           
            }
          }
          .change-model-btn{
            a{
              display: inline-flex;
              align-items: baseline;
              gap: 6px;
              color: #13141A;
              font-family: var(--font-open-sans);
              font-size: 12px;
              font-weight: 600;
              border-radius: 12px;
              background: #FFF;  
              padding: 6px 15px;
              white-space: nowrap;
              line-height: 1;
            }
          }
        }
        .share-and-fav{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 16px;
          position: relative;
          &::before{
            content: '';
            height: 24px;
            width: 1px;
            background-color: rgba(#13141A, .2);
            position: absolute;
            left: -50px;
            top: 50%;
            transform: translateY(-50%);
            @include sm-down-device(){
              display: none;
              visibility: hidden;
            }
          }
          >li{
            position: relative;
            transition: 0.5s;
            .share-icon{
              height: 30px;
              width: 30px;
              border-radius: 50%;
              background-color: var(--white-color);
              border: 1px solid rgba(#DF0101, .5);
              display: flex;
              align-items: center;
              justify-content: center;
              transition: 0.35s;
              cursor: pointer;
              &:hover{
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
              }
            }
            .social-icons{
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 8px;
              position: absolute;
              left: 38px;
              top: 50%;
              transform: scaleX(0) translateY(-50%);
              transform-origin: left;
              opacity: 0;
              transition: 0.5s;
              >li{
                >a{
                  height: 30px;
                  width: 30px;
                  border-radius: 50%;
                  background-color: var(--white-color);
                  border: 1px solid rgba(#DF0101, .5);
                  display: flex;
                  align-items: center;
                  justify-content: center;   
                  transition: 0.35s;
                  i{
                    transition: 0.35s;
                    color: var(--title-color);
                  }
                  &:hover{
                    background-color: var(--primary-color1);
                    border-color: var(--primary-color1);
                  }
                }
              }

            }
            &:hover{
              .social-icons{
                transform: scaleX(1) translateY(-50%);
                opacity: 1;
              }
            }
          }
        }
      }
      h1{
        @include xxl-down-device(){
          font-size: 45px;
        }
      }
      .location-and-notification{
        margin-bottom: 40px;
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 40px;
          @include md-down-device(){
            gap: 5px;
            flex-wrap: wrap;
          }
          li{
            display: flex;
            align-items: baseline;
            gap: 5px;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 600; 
            @include md-down-device(){
              padding-right: 15px;
            }
            &.alart{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              cursor: pointer;
              button{
                display: flex;
                align-items: baseline;
                gap: 5px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                cursor: pointer;
                font-size: 14px;
                font-weight: 600; 
                background-color: transparent;
                svg{
                  transition: 0.35s;
                }
                &:hover{
                  color: var(--primary-color1);
                  svg{
                    fill: var(--primary-color1);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/*=====================================
   43. Property Map Area
========================================*/
.poperties-map-area{
  #map {
    margin:0 auto;
    width: 100%;
    min-height: 650px;
    // max-height: 100vh;
    border-radius: 10px;
    .gm-style-iw{
      max-width: 280px !important;
      width: 100%;
      padding: 0 !important;
      .gm-style-iw-d{
        overflow: unset !important;
      }
      .gm-ui-hover-effect{
        position: absolute;
        top: 0 !important;
        right: 0 !important;
        background-color: var(--white-color) !important;
        border-radius: 50%;
        border: 1px solid #eee !important;
        z-index: 9;
        opacity: 1 !important;
        transition: 0.35s;
        &:hover{
          background-color: red !important;
          border-color: red !important;
        }
      }
      .product-card{
        .product-img{
          &::after{
            display: none;
            visibility: hidden;
          }
          img{
            max-width: 100% !important;
          }
        }
        .content-btm{
          border-top: 1px solid #eee;
        }
      }

    }

  }
}

/*=====================================
   44. neckle Gallery
========================================*/
.neckle-gallery{

  .gallery-item{
    position: relative;
    border-radius: 10px;
    img{
      border-radius: 10px;
      @include lg-down-device(){
        width: 100%;
      }
    }
    a{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
  }
}
.view-more-btn{
  .primary-btn3{
    font-family: var(--font-montserrat);
    padding: 10px 55px;
  }
}

/*=====================================
   45. Poperty Details Area
========================================*/
.poperty-details-pages{
  .poperty-map-area{
    line-height: 1;
      iframe{
        width: 100%;
        min-height: 480px;
      }
    &.two{
      iframe{
        min-height: 624px;
      }
    }
  }
  .poperty-img-group{
    border-radius: 10px;
    background: #FFF;
    padding: 10px;
    margin-top: -180px;
    .single-img{
      img{
        border-radius: 10px;
        @include lg-down-device(){
          width: 100%;
        }
      }
    }
    .share-and-save{
      margin: 0;
      padding: 0;
      padding-top: 30px;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;
      li{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;  
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: 0.35s;
        svg{
          fill: var(--title-color);
          transition: 0.35s;
        }
        &:hover{
          color: var(--primary-color1);
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
  }
  .poperty-details-content{
    .poperty-info{
      .price{
        display: flex;
        align-items: center;
        gap: 30px;
        margin-bottom: 10px;
        strong{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 30px;
          font-weight: 600;
        }
        span{
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 12px;
          font-weight: 600; 
          line-height: 1;
          background-color: var(--primary-color1);
          border-radius: 5px;
          padding: 6px 12px;
          &.red{
            background-color: #FF5E3A ;
            color: #fff;
          }
          &.black{
            background-color: var(--title-color);
            color: #fff;
          }
        }
      }
      h1{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 45px;
        font-weight: 700;
        line-height: 65px;
        margin-bottom: 15px;
      }
      .location-and-condition{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 35px;
        .location{
          line-height: 1;
          padding-right: 20px;
          a{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 600;      
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
        .condition{
          line-height: 1;
          a{
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 12px;
            font-weight: 600;    
            display: flex;
            align-items: center;
            gap: 4px;
            border-radius: 14px;
            background: #F6EFF7;   
            padding: 7px 16px;
            svg{
              fill: var(--title-color);
            }
          }
        }
      }
      .apt-type-and-feature{
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        border-top: 1px solid #eee;
        border-Bottom: 1px solid #eee;
        padding: 17px 0;
        @include md-down-device(){
          flex-wrap: wrap;
        }
        .apt-type{
          line-height: 1;
          display: flex;
          align-items: center;
          h6{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600; 
            margin-bottom: 0;
            padding-right: 10px;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 600; 
          }
        }
        .features{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 7px;
          flex-wrap: wrap;
          li{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;  
            display: flex;
            align-items: center;
            gap: 8px;
            padding-left: 15px;
            line-height: 1;
            @include md-down-device(){
              padding-left: 0;
              padding-right: 15px;
            }
          }
        }
      }
    }
  }
  .single-item{
    .title{
      line-height: 1;
      h5{
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;
        padding-right: 25px;
      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
    }
    .overview-content {
      display: flex;
      justify-content: space-between;
      border-radius: 10px;
      border: 1px solid #EEE;
      padding: 30px 20px;
      @include md-down-device(){
        flex-direction: column;
        width: 100%;
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        max-width: 47%;
        width: 100%;  
        @include md-down-device(){
          max-width: 100%;
          width: 100%;
          margin-bottom: 20px;
        }
        li{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 15px;
          font-weight: 400;
          display: flex;
          justify-content: space-between;
          line-height: 1;
          position: relative;
          padding: 18px 0 10px;
          span{
            font-family: var(--font-montserrat);
            line-height: 1;
            font-weight: 600;
          }
          &:first-child{
            padding-top: 0;
          }
          &:last-child{
            padding-bottom: 0;
            &::after{
              display: none;
              visibility: hidden;
            }
            @include md-down-device(){
              padding-bottom: 10px;
              &::after{
                display: block;
                visibility: visible;
              }
            }
          }
          &::after{
            content: "";
            height: 1px;
            width: 100%;
            background: radial-gradient(50% 50% at 50% 50%, #EEE 0%, rgba(238, 238, 238, 0) 100%);
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .poperty-feature-wrap{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
    }
    .poperty-feature{
      margin: 0;
      padding: 0;
      list-style: none;
      li{
        display: flex;
        align-items: center;
        gap: 20px;
        line-height: 1;
        margin-bottom: 40px;
        &:last-child{
          margin-bottom: 0;
        }
        .icon{
          width: 40px;
          height: 40px;     
          border: 2px solid rgba(#16191E, 0.2); 
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .content{
          h6{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 400;  
          }
        }
      }
    }
    .kye-features{
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        columns: 3;
        @include md-down-device(){
          columns: 2;
        }
        @include sm-down-device(){
          columns: 1;
        }
        li{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
          line-height: 1;
          display: flex;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 20px;
        }
      }
    }
    .title-and-tab{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      @include sm-down-device(){
        flex-wrap: wrap;
      }
      .nav-tabs{
        border: none;
        gap: 10px;
        li{
          button{
            padding: 0;
            line-height: 1;
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;
            border-radius: 4px;
            border: 1px solid #EEE;  
            padding: 6px 11px;
            transition: 0.35s;
            &:hover{
              border-color: var(--primary-color1);
            }
            &.active{
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
            }
          }
        }
      }
    }
    .tab-content{
      .tab-pane{
        img{
          border-radius: 10px;
        }
      }
    }
    .poperty-video-area{
      position: relative;
      img{
        border-radius: 10px;
      }
      .play-btn{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(#000, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        a{
          width: 76px;
          height: 76px;   
          border: 1px solid #fff;   
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF;
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;    
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
            border-color: var(--primary-color1);
          }
        }
      }
    }
    .faq-wrap{
      border-radius: 10px;
      border: 1px solid #EEE;
      padding: 30px 20px;
    }
    .user-qustion-area{
      .section-title-and-filter{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        .filter-atra{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FFF;
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 6px 6px 6px 20px;
          h6 {
            margin-bottom: 0;
            line-height: 1;
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 500;
          }
          .nice-select {
            height: 30px;
            background-color: var(--primary-color1);
            padding-left: 15px;
            padding-right: 35px;
            &::after {
              border-color: var(--title-color);
              right: 18px;
              height: 7px;
              width: 7px;
            }
            .current {
              color: var(--title-color);
              font-weight: 600;
              font-size: 13px;
            }
          }
        }
      }
      .text-input-area{
        .form-inner {
          border-radius: 10px;
          border: 1px solid var(--primary-color1);
          background: #FFF;
          display: flex;
          padding: 15px 25px;
          textarea {
            border: none;
            outline: none;
            width: 100%;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 400;      
          }
          button {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: var(--primary-color1);
            display: flex;
            align-items: center;
            justify-content: center;
            svg {
              fill: var(--title-color);
            }
          }
        }
      }
    }
    .load-moer-btn {
      margin-top: 50px;
      .primary-btn3 {
        display: flex;
        justify-content: center;
      }
    }
  }
  .poperty-details-sb{
    .author-card{
      border-radius: 10px;
      background: #F6EFF7;
      padding: 40px 35px;
      @include xxl-down-device(){
        padding: 40px 20px;
      }
      .author-area{
        margin-bottom: 30px;
        .author-img{
          margin-bottom: 10px;
          img{
            width: 120px;
            height: 120px;
            border-radius: 50%;
          }
        }
        .name-deg{
          line-height: 1;
          position: relative;
          padding-bottom: 15px;
          &::after{
            content: '';
            height: 1px;
            width: 160px;
            background: radial-gradient(50% 50% at 50% 50%, #DF0101 0%, rgba(239, 185, 63, 0.00) 100%);
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            position: absolute;

          }
          h6{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 5px;
          }
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 12px;
            font-weight: 600; 
          }
        }
        .view-listing-btn{
          color: #000;
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 600;
          line-height: 1;
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      .contact-info{
        background-color: #FAFAFA;
        border-radius: 5px;
        padding: 25px; 
        margin-bottom: 40px;
        .single-contact{
          margin-bottom: 10px;

          &:last-child{
            margin-bottom: 0;
            a{
              span{
                i{
                  color: #F44336;
                }
              }
            }
          }
          a{
            display: flex;
            align-items: center;
            justify-content: space-between;
            span{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 500;
              display: flex;
              align-items: center;
              gap: 10px;
              cursor: pointer;
              transition: 0.35s;
              &:hover{
                color: var(--primary-color1);
              }
            }
            i{
              font-size: 25px;
              color: #00D264;
            }
          }
        }
      }
      .button-group{
        display: flex;
        flex-direction: column;
        gap: 20px;
        .primary-btn3, .primary-btn6{
          justify-content: center;
        }
      }
    }
    .booking-form{
      border-radius: 10px;
      background: #F6EFF7;
      padding: 45px 40px 50px;
      @include xxl-down-device(){
        padding: 45px 20px 50px;
      }
      .title{
        margin-bottom: 25px;
        h5{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700; 
          margin-bottom: 8px;
        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 15px;
          font-weight: 400;  
          line-height: 28px;
          margin-bottom: 0;
        }
      }
      .form-inner{
        position: relative;
        line-height: 1;
        label{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 500;
          display: block;
          margin-bottom: 10px;
           &.containerss {
            display: flex;
            width: 100%;
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            span{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 14px;
              font-weight: 400 !important;
              line-height: 1.4;    
              &.text{
                font-weight: 600;
              }
            }
            input {
              position: absolute;
              opacity: 0;
              cursor: pointer;
              height: 0;
              width: 0;
              &:checked ~ .checkmark {
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
                border-radius: 2px;
                // &::after {
                //   display: block;
                // }
                &::after {
                  content: url(../img/inner-page/icon/checkbox-check.svg);
                  left: 3.5px;
                  top: -6px;
                  position: absolute;
                }
              }
            }   
            .checkmark {
              position: absolute;
              top: 4px;
              left: 0;
              height: 14px;
              width: 14px;
              background-color: var(--primary-color1);
              border: 1px solid var(--primary-color1);
              border-radius: 2px;
            }   
            &:hover{
              input ~ .checkmark {
                border-color: var(--primary-color1);
              }
            }     
        }
        }
        input{
          border-radius: 5px;
          background: var(--white-color);
          color: var(--text-color);
          border: 1px solid #fff;
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;  
          height: 48px;
          width: 100%;
          padding: 10px 20px;
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          &:focus{
            border-color: var(--primary-color1);
          }
        }
        textarea{
          border-radius: 5px;
          background: var(--white-color);
          color: var(--text-color);
          border: 1px solid #fff;
          font-family: var(--font-open-sans);
          font-size: 13px;
          height: 48px;
          width: 100%;
          padding: 20px;
          outline: none;
          border: none;
          min-height: 100px;
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          &:focus{
            border-color: var(--primary-color1);
          }
        }
        .primary-btn3{
          padding: 17px 28px;
          width: 100%;
          justify-content: center;
        }
        .iti {
          width: 100%;
          input{
            padding-left: 62px;
          }
        }
        .iti__selected-flag{
          padding-left: 20px;
        }
        .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
          background-color: transparent;
        }
        .iti__country-list{
          max-width: 280px;
          box-shadow: unset;
          background-color: white;
          border: 1px solid var(--primary-color1);
          .iti__country.iti__highlight{
            background-color: rgba(#DF0101, .5);
            
          }
          li{
            font-family: var(--font-montserrat);
            font-weight: 400;
            span{
              font-family: var(--font-montserrat);
              font-weight: 400;
            }
          }
        }
      }
    }
    .recent-project-wrap{
      background-color: #F6EFF7;
      padding: 30px 40px;
      border-radius: 10px;
      @include xxl-down-device(){
        padding: 30px 20px;
      }
      .widget-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        h5{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 0;
        }
        .slider-btn-group2{
          max-width: 50px;
          min-width: 50px;
          .slider-btn{
            height: 20px;
            width: 20px;
            border: 1px solid #878585;
            svg{
              fill: #878585;
            }
          }
        }
      }
      .product-card {
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: unset;
        .product-content .features::after {
          background-color: #fff;
        }
      }
    }
    .discount-banner{
      background-image: linear-gradient(rgba(#000, .4), rgba(#000, .4)), url(../img/inner-page/discount-img.png);
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      padding: 80px 50px;
      border-radius: 10px; 
      @include xxl-down-device(){
        padding: 50px 25px;
      }
      .discount-content{
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 30px;
        transform: skewY(-4deg);
        position: relative;
        >span{
          color: var(--white-color);
          font-family: var(--font-open-sans);
          font-size: 18px;
          font-style: italic;
          font-weight: 600;
          display: inline-block;
          margin-bottom: 10px;
        }
        h4{
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 26px;
          font-style: italic;
          font-weight: 800;  
          margin-bottom: 0;
          span{
            font-size: 24px;
            font-weight: 700;
          }
        }
        .offer-area{
          max-width: 175px;
          margin-left: auto;
          margin-right: -40px;
          margin-top: 30px;
        
          span{
            background-image: url(../img/inner-page/icon/black-sharp.svg);
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-style: italic;
            font-weight: 700;   
            width: 130px;  
            height: 50px;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            position: relative;
          }
          h3{
            background-image: url(../img/inner-page/icon/red-sharp.svg);
            margin-bottom: 0;
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 35px;
            font-style: italic;
            font-weight: 700;
            width: 171.912px;
            height: 106.681px;
            display: inline-flex;
            align-items: center;
            justify-content: end;
            padding-right: 40px;
            margin-top: -51px;
            margin-left: -20px;   
          }
        }
        .view-btns{
          position: absolute;
          bottom: -18px;
          left: 50%;
          transform: translateX(-50%);
          a{
            padding: 7px 17px;    
          }
        }
      } 
    }
  }
  .poperty-details-top{
    .product-img{
      position: relative;
      img{
        min-height: 350px;
        object-fit: cover;
      }
      .slider-btn-group{
        left: 50%;
        width: 90%;
        top: 50%;
        transform: translate(-50%, -50%);
        .swiper-arrow{
          width: 40px;
          height: 40px; 
          border-radius: 50%; 
          background-color: rgba(#fff, .8);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.35s;
          &:hover{
            background-color: var(--primary-color1);
          }

        }
      }
    }
    .tabbtn-and-social-area{
      background: var(--title-color);
      .nav-tabs{
        border: none;
        line-height: 1;
        flex-wrap: wrap;
        justify-content: center;
        .nav-link{
          padding: 0;
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 600; 
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          width: 185px;
          border: none;
          border-right: 1px solid rgba(#fff, .2);
          padding: 20px 20px;
          border-radius: unset;
          margin-bottom: 0;
          transition: 0.35s;
          &:first-child{
            border-left: 1px solid rgba(#fff, .2);
          }
          @include lg-down-device(){
            border: none !important;
          }
          svg{
            transition: 0.35s;
            fill: var(--white-color);
          }
          &:hover{
            border-top: none;
            border-bottom: none;
          }
          &.active{
            border-radius: unset;
            background-color: var(--primary-color1);
            border: none;
            border-right: 1px solid var(--primary-color1);
            color: var(--title-color);
            svg{
              fill: var(--title-color);
            }
            &:first-child{
              border-left: 1px solid var(--primary-color1);
            }
          }
        }
      }
      .share-and-save{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
        li{
          line-height: 1;
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;
          transition: 0.35s;
          cursor: pointer;
          padding: 13px 0;
          span{
            height: 30px;
            width: 30px;
            border-radius: 50%;   
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            transition: 0.35s;
            svg{
              transition: 0.35s;
              fill: var(--title-color); 
            }
          }
          &:hover{
            span{
              background-color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
}

button{
  white-space: nowrap;
}
.faq-wrap{
  .accordion{
    .accordion-item{
      border-radius: 5px;
      border: 1px solid rgba(238, 238, 238, 0.50);
      background: #FAF8FB;
      margin-bottom: 15px;
      &:last-child{
        margin-bottom: 0;
      }
      .accordion-header{
        background: #FAF8FB;
        .accordion-button{
          background: #FAF8FB;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 15px;
          font-weight: 600;
          padding: 15px 55px 15px 25px;
          @include sm-down-device(){
            padding: 15px 45px 15px 15px;
          }
          &::after{
              flex-shrink: 0;
              width: unset;
              height: unset;
              margin-left: auto;
              background-image: none;
              background-repeat: unset;
              background-size: unset;
              font-family: bootstrap-icons !important;
              position: absolute;
              right: 17px;
              content: "\F282";
              transition: unset;
              font-size: 17px;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 500;
          }
          &:not(.collapsed){
            border: transparent;
            box-shadow: none;    
            background-color: transparent;  
            color: var(--title-color);
            &::after {
              background-image: none;
              transform: unset;
              font-family: bootstrap-icons !important;
              content: "\F286";
              color: var(--title-color);
            }
          }
          &:focus{
            border: transparent;
            box-shadow: none;
          }
        }
        
      }
      .accordion-body{
        padding: 0px 25px 15px 25px;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 28px;
        @include sm-down-device(){
          padding: 0px 15px 15px 15px;
        }
      }
    }
  }
  button{
    white-space: wrap;
  }
}
.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-montserrat);
          font-size: 15px;
          font-weight: 600;
        }
        span{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
        }
      }
      p{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 28px;  
        margin-bottom: 12px;
      }
      .replay-btn{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        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 #eee;
    border-bottom: 1px solid #eee;
    padding: 24px 0;
    >li{
      margin-bottom: 30px;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
}
.car-details-sidebar{
  .auction-info{
    border-radius: 10px;
    border: 1px dashed rgba(19, 20, 26, 0.16);
    padding: 30px 20px;
    .countdown-timer{
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        li{
          svg{
            fill: var(--title-color);
          }
          &.times{
            width: 72px;
            height: 55px; 
            border-radius: 5px;
            border: 1px solid rgba(238, 238, 238, 0.40);
            background: #FAF8FB;   
            color: var(--title-color);
            text-align: center;
            font-family: var(--font-montserrat);
            font-size: 24px;
            font-weight: 700;  
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            // span{
            //   display: block;
            //   color: var(--text-color);
            //   text-align: center;
            //   font-family: var(--font-open-sans);
            //   font-size: 12px;
            //   font-weight: 600;  
            //   line-height: 1; 
            // }
          }
        }
      }
    }
    .bids-amount{
      padding-top: 50px;
      margin-bottom: 50px;
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600; 
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 1;
          margin-bottom: 20px;
          &:last-child{
            margin-bottom: 0;
          }
          strong{
            color: #13141A;
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600;
          }
          span{
            display: inline-block;
            position: relative;
            max-width: 70px;
            height: 1px;
            width: 100%;
            opacity: 0.2;
            background: radial-gradient(50% 50.00% at 50% 50.00%, #13141A 0%, rgba(19, 20, 26, 0.00) 100%);
          }
        }
      }
    }
    .primary-btn3{
      width: 100%;
      justify-content: center;
    }
  }
  .contact-info{
    border-radius: 10px;
    border: 1px dashed rgba(19, 20, 26, 0.16);
    padding: 30px 20px;
    .single-contact{
      margin-bottom: 20px;
      &:last-child{
        margin-bottom: 0;
      }
      a{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;  
        border-radius: 5px;
        background: var(--primary-color1);   
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 10px 20px;
        text-align: center;
        width: 100%;
        cursor: pointer;
        i{
          font-size: 17px;
        }
      }
      &:nth-child(2){
        a{
          background-color: var(--title-color);
          color: var(--white-color);
        }
      }
      &:last-child{
        margin-bottom: 0;
        a{
          background: #00D264;   
          i{
            color: var(--white-color);
          }
        }
      }
    }
  }

  .recent-car-area{
    .nav-tabs {
      border-bottom: 1px solid rgba(#13141A, 0.1);
      margin-bottom: 40px;
      li {
        padding: 0;
  
        button {
          padding: 9px 15px;
          border: none;
          font-family: var(--font-open-sans);
          font-weight: 400;
          line-height: 1;
          font-size: 16px;
          color: var(--title-color);
          border-radius: 0;
  
          &.active {
            color: var(--white-color);
            background-color: var(--title-color);
          }
        }
      }
    }
  }
}

/*=====================================
   46. Product Details Area
========================================*/
.product-details-page{
  .tab-content1{
    .tab-pane{
      border-radius: 10px;
      border: 1px solid rgba(238, 238, 238, 0.93);
      background: #FFF;
      padding: 10px;
      position: relative;
      .offer-batch {
        position: absolute;
        left: 10px;
        top: 10px;
        line-height: 1;
        transition: 0.35s;
        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 12px;
          line-height: 16px;
          color: var(--white-color);
          background: #FF5E3A;
          border-radius: 2px;
          display: inline-block;
          padding: 2px 7px;
        }
      }
      img{
        border-radius: 5px;
        @include lg-down-device(){
          width: 100%;
        }
      }
    }
  }
  .nav1{
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    @include sm-down-device(){
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
    }
    .nav-link{
      border-radius: 10px;
      border: 1px solid rgba(238, 238, 238, 0.93);
      padding: 5px;
      img{
        border-radius: 5px;
      }
      @include sm-down-device(){
        max-width: 130px;
        width: 100%;
      }
      &.active{
        background-color: transparent;
        border-color: var(--primary-color1);
      }
    }
  }
  .product-details-content{
    .product-review2{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      margin-bottom: 8px;
      li{
        line-height: 1;
        i{
          color: #DDA701;
        }
        a{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
          transition: 0.35s;
          line-height: 1;
          padding-left: 8px;
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
    }
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 24px;
      font-weight: 600;
      line-height: 1.4;
      @include sm-down-device(){
        font-size: 20px;
      }
    }
    p{
      margin-bottom: 20px;
      color: var(--text-color);
      line-height: 30px;

    }
    .price-tag{
      line-height: 1;
      margin-bottom: 22px;
      
      h5{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;  
        margin-bottom: 0;
        line-height: 1;
        del{
          color: var(--text-color);
          font-size: 16px;
          font-weight: 500;
          padding-left: 5px;
        } 
      }
    }
    .product-quantity{
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #eee;
      gap: 24px;
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 15px;
      }
      .quantity{
        display: flex;
        align-items: center;
        gap: 8px;
        .quantity__minus, .quantity__plus{
          height: 40px;
          width: 40px;
          border-radius: 5px;
          border: 1px solid #eee;
          background-color: #f3f3f3;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: 0.35s;
          span{
            i{
              font-size: 20px;
              color: var(--title-color);
              transition: 0.35s;
            }
          }
          &:hover{
            background-color: var(--primary-color1);
            border-color: var(--primary-color1);
          }
        }
        .quantity__input{
          height: 40px;
          width: 78px;
          border-radius: 5px;
          border: 1px solid rgba(19, 20, 26, 0.16); 
          color: #13141A;
          text-align: center;
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 600;   
        }
      }
      .primary-btn3{
        padding: 13px 25px;
      }
      .fav{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        background-color: #f3f3f3;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.35s;   
        svg{
          fill: var(--title-color);
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
        }
      }
    }
    .aditional-info{
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 1;
      >li{
        line-height: 1;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 3px;
        &:last-child{
          margin-bottom: 0;
        }
        span{
          color: var(--title-color);
          font-weight: 600;
          display: inline-block;
          margin-right: 5px;
          
        }
        a{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 400;  
          margin-bottom: 15px;   
          transition: 0.35s;
          margin-bottom: 0;
          &:hover{
            color: var(--primary-color1);
          }
        }
        .social-icons{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          line-height: 1;
          gap: 14px;
          padding-left: 5px;
          li{
            margin-bottom: 0;
            line-height: 1;
            a{
              width: 26px;
              height: 26px; 
              display: flex;
              align-items: center;  
              justify-content: center;
              border-radius: 15px;
              border: 1px solid #EEE; 
              transition: 0.35s;
              i{
                color: var(--primary-color1);
                transition: 0.35s;
              }
              &:hover{
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
                i{
                  color: var(--title-color);
                }
              }
            }
          }
        }
      }
    }
  }

  .nav2{
    gap: 45px;
    justify-content: start;
    width: 100%;
    line-height: 1;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 30px;
    .nav-link{
      color: var(--text-color);
      font-family: var(--font-montserrat);
      font-size: 14px;
      font-weight: 600;
      padding: 0;
      line-height: 1;
      background-color: transparent;
      &.active{
        background-color: transparent;
        color: var(--title-color);
        position: relative;
        &::before {
          content: "";
          position: absolute;
          bottom: -21px;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 1px solid #13141A;
          width: 100%;
        }
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: -32px;
          height: 14px;
          width: 14px;
          background-color: var(--white-color);
          transform: rotate(45deg) translateX(-50%);
          border: 1px solid #13141A;
          border-right: none;
          border-bottom: none;
        }
      }
    }
  }
  .tab-content2{
    .description{
      p{
        color: var(--text-color);
        line-height: 30px;
        &:last-child{
          margin-bottom: 0;
        }
      }
      ul{
        list-style: decimal;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        margin: 0;
        padding-left: 17px;
        margin-bottom: 10px;
        li{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 30px;
          margin-bottom: 15px;
          strong{
            font-weight: 600;
          }
        }
      }
    }
    .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-montserrat);
          font-size: 24px;
          font-weight: 600;   
        }
      }
      .comment{
        >li{
          .single-comment-area{
            .comment-content{
              .author-and-review{
                margin-bottom: 8px;
                .author-name-deg{
                  margin-bottom: 7px;
                }
                .review{
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  gap: 5px;
                  line-height: 1;
                  li{
                    line-height: 1;
                    i{
                      color: #DDA701;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .review-form{
      border: 1px solid #eee;
      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-montserrat);
          font-size: 24px;
          font-weight: 600;   
        }
      }
      .form-inner{
        input{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FBF7FB;
          height: 50px;
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;
          padding: 10px 20px;
          width: 100%;    
          &::placeholder{
            color: rgba(#13141A, .5);
          } 
          :focus{
            border: 1px solid #DF0101;
            background: #FFF;
          }
        }
        textarea{
          border-radius: 5px;
          border: 1px solid #EEE;
          background: #FBF7FB;
          min-height: 150px;
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;
          padding: 10px 20px;
          width: 100%;   
          outline: none;  
          &::placeholder{
            color: rgba(#13141A, .5);
          }
          :focus{
            border: 1px solid #DF0101;
            background: #FFF;
          }
        }
      }
      .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-btn3{
        padding: 7px 25px;
        margin-top: 30px;
        font-family: var(--font-montserrat);
      }
    }
  }
  .addithonal-information{
    .total-table2{
      margin-bottom: 0;
      tbody{
        tr{
          border-width: 1px;
          border-color: #eee;
          td{
            border-width: 1px;
            border-color: #eee;
            padding: 15px;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            line-height: 30px;
            vertical-align: middle;
            @include md-down-device(){
              padding: 10px;
            }
            &:nth-child(1){
              font-weight: 600;
              font-size: 14px;
              color: var(--title-color);
              font-family: var(--font-montserrat);
              text-align: start;    
              line-height: 26px; 
              @include lg-up-device(){
                width: 25%;
              }
            }
          }
        }
      }
    }
  }
  .section-title{
    line-height: 1;
    margin-bottom: 40px;
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 0;
      line-height: 1.3;
    }
  }
}


/*=====================================
   47. Product Page
========================================*/
.product-sidebar{
  border-radius: 10px;
  border: 1px solid rgba(238, 238, 238, 0.93);
  background: #FFF;
  padding: 10px;
  .wp-block-categoris-cloud{
    margin: 0;
    padding: 0;
    list-style: none;
    li{
      line-height: 1;
      margin-bottom: 18px;
      &:last-child{
        margin-bottom: 0;
      }
      a{
        color: var(--title-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;  
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        padding-left: 20px;
        position: relative;
        transition: 0.35s;
        &::before{
          content: '';
          height: 12px;
          width: 12px;
          border-radius: 50%;
          background-color: var(--primary-color1);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .number-of-categoris{
          color: var(--text-color);
          font-weight: 400;
          transition: 0.35s;
        }
        &:hover{
          color: var(--primary-color1);
          .number-of-categoris{
            color: var(--primary-color1);
          }
        }
      }
    }
  }
  .product-widget{
    background: #F6EFF7;
    padding: 30px 24px;
    border-radius: 5px;
    .check-box-item{
      .product-widget-title{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;  
        line-height: 1;
        display: flex;
        justify-content: space-between;

      }
      .checkbox-container {
        .button-group{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 40px;
          gap: 15px;
          a{
            padding: 17px 20px;
            line-height: 1;
            width: 48%;
            justify-content: center;
          }
        }
        .form-inner{
          margin-bottom: 25px;
          label{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 3px;
          }
          input{
            width: 100%;
            border-radius: 5px;
            background: #FFF;
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 400;   
            height: 48px;
            padding: 10px 20px;
            border: 1px solid #fff;
            &::placeholder{
              color: rgba(#13141A, .5);
            }
            &:focus{
              border-color: var(--primary-color1);
            }
          }
          .nice-select {
            background: #fff;
            height: 48px;
            padding: 0px 30px 0 20px;
            border: 1px solid #fff;
            .current {
              font-size: 13px;
            }
            &::after{
              right: 21px;
            }
            &:focus{
              border-color: var(--primary-color1);
            }
        }
        }
        // .color-area{
        //   columns: 2;
        // }
        >ul{
          margin: 0;
          padding: 0;
          list-style: none;
          >li{
            display: flex;
            align-items: center;
            gap: 10px;   
            margin-bottom: 20px;
            &:last-child{
              margin-bottom: 0;
            }
            .containerss {
              display: flex;
              gap: 5px;
              width: 100%;
              position: relative;
              padding-left: 28px;
              cursor: pointer;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              span{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 400;
                line-height: 1;    
                &.text{
                  font-weight: 600;
                }
              }
              input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
                &:checked ~ .checkmark {
                  background-color: var(--primary-color1);
                  border-color: var(--primary-color1);
                  border-radius: 2px;
                  // &::after {
                  //   display: block;
                  // }
                  &::after {
                    content: url(../img/inner-page/icon/checkbox-check.svg);
                    left: 1.5px;
                    top: -2px;
                    position: absolute;
                  }
                }
              }   
              .checkmark {
                position: absolute;
                top: 0px;
                left: 0;
                height: 14px;
                width: 14px;
                background-color: rgba(#fff, .8);
                border: 1px solid #fff;
                border-radius: 2px;
              }   
              &:hover{
                input ~ .checkmark {
                  border-color: var(--primary-color1);
                }
              }    
              .stars{
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                align-items: center;
                gap: 5px;
                line-height: 1;
                margin-top: -2px;
                  i{
                    color: #DDA701;
                    font-size: 13px;
                  }
                  a{
                    color: var(--text-color);
                    font-family: var(--font-open-sans);
                    font-size: 14px;
                    font-weight: 600;
                  }
              }    
            }
          }
        }
        .more-facilities{
          .accordion{
            .accordion-item{
              border-radius: 0px;
              border: unset;
              background: transparent;
              margin-bottom: 0;
              .accordion-header{
                background: transparent;
                .accordion-button{
                  background: transparent;
                  color: var(--title-color);
                  font-family: var(--font-open-sans);
                  font-size: 13px;
                  font-weight: 600;
                  padding: 0;
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  svg{
                    fill:var(--title-color);
                  }
                  &::after{
                      display: none;
                      visibility: hidden;
                  }
                  &:not(.collapsed){
                    border: transparent;
                    box-shadow: none;    
                    background-color: transparent;  
                    color: var(--primary-color1);
                    svg{
                      fill:var(--primary-color1);
                    }
                  }
                  &:focus{
                    border: transparent;
                    box-shadow: none;
                  }
                }
                
              }
              .accordion-body{
                padding: 0;
                padding-top: 20px;
                display: flex;
                gap: 25px;
                >ul{
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  >li{
                    display: flex;
                    align-items: center;
                    gap: 10px;   
                    margin-bottom: 20px;
                    &:last-child{
                      margin-bottom: 0;
                    }
                    .containerss {
                      display: flex;
                      gap: 5px;
                      width: 100%;
                      position: relative;
                      padding-left: 22px;
                      cursor: pointer;
                      -webkit-user-select: none;
                      -moz-user-select: none;
                      user-select: none;
                      span{
                        color: var(--text-color);
                        font-family: var(--font-open-sans);
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1;    
                        &.text{
                          font-weight: 600;
                        }
                      }
                      input {
                        position: absolute;
                        opacity: 0;
                        cursor: pointer;
                        height: 0;
                        width: 0;
                        &:checked ~ .checkmark {
                          background-color: var(--primary-color1);
                          border-color: var(--primary-color1);
                          border-radius: 50%;
                          // &::after {
                          //   display: block;
                          // }
                          &::after {
                            content: url(../img/inner-page/icon/checkbox-check2.svg);
                            left: 2.5px;
                            top: -3px;
                            position: absolute;
                          }
                        }
                      }   
                      .checkmark {
                        position: absolute;
                        top: 0px;
                        left: 0;
                        height: 14px;
                        width: 14px;
                        background-color: var(--white-color);
                        border: 1px solid rgba(22, 25, 30, 0.20);
                        border-radius: 50%;
                      }   
                      &:hover{
                        input ~ .checkmark {
                          border-color: var(--primary-color1);
                        }
                      }    
                    }
                  }
                }
              }
            }
          }  
        }
        .search-btn{
          padding-top: 20px;
          button{
            padding: 17px 25px;
            width: 100%;
            justify-content: center;
            &:hover{
              svg{
                fill: #fff;
              }
            }
          }
        }
      }
    }
    .recent-product-list{
      margin: 0;
      padding: 0;
      list-style: none;
      .recent-product{
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(#D7D7D7, .6);
        margin-bottom: 15px;
        &:last-child{
          margin-bottom: 0;
          border-bottom: none;
          padding-bottom: 0px;
        }
        .product-img{
          height: 70px;
          min-width: 80px;
          max-width: 80px;
          border-radius: 5px;
          img{
            border-radius: 5px;
            height: 100%;
          }
        }
        .content{
          line-height: 1;
          .price{
            line-height: 1;
            margin-bottom: 5px;
            h6{
              margin-bottom: 0;
              line-height: 1;
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 13px;
              font-weight: 600;     
            }
          }
          >h6{
            margin-bottom: 0;
            line-height: 1;
            a{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 14px;
              font-weight: 600;
              line-height: 20px;
              transition: 0.35s;
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
  }
  .discount-banner{
    background-image: linear-gradient(rgba(#000, .4), rgba(#000, .4)), url(../img/inner-page/discount-img.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 50px;
    border-radius: 10px; 
    @include xxl-down-device(){
      padding: 50px 25px;
    }
    .discount-content{
      border: 1px solid #fff;
      border-radius: 5px;
      padding: 30px;
      transform: skewY(-4deg);
      position: relative;
      >span{
        color: var(--white-color);
        font-family: var(--font-open-sans);
        font-size: 18px;
        font-style: italic;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 10px;
      }
      h4{
        color: var(--white-color);
        font-family: var(--font-montserrat);
        font-size: 26px;
        font-style: italic;
        font-weight: 800;  
        margin-bottom: 0;
        span{
          font-size: 24px;
          font-weight: 700;
        }
      }
      .offer-area{
        max-width: 175px;
        margin-left: auto;
        margin-right: -40px;
        margin-top: 30px;
      
        span{
          background-image: url(../img/inner-page/icon/black-sharp.svg);
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-style: italic;
          font-weight: 700;   
          width: 130px;  
          height: 50px;
          display: inline-flex;
          align-items: center;
          padding: 10px 20px;
          position: relative;
        }
        h3{
          background-image: url(../img/inner-page/icon/red-sharp.svg);
          margin-bottom: 0;
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 35px;
          font-style: italic;
          font-weight: 700;
          width: 171.912px;
          height: 106.681px;
          display: inline-flex;
          align-items: center;
          justify-content: end;
          padding-right: 40px;
          margin-top: -51px;
          margin-left: -20px;   
        }
      }
      .view-btns{
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        a{
          padding: 7px 17px;    
        }
      }
    } 
  }
}
.shop-card2 {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px 10px 24px 10px;
  transition: 0.35s;
  border: 1px solid #eee;
  .shop-img {
    position: relative;
    border-radius: 10px;
    img{
      border-radius: 10px;
      @include lg-down-device(){
        width: 100%;
      }
    }
    .offer-batch {
      position: absolute;
      left: 14px;
      top: 14px;
      line-height: 1;
      transition: 0.35s;
      span {
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        color: var(--white-color);
        background: #FF5E3A;
        border-radius: 2px;
        display: inline-block;
        padding: 2px 7px;
      }
    }

    .fav {
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background-color: var(--white-color);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 14px;
      top: 14px;
      opacity: 0;
      transition: 0.35s;
      svg {
        fill: var(--title-color);
      }
    }
    .cart-btn{
      display: flex;
      justify-content: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: 0.35s;
      .primary-btn2 {
        font-size: 12px;
        font-family: var(--font-montserrat);
        padding: 10px 20px;
        line-height: 1;
        justify-content: center;
      }
    }
  }

  .content {
    padding: 25px 20px 0;
   
    .star {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 5px;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 3px;
        line-height: 1;
        li {
          line-height: 1;

          i {
            font-size: 12px;
            color: #DDA701;
          }
        }
      }

      span {
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        color: var(--text-color);
        line-height: 1;
      }
    }

    h6 {
      margin-bottom: 15px;

      a {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 16px;
        line-height: 26px;
        color: var(--title-color);

        span {
          font-weight: 600;
        }
      }
    }

    .content-btm {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price {
        line-height: 1;

        h6 {
          margin-bottom: 0;
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 16px;
          line-height: 1;
          color: var(--title-color);
          del{
            color: var(--text-color);
            font-size: 14px;
            font-weight: 400;
          }
        }
      }

      
    }
  }
  &:hover{
    .shop-img {
      position: relative;
      border-radius: 10px;
      img{
        border-radius: 10px;
        @include lg-down-device(){
          width: 100%;
        }
      }
  
      .fav {
        opacity: 1;
      }
      .cart-btn{
        opacity: 1;
      }
    }
  }
}

// range slider
.range-wrapper{
  .slider-wrapper{
    margin-bottom: 25px;
    .ui-slider-horizontal {
      height: 10px;
      border-radius: 10px;
    }
    .ui-widget.ui-widget-content {
      border: none;
    }
    .ui-slider-range{
      background-color: var(--primary-color1);
    }
    .ui-slider-handle{
      border: 5px solid #fff;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      background-color: var(--primary-color1);
      top: -6px;
      &:focus-visible{
        outline: none;
      }
    }
  
  }
  .valus{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .min-value, .max-value{
      max-width: 45%;
      width: 100%;
      height: 40px;
      border-radius: 5px;
      background-color: #fff;
      display: flex;
      align-items: center;
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 600;
      padding: 15px;
      span{
        line-height: 1;
        display: flex;
        margin-top: 3px;
      }
      input{
        width: 100%;
        background-color: transparent;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;    
        line-height: 1;  
      }
    }
  }
}
.product-page{
  .show-item-and-filte{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 15px;
      font-weight: 400;   
      margin-bottom: 0;
      strong{
        font-weight: 600;  
      }
    }
    .filter-view{
      display: flex;
      align-items: center;
      gap: 40px;
      .view{
        @include md-down-device(){
          display: none;
          visibility: hidden;
        }
        ul{
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          li{
            line-height: 1;
            height: 26px;
            width: 26px;
            border-end-end-radius: 2px;
            border: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            svg{
              fill: var(--text-color);
            }
            &.active{
              svg{
                fill: var(--primary-color1);
              }
            }
          }
        }
      }
    }
    .filter-atra{
      border-radius: 5px;
      border: 1px solid #EEE;
      background: #FFF;    
      display: flex;
      align-items: center;
      gap: 20px; 
      padding: 6px 6px 6px 20px;
      h6{
        margin-bottom: 0;
        line-height: 1;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 500; 
      }
      .nice-select{
        height: 30px;  
        background-color: var(--primary-color1); 
        padding-left: 15px;
        padding-right: 35px;
        &::after{
          border-color: var(--title-color);
          right: 18px;
          height: 7px;
          width: 7px;
        }
        .current{
          color: var(--title-color);
          font-weight: 600;
          font-size: 13px;
        }
      }
    }
  }
  .filter-area{
    .title-and-close-btn{
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 30px;
      h6{
        margin-bottom: 0;
        line-height: 1;
        color: #000;
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600; 
      }
      .close-btn{
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 3px;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;
        svg{
          fill: var(--text-color);
        }
      }
    }
    .tags{
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        li{
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 4px;
          border-radius: 14.5px;
          border: 1px solid #EEE;
          background: #FAF8FB;     
          padding: 5px 10px;
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 400;
          svg{
            fill: var(--text-color);
          }
        }
      }
    }
  }
  &.poperty-map{
    .product-card .product-img img {
      width: 100%;
    }
    padding: 60px 60px 0px;
    @include xxl-down-device(){
      padding: 60px 20px 0px;
    }
    @include md-down-device(){
      padding: 0px 0px 0px;

    }
    #map {
      margin:0 auto;
      width: 100%;
      min-height: 100vh;
      max-height: 100vh;
      border-radius: 10px;
      @include xl-down-device(){
        min-height: 650px;
      }
      .gm-style-iw{
        max-width: 280px !important;
        width: 100%;
        padding: 0 !important;
        .gm-style-iw-d{
          overflow: unset !important;
        }
        .gm-ui-hover-effect{
          position: absolute;
          top: 0 !important;
          right: 0 !important;
          background-color: var(--white-color) !important;
          border-radius: 50%;
          border: 1px solid #eee !important;
          z-index: 9;
          opacity: 1 !important;
          transition: 0.35s;
          &:hover{
            background-color: red !important;
            border-color: red !important;
          }
        }
        .product-card{
          .product-img{
            &::after{
              display: none;
              visibility: hidden;
            }
            img{
              max-width: 100% !important;
            }
          }
          .content-btm{
            border-top: 1px solid #eee;
          }
        }

      }

    }
    .list-grid-main{
      min-height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      &::-webkit-scrollbar{
        width: 0;
      }
      @include xl-down-device(){
        overflow-y: unset;
        min-height: unset;
        max-height: unset;
      }
    }
  }
}
.pagination-and-next-prev{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
    gap: 15px;
  .pagination{
    line-height: 1;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 15px;
      li{
        a{
          width: 34px;
          height: 34px;   
          border-radius: 50%;
          border: 1px solid #eee;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;
          transition: 0.35s;
          &:hover{
            border-color: var(--primary-color1);
            color: var(--primary-color1);
          }
        }
        &.active{
          a{
            border-color: var(--primary-color1);
          color: var(--title-color);
          background-color: var(--primary-color1);
          }
        }
      }
    }
  }
  .next-prev-btn{
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 40px;
      li{
        position: relative;
        &::before{
          content: '';
          width: 1px;
          height: 14px; 
          opacity: 0.4;
          background: #13141A; 
          position: absolute;
          left: -21px;
          top: 50%;
          transform: translateY(-50%);
        }
        &:first-child{
          &::before{
            display: none; 
          }
        }
        a{
          color: var(--text-color);
          font-family: var(--font-montserrat);
          font-size: 15px;
          font-weight: 600; 
          transition: 0.35s;
          display: flex;
          align-items: center;
          gap: 6px;
          svg{
            fill: var(--text-color);
            transition: 0.35s;
          }
          &:hover{
            color: var(--title-color);
            svg{
              fill: var(--title-color);
            }
          }
        }
      }
    }
  }
}

/*=====================================
   48. Blog  Page
========================================*/
.blog-standard-page{
  .news-card2 {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 10px;

    .news-img {
      position: relative;
      border-radius: 5px;

      img {
        border-radius: 5px;
        width: 100%;
      }

      .date {
        position: absolute;
        left: -10px;
        top: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        background-color: var(--primary-color1);
        clip-path: polygon(100% 0, 93% 50%, 100% 100%, 0 100%, 0 0);
        padding: 0px 22px;
        line-height: 1;
        a {
          clip-path: unset;
          background-color: transparent;
          display: flex;
          height: 30px;
          align-items: center;
          justify-content: center;
          padding: 0;
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 13px;
          line-height: 1;
          color: var(--title-color);
          position: relative;
          &::after{
            content: '';
            height: 10px;
            width: 1px;
            background-color: rgba(#13141A, 0.5);
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
          }
          &:first-child{
            &::after{
              display: none;
            }
          }
        }
      }
    }

    .content {
      padding-top: 25px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      h4{
        margin-bottom: 10px;
        line-height: 1;
        a{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 26px;
          font-weight: 600;
          line-height: 1.5; 
          transition: 0.35s;
          @include md-down-device(){
            font-size: 20px;
          }
          &:hover{
            color: var(--primary-color1);
          }
        }
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;   
        margin-bottom: 20px;  
      }
      .news-btm {
        border-top: 1px solid #eee;
        padding-top: 25px;
        gap: 15px;

        flex-wrap: wrap;

        .author-area {
          display: flex;
          align-items: center;
          gap: 10px;
          
          .author-img {
            img {
              height: 38px;
              width: 38px;
              border-radius: 50%;
            }
          }

          .author-content {
            display: inline-grid;

            h6 {
              margin-bottom: 3px;
              font-family: var(--font-montserrat);
              font-weight: 600;
              font-size: 15px;
              line-height: 18px;
              color: var(--title-color);
            }

            a{
              font-family: var(--font-open-sans);
              font-weight: 600;
              font-size: 12px;
              line-height: 16px;
              color: var(--text-color);
              transition: 0.35s;
              &:hover{
                color: var(--primary-color1);
              }
            }
            span {
              font-family: var(--font-open-sans);
              font-weight: 600;
              font-size: 12px;
              line-height: 16px;
              color: var(--text-color);
            }
          }
        }
      }
    }
  }
}
.blog-sidebar{
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  .single-widgets{
   background-color: #F6EFF7;
    padding: 30px 24px;
    border-radius: 5px;   
    .widget-title{
      line-height: 1;
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600; 
        margin-bottom: 0;
      }
    }
    .wp-block-categoris-cloud{
      margin: 0;
      padding: 0;
      list-style: none;
      li{
        line-height: 1;
        margin-bottom: 18px;
        &:last-child{
          margin-bottom: 0;
        }
        a{
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 600;  
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 20px;
          position: relative;
          transition: 0.35s;
          &::before{
            content: '';
            height: 12px;
            width: 12px;
            border-radius: 50%;
            background-color: var(--primary-color1);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .number-of-categoris{
            color: var(--text-color);
            font-weight: 400;
            transition: 0.35s;
          }
          &:hover{
            color: var(--primary-color1);
            .number-of-categoris{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .blog-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .slider-btn-group2 {
        max-width: 50px;
        min-width: 50px;
        .slider-btn{
          height: 20px;
          width: 20px;
        }
      }
    }
    .recent-post-wraper{
      .widget-cnt{
        .wi{
          margin-bottom: 15px;
          img{
            border-radius: 5px;
          }
        }
        .wc{
          line-height: 1;
          .date{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 12px;
            font-weight: 600; 
            line-height: 1;
            margin-bottom: 8px;
            display: inline-block;
            position: relative;
            &::after{
              content: '';
              width: 30px;
              height: 1px;
              background: linear-gradient(90deg, #5E5E5E 0%, rgba(94, 94, 94, 0.00) 100%);
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: -40px;
            }
          }
          h6{
            margin-bottom: 0;
            line-height: 1;
            a{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 600;
              line-height: 22px;      
              transition: 0.35s; 
              &:hover{
                color: var(--primary-color1);
              }
            }
          }
        }
      }
    }
    .wp-block-tag-cloud{
      margin-bottom: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      a{
        color: var(--text-color);
        text-align: center;
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 600;
        border-radius: 5px;
        border: 1px solid rgba(#fff, 0.8);     
        line-height: 1;
        padding: 8px 18px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        white-space: nowrap;
        transition: all 0.5s ease-out 0s;
        @include xxl-down-device(){
          padding: 8px 14px;
        }
        &::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;
        }
      
        &:hover {
          color: var(--white-color);
          border-color: var(--title-color);
          &::after {
            transform: skewX(45deg) scale(1, 1);
          }
        }
      }
    }
    
  }
 
}
.sidebar-banner{
  background-image: url(../img/inner-page/sidebar-banner-bg.png);
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  padding: 45px 30px;
  min-height: 650px;
  .product-content{
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 0;
    }
    p{
      color: var(--title-color);
      font-family: var(--font-open-sans);
      font-size: 15px;
      font-weight: 400;
      line-height: 28px;
    }
    .primary-btn3{
      padding: 13px 20px;
    }
  }
}

.blog-details-page{
  .post-thumb {
    position: relative;
    border-radius: 10px;
    border: 1px solid #EEE;    
    padding: 10px;
    margin-bottom: 25px;
    img {
      border-radius: 5px;
      width: 100%;
    }

    .date {
      position: absolute;
      left: 0px;
      top: 30px;
      display: flex;
      align-items: center;
      gap: 20px;
      background-color: var(--primary-color1);
      clip-path: polygon(100% 0, 93% 50%, 100% 100%, 0 100%, 0 0);
      padding: 0px 22px;
      line-height: 1;
      a {
        clip-path: unset;
        background-color: transparent;
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 13px;
        line-height: 1;
        color: var(--title-color);
        position: relative;
        &::after{
          content: '';
          height: 10px;
          width: 1px;
          background-color: rgba(#13141A, 0.5);
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
        &:first-child{
          &::after{
            display: none;
          }
        }
      }
    }
  }
  .post-title{
    margin-bottom: 12px;
    color: var(--title-color);
    font-family: var(--font-montserrat);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;

    a{
      color: var(--text-color);
      font-size: 18px;
      font-weight: 500;
      line-height: 1;     
      transition: 0.35s;
      &:hover{
        color: var(--primary-color1);
      }
    }
    @include md-down-device(){
      font-size: 22px;
      a{
        font-size: 16px;
      }
    }
  }
  
  .author-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    .author-img {
      img {
        height: 38px;
        width: 38px;
        border-radius: 50%;
      }
    }

    .author-content {
      display: inline-grid;

      h6 {
        margin-bottom: 3px;
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 15px;
        line-height: 18px;
        color: var(--title-color);
      }

      a{
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        color: var(--text-color);
        transition: 0.35s;
        &:hover{
          color: var(--primary-color1);
        }
      }
      span {
        font-family: var(--font-open-sans);
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        color: var(--text-color);
      }
    }
  }
  p{
    color: var(--text-color);
    font-family: var(--font-open-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 12px;
  }
  blockquote{
    margin-top: 50px;
    margin-bottom: 45px;
    border-radius: 10px;
    background: #FAF8FB;
    padding: 30px 40px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    @include md-down-device(){
      padding: 30px 20px;
    }
    p{
      color: var(--text-color);
      font-family: var(--font-montserrat);
      font-size: 18px;
      font-weight: 500;
      line-height: 32px;
      margin-bottom: 0;
      span{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 16px;
        font-weight: 600;
        font-style: normal;
        padding-left: 80px;
        position: relative;
        display: inline-block;
        &::before{
          content: '';
          width: 60px;
          height: 1px;  
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          background-color: var(--primary-color1);
        }
      }
    }
    .vector{
      min-width: 15px;
      fill: #C7EDDB;
    }
    .quoat-icon{
      position: absolute;
      left: 58px;
      top: -23px;
      width: 46px;
      height: 46px;  
      border-radius: 50%;
      background-color: var(--primary-color1);
      display: flex;
      align-items: center;
      justify-content: center;
      svg{
        fill: var(--primary-color1);
        stroke: var(--title-color);
      }
    }
  }
  .blog-dt-img{
    img{
      border-radius: 10px;
    }
  }
  .blog-tag-social-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-top: 26px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    .bolg-tag{
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 10px;     
      h6{
        line-height: 1;
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 18px;
        font-weight: 600;  
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        li{
          line-height: 1;
          a{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 400;
            transition: 0.35s;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
      }
    }
    .social-area{
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 10px;     
      h6{
        line-height: 1;
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 18px;
        font-weight: 600;  
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        li{
          line-height: 1;
          a{
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid #eee;
            color: var(--primary-color1);
            transition: 0.35s;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover{
              color: var(--title-color);
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
  .details-navigation{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    @include sm-down-device(){
      justify-content: center;
    }
    .single-navigation{
      display: flex;
      align-items: center;
      gap: 20px;
      transition: 0.35s;
      .arrow{
        width: 30px;
        height: 60px;   
        border-radius: 5px;
        border: 1px solid rgba(#13141A, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.35s;
        svg{
          fill: rgba(#13141A, 0.16);
          transition: 0.35s;
        }
        &:hover{
          background-color: var(--primary-color1);
          border-color: var(--primary-color1);
          svg{
            fill: var(--title-color);
          }
        }
      }
      .content{
        max-width: 250px;
        width: 100%;
        line-height: 1;
        transition: 0.35s;
        >a{
          color: var(--text-color);
          font-family: var(--font-montserrat);
          font-size: 14px;
          font-weight: 500;  
          transition: 0.35s;
          margin-bottom: 5px;
          display: inline-block;
        }
        h6{
          transition: 0.35s;
          margin-bottom: 0;
          line-height: 1;
          a{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600;
            line-height: 24px;
            transition: 0.35s;
          }
        }
      }
    }
  }

  .inquiry-form{
    border-radius: 10px;
    background: #F6EFF7;
    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-montserrat);
        font-size: 24px;
        font-weight: 600; 
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        margin-bottom: 0;
      }
    }
    .form-inner{
      position: relative;
      line-height: 1;
      label{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 10px;
        &.containerss {
          display: flex;
          width: 100%;
          position: relative;
          padding-left: 28px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 16px;
            font-weight: 400 !important;
            line-height: 1;    
            &.text{
              font-weight: 600;
            }
          }
          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
              border-radius: 2px;
              // &::after {
              //   display: block;
              // }
              &::after {
                content: url(../img/inner-page/icon/checkbox-check.svg);
                left: 2.5px;
                top: -4px;
                position: absolute;
              }
            }
          }   
          .checkmark {
            position: absolute;
            top: 0px;
            left: 0;
            height: 14px;
            width: 14px;
            background-color: rgba(#fff, .8);
            border: 1px solid #fff;
            border-radius: 2px;
          }   
          &:hover{
            input ~ .checkmark {
              border-color: var(--primary-color1);
            }
          }    
          .stars{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
            margin-top: -2px;
            li{
              line-height: 1;
              i{
                color: #DDA701;
                font-size: 13px;
              }
              a{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 600;
              }
            }
          }    
        }
      }
      input{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 400;  
        height: 48px;
        width: 100%;
        padding: 10px 20px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      textarea{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        height: 48px;
        width: 100%;
        padding: 20px 20px;
        outline: none;
        border: none;
        min-height: 180px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      .primary-btn3{
        padding: 17px 28px;
        justify-content: center;
      }
      .iti {
        width: 100%;
        input{
          padding-left: 62px;
        }
      }
      .iti__selected-flag{
        padding-left: 20px;
      }
      .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
        background-color: transparent;
      }
      .iti__country-list{
        max-width: 280px;
        box-shadow: unset;
        background-color: white;
        border: 1px solid var(--primary-color1);
        .iti__country.iti__highlight{
          background-color: rgba(#DF0101, .5);
          
        }
        li{
          font-family: var(--font-montserrat);
          font-weight: 400;
          span{
            font-family: var(--font-montserrat);
            font-weight: 400;
          }
        }
      }
    }
  }
  .comment-title{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 20px;
      font-weight: 600;  
      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: rgba(238, 238, 238, 0.93);
      }
    }
  }
}
.list-group-wrapper{
  .item{
    float: none;
    width: 100%;
    .product-card{
      display: flex;
      align-items: center;
      .product-img{
        max-width: 395px;
        width: 100%;
        @include xxl-down-device(){
          max-width: 350px;
        }
      }
      .product-content{
        padding: 15px 40px;
        width: 100%;
        @include xxl-down-device(){
          padding: 15px 30px;
        }
      }
    }
  }
}
.no-sidebar{
  .list-group-wrapper{
    .item{
      float: none;
      width: 50%;
      .product-card{
        display: flex;
        align-items: center;
        .product-img{
          max-width: 250px;
          width: 100%;
        }
        .product-content{
          padding: 15px 25px;
          width: 100%;
        }
      }
      .product-card4{
        display: flex;
        align-items: center;
        .product-img{
          max-width: 250px;
          width: 100%;
          img{
            border-radius: 5px 0 0 5px;
          }
        }
        .product-content{
          padding: 15px 25px;
          width: 100%;
        }
      }
    }
  } 
}

/*=====================================
   49. Checkout  Page
========================================*/
.checkout-page{
  .login-and-coupon-area{
    border-radius: 10px;
    background: #F5F3F9;
    padding: 17px 75px;
    position: relative;
    &::after{
      content: '';
      height: 96.8%;
      width: 99.9%;
      border: 5px solid #fff;
      position: absolute;
      left: 1px;
      top: 1px;
      right: 1px;
      bottom: 1px;
      border-radius: 10px;
    }
    &::before{
      content: '';
      clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
      width: 3px;
      height: 34px;   
      background-color: var(--primary-color1);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      @include lg-down-device(){
        display: none;
        visibility: hidden;
      }
    }
    p{
      margin-bottom: 0;
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 99;
      @include lg-down-device(){
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
      }
      button{
        color: #000;
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 600;
        background-color: transparent;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: 0.35s;
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .cupor-code-area{
      display: flex;
      align-items: center;
      position: relative;
      gap: 5px;
      flex-wrap: wrap;
      z-index: 99;
      @include sm-down-device(){
        justify-content: center;
        gap: 3px;
      }
      p{
        margin-bottom: 0;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 99;
        @include lg-down-device(){
          text-align: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 5px;
        }
      
      }
      .cupon{
        >button{
          color: #000;
          font-family: var(--font-open-sans);
          font-size: 15px;
          font-weight: 600;
          background-color: transparent;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }
        }
        .nav__search-form {
          position: absolute;
          top: calc(100% + 15px);
          right: -32px;
          width: 300px;
          display: flex;
          align-items: center;
          background-color: var(--title-color1);
          border: 1px solid #eee;
          transition: .35s;
          opacity: 0;
          visibility: hidden;
          input{
            border-radius: 5px;
            background: var(--white-color);
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 400;  
            width: 100%;
            padding: 5px 15px;
            border-radius: 50px;
            &::placeholder{
              color: rgba(#13141A, .5);
            }
          }
          .primary-btn3{
            width: 88px;
            padding: 5px 16px;
            justify-content: center;
          }
        }
        &:hover{
          .nav__search-form {
            opacity: 1;
            visibility: visible;
          }
        }
      }
      
    }
  }
  .inquiry-form{
    border-radius: 10px;
    background: #F6EFF7;
    padding: 45px 35px 50px;
    @include md-down-device(){
      padding: 45px 20px 50px;
    }
    .title{
      margin-bottom: 25px;
      h4{
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 24px;
        font-weight: 700; 
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        margin-bottom: 0;
      }
    }
    .form-inner{
      position: relative;
      line-height: 1;
      label{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 10px;
        &.containerss {
          display: flex;
          width: 100%;
          position: relative;
          padding-left: 28px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 16px;
            font-weight: 400 !important;
            line-height: 1;    
            &.text{
              font-weight: 600;
            }
          }
          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
              border-radius: 2px;
              // &::after {
              //   display: block;
              // }
              &::after {
                content: url(../img/inner-page/icon/checkbox-check.svg);
                left: 2.5px;
                top: -2px;
                position: absolute;
              }
            }
          }   
          .checkmark {
            position: absolute;
            top: 0px;
            left: 0;
            height: 16px;
            width: 16px;
            background-color: var(--primary-color1);
            border: 1px solid var(--primary-color1);
            border-radius: 2px;
          }   
          &:hover{
            input ~ .checkmark {
              border-color: var(--primary-color1);
            }
          }    
          .stars{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
            margin-top: -2px;
            li{
              line-height: 1;
              i{
                color: #DDA701;
                font-size: 13px;
              }
              a{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 600;
              }
            }
          }    
        }
      }
      input{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 400;  
        height: 48px;
        width: 100%;
        padding: 10px 20px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      textarea{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        height: 48px;
        width: 100%;
        padding: 20px 20px;
        outline: none;
        border: none;
        min-height: 100px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      .primary-btn3{
        padding: 17px 28px;
        justify-content: center;
        width: 100%;

      }
    }
  }
  .cart-menu{
    min-height: 10rem;
    z-index: 99;
    transform-origin: top;
  }
  .cart-body {

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      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-montserrat);
                font-weight: 600;
                font-size: 15px;
                color: var(--title-color);
                display: inline-block;
              }

              h6 {
                margin-bottom: 0;
                line-height: 1;

                a {
                  font-family: var(--font-montserrat);
                  font-weight: 500;
                  font-size: 16px;
                  line-height: 1.5;
                  color: var(--title-color);

                  strong {
                    font-weight: 600;
                  }

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

        .quantity-area {
          .quantity {
            display: flex;
            gap: 5px;

            a {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              background: #FFF;
              border: 1px solid rgba(238, 238, 238, 0.1);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              color: var(--title-color);
              font-weight: 600;
              cursor: pointer;
              transition: 0.35s;

              &:hover {
                background: var(--primary-color1);
                border: 1px solid --primary-color1;
              }
            }

            input {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              background: #FFF;
              border: 1px solid rgba(238, 238, 238, 0.1);
              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 rgba(255, 255, 255, 0.70);

    .pricing-area {
  
      width: 100%;
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.70);
        width: 100%;
        padding: 10px 0px 10px;
        &:last-child{
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 30px;
        }
        li {
          font-family: var(--font-montserrat);
          font-weight: 600;
          font-size: 13px;
          color: var(--title-color);
          display: flex;
          justify-content: space-between;
          width: 100%;
        }
        &.total{
          li{
            font-weight: 700;
          }
        }
      }
    }
  }
  .choose-payment-mathord{
    margin-bottom: 40px;
    line-height: 1;
    h6{
      margin-bottom: 10px;
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 16px;
      font-weight: 600;
    }
    .payment-option{
      line-height: 1;
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 30px;
        li{
          width: 110px;
          height: 68px;  
          background-color: var(--white-color);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .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(--title-color);
              margin-left: 2px;
            }
          }
          &.active{
            .checked {
              background: var(--primary-color1);
              i{
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
/*=====================================
   50. 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-montserrat);
      font-size: 24px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 0;
    }
  }
  .cart-shopping-wrapper{
    .cart-table{
      width: 100%;
      thead{
        tr{
          border-top: 1px solid rgba(238, 238, 238, 0.93);
          border-bottom: 1px solid rgba(238, 238, 238, 0.93);
          th{
            color: var(--text-color);
            font-family: var(--font-montserrat);
            font-size: 15px;
            font-weight: 500;
            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 rgba(238, 238, 238, 0.93);
          }
          td{
            padding: 30px 15px;
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 600;
            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;
                 }
              }
              .product-info-content{
                h6{
                  color: #16191E;
                  font-family: var(--font-montserrat);
                  font-size: 18px;
                  font-weight: 600;
                  line-height: 1.4;
                  margin-bottom: 10px;
                }
                p{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1;
                  margin-bottom: 35px;
                  span{
                    color: var(--title-color);
                    font-weight: 600;
                  }
                }
                ul{
                  padding: 0;
                  margin: 0;
                  list-style: none;
                  display: flex;
                  align-items: center;
                  gap: 20px;
                  @include md-down-device(){
                    justify-content: flex-end;
                  }
                  li{
                    color: var(--text-color);
                    font-family: var(--font-open-sans);
                    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(#16191E, 0.2);
                      }
                    }
                    .quantity-area, .quantity-area2 {
                      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-color: #f3f3f3;
                          border: 1px solid #eee;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-size: 20px;
                          color: var(--title-color);
                          font-weight: 600;
                          cursor: pointer;
                          transition: 0.35s;
            
                          &:hover {
                            background: var(--primary-color1);
                            border: 1px solid --primary-color1;
                          }
                        }
            
                        input {
                          height: 24px;
                          width: 34px;
                          border-radius: 4px;
                          background: #FFF;
                          border: 1px solid rgba(19, 20, 26, 0.16);
                          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-Jost);
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                text-transform: capitalize;
                @include sm-down-device(){
                  font-size: 13px;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
  }
  .cart-order-sum-area{
    @include lg-up-device(){
      padding-left: 15px;
    }
    .order-summary-wrap{
      padding: 40px;
      border: 1px solid #eee;
      border-radius: 10px;
      @include lg-device(){
        padding: 40px 25px;
      }
      @include sm-down-device(){
        padding: 35px 25px;
      }
      .order-summary-list{
        padding: 0;
        margin: 0;
        list-style: none;
        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 #eee;
          }
          span{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 500;
              line-height: 1;
              display: inline-block;
            }
          .order-info{
            text-align: right;
            p{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              margin-bottom: 0;
              strong{
                font-weight: 500;
              }
              &.shipping{
                margin-bottom: 10px;
              }
            }
          }
          .coupon-area{
            width: 100%;
            margin-bottom: 10px;
            span{
              margin-bottom: 15px;
            }
            .form-inner{
              position: relative;
              input{
                width: 100%;
                height: 40px;
                padding: 10px 100px 10px 20px;
                background-color: #F6F2F8;
                border-radius: 5px 0 0 5px;
                color: var(--title-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
                &::placeholder{
                  color: rgba(#13141A, .5);
                }
              }
              .primary-btn6{
                padding: 11px 23px;
                border-radius: 0 5px 5px 0;
                position: absolute;
                top: 0;
                right: 0;
              }
            }
          }
          &:last-child{
            margin-bottom: 40px;
            span{
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }
      .primary-btn3{
        width: 100%;
        justify-content: center;
        padding: 18px 25px;
      }
    }
  }
}
.recent-car-parts-area{
  background: #FAF8FB;
}
/*=====================================
   51. Faq  Page
========================================*/
.faq-page-wrap{
  .faq-area{
    .section-title-and-filter{
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include md-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      .section-title{
        h4{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 26px;
          font-weight: 600;  
          margin-bottom: 0;
        }
      }
      .filter-atra{
        border-radius: 5px;
        border: 1px solid #EEE;
        background: #FFF;    
        display: flex;
        align-items: center;
        gap: 20px; 
        padding: 6px 6px 6px 20px;
        h6{
          margin-bottom: 0;
          line-height: 1;
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 500; 
        }
        .nice-select{
          height: 30px;  
          background-color: var(--primary-color1); 
          padding-left: 15px;
          padding-right: 35px;
          &::after{
            border-color: var(--title-color);
            right: 18px;
            height: 7px;
            width: 7px;
          }
          .current{
            color: var(--title-color);
            font-weight: 600;
            font-size: 13px;
          }
        }
      }
    }
  }
  .faq-wrap{
    border-radius: 10px;
    border: 1px solid rgba(#eee, 0.61);
    padding: 20px; 
    @include sm-down-device(){
      padding: 10px 10px;  
    }
  }
}
.faq-inquiery-form{
  background: #F6EFF7;
  position: relative;
  .form-img{
    position: absolute;
    right: 0;
    bottom: 0;
    img{
      @include xxl-device(){
        max-width: 800px;
      }
      @include fifteen-down-device(){
        max-width: 750px;
      }
      @include xxl-down-device(){
        max-width: 670px;
      }
    }
  }
  .section-title{
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 40px;
    }
  }
  form{
    border-radius: 10px;
    background: #FFF; 
    padding: 40px 50px;
    @include sm-down-device(){
      padding: 40px 25px;
    }
  }
  .form-inner{
    label{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 14px;
      font-weight: 500;
      display: inline-block;
      margin-bottom: 5px;
    }
    input{
      border-radius: 5px;
      border: 1px solid #EEE;
      background: #FBF7FB;
      height: 50px;
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 20px;
      width: 100%;
      &::placeholder{
        color: rgba(#13141A, .5);
      }
      &:focus{
        border: 1px solid #DF0101;
        background: #FFF;
      }
    }
    textarea{
      border-radius: 5px;
      border: 1px solid #EEE;
      background: #FBF7FB;
      min-height: 150px;
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 20px;
      width: 100%;
      outline: none;
      &::placeholder{
        color: rgba(#13141A, .5);
      }
      &:focus{
        border: 1px solid #DF0101;
        background: #FFF;
      }
    }
  }
  .primary-btn3{
    padding: 18px 28px;
  }
}
/*=====================================
   52. Pricing Plan  Page
========================================*/
.pricing-plan-section{
  .single-plan{
    border-radius: 10px;
    background: #FBF7FB;  
    padding: 60px 35px;
    position: relative;
    .batch{
      position: absolute;
      left: 0;
      top: 0;
      line-height: 1;
      span{
        color: #FFF;
        font-family: var(--font-montserrat);
        font-size: 12px;
        font-weight: 600; 
        background-color: #3C50FE;
        padding: 7px 21px;
        border-radius: 10px 0 10px 0;
        display: inline-block;
      }
    }
    .pricing-top{
      line-height: 1;
      margin-bottom: 35px;
      h3{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 36px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 10px;
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 28px;   
        margin-bottom: 0;
      }
    }
    .plan-rate{
      margin-bottom: 30px;
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        sub{
          color: var(--text-color);
          font-size: 16px;
          bottom: -0.15em; 
          font-weight: 400; 
          &.red{
            font-weight: 600; 
            color: #FF5E3A;
          }
        }
      }
    }
    .plan-btn-area{
      margin-bottom: 35px;
      .primary-btn3{
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 18px 25px;
      }
      .primary-btn6{
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 17px 25px;
        line-height: 1;
      }
      .call-now{
        color: var(--title-color);
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 12px;
        font-weight: 600;
        line-height: 28px;
        text-decoration-line: underline;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        transition: 0.35s;
        &:hover{
          color: var(--primary-color1);
        }
      }
    }
    .pricing-content{
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 15px;
        font-weight: 600; 
        margin-bottom: 18px;
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          margin-bottom: 20px;
          &:last-child{
            margin-bottom: 0;
          }
          svg{
            fill: var(--title-color);
          }
        }
      }
    }

  }
}
/*=====================================
   53. Contact Page
========================================*/
.contact-page{
  .single-location{
    border-radius: 10px;
    border: 1px solid #EEE;  
    padding: 40px;
    @include md-down-device(){
      padding: 40px 25px;

    }
    .title-and-view-btn{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      h5{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 18px;
        font-weight: 600;  
        margin-bottom: 0;
        line-height: 1;
      }
      a{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 12px;
        font-weight: 600;  
        transition: 0.35s;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 5px;
        svg{
          fill: var(--title-color);
          transition: 0.35s;
        }
        &:hover{
          color: var(--primary-color1);
          svg{
            fill: var(--primary-color1);
          }
        }
      }
    }
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      li{
        display: flex;
        align-items: center;
        gap: 14px;
        line-height: 1;
        margin-bottom: 10px;
        transition: 0.35s;
        &:last-child{
          margin-bottom: 0;
        }
        .icon{
          max-width: 34px;
          min-width: 34px;
          height: 34px;   
          border: 1px solid #eee; 
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.35s;
          svg{
            transition: 0.35s;
            fill: var(--primary-color1);
          }
        }
        .info{
          line-height: 1;
          a{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 15px;
            font-weight: 500;
            line-height: 26px;
            display: block;
            &:hover{
              color: var(--primary-color1);
            }
          }
        }
        &:hover{
          .icon{
            background-color: var(--primary-color1);
            svg{
              fill: var(--title-color);
            }
          }
        }
      }
    }
  }
  .single-contact{
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    .title{
      line-height: 1;
      background-color: var(--white-color);
      position: absolute;
      left: 35px;
      top: -9px;
      padding: 0 20px;
      h6{
        margin-bottom: 0;
        line-height: 1;
        color: #5E5E5E;
        font-family: Open Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;     
      }
    }
    .icon{
      width: 40px;
      height: 40px;  
      border-radius: 5px;  
      background-color: var(--primary-color1);
      display: flex;
      align-items: center;
      justify-content: center;
      svg{
        fill: var(--title-color);
      }
    }
    .content{
      line-height: 1;
      span{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 12px;
        font-weight: 600; 
        line-height: 1;
      }
      h6{
        margin-bottom: 0;
        a{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;
          transition: 0.35s;
          &:hover{
            color: var(--primary-color1);
          }

        }
      }
    }
  }
  .service-available{
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding-top: 15px;
    span{
      color: #FF4820;
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
    }
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 0;
      strong{
        font-weight: 600;
      }
    }
  }
  .section-title{
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 26px;
      font-weight: 700;
    }
  }
  .inquiry-form{
    border-radius: 10px;
    background: #F6EFF7;
    padding: 45px 60px 50px;
    @include md-down-device(){
      padding: 45px 25px 50px;
    }
    .title{
      margin-bottom: 25px;
      h4{
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 24px;
        font-weight: 700; 
      }
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        margin-bottom: 0;
      }
    }
    .form-inner{
      position: relative;
      line-height: 1;
      label{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 600;
        display: block;
        margin-bottom: 10px;
        span{
          color: var(--text-color);
        }
        &.containerss {
          display: flex;
          width: 100%;
          position: relative;
          padding-left: 28px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 16px;
            font-weight: 400 !important;
            line-height: 1;    
            &.text{
              font-weight: 600;
            }
          }
          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
              border-radius: 2px;
              // &::after {
              //   display: block;
              // }
              &::after {
                content: url(../img/inner-page/icon/checkbox-check.svg);
                left: 1.5px;
                top: -3px;
                position: absolute;
              }
            }
          }   
          .checkmark {
            position: absolute;
            top: 0px;
            left: 0;
            height: 14px;
            width: 14px;
            background-color: var(--primary-color1);
            border: 1px solid var(--primary-color1);
            border-radius: 2px;
          }   
          &:hover{
            input ~ .checkmark {
              border-color: var(--primary-color1);
            }
          }    
          .stars{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
            margin-top: -2px;
            li{
              line-height: 1;
              i{
                color: #DDA701;
                font-size: 13px;
              }
              a{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 600;
              }
            }
          }    
        }
      }
      input{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        font-weight: 400;  
        height: 50px;
        width: 100%;
        padding: 10px 20px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      textarea{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        width: 100%;
        padding: 20px 20px;
        outline: none;
        border: none;
        min-height: 100px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      .primary-btn3{
        padding: 17px 28px;
        justify-content: center;
      }
    }
  }
}
.contact-map{
  line-height: 0;
  iframe {
    width: 100%;
    height: 450px;
  }
}
/*=====================================
   54. Error  Page
========================================*/
.error-page{
  background-color: #FAF8FB;
  padding: 165px 0;
  @include sm-down-device(){
    padding: 130px 0;

  }
  .error-wrapper{
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
    .error-content-area{
      h1{
        color: #000;
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      p{
        color: #000;
        text-align: center;
        font-family: var(--font-montserrat);
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 35px;
      }
      .primary-btn3{
        padding: 18px 31px;
      }
    }
  }
}
/*=====================================
   55. Customer Feedback Page
========================================*/
.customer-feedback-pages{
  .feedback-card {
    padding: 40px 30px;
    background: #FAF8FB;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: 0.35s;

    .feedback-top {
      display: flex;
      align-items: end;
      justify-content: space-between;
      margin-bottom: 15px;

      .stat-area {
        display: flex;
        flex-direction: column;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 5px;
          padding-top: 7px;
          margin-bottom: 5px;

          li {
            line-height: 1;

            i {
              font-style: 13px;
              color: #DDA701;
            }
          }
        }

        img {
          margin-bottom: 5px;
        }

        span {
          font-family: var(--font-open-sans);
          font-weight: 600;
          font-size: 14px;
          line-height: 19px;
          color: var(--title-color);
        }
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 32px;
      color: var(--text-color);
    }

    .author-name {
      display: flex;
      align-items: center;
      gap: 6px;

      h6 {
        margin-bottom: 0;
        font-family: var(--font-montserrat);
        font-weight: 700;
        font-size: 14px;
        line-height: 17px;
        color: var(--title-color);
        padding-left: 30px;
        position: relative;

        &::after {
          content: '';
          height: 1px;
          width: 20px;
          background-color: var(--title-color);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      span {
        color: var(--text-color);
        font-size: 12px;
        font-family: var(--font-open-sans);
        font-weight: 600;
      }
    }
    &:hover {
      border-color: var(--primary-color1);
    }
  }
  .primary-btn3{
    padding: 18px 45px;
  }
}
/*=====================================
   56. Reaturn and Exchange Page
========================================*/
.return-and-exchange-pages{
  .update-date{
    display: flex;
    align-items: center;
    gap: 48px;
    line-height: 1;
    h6{
      margin-bottom: 0;
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 14px;
      font-weight: 500;  
      line-height: 1;
      i{
        color: var(--primary-color1);
      }
      position: relative;
      &::after{
        content: '';
        width: 28px;
        height: 1px;
        background-color: var(--title-color);
        position: absolute;
        right: -38px;
        top: 50%;
        transform: translateY(-50%);

      }
    }
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 400;  
      margin-bottom: 0;
      
    }
  }
  .return-and-exchange{
    h4{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      font-size: 26px;
      font-weight: 700;  
      margin-bottom: 15px;
    }
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 16px;
      font-weight: 400;
      line-height: 30px; 
      &:last-child{
        margin-bottom: 0;
      }
    }
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      padding-left: 50px;
      margin-bottom: 5px;
      @include md-down-device(){
        padding-left: 20px;
      }
      li{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;    
        margin-bottom: 15px;
        strong{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;
          line-height: 30px;
        }
      }
    }
  }
}

.range-wrapper2{
  .slider-wrapper{
    margin-bottom: 25px;
 
    .ui-slider-horizontal {
      height: 10px;
      border-radius: 10px;
    
    }
    .ui-widget.ui-widget-content {
      border: none;
      background-color: #EEEEEE;
      border: 1px solid #EEEEEE;
    }
    .ui-slider-range{
      background-color: var(--primary-color1);
    }
    .ui-slider-handle{
      border: 5px solid var(--primary-color1);
      border-radius: 50%;
      width: 18px;
      height: 18px;
      background-color: var(--white-color);
      top: -7px;
      display: inline-block;
      position: relative;
      &:focus-visible{
        outline: none;
      }
    }
  
  }
  .valus{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .min-value, .max-value{
      max-width: 45%;
      width: 100%;
      height: 50px;
      border-radius: 5px;
      background-color: #F3F3F3;

      display: flex;
      align-items: center;
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 400;
      padding: 15px;
      span{
        line-height: 1;
        display: flex;
        margin-top: 3px;
      }
      input{
        width: 100%;
        background-color: transparent;
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;  
        line-height: 1;  
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
    }
  }
}
/*=====================================
   57. Pricing Checkout Page
========================================*/
.thankyou-modal{
  .modal-dialog{
    max-width: 630px;
    width: 100%;
    .modal-content{
      position: relative;
      .btn-close{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 72, 32, 0.14);
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 0;
        margin: 0;
        opacity: 1;
        background-image: none;
        line-height: 1;
        z-index: 99;
        transition: 0.35s;
        i{
          color: #FF4820;
          font-size: 24px;
          line-height: 1;
          transition: 0.35s;
        }
        &:hover{
          background-color: #FF4820;
          i{
            color: var(--white-color);
          }
        }
      }
      .modal-body{
        padding: 50px 30px;
        .thank-you-wrapper{
          .thank-you-img{
            margin-bottom: 80px;
            @include sm-down-device(){
              margin-bottom: 60px;
            }
          }
          .thank-you-content{
            text-align: center;
            h3{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 30px;
              font-weight: 600;
              line-height: 1.4;
              margin-bottom: 15px;
            }
            p{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 14px;
              font-weight: 400;
              line-height: 1.6;
              margin-bottom: 50px;
              @include sm-down-device(){
                margin-bottom: 30px;
              }
            }
            .subscription-area{
              a{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;
                line-height: 1;
                white-space: nowrap;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                svg{
                  fill: var(--title-color);
                }
              }
            }
          }
        }
      }
    }
  }
}
.pricing-checkout-page{
  .package-and-login-area{
    border-radius: 10px;
    background: #FBF7FB; 
    padding: 25px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    border-bottom: 2px solid #FF4820;
    margin-bottom: 60px;
    p{
      color: var(--text-color);
      font-family: var(--font-open-sans);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 0;
    }
    button{
      color: var(--title-color);
      font-family: var(--font-montserrat);
      background-color: transparent;
      text-transform: capitalize;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      svg{
        fill: var(--black-color);
      }
    }
  }
  .package-pricing-area{
    background-color: #FBF7FB;
    padding: 50px;
    border-radius: 10px 0 0 10px;
    height: 100%;
    position: relative;
    .package-title{
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(#16191E, 0.1);
      margin-bottom: 60px;
      @include md-down-device(){
        margin-bottom: 40px;
      }
      h6{
        color: var(--black-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
      }
    }
    .package-price-permonth{
      margin-bottom: 50px;
      @include md-down-device(){
        margin-bottom: 40px;
      }
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        sub{
          color: var(--text-color);
          font-size: 16px;
          bottom: -0.15em;
          font-weight: 400;
        }
      }
    }
    .package-pricing-content{
      padding-bottom: 100px;
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 15px;
        font-weight: 600; 
        margin-bottom: 18px;
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--title-color);
          font-family: var(--font-open-sans);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          margin-bottom: 20px;
          &:last-child{
            margin-bottom: 0;
          }
          svg{
            fill: var(--title-color);
          }
        }
      }
    }
    .back-btn{
      position: absolute;
      bottom: 50px;
      a{
        svg{
          fill: var(--title-color);
        }
        color: var(--black-color);
        font-family: var(--font-montserrat);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px; 
      }
    }
  }
  .details-form{
    background: #F6EFF7;
    padding: 50px 70px;
    @include lg-down-device(){
      padding: 50px;
    }
    .details-form-title{
      margin-bottom: 40px;
      h4{
        color: var(--black-color);
        font-family: var(--font-montserrat);
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
      }
    }
    .form-inner{
      position: relative;
      line-height: 1;
      label{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 10px;
        &.containerss {
          display: flex;
          width: 100%;
          position: relative;
          padding-left: 28px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          span{
            color: var(--text-color);
            font-family: var(--font-open-sans);
            font-size: 16px;
            font-weight: 400 !important;
            line-height: 1.2;    
            &.text{
              font-weight: 600;
            }
          }
          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
              border-radius: 2px;
              // &::after {
              //   display: block;
              // }
              &::after {
                content: url(../img/inner-page/icon/checkbox-check.svg);
                left: 2.5px;
                top: -3px;
                position: absolute;
              }
            }
          }   
          .checkmark {
            position: absolute;
            top: 0px;
            left: 0;
            height: 16px;
            width: 16px;
            background-color: var(--primary-color1);
            border: 1px solid var(--primary-color1);
            border-radius: 2px;
          }   
          &:hover{
            input ~ .checkmark {
              border-color: var(--primary-color1);
            }
          }    
          .stars{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
            margin-top: -2px;
            li{
              line-height: 1;
              i{
                color: #DDA701;
                font-size: 13px;
              }
              a{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 600;
              }
            }
          }    
        }
      }
      input{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        border: 1px solid #EEE;
        font-size: 13px;
        font-weight: 400;  
        height: 50px;
        width: 100%;
        padding: 10px 20px;
        &::placeholder{
          color: var(--text-color);
        }
        &:focus{
          border: 1px solid var(--primary-color1);
        }
      }
      textarea{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        width: 100%;
        padding: 20px 20px;
        outline: none;
        border: none;
        min-height: 100px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      .primary-btn3{
        padding: 17px 36px;
        justify-content: center;
      }
      .iti {
        width: 100%;
        input{
          padding-left: 82px;
        }
      }
      .iti__flag-container{
        top: 8px;
        left: 8px;
      }
      .iti__selected-flag{
        padding-left: 16px;
        width: 60px;
        height: 34px;
        background-color: #FAF8FB;
        border: 1px solid #eee;
      }
      .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
        background-color: transparent;
      }
      .iti__country-list{
        max-width: 280px;
        box-shadow: unset;
        background-color: white;
        border: 1px solid var(--primary-color1);
        .iti__country.iti__highlight{
          background-color: rgba(#DF0101, .5);
          
        }
        li{
          font-family: var(--font-montserrat);
          font-weight: 400;
          span{
            font-family: var(--font-montserrat);
            font-weight: 400;
          }
        }
      }
    }
    .payment-options{
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 40px;
      @include sm-down-device(){
        flex-wrap: wrap;
        gap: 20px;
      }
      li{
        padding-left: 25px;
        position: relative;
        line-height: 1;
        color: var(--black-color);
        font-family: var(--font-montserrat);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        .checked{
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: #D2E7EF;
          border: 1px solid #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -1px;
          left: 0;
          svg{
            fill: var(--black-color);
            opacity: 0;
          }
        }
        &.active{
          .checked{
            background-color: var(--primary-color1);
            svg{
              opacity: 1;
            }
          }
        }
      }
    }
    .payment-form{
      .form-inner{
        .card-number-input{
          position: relative;
          img{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
          }
        }
      }
    }
  }
}

/*=====================================
   58. Dashboard Pages
========================================*/
.subscription-plan-modal{
  .modal-dialog{
    max-width: 1370px;
    width: 100%;
    .modal-content{
      position: relative;
      .btn-close{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 72, 32, 0.14);
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 0;
        margin: 0;
        opacity: 1;
        background-image: none;
        line-height: 1;
        z-index: 99;
        transition: 0.35s;
        i{
          color: #FF4820;
          font-size: 24px;
          line-height: 1;
          transition: 0.35s;
        }
        &:hover{
          background-color: #FF4820;
          i{
            color: var(--white-color);
          }
        }
      }
      .modal-body{
        padding: 90px;
        
      }
    }
  }
}
.dashboard-wrapper{
  .dashboard-sidebar-wrapper{
    transition: all 0.8s ease-out 0s;
    background: #16191E;
    padding: 20px 25px;
    max-width: 305px;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    @include seventeen-down-device(){
      max-width: 270px;
    }
    @include xxl-device(){
      max-width: 235px;
    }
    @include xl-device(){
      max-width: 220px;
      padding: 20px 15px;
    }
    @include xl-down-device(){
      max-width: 200px;
      padding: 20px 15px;
    }
    @include lg-down-device(){
      left: -100%;
      &.slide{
        left: 0;
      }
    }
    @include md-down-device(){
      max-width: 120px;
    }
    @include sm-down-device(){
      max-width: 80px;
    }
    .dashboard-sidebar-logo{
      padding-bottom: 100px;
    }
    .dashboard-sidebar-menu{
      >ul{
        padding: 0;
        margin: 0;
        list-style: none;
        li{
          a{
            color: var(--white-color);
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px 25px;
            @include xxl-device(){
              padding: 15px 25px;
            }
            @include xxl-down-device(){
              padding: 15px 25px;
            }
            @include xl-device(){
              font-size: 14px;
            }
            @include xl-down-device(){
              flex-direction: column;
            }
            svg{
              fill: var(--primary-color1);
              @include md-down-device(){
                width: 25px;
                height: 25px;
              }
            }
            h6{
              color: var(--white-color);
              font-family: var(--font-montserrat);
              font-size: 15px;
              font-weight: 600;
              margin-bottom: 0;
              @include md-down-device(){
                display: none;
              }
            }
          }
          &.active{
            a{
              background-color: var(--primary-color1);
              border-radius: 5px;
              svg{
                fill: var(--title-color);
              }
              h6{
                color: var(--title-color);
              }
            }
          }
        }
      }
      .logout{
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--white-color);
        white-space: nowrap;
        padding: 20px 25px;
        @include xl-down-device(){
          flex-direction: column;
        }
        @include md-down-device(){
          justify-content: center;
        }
        @include sm-down-device(){
          padding: 15px 0;
        }
        svg{
          fill: var(--primary-color1);
          @include md-down-device(){
            width: 25px;
            height: 25px;
          }
        }
        h6{
          color: var(--white-color);
          font-family: var(--font-montserrat);
          font-size: 16px;
          font-weight: 600;
          line-height: 1;
          @include md-down-device(){
            display: none;
          }
        }
      }
    }
  }
  .main-content{
    transition: all 0.8s ease-out 0s;
    padding: 60px 40px;
    margin-left: 305px;
    max-width: calc(100% - 305px);
    width: 100%;
    @include seventeen-down-device(){
      padding: 60px 30px;
      margin-left: 270px;
      max-width: calc(100% - 270px);
    }
    @include xxl-device(){
      padding: 60px 20px;
      margin-left: 235px;
      max-width: calc(100% - 235px);
    }
    @include xl-device(){
      margin-left: 220px;
      max-width: calc(100% - 220px);
      padding: 60px 15px;
    }
    @include xl-down-device(){
      padding: 60px 20px;
      margin-left: 200px;
      max-width: calc(100% - 200px);
    }
    @include lg-down-device(){
      max-width: calc(100%);
      margin-left: 0;
      &.slide{
        margin-left: 200px;
        max-width: calc(100% - 200px);
      }
    }
    @include md-down-device(){
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 120px;
        max-width: calc(100% - 120px);
      }
      
    }
    @include sm-down-device(){
      padding: 40px 5px;
      margin-left: 0px;
      max-width: calc(100%);
      overflow: hidden;
      &.slide{
        margin-left: 80px;
        max-width: calc(100% - 80px);
      }
    }
    .form-inner{
      position: relative;
      line-height: 1;
      label{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 10px;
        &.containerss {
          display: flex;
          width: 100%;
          position: relative;
          padding-left: 20px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          span{
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 15px;
            font-weight: 400;
            line-height: 1.4;    
            @include sm-down-device(){
              font-size: 14px;
            }
          }
          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1);
              border-color: var(--primary-color1);
              border-radius: 2px;
              // &::after {
              //   display: block;
              // }
              &::after {
                content: url(../img/inner-page/icon/checkbox-check.svg);
                left: 1.5px;
                top: -5px;
                position: absolute;
              }
            }
          }   
          .checkmark {
            position: absolute;
            top: 3px;
            left: 0;
            height: 14px;
            width: 14px;
            background-color: var(--primary-color1);
            border: 1px solid var(--primary-color1);
            border-radius: 2px;
          }   
          &:hover{
            input ~ .checkmark {
              border-color: var(--primary-color1);
            }
          }     
        }
      }
      input{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        border: 1px solid #EEE;
        font-size: 13px;
        font-weight: 400;  
        height: 50px;
        width: 100%;
        padding: 10px 20px;
        &::placeholder{
          color: var(--text-color);
        }
        &:focus{
          border: 1px solid var(--primary-color1);
        }
      }
      textarea{
        border-radius: 5px;
        background: var(--white-color);
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 13px;
        width: 100%;
        padding: 20px 20px;
        outline: none;
        border: none;
        min-height: 100px;
        &::placeholder{
          color: rgba(#13141A, .5);
        }
      }
      >i{
        position: absolute;
        right: 20px;
        bottom: 15px;
        color: var(--primary-color1);
        cursor: pointer;
      }
      .primary-btn3{
        padding: 17px 25px;
        justify-content: center;
      }
      .nice-select{
        background-color: var(--white-color);
      }
      .iti {
        width: 100%;
        input{
          padding-left: 82px;
        }
      }
      .iti__flag-container{
        top: 8px;
        left: 8px;
      }
      .iti__selected-flag{
        padding-left: 16px;
        width: 60px;
        height: 34px;
        background-color: #FAF8FB;
        border: 1px solid #eee;
      }
      .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
        background-color: transparent;
      }
      .iti__country-list{
        max-width: 280px;
        box-shadow: unset;
        background-color: white;
        border: 1px solid var(--primary-color1);
        .iti__country.iti__highlight{
          background-color: rgba(#DF0101, .5);
          
        }
        li{
          font-family: var(--font-montserrat);
          font-weight: 400;
          span{
            font-family: var(--font-montserrat);
            font-weight: 400;
          }
        }
      }
    }
    .dashboard-message-wrapper{
      .s-d-p-0{
        @include sm-down-device(){
          padding: 0;
        }
      }
      .inbox-wrap{
        padding: 50px;
        background-color: var(--white-color);
        border-radius: 10px;
        @include xxl-device(){
          padding: 50px 40px;
        }
        @include xxl-down-device(){
          padding: 50px 25px;
        }
        @include lg-down-device(){
          padding: 40px 15px;
        }
        @include sm-down-device(){
          border-right: 1px solid #eee;
          border-radius: 0;
        }
        .inbox-top-area{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 20px;
          border-bottom: 1px solid #eee;
          margin-bottom: 15px;
          @include lg-down-device(){
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
          }
          .inbox-title{
            @include sm-down-device(){
              display: none;
            }
            h6{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 20px;
              font-weight: 600;
              line-height: 1;
              margin-bottom: 0;
            }
          }
          .inbox-search-and-dropdown{
            display: flex;
            align-items: center;
            gap: 20px;
            @include md-down-device(){
              flex-wrap: wrap;
            }
            .inbox-search-icon{
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-color: #F3F3F3;
              display: flex;
              align-items: center;
              justify-content: center;
              i{
                font-size: 12px;
              }
            }
            .inbox-dropdown-area{
              .nice-select{
                height: 24px;
                padding: 0px 26px 0 10px;
                .current{
                  color: var(--title-color);
                  font-family: var(--font-montserrat);
                  font-size: 12px;
                  font-weight: 600;
                }
                &::after{
                  width: 7px;
                  height: 7px;
                  right: 12px;
                }
                .list{
                 .option{
                  padding-left: 10px;
                  min-height: unset;
                  height: 24px;
                  line-height: 24px;
                 }
                }
              }
            }
          }
        }
        .inbox-message-list{
          >span{
            color: var(--text-color);
            font-family: var(--font-montserrat);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            display: inline-block;
            margin-bottom: 20px;
            @include md-down-device(){
              text-align: center;
            }
          }
          ul{
            padding: 0;
            margin: 0;
            list-style: none;
            li{
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 15px;
              margin-bottom: 35px;
              @include xxl-down-device(){
                gap: 10px;
              }
              @include md-down-device(){
                justify-content: center;
              }
              @include sm-down-device(){
                margin-bottom: 25px;
              }
              &:last-child{
                margin-bottom: 0;
              }
              .time-status{
                text-align: center;
                @include lg-down-device(){
                  display: none;
                }
                .time{
                  margin-bottom: 10px;
                  line-height: 1;
                  span{
                    color: var(--text-color);
                    font-family: var(--font-open-sans);
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 1;
                    white-space: nowrap;
                  }
                }
                .status{
                  display: flex;
                  justify-content: flex-end;
                  span{
                    color: var(--white-color);
                    font-family: var(--font-open-sans);
                    font-size: 10px;
                    font-weight: 700;
                    line-height: 1;
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    background-color: #FF5925;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  svg{
                    fill: var(--text-color);
                  }
                  &.seen{
                    svg{
                      fill: #DF0101;
                    }
                  }
                }
              }
              .author-area{
                display: flex;
                align-items: center;
                gap: 8px;
                .author-img{
                  img{
                    width: 47px;
                    height: 47px;
                    border-radius: 50%;
                    max-width: unset;
                    @include sm-down-device(){
                      height: 36px;
                      width: 36px;
                    }
                  }
                }
                .author-content{
                  @include md-down-device(){
                    display: none;
                  }
                  h6{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1;
                    margin-bottom: 12px;
                    @include lg-down-device(){
                      font-size: 14px;
                    }
                  }
                  p{
                    color: var(--text-color);
                    font-family: var(--font-open-sans);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1; 
                    margin-bottom: 0;
                    @include lg-down-device(){
                      font-size: 13px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .conversation-wrap{
        background-color: var(--white-color);
        border-radius: 10px;
        height: 100%;
        position: relative;
        .conversation-top{
          padding: 40px;
          background-color: #F6EFF7;
          margin-bottom: 100px;
          position: sticky;
          left: 0;
          top: 60px;
          width: 100%;
          @include xl-down-device(){
            padding: 40px 20px;
          }
          @include lg-down-device(){
            padding: 30px 20px;
          }
          @include sm-down-device(){
            padding: 20px 15px;
          }
          .conversation-author-area{
            display: flex;
            align-items: center;
            gap: 20px;
            @include sm-down-device(){
              gap: 10px;
            }
            .author-img{
              position: relative;
              width: 71px;
              height: 71px;
              border-radius: 50%;
              @include sm-down-device(){
                width: 47px;
                height: 47px;
              }
              img{
                width: 71px;
                height: 71px;
                border-radius: 50%;
                @include sm-down-device(){
                  width: 47px;
                  height: 47px;
                }
              }
              .active-status{
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 3px solid var(--white-color);
                background-color: #24BC61;
                display: inline-block;
                position: absolute;
                bottom: 3px;
                right: 3px;
                @include sm-down-device(){
                  bottom: 0;
                  right: -3px;
                }
              }
            }
            .author-content{
              h6{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 18px;
                font-weight: 600;
                line-height: 1;
                margin-bottom: 10px;
                @include sm-down-device(){
                  font-size: 14px;
                  margin-bottom: 5px;
                }
              }
              p{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 400;
                line-height: 1.4;
                margin-bottom: 0;
                @include sm-down-device(){
                  font-size: 13px;
                }
              }
            }
          }
        }
        .conversation-area{
          padding: 30px 40px;
          @include xl-down-device(){
            padding: 30px 20px;
          }
          @include sm-down-device(){
            padding: 20px 15px;
          }
          .conversation-date{
            text-align: center;
            position: relative;
            margin-bottom: 90px;
            span{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 12px;
              font-weight: 500;
              line-height: 1;
              padding: 8px 31px;
              background-color: var(--white-color);
              border-radius: 14.5px;
              border: 1px solid #EEE;
              display: inline-block;
              z-index: 1;
              position: relative;
            }
            &::before{
              content: '';
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 100%;
              height: 1px;
              background-color: #eee;
            }
          }
          .single-conversation{
            display: flex;
            gap: 15px;
            @include sm-down-device(){
              gap: 10px;
            }
            .author-img{
              img{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                max-width: unset;
              }
            }
            .author-content{
              .author-name-and-date{
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 15px;
                @include sm-down-device(){
                  flex-wrap: wrap;
                  gap: 10px;
                }
                h6{
                  color: var(--title-color);
                  font-family: var(--font-montserrat);
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 1;
                  margin-bottom: 0;
                }
                span{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 1;
                }
              }
              .conversation-list{
                padding: 0;
                margin: 0;
                list-style: none;
                max-width: 310px;
                width: 100%;
                li{
                  color: var(--title-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1.4;
                  padding: 10px 15px;
                  border: 1px solid #eee;
                  border-radius: 0 10px 10px;
                  margin-bottom: 10px;
                  &:last-child{
                    margin-bottom: 0;
                  }
                  @include sm-down-device(){
                    font-size: 13px;
                  }
                }
              }
            }
            &.two{
              justify-content: flex-end;
              .author-name-and-date{
                justify-content: flex-end;
              }
              .conversation-list{
                li{
                  border-radius: 10px 0 10px 10px;
                }
              }
            }
          }
          .from-wrapper{
            background-color: #FAF8FB;
            border-radius: 50px;
            padding: 10px 20px;
            position: sticky;
            left: 0;
            bottom: 0;
            width: 100%;

            @include xl-down-device(){
              padding: 5px;
            }
            .from-inner{
              background-color: var(--white-color);
              padding: 20px 40px;
              border-radius: 50px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 10px;
              @include xxl-down-device(){
                padding: 10px 25px;
              }
              @include lg-down-device(){
                padding: 5px 15px;
              }
              .input-area{
                display: flex;
                align-items: center;
                gap: 20px;
                width: 100%;
                @include lg-down-device(){
                  gap: 10px;
                }
                .add-icon{
                  width: 36px;
                  height: 36px;
                  border-radius: 50%;
                  background-color: #FAF8FB;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  @include lg-down-device(){
                    background-color: transparent;
                    width: unset;
                    height: unset;
                  }
                  i{
                    font-size: 14px;
                    @include sm-down-device(){
                      font-size: 12px;
                    }
                  }
                }
                input{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1;
                  width: 100%;
                  @include lg-down-device(){
                    font-size: 12px;
                  }
                }
              }
              .icon-list{
                padding: 0;
                margin: 0;
                list-style: none;
                display: flex;
                align-items: center;
                gap: 25px;
                @include xl-down-device(){
                  gap: 15px;
                }
                @include sm-down-device(){
                  gap: 10px;
                }
                li{
                  button{
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background-color: #FAF8FB;
                    transition: 0.5s;
                    &:hover{
                      background-color: var(--primary-color1);
                      @include lg-down-device(){
                        background-color: unset;
                      }
                    }
                    @include lg-down-device(){
                      background-color: transparent;
                      width: unset;
                      height: unset;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .pagination-area{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      @include sm-down-device(){
        flex-wrap: wrap;
      }
      .paginations{
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 15px;
        .page-item{
          a{
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid rgba(22, 25, 30, 0.10);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.active{
            a{
              background-color: var(--primary-color1);
            }
          }
        }
      }
      .paginations-buttons{
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 40px;
        li{
          a{
            svg{
              fill: var(--text-color);
              transition: 0.5s;
            }
            color: var(--text-color);
            font-family: var(--font-montserrat);
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            transition: 0.5s;
            &:hover{
              color: var(--primary-color1);
              svg{
                fill: var(--primary-color1);
              }
            }
          }
          &:last-child{
            position: relative;
            &::before{
              content: '';
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: -20px;
              width: 1px;
              height: 14px;
              background-color: rgba(#16191E, 0.4);
            }
          }
        }
      }
    }
    .main-content-title-profile{
      display: flex;
      align-items: baseline ;
      justify-content: space-between;
      gap: 15px;
      @include md-down-device(){
        flex-wrap: wrap;
      }
      @include sm-down-device(){
        flex-direction: column;
      }
      .main-content-title{
        display: flex;
        align-items: center;
        gap: 10px;
        h3{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 30px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 0;
          @include sm-down-device(){
            font-size: 24px;
          }
        }
        img{
          @include sm-down-device(){
            display: none;
          }
        }
      }
      .profile{
        a{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 13px;
          font-weight: 600;
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 6px;
          transition: 0.5s;
          svg{
            fill: var(--title-color);
            transition: 0.5s;
          }
          &:hover{
            color: var(--primary-color1);
            svg{
              transform: rotate(45deg);
              fill: var(--primary-color1);
            }
          }
        }
      }
    }
    .counter-area{
      margin-bottom: 40px;
      .counter-single{
        background-color: #03C170;
        border-radius: 10px;
        padding: 35px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        position: relative;
        @include seventeen-down-device(){
          padding: 35px 15px;
          gap: 15px;
        }
        @include xxl-device(){
          padding: 30px 15px;
        }
        @include xxl-down-device(){
          padding: 25px 15px;
          gap: 12px;
        }
        .counter-content{
          p{
            color: var(--white-color);
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 8px;
            @include xl-device(){
              margin-bottom: 3px;
            }
          }
          .number{
            color: var(--white-color);
            font-family: var(--font-montserrat);
            font-size: 30px;
            font-weight: 600;
            line-height: 1;
            display: flex;
            align-items: center;
            @include xl-device(){
              font-size: 25px;
            }
            h3{
              margin-bottom: 0;
              color: var(--white-color);
              font-family: var(--font-montserrat);
              font-size: 30px;
              font-weight: 600;
              @include xl-device(){
                font-size: 25px;
              }
            }
          }
        }
        .counter-area-vector{
          position: absolute;
          top: -70px;
          left: 45px;
          @include xl-down-device(){
            display: none;
          }
        }
        &.two{
          background: #3093EF;
        }
        &.three{
          background: #F27C3A;
        }
        &.four{
          background: #118CB2;
        }
      }
    }
    .recent-listing-area{
      border-radius: 10px;
      background: #FFF;
      padding: 50px;
      @include xxl-device(){
        padding: 50px 30px;
      }
      @include xxl-down-device(){
        padding: 50px 30px;
      }
      @include xl-down-device(){
        padding: 50px 25px;
      }
      h6{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 45px;
        @include xxl-down-device(){
          margin-bottom: 30px;
        }
      }
      .recent-listing-table{
        .eg-table2 {
          width: 100%;
          margin-bottom: 30px;
          thead {
            tr {
              border-bottom: 1px solid #eee;
              th {
                padding: 0 15px 20px;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 14px;
                font-weight: 600;
                line-height: 1.4;
                text-transform: capitalize;
                text-align: center;
                &:first-child{
                  padding-left: 0;
                  text-align: start;
                }
                @include xxl-device(){
                  padding: 0 10px 20px;
                }
                @include xl-device(){
                  padding: 0 10px 20px;
                }
                @include xl-down-device() {
                  display: none;
                }
              }
            }
          }
    
          tbody {
            tr {
              border-bottom: 1px solid #E9E7E7;
              td {
                padding: 35px 15px;
                margin-bottom: 0;
                text-align: center;
                line-height: 1.2;
                &:first-child{
                  padding-left: 0;
                  text-align: start;
                }
                @include xxl-device(){
                  padding: 30px 10px;
                }
                @include xl-device(){
                  padding: 30px 10px;
                }
                .property-info-wrapper{
                  display: flex;
                  align-items: center;
                  gap: 25px;
                    @include xxl-device(){
                     gap: 15px;
                    }
                    @include xl-device(){
                      gap: 15px;
                    }
                    @include xl-down-device(){
                      gap: 15px;
                      flex-direction: column;
                      align-items: flex-end;
                    }
                    @include sm-down-device(){
                      padding-top: 40px;
                    }
                  .property-info-img{
                    img{
                      border-radius: 5px;
                      @include xxl-device(){
                        max-width: 150px;
                      }
                      @include xl-device(){
                        max-width: 150px;
                      }
                    }
                  }
                  .property-info-content{
                    
                    .location{
                      margin-bottom: 7px;
                      a{
                        color: var(--title-color);
                        font-family: var(--font-open-sans);
                        font-size: 12px;
                        font-weight: 600;
                        line-height: 1;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        @include xl-down-device(){
                          justify-content: flex-end;
                        }
                      }
                    }
                    h6{
                      margin-bottom: 35px;
                      line-height: 1.2;
                      @include xxl-device(){
                        margin-bottom: 20px;
                      }
                      @include xxl-down-device(){
                        margin-bottom: 15px;
                      }
                      @include lg-down-device(){
                        text-align: right;
                      }
                      a{
                        color: var(--title-color);
                        font-family: var(--font-montserrat);
                        font-size: 16px;
                        font-weight: 600;
                        transition: 0.35s;
                        &:hover{
                          color: var(--primary-color1);
                        }
                      }
                    }
                    .view-details{
                      color: var(--title-color);
                      font-family: var(--font-montserrat);
                      font-size: 13px;
                      font-weight: 600;
                      line-height: 1;
                      display: flex;
                      align-items: center;
                      gap: 8px;
                      transition: 0.35s;
                      @include xl-down-device(){
                        justify-content: flex-end;
                      }
                      &:hover{
                        color: var(--primary-color1);
                      }
                    }
                  }
                }
                span{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 600;
                  line-height: 1;
                  @include sm-down-device(){
                    font-size: 12px;
                  }
                  &.yellow{
                    color: var(--primary-color1);
                  }
                  &.black{
                    color: var(--title-color);
                  }
                }
                .action-buttons{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 15px;
                  padding: 0;
                  margin: 0;
                  list-style: none;
                  li{
                    cursor: pointer;
                  }
                  @include xl-down-device(){
                    justify-content: flex-end;
                  }
                }
                @include xl-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-Jost);
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    text-transform: capitalize;
                    @include sm-down-device(){
                      font-size: 13px;
                      font-weight: 700;
                    }
                  }
                }
    
                @include sm-down-device() {
                  padding-left: 40%;
                }
              }
    
    
              @include md-down-device() {
                display: block;
                width: 100%;
              }
            }
    
          }
        }
      }
    }
    .property-details-img{
      margin-top: 30px;
      margin-bottom: 40px;
      background-image: url(../img/dashboard/property-img.png);
      background-repeat: no-repeat;
      background-position: right center;
      padding: 25px 25px 70px;
      border-radius: 10px;
      @include lg-down-device(){
        background-position: left center;
      }
      .property-details-content{
        p{
          color: var(--black-color);
          font-family: var(--font-open-sans);
          font-size: 12px;
          font-weight: 600;
          line-height: 1.2;
          margin-bottom: 5px;
        }
        h6{
          color: var(--black-color);
          font-family: var(--font-montserrat);
          font-size: 18px;
          font-weight: 600;
          line-height: 1.2;
          margin-bottom: 20px;
        }
        .primary-btn3{
          font-size: 12px;
          padding: 10px 18px;
        }
      }
    }
    .message-area{
      border-radius: 10px;
      background-color: #FFF;
      padding: 50px 20px 50px;
      @include xxl-down-device(){
        padding: 50px 20px;
      }
      @include xl-device(){
        padding: 50px 15px;
      }
      .message-area-title{
        padding-bottom: 20px;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(238, 238, 238, 0.93);
        h6{ 
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 0;
        }
      }
      .message-list{
        padding: 0;
        margin: 0;
        list-style: none;
        padding-bottom: 25px;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(238, 238, 238, 0.93);
        li{
          margin-bottom: 35px;
          &:last-child{
            margin-bottom: 0;
          }
          .author-area {
              display: flex;
              align-items: center;
              gap: 20px;
                @include seventeen-down-device(){
                  gap: 10px;
                }
              @include lg-device(){
                flex-direction: column;
                align-items: start;
              }
              .author-img {
                img {
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  max-width: unset;
                  @include seventeen-down-device(){
                    width: 50px;
                    height: 50px;
                  }
                }
              }
          
              .author-content {
                .author-title {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  margin-bottom: 10px;
                  flex-wrap: wrap;
                  h6 {
                    color: var(--title-color);
                    font-family: var(--font-montserrat);
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1;
                    margin-bottom: 0;
                    padding-right: 7px;
                    @include xl-device(){
                      font-size: 14px;
                    }
                  }
          
                  span {
                    color: var(--text-color);
                    font-family: var(--font-open-sans);
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 1;
                  }
                }
          
                p {
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1.8;
                  margin-bottom: 0;
                  @include xl-device(){
                    font-size: 13px;
                  }
                }
              }
          }
        }
      }
      .view-message{
        color: var(--title-color);
        font-family: var(--font-montserrat);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: 0.5s;
        svg{
          fill: var(--title-color);
          transition: 0.5s;
        }
        &:hover{
          color: var(--primary-color1);
          svg{
            fill: var(--primary-color1);
            transform: rotate(45deg);
          }
        }
      }
    }
    .dashboard-profile-wrapper{
      border-radius: 10px;
      background-color: var(--white-color);
      padding: 50px;
      display: flex;
      gap: 40px;
      @include xxl-device(){
        padding: 50px 30px;
      }
      @include xxl-down-device(){
        padding: 50px 30px;
        gap: 30px;
      }
      @include lg-device(){
        padding: 40px 25px;
        gap: 20px;
      }
      @include lg-down-device(){
        flex-direction: column;
        padding: 40px 25px;
      }
      @include sm-down-device(){
        padding: 30px 15px;
      }
      .dashboard-profile-nav{
        border-radius: 5px;
        background: #FAF8FB;
        padding: 30px;
        max-width: 280px;
        min-width: 280px;
        height: 322px;
        @include xl-device(){
          max-width: 260px;
          min-width: 260px;
        }
        @include lg-device(){
          max-width: 240px;
          min-width: 240px;
        }
        @include sm-down-device(){
          max-width: 230px;
          min-width: 230px;
          padding: 30px 20px;
        }
        .nav-pills{
          max-width: 170px;
          width: 100%;
          .nav-item{
            margin-bottom: 20px;
            .nav-link{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 14px;
              font-weight: 600;
              line-height: 1;
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 10px 0;
              width: 100%;
              svg{
                fill: var(--title-color);
              }
              &.active{
                color: var(--primary-color1);
                border-radius: 17px;
                background: var(--white-color);
                padding: 10px 15px;
              }
            }
          }
        }
      }
      .dashboard-profile-tab-content{
        border-radius: 5px;
        background: #FAF8FB;
        padding: 50px 70px;
        @include xxl-device(){
          padding: 50px;
        }
        @include xxl-down-device(){
          padding: 50px 40px;
        }
        @include xl-down-device(){
          padding: 40px 25px;
        }
        @include sm-down-device(){
          padding: 40px 15px;
        }
        .profile-tab-content-title{
          margin-bottom: 40px;
          h6{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 20px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 0;
          }
        }
        .upload-img-area{
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 30px;
          @include sm-down-device(){
          flex-wrap: wrap;
          gap: 10px;
          }
          .upload-img-wrapper{
            width: 81px;
            height: 60px;
            padding: 3px 4px;
            border-radius: 5px;
            background: #FFF;
            position: relative;
            .drag-area{
              width: 73px;
              height: 54px;
              border-radius: 5px;
              border: 1px dashed var(--title-color);
              display: flex;
              align-items: center;
              justify-content: center;
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
              }
              .upload-btn{
                background-color: transparent;
                color: var(--title-color);
                padding: 0;
                position: absolute;
                height: 100%;
                width: 100%;
                i{
                  color: var(--title-color);
                  font-size: 20px;
                }
              }
              input{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
              }
            }
          }
          .upload-img-area-content{
            h6{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 14px;
              font-weight: 600;
              line-height: 1.2;
              @include md-down-device(){
                margin-bottom: 5px;
              }
            }
            p{
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 15px;
              font-weight: 400;
              line-height: 1.4;
              margin-bottom: 0;
              @include md-down-device(){
                font-size: 14px;
              }
            }
          }
        }
        .preference-list{
          padding: 0;
          margin: 0;
          list-style: none;
          width: 100%;
          margin-bottom: 40px;
          li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            width: 100%;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(#16191E, 0.08);
            margin-bottom: 30px;
            @include sm-down-device(){
              flex-wrap: wrap;
            }
            &:last-child{
              margin-bottom: 0;
            }
            .preference-list-content{
              max-width: 600px;
              width: 100%;
              h6{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;
                line-height: 1;
                margin-bottom: 15px;
              }
              p{
                color: var(--text-color);
                font-family: var(--font-open-sans);
                font-size: 14px;
                font-weight: 400;
                line-height: 26px;
                margin-bottom: 0;
              }
            }
            .form-switch{
              .form-check-input{
                width: 40px;
                height: 18px;
                border-width: 3px;
                border-color: #E8E1EC;
                background-color: #E8E1EC;
                background-image: url(../img/dashboard/icon/dashboard-switch-icon.svg);
                &:checked{
                  background-color: #24BC61;
                  border-color: #24BC61;
                  background-image: url(../img/dashboard/icon/dashboard-switch-icon.svg);
                }
                &:focus{
                  box-shadow: none;
                  background-image: url(../img/dashboard/icon/dashboard-switch-icon.svg);
                }
              }
            }
          }
        }
        .change-password-form-btns{
          display: flex;
          align-items: center;
          gap: 30px;
          @include sm-down-device(){
            flex-wrap: wrap;
            gap: 10px;
          }
          .primary-btn3{
            &.cancel{
              background-color: #F6EFF7;
            }
          }
        }
      }
    }
    .dashboard-faqs-wrapper{
      border-radius: 10px;
      background-color: var(--white-color);
      padding: 50px;
      @include xxl-device(){
        padding: 50px 30px;
      }
      @include xxl-down-device(){
        padding: 50px 25px;
      }
      @include lg-device(){
        padding: 40px 25px;
      }
      @include lg-down-device(){
        padding: 40px 25px;
      }
      @include sm-down-device(){
        padding: 30px 15px;
      }
      .dashboard-faqs-title{
        h6{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 20px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 0;
          @include xl-device(){
            font-size: 18px;
          }
          @include sm-down-device(){
            font-size: 18px;
          }
        }
        p{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 15px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 0;
          @include sm-down-device(){
            font-size: 14px;
          }
        }
        &.two{
          margin-bottom: 30px;
          @include sm-down-device(){
            margin-bottom: 25px;
          }
          h6{
            margin-bottom: 10px;
          }
        }
      }
      .dashboard-faqs-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 40px;
        @include md-down-device(){
          flex-wrap: wrap;
        }
        .dashboard-faqs-filter{
          padding: 6px 6px 6px 20px;
          border-radius: 5px;
          border: 1px solid #EEE;
          display: flex;
          align-items: center;
          gap: 20px;
          >span{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 16px;
            font-weight: 500;
            line-height: 1;
          }
          .filter-dropdown{
            .nice-select{
              height: 30px;
              padding-left: 15px;
              padding-right: 35px;
              background-color: var(--primary-color1);
              .current{
                color: var(--title-color);
                font-family: var(--font-open-sans);
                font-size: 13px;
                font-weight: 600;
              }
              &::after{
                right: 18px;
                width: 7px;
                height: 7px;
                border-color: var(--title-color);
              }
            }
          }
        }
      }
      .faq-wrap{
        margin-bottom: 30px;
        .accordion{
          .accordion-item{
            border-radius: 5px;
            border: 1px solid rgba(238, 238, 238, 0.50);
            background: #FAF8FB;
            margin-bottom: 15px;
            &:last-child{
              margin-bottom: 0;
            }
            .accordion-header{
              background: #FAF8FB;
              .accordion-button{
                background: #FAF8FB;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 15px;
                font-weight: 600;
                padding: 15px 55px 15px 25px;
                display: block;
                @include xl-device(){
                  padding: 15px 45px 15px 15px;
                }
                @include sm-down-device(){
                  padding: 15px 45px 15px 15px;
                  font-size: 14px;
                }
                &::after{
                    flex-shrink: 0;
                    width: unset;
                    height: unset;
                    margin-left: auto;
                    background-image: none;
                    background-repeat: unset;
                    background-size: unset;
                    font-family: bootstrap-icons !important;
                    position: absolute;
                    right: 17px;
                    content: "\F282";
                    transition: unset;
                    font-size: 17px;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .edit-icon{
                  padding-left: 5px;
                  opacity: 0;
                  transition: 0.35s;
                  svg{
                    fill: var(--text-color);
                    transition: 0.35s;
                    &:hover{
                      fill: #2A64F8;
                    }
                  }
                }
                &:hover{
                  .edit-icon{
                    opacity: 1;
                  }
                }
                &:not(.collapsed){
                  border: transparent;
                  box-shadow: none;    
                  background-color: transparent;  
                  color: var(--title-color);
                  &::after {
                    background-image: none;
                    transform: unset;
                    font-family: bootstrap-icons !important;
                    color: var(--title-color);
                    transform: translateY(-50%) rotate(180deg);
                  }
                  .edit-icon{
                    svg{
                      fill: #2A64F8;
                    }
                  }
                }
                &:focus{
                  border: transparent;
                  box-shadow: none;
                }
              }
              
            }
            .accordion-body{
              padding: 0px 25px 15px 25px;
              color: var(--text-color);
              font-family: var(--font-open-sans);
              font-size: 15px;
              font-weight: 400;
              line-height: 28px;
              @include xl-device(){
                padding: 0px 25px 15px 15px;
              }
              @include sm-down-device(){
                padding: 0px 15px 15px 15px;
                font-size: 13px;
              }
            }
          }
        }
        button{
          white-space: wrap;
        }
      }
      .dashboard-faqs-question{
        border-radius: 10px;
        background: #FAF8FB;
        padding: 50px;
        @include xl-device(){
          padding: 50px 35px;
        }
        @include lg-down-device(){
          padding: 40px 35px;
        }
        @include sm-down-device(){
          padding: 35px 20px;
        }
        .dashboard-faqs-question-form{
          .form-inner{
            textarea{
              min-height: 128px;
              &::placeholder{
                color: var(--text-color);
              }
            }
          }
          .primary-btn3{
            padding: 17px 26px;
          }
        }
      }
    }
    .subscription-package-wrapper{
      border-radius: 10px;
      background-color: var(--white-color);
      padding: 50px;
      @include xxl-device(){
        padding: 50px 30px;
      }
      @include xxl-down-device(){
        padding: 50px 25px;
      }
      @include lg-device(){
        padding: 40px 25px;
      }
      @include lg-down-device(){
        padding: 40px 25px;
      }
      @include md-down-device(){
        padding: 40px 20px;
      }
      @include sm-down-device(){
        padding: 30px 15px;
      }
      .subscription-package-card{
        border-radius: 10px;
        background: #FAF8FB;
        padding: 40px;
        @include xxl-device(){
          padding: 40px 30px;
        }
        @include xxl-down-device(){
          padding: 40px 25px;
        }
        @include lg-device(){
          padding: 40px 35px;
        }
        @include sm-down-device(){
          padding: 40px 15px;
        }
        .package-card-title{
          margin-bottom: 25px;
          @include sm-down-device(){
            margin-bottom: 15px;
          }
          span{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            display: inline-block;
            margin-bottom: 5px;
          }
          h4{
            color: var(--title-color);
            font-family: var(--font-montserrat);
            font-size: 24px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 0;
            @include sm-down-device(){
              font-size: 20px;
            }
          }
          &.two{
            margin-bottom: 20px;
          }
        }
        .package-card-top{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px;
          @include sm-down-device(){
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 30px;
          }
          .card-title-subs-bar{
            max-width: 340px;
            width: 100%;
            @include xl-device(){
              max-width: 225px;
            }
            @include lg-down-device(){
              max-width: 225px;
            }
            .package-subscription-bar-wrrap {
              .subscription-bar-title{
                span{
                  color: var(--title-color);
                  font-family: var(--font-open-sans);
                  font-size: 13px;
                  font-weight: 600;
                  margin-bottom: 10px;
                }
              }
              .subscription-bar {
                height: 5px;
                background-color: rgba(#DF0101, 0.17);
                border-radius: 5px;
              }
              .subscription-bar-per {
                height: 5px;
                background-color: var(--primary-color1);
                border-radius: 5px;
                width: 0;
                transition: 1s linear;
                position: relative;
                &:before {
                  content: attr(data-per);
                  position: absolute;
                  padding: 4px 5px;
                  background-color: var(--primary-color1);
                  color: var(--title-color);
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 1;
                  border-radius: 5px;
                  bottom: -29px;
                  right: 0;
                  transform: translateX(50%);
                  z-index: 1;
                }
          
                &:after {
                  content: "";
                  position: absolute;
                  width: 10px;
                  height: 10px;
                  background-color: var(--primary-color1);
                  bottom: -14px;
                  right: 0;
                  transform: translateX(50%) rotate(45deg);
                  border-radius: 2px;
                }
              }
            }
          }
          .package-card-price{
            h2{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 40px;
              font-weight: 600;
              line-height: 25px;
              margin-bottom: 0;
              @include xxl-down-device(){
                font-size: 35px;
              }
              @include md-down-device(){
                font-size: 30px;
              }
              @include sm-down-device(){
                font-size: 25px;
              }
              span{
                color: var(--text-color);
                font-size: 14px;
                line-height: 1;
              }
            }
          }
        }
        .package-card-btns{
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
          @include sm-down-device(){
            flex-wrap: wrap;
          }
          .cancle-btn{
            svg{
              fill: #FF5925;
            }
            color: #FF5925;
            font-family: var(--font-open-sans);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: transparent;
          }
          .primary-btn6{
            font-size: 14px;
            line-height: 1;
            padding: 10px 16px;
          }
        }
        .package-info-table{
          width: 100%;
          thead{
            tr{
              border-bottom: 1px solid rgba(#16191E, 0.05);
              th{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 16px;
                font-weight: 600;
                line-height: 1;
                padding: 0 15px 20px 15px;
                &:first-child{
                  padding-left: 0;
                }
                @include sm-down-device(){
                padding: 0 10px 20px 10px;
                }
              }
            }
          }
          tbody{
            tr{
              td{
                padding: 17px 15px 0;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 14px;
                font-weight: 600;
                line-height: 1.4;
                @include sm-down-device(){
                  padding: 17px 10px 0;
                }
                span{
                  font-weight: 400;
                }
                .status{
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  span{
                    min-width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: var(--primary-color1);
                    display: inline-block;
                    margin-top: 1px;
                  }
                  p{
                    color: var(--title-color);
                    font-family: var(--font-open-sans);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.4;
                    margin-bottom: 0;
                  }
                }
                &:first-child{
                  padding-left: 0;
                }
              }
            }
          }
        }
      }
      .subscription-payment-wrapper{
        border-radius: 10px;
        background: #FAF8FB;
        padding: 40px;
        @include xxl-device(){
          padding: 40px 30px;
        }
        @include xxl-down-device(){
          padding: 40px 25px;
        }
        @include lg-device(){
          padding: 40px 35px;
        }
        @include sm-down-device(){
          padding: 40px 15px;
        }
        h4{
          color: var(--title-color);
          font-family: var(--font-montserrat);
          font-size: 24px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 20px;
        }
        .payment-list{
          padding: 0;
          margin: 0;
          list-style: none;
          li{
            padding: 25px 30px;
            background-color: var(--white-color);
            border-radius: 5px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            @include lg-device(){
              padding: 25px;
            }
            @include md-down-device(){
              padding: 25px 20px;
            }
            &:last-child{
              margin-bottom: 0;
            }
            .form-check{
              min-height: unset;
              margin-bottom: 0;
              line-height: 1;
              display: flex;
              align-items: center;
              gap: 15px;
              @include md-down-device(){
                gap: 5px;
              }
              @include sm-down-device(){
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                padding: 0;
              }
              .form-check-input{
                width: 18px;
                height: 18px;
                margin-top: 0;
                @include sm-down-device(){
                  margin-left: 0;
                }
                &:focus{
                  box-shadow: none;
                }
                &:checked{
                  background-color: var(--primary-color1);
                  background-image: none;
                  border-color: var(--primary-color1);
                }
              }
              input:checked ~ label{
                &::after{
                  content: url(../img/dashboard/icon/add-property-check-icon.svg);
                  position: absolute;
                  top: 13px;
                  left: -28px;
                  @include md-down-device(){
                    left: -18px;
                  }
                  @include sm-down-device(){
                    top: -28px;
                    left: 5px;
                  }
                }
              }
              .form-check-label{
                position: relative;
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 14px;
                font-weight: 600;
                line-height: 1;
              }
            }
            .list-content{
              display: flex;
              align-items: center;
              gap: 15px;
              padding-left: 10px;
              @include lg-down-device(){
                padding-left: 0;
              }
              @include md-down-device(){
                gap: 5px;
              }
              @include sm-down-device(){
                flex-wrap: wrap;
                gap: 10px;
              }
              .content{
                .card-number-show{
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-bottom: 10px;
                  @include sm-down-device(){
                    flex-wrap: wrap;
                    gap: 7px;
                  }
                  h6{
                    margin-bottom: 0;
                    line-height: 1;
                  }
                  
                  .title{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1.3;
                    margin-bottom: 0;
                    @include md-down-device(){
                      font-size: 14px;
                    }
                  }
                  span{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);
                    font-size: 13px;
                    font-weight: 600;
                    line-height: 1;
                    @include sm-down-device(){
                      font-size: 12px;
                    }
                  }
                }
                .exp-date{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 13px;
                  font-weight: 600;
                  line-height: 1.4;
                  margin-bottom: 0;
                  @include sm-down-device(){
                    font-size: 12px;
                  }
                }
                p{
                  margin-bottom: 0;
                  line-height: 1;
                }
              }
              &.two{
                .icon{
                  width: 45px;
                  height: 45px;
                  border-radius: 5px;
                  border: 1px solid #EEE;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            .dot-icon{
              cursor: pointer;
              svg{
                fill: var(--text-color);
              }
            }
            .download-btn-and-dot{
              display: flex;
              gap: 15px;
              .download-btn{
                @include lg-up-device(){
                  transform: scaleY(0) translateY(20px);
                }
                a{
                  color: var(--text-color);
                  font-family: var(--font-montserrat);
                  font-size: 14px;
                  font-weight: 600;
                  line-height: 1;
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  padding: 11px 17px;
                  border-radius: 5px;
                  border: 1px solid #EEE;
                  white-space: nowrap;
                  transition: 0.5s;
                  svg{
                    fill: var(--text-color);
                  }
                  &:hover{
                    background-color: var(--primary-color1);
                    color: var(--title-color);
                  }
                }
                &.download{
                  transform: scaleY(1) translateY(20px);
                }
              }
            }
            .list-content-status{
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 15px;
              width: 45%;
              @include xl-device(){
                width: 55%;
              }
              @include lg-device(){
                width: 68%;
              }
              @include lg-down-device(){
                width: 100%;
              }
              @include md-down-device(){
                flex-direction: column;
                align-items: flex-start;
              }
              .list-serial-content{
                display: flex;
                align-items: center;
                gap: 10px;
                @include sm-down-device(){
                  flex-wrap: wrap;
                }
                .serial{
                  span{
                    color: var(--title-color);
                    font-family: var(--font-montserrat);
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1;
                  }
                }
              }
              .payment-status{
                line-height: 1;
                h6{
                  color: var(--title-color);
                  font-family: var(--font-montserrat);
                  font-size: 15px;
                  font-weight: 600;
                  line-height: 1;
                  margin-bottom: 10px;
                }
                span{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 13px;
                  font-weight: 600;
                  line-height: 1;
                }
              }
            }
            &.style-2{
              @include lg-down-device(){
                flex-direction: column;
                align-items: flex-end;
              }
              @include md-down-device(){
                align-items: flex-start;
              }
              .dot-icon{
                @include lg-down-device(){
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .property-search-area{
      border-radius: 10px;
      background: #FFF;
      padding: 40px 50px;
      margin-bottom: 40px;
      @include xxl-down-device(){
        padding: 40px 30px;
      }
      @include sm-down-device(){
        padding: 30px 20px;
      }
      .form-inner{
        .nice-select{
          background-color: #F3F3F3;
          &:focus{
            background-color: var(--white-color);
          }
        }
      }
      .primary-btn3{
        padding: 17px 29px;
      }
    }
    .my-listing-table-wrapper{
      .nav-pills{
        gap: 15px;
        margin-bottom: 20px;
        .nav-item{
          .nav-link{
            padding: 8px 14px;
            border-radius: 15px;
            border: 1px solid #EEE;
            background-color: var(--white-color);
            color: var(--title-color);
            font-family: var(--font-open-sans);
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            &.active{
              background-color: var(--primary-color1);
            }
          }
        }
      }
    }
    .add-property-wrapper{
      border-radius: 10px;
      background: #FFF;
      padding: 50px;
      @include xxl-device(){
        padding: 50px 30px;
      }
      @include xxl-down-device(){
        padding: 50px 30px;
      }
      @include lg-device(){
        padding: 40px 25px;
      }
      @include lg-down-device(){
        padding: 40px 25px;
      }
      @include sm-down-device(){
        padding: 30px 15px;
      }
      .add-property-content{
        position: relative;
        &::after{
          content: '';
          position: absolute;
          top: 54px;
          left: 8px;
          width: 1px;
          height: 83.1%;
          border-left: 1px dashed var(--title-color);
          @include xxl-down-device(){
            left: -2px;
            height: 83.3%;
          }
          @include xl-down-device(){
            display: none;
          }
        }
        .add-property-icon-content{
          margin-left: 60px;
          max-width: 180px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          position: relative;
          @include xl-device(){
            margin-left: 0;
          }
          @include xl-down-device(){
            margin-left: 0;
            padding-bottom: 40px;
          }
          .add-property-icon{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #FAF8FB;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            @include sm-down-device(){
              width: 80px;
              height: 80px;
            }
          }
          h6{
            color: #16191E;
            text-align: center;
            font-family: Montserrat;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
          }
          span{
            width: 380px;
            border-top: 1px dashed var(--title-color);
            position: absolute;
            top: 40%;
            left: -50px;
            @include xxl-device(){
              width: 320px;
            }
            @include xl-device(){
              width: 200px;
              left: 0;
            }
            @include xl-down-device(){
              width: 30px;
              top: unset;
              bottom: 29px;
              left: 72px;
              transform: rotate(90deg);
            }
            &::before{
              content: '';
              -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
              clip-path: polygon(0 0, 0% 100%, 100% 50%);
              background-color: var(--title-color);
              width: 10px;
              height: 10px;
              position: absolute;
              top: 50%;
              transform: translateY(-60%);
              right: -10px;
            }
          }
        }
        .add-property-form-wrapper{
          border-radius: 10px;
          background: #FAF8FB;
          padding: 50px 70px;
          @include xxl-device(){
            padding: 50px;
          }
          @include xxl-down-device(){
            padding: 50px 30px;
          }
          @include lg-device(){
            padding: 50px 40px;
          }
          @include sm-down-device(){
            padding: 40px 20px;
          }
          .add-property-form-title{
            margin-bottom: 20px;
            h6{
              color: var(--title-color);
              font-family: var(--font-montserrat);
              font-size: 20px;
              font-weight: 600;
              line-height: 1.4;
              margin-bottom: 0;
              @include sm-down-device(){
                font-size: 18px;
              }
            }
          }
          .property-form-radio-btns{
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 30px;
            @include sm-down-device(){
              gap: 15px;
              flex-wrap: wrap;
            }
            li{
              border-radius: 5px;
              background: var(--white-color);
              padding: 14px 17px;
              .form-check{
                min-height: unset;
                margin-bottom: 0;
                line-height: 1;
                .form-check-input{
                  width: 16px;
                  height: 16px;
                  margin-top: 0;
                  &:focus{
                    box-shadow: none;
                  }
                  &:checked{
                    background-color: var(--primary-color1);
                    background-image: none;
                    border-color: var(--primary-color1);
                  }
                }
                input:checked ~ label{
                  &::after{
                    content: url(../img/dashboard/icon/add-property-check-icon.svg);
                    position: absolute;
                    top: -2px;
                    left: -20px;
                  }
                }
                .form-check-label{
                  position: relative;
                  color: var(--title-color);
                  font-family: var(--font-montserrat);
                  font-size: 14px;
                  font-weight: 600;
                  line-height: 1;
                }
              }
            }
          }
          .location-map{
            iframe{
              width: 100%;
              height: 170px;
              border-radius: 10px;
              border: none;
            }
          }
          .feature-aminities-form{
            .form-inner{
              label{
                font-weight: 600;
                margin-bottom: 15px;
              }
              .number-quantity-area{
                display: flex;
                align-items: center;
                gap: 25px;
                @include xl-device(){
                  gap: 15px;
                }
                @include sm-down-device(){
                  gap: 15px;
                  flex-wrap: wrap;
                }
                .number-list{
                  padding: 0;
                  margin: 0;
                  list-style: none;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  @include sm-down-device(){
                    flex-wrap: wrap;
                  }
                  li{
                    color: var(--title-color);
                    font-family: var(--font-open-sans);
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background-color: var(--white-color);
                    border: 1px solid #eee;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    &.selected{
                      background-color: var(--primary-color1);
                    }
                  }
                }
                .quantity-counter {
                  position: relative;
                  a {
                    color: var(--text-color);
                    i{
                      font-size: 12px;
                    }
                  }
                  .quantity__plus{
                    position: absolute;
                    top: 8px;
                    right: 20px;
                  }
                  .quantity__minus{
                    position: absolute;
                    top: 25px;
                    right: 20px;
                  }
                  .quantity__input {
                    max-width: 90px;
                    width: 100%;
                    height: 50px;
                    border: 1px solid #eee;
                    border-radius: 5px;
                    background-color: var(--white-color);
                    padding: 20px;
                    color: var(--title-color);
                    font-family: var(--font-open-sans);
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1;
                    letter-spacing: 0.48px;
                    &:focus{
                      border: 1px solid #ddd;
                    }
                  }
                }
              }
              .feature-check-area{
                .feature-check-list{
                  padding: 0;
                  margin: 0;
                  list-style: none;
                  li{
                    .containerss{
                      input{
                        &:checked ~ .checkmark{
                          background-color: var(--primary-color1);
                          border-color: var(--primary-color1);
                          &::after{
                            content: url(../img/dashboard/icon/feature-check-icon.svg);
                            left: 2.5px;
                            top: -7px;
                          }
                        }
                      }
                      .checkmark{
                        border-radius: 50%;
                        background-color: var(--white-color);
                        border: 1px solid rgba(#16191E, 0.2);
                      }
                    }
                  }
                }
              }
            }
          }
          .social-from-area{
            .form-inner{
              .from-input-area{
                position: relative;
                .social-icon{
                  width: 45px;
                  height: 34px;
                  border-radius: 4px;
                  border: 1px solid #EEE;
                  background: #FAF8FB;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: absolute;
                  top: 8px;
                  left: 8px;
                }
                input{
                  padding: 10px 20px 10px 70px;
                }
              }
            }
          }
          .add-more{
            span{
              color: var(--text-color);
              font-family: var(--font-montserrat);
              font-size: 14px; 
              font-weight: 600;
              line-height: 1;
            }
          }
          .upload-area{
            .upload-field-title{
              h6{
                color: var(--title-color);
                font-family: var(--font-montserrat);
                font-size: 14px;
                font-weight: 600;
                line-height: 1.4;
                margin-bottom: 10px;
              }
            }
            .upload-img-wrapper{
              padding: 30px 0;
              border-top: 1px solid rgba(#16191E, 0.1);
              border-bottom: 1px solid rgba(#16191E, 0.1);
              margin-bottom: 30px;
              .single-img{
                width: 130px;
                height: 93px;
                  .img-bg {
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    position: relative;
                    padding-bottom: 100%;
                    img{
                      width: 130px;
                      min-height: 93px;
                      max-height: 93px;
                      object-fit: cover;
                      border-radius: 5px;
                    }
                  }
              }
              .upload-btn-box {
                .upload-inputfile {
                  width: .1px;
                  height: .1px;
                  opacity: 0;
                  overflow: hidden;
                  position: absolute;
                  z-index: -1;
                }
                .upload-btn {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  transition: all .3s ease;
                  cursor: pointer;
                  border-radius: 5px;
                  border: 1px solid #EEE;
                  background: #FFF;
                  height: 50px;
                  width: 100%;
                  padding: 10px 20px;
                  margin-bottom: 5px;
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 13px;
                  font-style: normal;
                  font-weight: 600;
                  line-height: 1;
                  &:hover {
                    border: 1px solid var(--primary-color1);
                    // color: #4045ba;
                    transition: all .3s ease;
                  }
                  
                }
                p{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 1.8;
                  margin-bottom: 0;
                }
              }
              .upload-img-wrap {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                .upload-img-close-btn {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: var(--white-color);
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    text-align: center;
                    line-height: 24px;
                    z-index: 1;
                    cursor: pointer;
            
                    &:after {
                      content: '\2716';
                      font-size: 12px;
                      color: #F9502A;
                      position: absolute;
                      top: -1px;
                      left: 5px;
                    }
                }
              }
            }
            .upload-requirements{
              padding: 25px 15px;
              border-radius: 5px;
              border: 1px dashed var(--primary-color1);
              margin-left: 25px;
              @include xl-down-device(){
                margin-left: 0;
              }
              @include sm-down-device(){
                padding: 20px 10px;
              }
              ul{
                padding: 0;
                margin: 0;
                list-style: none;
                li{
                  svg{
                    fill: var(--text-color);
                  }
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1.5;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-bottom: 15px;
                  &:last-child{
                    margin-bottom: 0;
                  }
                  @include sm-down-device(){
                    gap: 6px;
                    font-size: 13px;
                  }
                }
              }
            }
            .upload-others-wrapper{
              .upload-file-area{
                .custom-upload-field{
                  position: relative;
                  .upload-video-icon{
                    position: absolute;
                    top: 49%;
                    transform: translateY(-50%);
                    left: 20px;
                  }
                  .custom-upload{
                    background-color: var(--white-color);
                    width: 100%;
                    height: 50px;
                    border-radius: 5px;
                    padding: 10px 20px 10px 40px;
                  
                    &::-webkit-file-upload-button{
                      display: none;
                    }
                    &::placeholder{
                      color: var(--text-color);
                      font-family: var(--font-open-sans);
                      font-size: 13px;
                      font-weight: 600;
                      line-height: 1;
                    }
                  }
                }
                p{
                  color: var(--text-color);
                  font-family: var(--font-open-sans);
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 1.8;
                  margin-bottom: 0;
                  margin-top: 10px;
                }
              }
            }
          }
        }
        .post-property-btn{
          padding-top: 50px;
          @include xl-down-device(){
          padding-top: 30px;
          }
          .primary-btn3{
            padding: 16px 24px;
          }
        }
      }
    }
  }
  .dashboard-footer{
    transition: all 0.8s ease-out 0s;
    padding: 20px 60px;
    background-color: var(--white-color);
    margin-left: 305px;
    max-width: calc(100% - 305px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    @include seventeen-down-device(){
      margin-left: 270px;
      max-width: calc(100% - 270px);
    }
    @include xxl-device(){
      margin-left: 235px;
      max-width: calc(100% - 235px);
    }
    @include xl-device(){
      margin-left: 220px;
      max-width: calc(100% - 220px);
    }
    @include xl-down-device(){
      margin-left: 200px;
      max-width: calc(100% - 200px);
    }
    @include lg-down-device(){
      padding: 20px 40px;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      gap: 10px;
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 200px;
        max-width: calc(100% - 200px);
      }
    }
    @include md-down-device(){
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 120px;
        max-width: calc(100% - 120px);
      }
    }
    @include sm-down-device(){
      padding: 20px 15px;
      margin-left: 0px;
      max-width: calc(100%);
      &.slide{
        margin-left: 80px;
        max-width: calc(100% - 80px);
      }
    }
    .copyright-area{
      p{
        color: var(--text-color);
        font-family: var(--font-open-sans);
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 0;
        a{
          color: var(--primary-color1);
        }
      }
    }
    .footer-menu-list{
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1;
      @include sm-down-device(){
        flex-wrap: wrap;
        justify-content: center;
      }
      li{
        margin-right: 20px;
        @include sm-down-device(){
          margin-right: 0;
        }
        &:last-child{
          margin-right: 0;
        }
        a{
          color: var(--text-color);
          font-family: var(--font-open-sans);
          font-size: 13px;
          font-weight: 600;
        }
      }
    }
  }
}

