:root {
  --font-kanit: 'Kanit', sans-serif;
  --font-inter: 'Inter', sans-serif;
  // Colors ---------------
  --primary-color: #000000;
  --primary-color-opc: 0, 0, 0;
  --primary-color2: #F94834;
  --primary-color2-opc: 249, 72, 52;
  --title-color: #000000;
  --title-color-opc: 0, 0, 0;
  --white-color: #fff;
  --paragraph-color: #00000099;
  --border-color: #EEEEEE;
  --border-color-opc: 230, 230, 230;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 0 solid;
  box-shadow: unset;
}

input,
textarea {
  border-radius: 0px;
}

html,
body {
  height: 100%;
}

body {
  font-size: 16px;
  font-family: var(--font-kanit);
  font-weight: 400;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-kanit);
  font-weight: 500;
  margin-bottom: 15px;
}

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


p {
  color: var(--paragraph-color);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

a {
  color: unset;
  text-decoration: none;
}

button {
  border: unset;
}

input,
select,
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}


// xl-device=====

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sec-mar {
  margin: 120px 0;

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

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

.sec-pad {
  padding: 120px 0;

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

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

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

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

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

  @include sm-down-device() {
    padding-top: 80px;
  }
}

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

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

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


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

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

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

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

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

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

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

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

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

.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-130 {
  margin-top: 130px;

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

  @include xl-down-device() {
    margin-bottom: 50px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

body.tt-magic-cursor #magic-cursor {
  display: block;
}

#ball {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  pointer-events: none;
  border-style: solid;
  border-radius: 50%;
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  /* Note: border width handled through JS */
}

/* Ball view
============= */
#ball.ball-view {
  background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
  background-color: rgba(var(--primary-color-opc), 0.5);
  backdrop-filter: blur(3px);
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
  font-family: var(--font-kanit);
  line-height: 1.4;
  text-align: center;
  // border: 1px solid rgba(#000,0.5);
}

#ball .ball-view-inner {
  padding: 0 5px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}

#ball .ball-view-inner i {
  font-size: 24px;
}

/* Ball drag
============= */
#ball .ball-drag {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--title-color);
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s;
}

#ball .ball-drag::before,
#ball .ball-drag::after {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  font-size: 16px;
  color: var(--primary-color);
  height: 10px;
  line-height: 10px;
  /* Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#ball .ball-drag::before {
  content: "\f060";
  /* Font Awesome */
  left: 0;
  transform: translate3d(-30px, 0, 0);
  transition: all 0.25s;
}

#ball .ball-drag::after {
  content: "\f061";
  /* Font Awesome */
  right: 0;
  transform: translate3d(30px, 0, 0);
  transition: all 0.25s;
}

#ball.magnetic-active {
  background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
  background-color: rgba(var(--primary-color-opc), 0.5);
  backdrop-filter: blur(1.1px);
  border-color: transparent !important;
}

/* Ball close
============== */
#ball.ball-close-enabled {
  opacity: 1 !important;
}

#ball .ball-close {
  position: absolute;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1;
  text-align: center;
}


.primary-btn {
  position: relative;
  display: inline-block;
  vertical-align: top;
  line-height: 1.4;
  text-decoration: none;
  outline: none;
  padding: 0 1.375em .0625em 0;
  cursor: pointer;
  background-color: transparent;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 0.0625em;
  transition: background-size 0.2s linear var(--background-delay, 0.15s);
  transform: translateZ(0);
  border: none;
  background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
  color: var(--title-color);
  font-family: var(--font-kanit);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;

  &::after {
    content: "\f123";
    font-family: "bootstrap-icons";
    display: block;
    position: absolute;
    right: 0;
    left: initial;
    top: 0;
    opacity: 1;
    -webkit-transition: opacity 0.3s 0.15s;
    transition: opacity 0.3s 0.15s;
    color: var(--title-color);
  }

  svg {
    position: absolute;
    display: block;
    line-height: 1.8125em;
    width: 1.375em;
    height: 1.8125em;
    right: 0;
    left: initial;
    top: 50%;
    margin: -.92em 0 0;
    fill: none;
    stroke: var(--title-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: var(--stroke-dashoffset, 46);
    transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
  }

  &:hover {
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: .3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: .195s;

    &::after {
      opacity: 0;
      transition-delay: 0s;
    }
  }

  &.white {
    background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
    color: var(--white-color);

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

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

.primary-btn2 {
  padding: 19px 33px;
  background-color: var(--primary-color);
  display: inline-block;
  line-height: 1;

  @include sm-down-device() {
    padding: 15px 22px;
  }

  span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    text-decoration: none;
    outline: none;
    padding: 0 1.375em .0625em 0;
    cursor: pointer;
    background-color: transparent;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: var(--background-size, 100%) 0.0625em;
    transition: background-size 0.2s linear var(--background-delay, 0.15s);
    transform: translateZ(0);
    border: none;
    background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
    color: var(--white-color);
    font-family: var(--font-kanit);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;

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

    &::after {
      content: "\f123";
      font-family: "bootstrap-icons";
      display: block;
      position: absolute;
      right: 0;
      left: initial;
      top: 0;
      opacity: 1;
      -webkit-transition: opacity 0.3s 0.15s;
      transition: opacity 0.3s 0.15s;
      color: var(--white-color);
    }

    svg {
      position: absolute;
      display: block;
      line-height: 1.8125em;
      width: 1.375em;
      height: 1.8125em;
      right: 0;
      left: initial;
      top: 50%;
      margin: -.92em 0 0;
      fill: none;
      stroke: var(--white-color);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1px;
      stroke-dasharray: 7.95 30;
      stroke-dashoffset: var(--stroke-dashoffset, 46);
      transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
    }
  }

  &:hover {
    span {
      --background-size: 0%;
      --stroke-dashoffset: 26;
      --stroke-duration: .3s;
      --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
      --stroke-delay: .195s;

      &::after {
        opacity: 0;
        transition-delay: 0s;
      }
    }
  }

  &.white-bg {
    background-color: var(--white-color);

    span {
      background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
      color: var(--title-color);

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

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

  &.transparent {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    padding: 18px 33px;

    @include sm-down-device() {
      padding: 14px 22px;
    }

    span {
      background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
      color: var(--title-color);

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

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

.primary-btn3 {
  padding: 17px 17px;
  background-color: transparent;
  display: inline-block;
  line-height: 1;
  position: relative;
  border: 1px solid rgba(var(--primary-color-opc), 0.2);
  transition: 0.5s;

  @include sm-down-device() {
    padding: 15px 22px;
  }

  span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    text-decoration: none;
    outline: none;
    padding: 0 1.375em .0625em 0;
    cursor: pointer;
    background-color: transparent;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: var(--background-size, 100%) 0.0625em;
    transition: background-size 0.2s linear var(--background-delay, 0.15s);
    transform: translateZ(0);
    border: none;
    background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;

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

    &::after {
      content: "\f123";
      font-family: "bootstrap-icons";
      display: block;
      position: absolute;
      right: 0;
      left: initial;
      top: 0;
      opacity: 1;
      -webkit-transition: opacity 0.3s 0.15s;
      transition: opacity 0.3s 0.15s;
      color: var(--title-color);
    }

    svg {
      position: absolute;
      display: block;
      line-height: 1.8125em;
      width: 1.375em;
      height: 1.8125em;
      right: 0;
      left: initial;
      top: 50%;
      margin: -.92em 0 0;
      fill: none;
      stroke: var(--title-color);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1px;
      stroke-dasharray: 7.95 30;
      stroke-dashoffset: var(--stroke-dashoffset, 46);
      transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
    }
  }

  .corner {
    width: 6px;
    height: 6px;
    border: 1px solid var(--primary-color);
    transform: rotate(180deg);
    position: absolute;

    &.tl {
      top: 0;
      left: 0;
      border-bottom: none;
      border-right: none;
      transform-origin: top left;
    }

    &.tr {
      top: 0;
      right: 0;
      border-left: none;
      border-bottom: none;
      transform-origin: top right;
    }

    &.br {
      bottom: 0;
      right: 0;
      border-top: none;
      border-left: none;
      transform-origin: bottom right;
    }

    &.bl {
      bottom: 0;
      left: 0;
      border-top: none;
      border-right: none;
      transform-origin: bottom left;
    }
  }

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

    span {
      --background-size: 0%;
      --stroke-dashoffset: 26;
      --stroke-duration: .3s;
      --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
      --stroke-delay: .195s;

      &::after {
        opacity: 0;
        transition-delay: 0s;
      }
    }
  }

  &.white {
    border: 1px solid rgba(#fff, 0.2);

    span {
      background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
      color: var(--white-color);

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

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

    .corner {
      border-color: var(--white-color);
    }

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

  &.two {
    border: 1px solid rgba(var(--primary-color2-opc), 0.2);

    span {
      background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
      color: var(--primary-color2);

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

      svg {
        stroke: var(--primary-color2);
      }
    }

    .corner {
      border-color: var(--primary-color2);
    }

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

.form-inner {
  position: relative;
  line-height: 1;

  label {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-size: 15px;
    font-weight: 400;
    display: block;
    margin-bottom: 10px;
  }

  input {
    background: transparent;
    color: var(--title-color);
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 400;
    height: 44px;
    width: 100%;
    padding: 10px 20px;
    outline: none;
    border: 1px solid rgba(var(--primary-color-opc), 0.2);
    border-radius: 5px;

    &::placeholder {
      color: rgba(var(--title-color-opc), 0.5);
      font-weight: 400;
    }

    &:focus {
      border: 1px solid var(--primary-color);
    }
  }

  textarea {
    background: transparent;
    color: var(--title-color);
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    border: 1px solid rgba(var(--primary-color-opc), 0.2);
    min-height: 120px;
    border-radius: 5px;
    resize: none;

    &::placeholder {
      color: #7C7C7C;
    }

    &:focus {
      border: 1px solid var(--primary-color);
    }
  }
}

.form-inner2 {
  .form-check {
    min-height: unset;
    margin-bottom: 0;
    padding-left: 8px;

    .form-check-input {
      cursor: pointer;
      height: 14px;
      width: 14px;
      margin-top: 7px;
      border: 1px solid rgba(var(--primary-color-opc), 0.2);

      &:focus {
        box-shadow: none;
        border-color: rgba(var(--primary-color-opc), 0.2);
      }

      &:checked {
        background-color: var(--primary-color2);
        border-color: var(--primary-color2);
      }
    }

    .form-check-label {
      cursor: pointer;
      color: var(--paragraph-color);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;

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

.section-title {
  span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-kanit);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -41px;
      width: 35px;
      height: 1px;
      background-color: var(--primary-color2);
    }
  }

  h2 {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0;

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

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

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

    @include md-down-device() {
      font-size: 42px;
      line-height: 1.2;
    }

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

  p {
    color: var(--paragraph-color);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 0;
    padding-top: 20px;

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

  &.white {
    span {
      color: rgba(#fff, 0.6);
    }

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

    p {
      color: rgba(#fff, 0.6);
    }
  }

  &.two {
    span {
      color: var(--primary-color2);
      font-size: 12px;
      padding: 10px 19px;
      background-color: rgba(var(--primary-color-opc), 0.05);

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

      &::after {
        display: none;
      }
    }

    &.white {
      span {
        background-color: rgba(#fff, 0.05);
      }
    }
  }

  &.three {
    span {
      padding-left: 40px;

      &::after {
        right: unset;
        left: 0;
      }
    }
  }

  &.four {
    span {
      padding-left: 25px;
      color: var(--primary-color2);

      &::after {
        right: unset;
        left: 0;
        width: 15px;
        height: 15px;
        border-radius: 50%;
      }
    }

    h2 {
      font-size: 55px;
      text-transform: uppercase;
      line-height: 1.2;

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

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

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

      @include md-down-device() {
        font-size: 42px;
        line-height: 1.2;
      }

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

.section-title2 {
  h2 {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-size: 65px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    position: relative;

    span {
      width: 100px;
      height: 2px;
      background-color: var(--primary-color);
      display: inline-block;
      margin-bottom: 15px;

      @include xl-down-device() {
        margin-bottom: 12px;
        width: 90px;
      }

      @include lg-down-device() {
        margin-bottom: 10px;
        width: 85px;
      }

      @include md-down-device() {
        width: 80px;
        margin-bottom: 12px;
      }

      @include sm-down-device() {
        margin-bottom: 10px;
        width: 70px;
      }
    }

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

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

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

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

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

  p {
    color: var(--paragraph-color);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin-top: 20px;

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

    @include sm-down-device() {
      margin-top: 15px;
    }
  }
}

.slider-btn-grp {
  display: flex;
  align-items: center;
  gap: 50px;

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

  .slider-btn {
    min-width: 45px;
    max-width: 45px;
    height: 45px;
    background-color: transparent;
    border: 1px solid rgba(var(--title-color-opc), 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;

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

    i {
      color: rgba(var(--primary-color-opc), 0.3);
      font-size: 20px;
      line-height: 1;

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

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

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

    &.swiper-button-disabled {
      opacity: 0.5;
    }
  }

  &.white {
    .slider-btn {
      border: 1px solid rgba(#fff, 0.4);

      i {
        color: rgba(#fff, 0.4);
      }

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

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

.nice-select {
  width: 100%;
  background: transparent;
  border-radius: 5px;
  height: 44px;
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0px 20px;
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(var(--primary-color-opc), 0.2);

  @include sm-down-device() {
    padding: 0px 18px
  }

  &::after {
    height: 8px;
    width: 8px;
    border-bottom: 1px solid var(--title-color);
    border-right: 1px solid var(--title-color);
    right: 20px;
    margin-top: -5px;
  }

  .current {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 500;

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

  &:focus {
    border-color: var(--primary-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: rgba(var(--title-color-opc), 0.7);
    }

    .option {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      padding-left: 25px;
      padding-right: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

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

#scroll-section2 {
  scroll-margin-top: 130px;
}

.scroll-progress-wrap {
  position: fixed;
  right: 40px;
  top: 40%;
  z-index: 999;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;

  @include xxl-device() {
    right: 35px;
  }

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

  @include lg-down-device() {
    right: 20px;
  }

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

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

  span {
    color: var(--primary-color2);
    font-family: var(--font-kanit);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }

  .progress-container {
    width: 2px;
    height: 70px;
    background: #D9D9D9;
    border-radius: 2px;
    margin: auto;

    .progress-bar {
      width: 2px;
      background: var(--primary-color2);
      border-radius: 2px;
    }
  }
}

.fancybox-slide--iframe .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--pdf .fancybox-content,
.fancybox-slide--video .fancybox-content {
  min-height: 350px;
}

/*=====================================
 02. Header CSS 
========================================*/
@keyframes fade-down {
  0% {
    opacity: 0;
    transform: scaleY(0);
    visibility: hidden;
  }

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

.topbar-area {
  position: relative;
  width: 100%;
  z-index: 99;
  padding: 10px 5.5%;
  border-bottom: 1px solid rgba(#fff, 0.15);
  background-color: rgba(var(--primary-color-opc), 0.2);
  backdrop-filter: blur(6px);

  @include xxl-device() {
    padding: 10px 4%;
  }

  @include xxl-down-device() {
    padding: 10px 4%;
  }

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

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

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

  .contact-area {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 60px;

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

      li {
        position: relative;

        &::before {
          content: '';
          width: 1px;
          height: 20px;
          background-color: rgba(var(--primary-color3-opc), 0.2);
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -30px;

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

        &:first-child {
          &::before {
            display: none;
          }
        }

        a {
          svg {
            fill: rgba(#fff, 0.7);
            transition: 0.5s;
          }

          color: rgba(#fff, 0.7);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          display: flex;
          align-items: center;
          gap: 8px;
          transition: 0.5s;

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

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

  .address-area {
    svg {
      fill: rgba(#fff, 0.7);
      transition: 0.5s;
    }

    a {
      color: rgba(#fff, 0.7);
      font-family: var(--font-kanit);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.2;
      transition: 0.5s;
    }

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

      a {
        color: var(--primary-color2);
      }
    }
  }
}

header.style-1 {
  position: relative;
  width: 100%;
  z-index: 99;
  transition: all 0.8s ease-out 0s;
  background-color: transparent;
  padding: 0 5.5%;

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

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

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

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

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

  &.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);
    box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
    z-index: 9999;

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

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

  .header-logo {
    @include lg-down-device() {
      padding: 15px 0;
    }

    a {
      img {
        width: 150px;

        @include lg-device() {
          width: 140px;
        }

        @include sm-down-device() {
          width: 140px;
        }
      }
    }
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 60px;

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

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

    .right-sidebar-button {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;

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

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

      span {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.03em;

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

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

      @keyframes qode-draw {

        0%,
        100% {
          -webkit-clip-path: inset(-2px -2px);
          clip-path: inset(-2px -2px);
        }

        42% {
          -webkit-clip-path: inset(-2px -2px -2px 100%);
          clip-path: inset(-2px -2px -2px 100%);
        }

        43% {
          -webkit-clip-path: inset(-2px 100% -3px -2px);
          clip-path: inset(-2px 100% -3px -2px);
        }
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -30px;
        width: 2px;
        height: 18px;
        background-color: var(--primary-color2);

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

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

      &:hover {
        svg {
          animation: qode-draw 0.75s cubic-bezier(.57, .39, 0, .86) 1 forwards;
        }
      }

      &.two {
        padding: 12px 19px;
        border: 1px solid rgba(var(--primary-color-opc), 0.3);
        border-radius: 200px;

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

        @include sm-down-device() {
          padding: 0;
          border: unset;
        }
      }
    }

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

      @include lg-down-device() {
        display: flex;
        flex-direction: column;
        align-items: end;
        visibility: visible;
        justify-content: center;
        position: relative;

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

    .primary-btn {
      font-size: 15px;

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

  .main-menu {
    display: inline-block;
    position: relative;

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

      >li {
        display: inline-block;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: var(--primary-color);
          opacity: 0;
          transition: all .5s ease-out 0s;

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

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

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

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

        &:first-child {
          padding-left: 0;
        }

        >a {
          color: var(--title-color);
          display: block;
          text-transform: capitalize;
          padding: 38px 25px;
          position: relative;
          font-family: var(--font-kanit);
          font-weight: 400;
          font-size: 14px;
          transition: all .5s ease-out 0s;
          position: relative;
          line-height: 1;

          @include xxl-down-device() {
            font-size: 14px;
            padding: 34px 20px;
          }

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

        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-color);

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

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

          >li {

            &::after {
              display: none;
            }

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

            .dropdown-icon {
              color: var(--title-color);
              opacity: 1;
              top: 17px;
              font-size: 13px;
              right: 15px;

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

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

            >a {
              display: block;
              padding: 14px 20px;
              font-family: var(--font-inter);
              color: var(--title-color);
              font-weight: 500;
              text-transform: capitalize;
              font-size: 13px;
              line-height: 1.4;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-radius: 0;
              border: none;
              border-bottom: 1px solid #0d172014;

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

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

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

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

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

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

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

                &::before {
                  display: none;
                }

              }

              .sub-menu {
                li {
                  a {
                    border-bottom: 1px solid #0d172014;

                    &::before {
                      display: block;
                    }
                  }

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

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

            }

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

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

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

            &.current-menu-parent,
            &.current-menu-ancestor,
            &.current-menu-parent,
            &.current-menu-item,
            &.current_page_item {
              >a {
                color: var(--primary-color2);
              }

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

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


            &.menu-item-has-children {
              >a {
                position: relative;

                &::after {
                  position: absolute;
                  content: '\F285';
                  right: 10px;
                  font-family: bootstrap-icons !important;

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

            .sub-menu {
              left: 100%;
              // left: auto;
              // right: auto;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--white-color);
              top: 0;

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

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

            @include lg-down-device() {
              border-color: transparent;
            }
          }

          &::after {
            opacity: 1;
          }

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

        &.current_page_ancestor,
        &.current-menu-parent,
        &.current-menu-ancestor,
        &.current-menu-item {
          >a {
            color: var(--primary-color);

            @include lg-down-device() {
              border-color: transparent;
            }
          }


          &::after {
            opacity: 1;
          }

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

        }

      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      .mobile-logo-wrap {
        a {
          img {
            width: 150px;
          }
        }
      }

      .menu-close-btn {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        border: 1px solid var(--title-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.35s;

        i {
          font-size: 26px;
          line-height: 1;
          margin-top: 2px;
          color: var(--title-color);
          transition: 0.35s;
        }

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

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

    .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: 40px;
      }

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

        >li {
          display: block;
          position: relative;
          padding: 0;

          i {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
            line-height: 1;
            display: none;
          }

          &.menu-item-has-children {
            i {
              display: block;
            }
          }

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

          //1st sub
          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-color);
                  margin-left: 10px;
                }
              }

              >i {
                color: var(--primary-color);
                right: -13px;
                display: none;
              }

              &.menu-item-has-children {
                >i {
                  display: block;
                }
              }

              //2nd sub
              ul.sub-menu {
                li {
                  >i {
                    color: var(--primary-color);
                    right: -13px;
                    display: none;
                  }

                  &.menu-item-has-children {
                    >i {
                      display: block;
                    }
                  }
                }
              }
            }
          }

        }
      }
    }

  }

  &.error-header {
    border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
  }
}

.header-topbar-wrap {
  position: absolute;
  width: 100%;
}

header.style-2 {
  position: relative;
  width: 100%;
  z-index: 99;
  transition: all 0.8s ease-out 0s;
  padding: 0 5.5%;
  background-color: rgba(var(--primary-color-opc), 0.2);
  backdrop-filter: blur(6px);

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

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

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

  @include lg-down-device() {
    backdrop-filter: unset;
  }

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

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

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

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

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

  .header-logo {
    @include lg-down-device() {
      padding: 15px 0;
    }

    a {
      img {
        width: 150px;

        @include lg-device() {
          width: 140px;
        }

        @include sm-down-device() {
          width: 140px;
        }
      }
    }
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 60px;

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

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

    .right-sidebar-button {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;

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

      span {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.03em;
      }

      @keyframes qode-draw {

        0%,
        100% {
          -webkit-clip-path: inset(-2px -2px);
          clip-path: inset(-2px -2px);
        }

        42% {
          -webkit-clip-path: inset(-2px -2px -2px 100%);
          clip-path: inset(-2px -2px -2px 100%);
        }

        43% {
          -webkit-clip-path: inset(-2px 100% -3px -2px);
          clip-path: inset(-2px 100% -3px -2px);
        }
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -30px;
        width: 2px;
        height: 18px;
        background-color: var(--primary-color2);

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

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

      &:hover {
        svg {
          animation: qode-draw 0.75s cubic-bezier(.57, .39, 0, .86) 1 forwards;
        }
      }
    }

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

      @include lg-down-device() {
        display: flex;
        flex-direction: column;
        align-items: end;
        visibility: visible;
        justify-content: center;
        position: relative;

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

    .primary-btn {
      font-size: 15px;
    }
  }

  .main-menu {
    display: inline-block;
    position: relative;

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

      >li {
        display: inline-block;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: var(--white-color);
          opacity: 0;
          transition: all .5s ease-out 0s;

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

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

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

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

        &:first-child {
          padding-left: 0;
        }

        >a {
          color: var(--white-color);
          display: block;
          text-transform: capitalize;
          padding: 31px 25px;
          position: relative;
          font-family: var(--font-kanit);
          font-weight: 400;
          font-size: 14px;
          transition: all .5s ease-out 0s;
          position: relative;
          line-height: 1;

          @include xxl-down-device() {
            font-size: 14px;
            padding: 31px 20px;
          }

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

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

          &.current_page_ancestor,
          &.current-menu-parent,
          &.current-menu-ancestor,
          &.current-menu-item {
            color: var(--primary-color);

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

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

          >li {

            &::after {
              display: none;
            }

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

            .dropdown-icon {
              color: var(--title-color);
              opacity: 1;
              top: 17px;
              font-size: 13px;
              right: 15px;

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

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

            >a {
              display: block;
              padding: 14px 20px;
              font-family: var(--font-inter);
              color: var(--title-color);
              font-weight: 500;
              text-transform: capitalize;
              font-size: 13px;
              line-height: 1.4;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-radius: 0;
              border: none;
              border-bottom: 1px solid #0d172014;

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

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

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

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

              &.current_page_ancestor,
              &.current-menu-parent,
              &.current-menu-ancestor,
              &.current-menu-item {
                color: var(--primary-color);

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

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

                &::before {
                  display: none;
                }

              }

              .sub-menu {
                li {
                  a {
                    border-bottom: 1px solid #0d172014;

                    &::before {
                      display: block;
                    }
                  }

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

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

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

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

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

            &.current_page_ancestor,
            &.current-menu-parent,
            &.current-menu-ancestor,
            &.current-menu-item {
              >a {
                color: var(--primary-color2);
              }

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

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

            &.menu-item-has-children {
              >a {
                position: relative;

                &::after {
                  position: absolute;
                  content: '\F285';
                  right: 10px;
                  font-family: bootstrap-icons !important;

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

            .sub-menu {
              left: 100%;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--white-color);
              top: 0;

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

          }
        }

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

            @include lg-down-device() {
              border-color: transparent;
            }
          }

          &::after {
            opacity: 1;
          }

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

        &.current_page_ancestor,
        &.current-menu-parent,
        &.current-menu-ancestor,
        &.current-menu-item {
          >a {
            color: var(--white-color);

            @include lg-down-device() {
              border-color: transparent;
            }
          }

          &::after {
            opacity: 1;
          }

        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      .mobile-logo-wrap {
        a {
          img {
            width: 150px;
          }
        }
      }

      .menu-close-btn {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        border: 1px solid var(--title-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.35s;

        i {
          font-size: 26px;
          line-height: 1;
          margin-top: 2px;
          color: var(--title-color);
          transition: 0.35s;
        }

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

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

    .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 {
          position: relative;
          display: block;
          padding: 0;

          i {
            top: 8px;
            font-size: 20px;
            color: var(--title-color);
            line-height: 1;
            display: none;
          }

          &.menu-item-has-children {
            i {
              display: block;
            }
          }

          a {
            padding: 10px 0;
            display: block;
            color: var(--title-color);
          }

          &.current_page_ancestor,
          &.current-menu-parent,
          &.current-menu-ancestor,
          &.current-menu-item {

            >a,
            i {
              color: var(--primary-color2);
            }

          }

          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-color);
                  margin-left: 10px;
                }
              }

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

              &.menu-item-has-children {
                i {
                  display: block;
                }
              }

              ul.sub-menu {
                li {
                  i {
                    color: var(--primary-color);
                    right: -13px;
                    display: none;
                  }

                  &.menu-item-has-children {
                    i {
                      display: block;
                    }
                  }
                }
              }
            }
          }

        }
      }
    }

  }
}

header.style-3 {
  position: relative;
  width: 100%;
  z-index: 99;
  transition: all 0.8s ease-out 0s;
  background-color: transparent;
  padding: 24px 5.5%;

  @include xxl-device() {
    padding: 24px 4%;
  }

  @include xxl-down-device() {
    padding: 24px 4%;
  }

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

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

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

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--white-color);
    box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
    z-index: 999;

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

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

  .header-logo {
    @include lg-down-device() {
      padding: 15px 0;
    }

    a {
      img {
        width: 150px;

        @include lg-device() {
          width: 140px;
        }

        @include sm-down-device() {
          width: 140px;
        }
      }
    }
  }

  .menu-btn {
    border-radius: 200px;
    border: 1px solid rgba(var(--primary-color-opc), 0.3);
    padding: 5px 20px 5px 6px;
    cursor: pointer;

    .menu-btn-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;

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

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

      span {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.03em;
        transition: 0.5s;
      }

      &::before {
        position: absolute;
        content: "";
        border-radius: 200px;
        width: 112%;
        height: 100%;
        top: 0;
        left: 2px;
        background-color: var(--title-color);
        transform-origin: left;
        transform: scalex(0);
        z-index: -1;
        transition: transform 0.7s;
      }
    }

    &:hover {
      .menu-btn-wrap {
        &::before {
          transform: scalex(1);
        }

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

  .nav-right {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;

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

    @include lg-down-device() {
      gap: 35px;
    }

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

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 2px;
      height: 18px;
      background-color: var(--primary-color2);

      @include md-down-device() {
        display: none;
      }
    }

    .contact-area {
      display: flex;
      align-items: center;
      gap: 8px;

      .icon {
        padding: 3px 5px;
        background-color: rgba(var(--primary-color-opc), 0.1);
        border-radius: 5px;
      }

      .content {
        line-height: 1;

        span {
          color: var(--paragraph-color);
          font-family: var(--font-kanit);
          font-size: 10px;
          font-weight: 400;
          line-height: 1;
          display: block;
          margin-bottom: 5px;
        }

        a {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 500;
          line-height: 1;
          transition: 0.5s;

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

    .primary-btn {
      font-size: 15px;
    }
  }

  .main-menu {
    display: inline-block;
    position: relative;

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

      >li {
        display: inline-block;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: var(--primary-color);
          opacity: 0;
          transition: all .5s ease-out 0s;

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

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

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

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

        &:first-child {
          padding-left: 0;
        }

        >a {
          color: var(--title-color);
          display: block;
          text-transform: capitalize;
          padding: 38px 25px;
          position: relative;
          font-family: var(--font-kanit);
          font-weight: 400;
          font-size: 14px;
          transition: all .5s ease-out 0s;
          position: relative;
          line-height: 1;

          @include xxl-down-device() {
            font-size: 14px;
            padding: 34px 20px;
          }

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

        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-color);

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

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

          >li {
            &::after {
              display: none;
            }

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

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

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

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

              @include xl-down-device() {
                &::before {
                  content: '\f4fe';
                }
              }
            }

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

            >a {
              display: block;
              padding: 14px 20px;
              font-family: var(--font-inter);
              color: var(--title-color);
              font-weight: 500;
              text-transform: capitalize;
              font-size: 13px;
              line-height: 1.4;
              -webkit-transition: all .4s ease-out 0s;
              transition: all .4s ease-out 0s;
              position: relative;
              border-radius: 0;
              border: none;
              border-bottom: 1px solid #0d172014;

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

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

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

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

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

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

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

                &::before {
                  display: none;
                }

              }

              .sub-menu {
                li {
                  a {
                    border-bottom: 1px solid #0d172014;

                    &::before {
                      display: block;
                    }
                  }

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

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

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

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

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

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

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

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

            .sub-menu {
              left: 100%;
              // left: auto;
              // right: auto;
              position: absolute;
              max-width: 230px;
              min-width: 215px;
              background: var(--white-color);
              top: 0;

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

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

            @include lg-down-device() {
              border-color: transparent;
            }
          }

          &::after {
            opacity: 1;
          }

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

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

            @include lg-down-device() {
              border-color: transparent;
            }
          }

          &::after {
            opacity: 1;
          }

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

        }
      }

      li.menu-item-has-children> {
        i {
          display: block;
        }
      }
    }
  }

  @media only screen and (max-width: 991px) {
    .mobile-logo-area {
      .menu-close-btn {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        border: 1px solid var(--title-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.35s;

        i {
          font-size: 26px;
          line-height: 1;
          margin-top: 2px;
          color: var(--title-color);
          transition: 0.35s;
        }

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

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

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

          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-color);
                  margin-left: 10px;
                }
              }

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

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

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

  }

  &.two {
    background-color: rgba(#E7964C, 0.08);

    &.sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      background-color: rgba(#fff, 0.5);
      backdrop-filter: blur(6px);
      box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
      z-index: 999;

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

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

.right-sidebar-menu {
  &::-webkit-scrollbar {
    width: 0px;
  }

  position: fixed;
  top: 0;
  right: 0;
  width: 550px;
  z-index: 99999;
  height: 100%;
  overflow: auto;
  background-color: var(--white-color);
  transform: translateX(120%);
  transform-origin: right;
  transition: transform .5s ease-in;
  box-shadow: 0px 2px 20px rgba(#000, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @include sm-down-device() {
    width: 320px;
  }

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

  .right-sidebar-close-btn {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 1px solid #3F444B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.35s;

    i {
      font-size: 26px;
      line-height: 1;
      margin-top: 2px;
      color: #3F444B;
      transition: 0.35s;
    }

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

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

  .sidebar-logo-area {
    text-align: left;
    padding: 30px;
    display: block;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);

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

  .sidebar-content-wrap {
    padding: 50px 40px;

    @include sm-down-device() {
      padding: 40px 20px;
    }

    .title-area {
      span {
        color: rgba(var(--title-color-opc), 0.6);
        font-family: var(--font-kanit);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 10px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -41px;
          width: 35px;
          height: 1px;
          background-color: var(--primary-color2);
        }
      }

      h2 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 37px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.03em;
        margin-bottom: 15px;

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

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 0;

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

    .contact-area {
      padding: 0;
      margin: 0;
      list-style: none;
      margin: 0 45px;
      padding: 60px 0;

      @include sm-down-device() {
        margin: 0 30px;
      }

      li {
        margin-bottom: 20px;

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

        .single-contact {
          display: flex;
          align-items: center;
          gap: 12px;

          .icon {
            svg {
              fill: var(--primary-color);
            }
          }

          .content {
            position: relative;
            line-height: 1;
            text-align: start;

            span {
              font-family: var(--font-kanit);
              font-weight: 500;
              font-size: 12px;
              line-height: 1;
              color: var(--title-color);
              margin-bottom: 6px;
              display: inline-block;
            }

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

              a {
                color: rgba(var(--title-color-opc), 0.6);
                font-family: var(--font-kanit);
                font-weight: 500;
                font-size: 17px;
                line-height: 1.5;
                transition: 0.5s;

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

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

        .arrow {
          margin-top: 20px;
          fill: rgba(var(--primary-color2-opc), 0.3);
          margin-left: 70px;
        }
      }
    }

    .address-area {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      width: 100%;

      .single-address {
        max-width: 200px;
        width: 100%;

        span {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.06em;
          text-decoration: underline;
          display: block;
          margin-bottom: 20px;
        }

        p {
          color: rgba(var(--title-color-opc), 0.6);
          font-family: var(--font-inter);
          font-size: 17px;
          font-weight: 400;
          line-height: 28px;
          margin-bottom: 0;
        }
      }
    }
  }

  .sidebar-bottom-area {
    padding: 17px 20px;
    border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
    text-align: center;

    p {
      color: var(--paragraph-color);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.8;
      letter-spacing: 0.02em;

      a {
        color: var(--title-color);
        font-weight: 500;
        transition: 0.5s;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0px 0 70px;
  z-index: 9992;
  overflow-y: auto;
  transition: all 0.3s;
  background-color: var(--white-color);
  height: 100%;
  transform-origin: top;
  transform: translateY(-120%);
  transition: transform 0.6s ease-in;

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

  &.active {
    transform: translateY(0);
  }

  .sidebar-menu-top-area {
    padding: 25px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 80px;

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

    .sidebar-menu-close {
      border: 1px solid var(--primary-color2);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.5s;

      svg {
        fill: var(--primary-color2);
        transition: 0.5s;
      }

      @include sm-down-device() {
        width: 36px;
        height: 36px;

        svg {
          width: 18px;
          height: 18px;
        }
      }

      &:hover {
        background-color: #FF4820;
        border-color: #FF4820;

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

  .sidebar-contact {
    h4 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 25px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: 0.05em;
      margin-bottom: 25px;

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

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

      svg {
        fill: var(--title-color);
        margin-left: 5px;
      }
    }

    .contact-area {
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

      .contact-list {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          margin-bottom: 20px;

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

          .single-contact {
            display: flex;
            align-items: center;
            gap: 12px;

            .icon {
              svg {
                fill: var(--primary-color);
              }
            }

            .content {
              position: relative;
              line-height: 1;
              text-align: start;

              span {
                font-family: var(--font-kanit);
                font-weight: 500;
                font-size: 12px;
                line-height: 1;
                color: var(--title-color);
                margin-bottom: 6px;
                display: inline-block;
              }

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

                a {
                  color: rgba(var(--title-color-opc), 0.6);
                  font-family: var(--font-kanit);
                  font-weight: 500;
                  font-size: 17px;
                  line-height: 1.5;
                  transition: 0.5s;

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

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

          .arrow {
            margin-top: 20px;
            fill: rgba(var(--primary-color2-opc), 0.3);
            margin-left: 70px;
          }
        }
      }
    }

    .address-area {
      .address-list {
        padding: 0;
        margin: 0;
        list-style: none;

        @include lg-down-device() {
          display: flex;
          align-items: center;
          gap: 45px;
        }

        @include sm-down-device() {
          flex-direction: column;
          align-items: flex-start;
          gap: 25px;
        }

        .single-address {
          max-width: 200px;
          width: 100%;
          margin-bottom: 50px;

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

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

          span {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.06em;
            text-decoration: underline;
            display: block;
            margin-bottom: 20px;
          }

          a {
            color: rgba(var(--title-color-opc), 0.6);
            font-family: var(--font-inter);
            font-size: 17px;
            font-weight: 400;
            line-height: 28px;
            margin-bottom: 0;
            transition: 0.5s;

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

  .sidebar-menu-wrap {
    border-left: 1px solid var(--border-color);
    margin-right: 50px;

    @include xl-device() {
      margin-right: 30px;
    }

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

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

    .main-menu {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow-y: auto;
      border-top: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);

      &::-webkit-scrollbar {
        width: 0;
      }

      &::-webkit-scrollbar-track {
        background: var(--title-color);
      }

      &::-webkit-scrollbar-thumb {
        background: var(--primary-color)
      }

      >li {
        position: relative;

        >a {
          border-bottom: 1px solid var(--border-color);
          color: var(--title-color);
          font-family: var(--font-kanit);
          text-transform: uppercase;
          font-size: 30px;
          font-weight: 500;
          display: block;
          line-height: 1;
          padding: 30px 30px 30px 70px;
          transform: translateY(var(--y)) translateZ(0);
          transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;

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

          @include xl-down-device() {
            padding: 25px 25px 25px 40px;
            font-size: 28px;
          }

          @include md-down-device() {
            padding: 25px 30px;
            font-size: 26px;
          }

          @include sm-down-device() {
            padding: 25px 20px;
            font-size: 22px;
          }

          .menu-text {
            display: flex;
            overflow: hidden;
            text-shadow: 0 30px 0 var(--title-color);

            span {
              display: block;
              backface-visibility: hidden;
              transition: transform 0.4s ease, -webkit-transform 0.4s ease;
              transform: translateY(var(--m)) translateZ(0);

              &:nth-child(1) {
                transition-delay: 0.05s;
              }

              &:nth-child(2) {
                transition-delay: 0.1s;
              }

              &:nth-child(3) {
                transition-delay: 0.15s;
              }

              &:nth-child(4) {
                transition-delay: 0.2s;
              }

              &:nth-child(5) {
                transition-delay: 0.25s;
              }

              &:nth-child(6) {
                transition-delay: 0.3s;
              }

              &:nth-child(7) {
                transition-delay: 0.35s;
              }

              &:nth-child(8) {
                transition-delay: 0.4s;
              }

              &:nth-child(9) {
                transition-delay: 0.45s;
              }

              &:nth-child(10) {
                transition-delay: 0.5s;
              }

              &:nth-child(11) {
                transition-delay: 0.55s;
              }

              &:nth-child(12) {
                transition-delay: 0.6s;
              }

              &:nth-child(13) {
                transition-delay: 0.65s;
              }

              &:nth-child(14) {
                transition-delay: 0.7s;
              }

              &:nth-child(15) {
                transition-delay: 0.75s;
              }

              &:nth-child(16) {
                transition-delay: 0.8s;
              }

              &:nth-child(17) {
                transition-delay: 0.85s;
              }

              &:nth-child(18) {
                transition-delay: 0.9s;
              }

              &:nth-child(19) {
                transition-delay: 0.95s;
              }

              &:nth-child(20) {
                transition-delay: 1s;
              }

              &:nth-child(21) {
                transition-delay: 1.05s;
              }

              &:nth-child(22) {
                transition-delay: 1.1s;
              }

              &:nth-child(23) {
                transition-delay: 1.15s;
              }

              &:nth-child(24) {
                transition-delay: 1.2s;
              }

              &:nth-child(25) {
                transition-delay: 1.25s;
              }

              &:nth-child(26) {
                transition-delay: 1.3s;
              }

              &:nth-child(27) {
                transition-delay: 1.35s;
              }

              &:nth-child(28) {
                transition-delay: 1.4s;
              }

              &:nth-child(29) {
                transition-delay: 1.45s;
              }

              &:nth-child(30) {
                transition-delay: 1.5s;
              }

              &:nth-child(31) {
                transition-delay: 1.55s;
              }

              &:nth-child(32) {
                transition-delay: 1.6s;
              }

              &:nth-child(33) {
                transition-delay: 1.65s;
              }

              &:nth-child(34) {
                transition-delay: 1.70s;
              }

              &:nth-child(35) {
                transition-delay: 1.75s;
              }

              &:nth-child(36) {
                transition-delay: 1.80s;
              }

              &:nth-child(37) {
                transition-delay: 1.85s;
              }

              &:nth-child(38) {
                transition-delay: 1.90s;
              }

              &:nth-child(39) {
                transition-delay: 1.95s;
              }

              &:nth-child(40) {
                transition-delay: 2s;
              }
            }
          }

          &:hover {
            --y: -0px;

            span {
              --m: calc(30px * -1);
            }
          }
        }

        .dropdown-icon2 {
          position: absolute;
          right: 30px;
          top: 20px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(var(--primary-color-opc), 0.15);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: 0.5s;

          i {
            color: var(--title-color);
            font-size: 28px;
            transition: 0.5s;
          }

          @include md-down-device() {
            right: 30px;
          }

          @include sm-down-device() {
            top: 18px;
            right: 20px;
            width: 35px;
            height: 35px;
          }

          &.active {
            i {
              &::before {
                content: "\f2ea";
              }
            }
          }

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

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

          &.two {
            height: unset;
            width: unset;
            background-color: transparent;
            top: -7px;

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

        .sub-menu {
          margin: 0;
          padding: 0;
          list-style: none;
          position: static;
          opacity: 1;
          visibility: visible;
          transition: none;
          display: none;
          padding: 40px 70px;
          border-bottom: 1px solid var(--border-color);

          @include xxl-down-device() {
            padding: 40px 50px;
          }

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

          @include md-down-device() {
            padding: 35px 30px;
          }

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

          &.active {
            display: block;
          }

          li {
            position: relative;
            margin-bottom: 15px;

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

            &::after {
              content: '';
              height: 10px;
              width: 10px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              position: absolute;
              left: -20px;
              border: 1px solid var(--text-color);
              top: 10px;
            }

            a {
              color: var(--paragraph-color);
              font-family: var(--font-kanit);
              font-size: 17px;
              font-weight: 400;
              text-transform: uppercase;
              padding-left: 20px;
              position: relative;
              transition: 0.5s;

              svg {
                fill: var(--paragraph-color);
                margin-left: 5px;
                transition: 0.5s;
              }

              &::before {
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 1px solid var(--paragraph-color);
                transition: 0.5s;
              }

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

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

                &::before {
                  border-color: var(--primary-color2);
                }
              }
            }

            .sub-menu {
              padding-top: 20px;
              padding-bottom: 7px;
              padding-left: 20px;
              border-bottom: none;

              li {
                margin-bottom: 10px;

                &::after {
                  display: none;
                }

                a {
                  font-size: 15px;

                  svg {
                    fill: var(--paragraph-color);
                    margin-left: 5px;
                    transition: 0.5s;
                  }

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

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

            &.current-menu-parent,
            &.current-menu-ancestor,
            &.current-menu-parent,
            &.current_page_item {
              a {
                color: var(--primary-color2);

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

        &.current-menu-parent,
        &.current-menu-ancestor,
        &.current-menu-parent,
        &.current_page_item {
          >a {
            .menu-text {
              text-shadow: 0 30px 0 var(--primary-color2);
              color: var(--primary-color2);
            }
          }

          .dropdown-icon2 {
            background-color: var(--primary-color2);

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

  &.two {
    transform-origin: left;
    transform: translateX(-120%);

    &.active {
      transform: translateX(0);
    }

    @include lg-down-device() {
      transform-origin: top;
      transform: translateY(-120%);

      &.active {
        transform: translateY(0);
      }
    }
  }
}

/*=====================================
 03. Home1 Banner Section 
========================================*/
.home1-banner-section {
  position: relative;
  overflow: hidden;

  .banner-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 820px;
    animation: large 26s linear infinite alternate;

    @include xxl-device() {
      min-height: 95vh;
    }

    @include xxl-down-device() {
      min-height: 90vh;
    }

    @include sm-down-device() {
      min-height: 85vh;
    }

    @keyframes large {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(1.3);
      }
    }
  }

  .banner-content {
    padding: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;

    @include xxl-device() {
      padding: 100px 60px 80px;
    }

    @include xxl-down-device() {
      padding: 100px 50px 80px;
    }

    @include xl-down-device() {
      padding: 100px 30px 80px;
    }

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

    @include sm-down-device() {
      padding: 100px 10px 80px;
    }

    h1 {
      color: var(--white-color);
      font-family: var(--font-kanit);
      font-size: 90px;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.03em;
      margin-bottom: 50px;
      max-width: 1096px;
      width: 100%;

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

      @include xxl-down-device() {
        font-size: 80px;
        max-width: 1000px;
        margin-bottom: 40px;
      }

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

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

      @include md-down-device() {
        font-size: 65px;
        margin-bottom: 35px;
      }

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

    .primary-btn2 {
      padding: 20px 33px;

      @include sm-down-device() {
        padding: 18px 30px;
      }
    }
  }

  .pagination-area {
    .swiper-pagination1 {
      background-color: var(--white-color);
      padding: 22px 37px;
      position: absolute;
      bottom: 0;
      right: 0;
      left: unset;
      display: inline-flex;
      align-items: center;
      width: unset;
      z-index: 9;
      gap: 20px;

      @include md-down-device() {
        padding: 20px 32px;
        gap: 15px;
      }

      @include sm-down-device() {
        padding: 15px 25px;
      }

      .swiper-pagination-bullet {
        height: 6px;
        width: 6px;
        background-color: transparent;
        border: 1px solid var(--primary-color);
        opacity: 1;
        position: relative;
        border-radius: unset;

        &.swiper-pagination-bullet-active {
          background-color: var(--primary-color);
        }
      }
    }
  }
}

/*=====================================
 04. Home1 About Section 
========================================*/
.home1-about-section {
  .about-top-area {
    .about-title-area {
      .section-title {
        max-width: 685px;
        width: 100%;
      }

      .video-and-content {
        padding-top: 40px;
        padding-left: 95px;
        display: flex;
        align-items: center;
        gap: 50px;

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

        @include xl-down-device() {
          padding-left: 40px;
          padding-top: 35px;
          gap: 40px;
        }

        @include lg-down-device() {
          padding-left: 0;
          padding-top: 25px;
        }

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

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

        .video-area {
          cursor: pointer;
          display: inline-block;

          .icon {
            position: relative;

            .video-circle {
              stroke: var(--primary-color2);
              fill: none;
              transition: 0.5s;

              @include sm-down-device() {
                width: 68px;
              }

              .top-half {
                stroke-dasharray: 430;
                stroke-dashoffset: 320;
                transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
              }
            }

            .play-icon {
              fill: var(--primary-color2);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              margin-left: 2px;

              @include sm-down-device() {
                width: 20px;
              }
            }
          }

          &:hover {
            .icon {
              .video-circle {
                .top-half {
                  stroke-dashoffset: 0;
                }
              }
            }
          }
        }

        .content {
          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 32px;
            margin-bottom: 0;
            padding-left: 15px;
            position: relative;

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

            @include sm-down-device() {
              padding-left: 0;
            }

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 2px;
              height: 77px;
              background-color: rgba(var(--primary-color-opc), 0.3);

              @include sm-down-device() {
                display: none;
              }
            }
          }
        }
      }
    }

    .about-btn {
      position: relative;
      display: inline-block;

      .bg {
        svg {
          fill: transparent;
          stroke: rgba(var(--title-color-opc), 0.1);
          transition: 0.5s;
        }
      }

      .primary-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
      }

      &:hover {
        .bg {
          svg {
            fill: var(--primary-color);
            stroke: var(--primary-color);
            transition: 0.5s;
          }
        }

        .primary-btn {
          --background-size: 0%;
          --stroke-dashoffset: 26;
          --stroke-duration: .3s;
          --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
          --stroke-delay: .195s;
          background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
          color: var(--white-color);

          &::after {
            opacity: 0;
            transition-delay: 0s;
            color: var(--white-color);
          }

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

  .about-content {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        max-width: 312px;
        width: 100%;
        margin-bottom: 60px;

        @include xxl-down-device() {
          margin-bottom: 50px;
        }

        @include xl-down-device() {
          margin-bottom: 35px;
        }

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

        &:nth-child(even) {
          margin-left: auto;

          @include sm-down-device() {
            margin-left: 0;
          }
        }

        h5 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 22px;
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: 0.06em;
          margin-bottom: 15px;
        }

        p {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 0;
        }
      }
    }
  }
}

/*=====================================
 05. Home1 Service Section 
========================================*/
.home1-service-section {
  padding: 120px 0;
  background-color: #F7F7FA;

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

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

  .section-content {
    @include lg-down-device() {
      padding-top: 20px;
    }

    @include md-down-device() {
      padding-top: 15px;
    }

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 0;
    }
  }

  .sevices-wrap {
    padding: 0;
    margin: 0;
    list-style: none;

    .single-services {
      transition: 0.5s;
      border: 1px solid rgba(#3F444B, 0.1);
      background: rgba(#fff, 0.3);
      position: relative;
      display: grid;
      grid-template-columns: 33% 52% 15%;
      padding: 30px 30px 30px 50px;
      margin-bottom: 20px;

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

      @include xxl-down-device() {
        grid-template-columns: 31% 53% 16%;
      }

      @include xl-down-device() {
        grid-template-columns: 33% 47% 20%;
        padding: 30px 30px 30px 35px;
      }

      @include lg-down-device() {
        grid-template-columns: 32% 58% 10%;
        padding: 25px 20px 25px 20px;
      }

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

      h3 {
        margin-bottom: 0;
        display: flex;
        align-items: center;

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

        a {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 30px;
          font-weight: 500;
          transition: 0.5s;

          @include xl-down-device() {
            font-size: 28px;
          }

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

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

          span {
            display: block;
            padding-left: 35px;

            @include lg-down-device() {
              padding-left: 25px;
            }

            @include md-down-device() {
              padding-left: 0;
              display: inline-block;
            }
          }
        }
      }

      .content {
        padding: 0 50px;
        position: relative;

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

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

        @include md-down-device() {
          margin-bottom: 25px;
          line-height: 26px;
          padding: 0;
        }

        .tag-list {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 15px;
          padding-top: 20px;

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

          li {
            a {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 10px;
              font-weight: 400;
              line-height: 1;
              text-transform: uppercase;
              border: 1px solid rgba(var(--primary-color-opc), 0.1);
              border-radius: 50px;
              padding: 5px 17px;
              transition: 0.5s;

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

        p {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 0;
        }

        &::before,
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 1px;
          height: 100px;
          background: rgba(#3F444B, 0.15);
          border-radius: 10px;

          @include md-down-device() {
            display: none;
          }
        }

        &::after {
          left: unset;
          right: 0;
        }
      }

      .button-area {
        display: flex;
        align-items: center;
        justify-content: end;

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

        a {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgba(var(--primary-color-opc), 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.5s;

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

          i {
            color: var(--title-color);
            font-size: 18px;
            transform: rotate(-45deg);
            line-height: 1;
            transition: 0.5s;
          }

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

            i {
              color: var(--white-color);
              transform: rotate(0);
            }
          }
        }
      }

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

/*=====================================
 06. Home1 Why Choose Us Section 
========================================*/
.home1-why-choose-us-section {
  padding-bottom: 190px;
  position: relative;

  @include xxl-down-device() {
    padding-bottom: 130px;
  }

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

  @include md-down-device() {
    padding-bottom: 0;
  }

  .bg-img {
    position: absolute;
    bottom: 0;
    left: 24%;

    @include eighteen-down-device() {
      left: 22%;
    }

    @include seventeen-down-device() {
      left: 18%;
    }

    @include xxl-device() {
      left: 12%;
      width: 1150px;
    }

    @include xxl-down-device() {
      left: 12%;
      width: 1050px;
    }

    @include xl-down-device() {
      left: 17%;
      width: 800px;
    }

    @include lg-down-device() {
      width: 620px;
    }

    @include md-down-device() {
      display: none;
    }
  }

  .why-choose-us-content-wrap {
    .section-title {
      margin-bottom: 70px;

      @include xxl-down-device() {
        margin-bottom: 60px;
      }

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

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

      p {
        padding-left: 50px;

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

    .why-choose-us-content {
      max-width: 312px;
      width: 100%;

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

      h2 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 22px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.06em;
        margin-bottom: 15px;
      }

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 45px;

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

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

  .why-choose-counter-area {
    .counter-list {
      padding: 0;
      margin: 0;
      list-style: none;

      @include sm-device() {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        flex-wrap: wrap;
        max-width: 425px;
      }

      .single-counter {
        text-align: center;
        padding-bottom: 55px;
        border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
        margin-bottom: 50px;

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

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

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

        @include sm-down-device() {
          padding-bottom: 25px;
          margin-bottom: 25px;
        }

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: unset;
        }

        .number {
          line-height: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          h2,
          span {
            color: rgba(var(--title-color-opc), 0.3);
            font-family: var(--font-inter);
            font-size: 100px;
            font-weight: 900;
            letter-spacing: 4.5px;
            margin-bottom: 0;
            line-height: 0.8;

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

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

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

        .content {
          background-color: var(--white-color);
          padding-top: 20px;
          margin-top: -15px;
          position: relative;
          z-index: 1;

          p {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 13px;
            font-weight: 400;
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: 0;

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

/*=====================================
 07. Home1 Project Section 
========================================*/
.home1-project-section {
  padding: 120px 0;
  background-color: var(--primary-color);
  overflow: hidden;

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

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

  .section-title {
    h2 {
      margin-bottom: 40px;

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

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

  .home1-project-slider-wrap {
    padding-left: 19%;

    @include eighteen-down-device() {
      padding-left: 15%;
    }

    @include seventeen-down-device() {
      padding-left: 13%;
    }

    @include xxl-device() {
      padding-left: 7%;
    }

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

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

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

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

.project-card {
  .project-img-wrap {
    position: relative;

    .project-img {
      position: relative;
      overflow: hidden;
      display: block;
      transition: all 0.5s ease-out;

      img {
        transition: all 0.5s ease-out;
      }

      &::after {
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 1;
      }
    }

    .button-area {
      position: absolute;
      bottom: 0;
      right: 0;
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: 0.5s;
      z-index: 2;

      .primary-btn2 {
        padding: 10px 22px;

        span {
          font-size: 12px;
        }
      }
    }
  }

  .project-content {
    padding-top: 25px;

    span {
      color: rgba(#fff, 0.6);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.06em;
      display: block;
      margin-bottom: 8px;
    }

    h4 {
      margin-bottom: 0;

      a {
        color: var(--white-color);
        font-family: var(--font-inter);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.03em;
        background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
        background-size: 0 1px;
        background-repeat: no-repeat;
        background-position: right 100%;
        transition: background-size 0.9s;

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

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

        &:hover {
          background-size: 100% 1px;
          background-position: 0% 100%;
        }
      }
    }
  }

  &:hover {
    .project-img-wrap {
      .project-img {
        img {
          transform: scale(1.1);
        }

        &::after {
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }

      .button-area {
        opacity: 1;
        transform: scaleY(1);
      }
    }
  }

  &.two {
    .project-content {
      span {
        color: var(--paragraph-color);
      }

      h4 {
        a {
          color: var(--title-color);
          background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
          background-size: 0 2px;
          background-repeat: no-repeat;
          background-position: right 100%;
          transition: background-size 0.9s;

          &:hover {
            background-size: 100% 2px;
            background-position: 0% 100%;
          }
        }
      }
    }
  }
}

/*=====================================
 08. Home1 Support Section 
========================================*/
.home1-support-section {
  .section-title {
    padding-right: 35px;
    margin-bottom: 95px;

    @include xxl-device() {
      margin-bottom: 85px;
    }

    @include xxl-down-device() {
      margin-bottom: 85px;
    }

    @include xl-down-device() {
      padding-right: 0;
      margin-bottom: 70px;
    }

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

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

    h2 {
      font-size: 70px;
      font-weight: 300;

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

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

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

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

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

  .support-content {
    text-align: center;

    .contact-area {
      margin: 0 auto;
      width: 240px;
      height: 240px;
      border: 1px solid #D9D9D9;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: 0.8s;

      @include xl-down-device() {
        width: 210px;
        height: 210px;
      }

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

      h2 {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 80px;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 10px;
        transition: 0.5s;

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

        @include xl-down-device() {
          font-size: 68px;
          margin-bottom: 5px;
        }

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

      span {
        color: rgba(var(--title-color-opc), 0.5);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 10px;
        transition: 0.5s;

        @include xl-down-device() {
          font-size: 23px;
        }

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

      p {
        color: rgba(var(--title-color-opc), 0.5);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.05em;
        transition: 0.5s;

        @include xl-down-device() {
          font-size: 18px;
        }

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

      &:hover {
        box-shadow: inset 0 0 0 10em var(--primary-color);

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

        span,
        p {
          color: rgba(#fff, 0.5);
        }
      }
    }

    >p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 0;
      padding-top: 35px;

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

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

      @include sm-down-device() {
        padding-top: 25px;
      }
    }
  }
}

/*=====================================
 09. Home1 Banner2 Section 
========================================*/
.home1-banner2-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;

  @include xxl-device() {
    min-height: 700;
  }

  @include xxl-down-device() {
    min-height: 650px;
  }

  @include sm-down-device() {
    min-height: 80vh;
    background-attachment: unset;
  }

  .banner-content {
    padding: 80px 0;
    text-align: center;
    max-width: 640px;
    width: 100%;

    h2 {
      color: var(--white-color);
      font-family: var(--font-kanit);
      font-size: 75px;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.05em;
      margin-bottom: 0;

      &:nth-child(2) {
        padding-left: 20px;

        @include sm-down-device() {
          padding-left: 0;
        }
      }

      @include xl-down-device() {
        font-size: 68px;
      }

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

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

    .video-area {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 10px;

      @include md-down-device() {
        gap: 20px;
        display: inline-flex;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        justify-content: center;
      }

      .play-btn {
        cursor: pointer;
        display: inline-block;

        .icon {
          position: relative;

          .video-circle {
            stroke: var(--white-color);
            fill: none;
            transition: 0.5s;

            @include sm-down-device() {
              width: 68px;
            }

            .top-half {
              stroke-dasharray: 430;
              stroke-dashoffset: 320;
              transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
            }
          }

          .play-icon {
            fill: var(--white-color);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: 2px;

            @include sm-down-device() {
              width: 20px;
            }
          }
        }

        &:hover {
          .icon {
            .video-circle {
              .top-half {
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 10. Logo Section 
========================================*/
.logo-section {
  padding: 80px 14%;
  border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

  @include eighteen-down-device() {
    padding: 80px 12%;
  }

  @include seventeen-down-device() {
    padding: 80px 10%;
  }

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

  @include xxl-down-device() {
    padding: 60px 6%;
  }

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

  @include lg-down-device() {
    padding: 50px 2%;
  }

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

  .logo-wrap {
    display: flex;
    align-items: center;
    gap: 30px;

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

    .logo-title {
      padding-right: 25px;
      border-right: 1px solid rgba(var(--primary-color-opc), 0.1);
      min-width: 200px;

      @include xl-down-device() {
        min-width: 165px;
        padding-right: 15px;
      }

      @include sm-down-device() {
        padding-right: 0;
        border-right: unset;
      }

      h6 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        margin-bottom: 0;
      }
    }

    .marquee {
      display: flex;
      gap: 80px;
      overflow: hidden;
      user-select: none;

      .marquee__group {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 80px;
        min-width: 100%;
        animation: scroll-x 30s linear infinite;

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

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

        a {
          img {
            width: 104px;

            @include lg-down-device() {
              width: 95px;
            }
          }
        }
      }

      @keyframes scroll-x {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-100%);
        }
      }
    }
  }

  &.style-2 {
    padding: 0;
    border: unset;

    .logo-wrap {
      padding: 45px 0;
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
      border-top: 1px solid rgba(var(--primary-color-opc), 0.1);

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

  &.style-3 {
    padding: 44px 10%;
    background-color: #FBF8F3;
    border: 1px solid rgba(var(--primary-color-opc), 0.1);

    @include seventeen-down-device() {
      padding: 44px 8%;
    }

    @include xxl-device() {
      padding: 44px 5%
    }

    @include xxl-down-device() {
      padding: 44px 4%
    }

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

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

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

  &.style-4 {
    padding: 44px 10%;
    background-color: transparent;
    border: 1px solid rgba(var(--primary-color-opc), 0.1);

    @include seventeen-down-device() {
      padding: 44px 8%;
    }

    @include xxl-device() {
      padding: 44px 5%
    }

    @include xxl-down-device() {
      padding: 44px 4%
    }

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

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

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

/*=====================================
 11. Home1 Team Section 
========================================*/
.home1-team-section {
  .slider-btn-grp {
    padding-top: 60px;

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

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

  .founder-card {
    padding: 15px 25px 15px 15px;
    border: 1px solid rgba(var(--primary-color-opc), 0.08);
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;

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

    @include md-down-device() {
      display: block;
      padding: 15px;
    }

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

    .founder-content {
      padding: 10px 0 10px 20px;

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

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

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 30px;

        @include lg-device() {
          font-size: 15px;
          margin-bottom: 20px;
        }

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

      .name-and-desig {
        span {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          display: block;
          margin-bottom: 10px;

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

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

        h5 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 22px;
          font-weight: 400;
          line-height: 1.4;
          letter-spacing: 0.03em;
          margin-bottom: 0;
        }
      }
    }
  }
}

.team-card {
  .team-img {
    overflow: hidden;

    img {
      transition: all 0.5s ease-out;
    }
  }

  .team-content {
    padding-top: 25px;

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

    span {
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      display: block;
      margin-bottom: 8px;

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

    h5 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: 0.03em;
      margin-bottom: 0;

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

  &:hover {
    .team-img {
      img {
        transform: scale(1.1);
      }
    }
  }
}

/*=====================================
 12. Home1 Testimonial Section 
========================================*/
.home1-testimonial-section {
  padding: 130px 9% 130px 15.5%;
  background-color: #F0F2F4;

  @include nineteen-down-device() {
    padding: 130px 8% 130px 14.5%;
  }

  @include eighteen-down-device() {
    padding: 130px 6% 130px 12%;
  }

  @include seventeen-down-device() {
    padding: 130px 6% 130px 10%;
  }

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

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

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

  .slider-btn-grp {
    padding-top: 50px;

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

  .testimonial-slider-area {
    padding-top: 110px;
    margin-left: -20%;

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

    @include xl-down-device() {
      margin-left: 0;
      padding-top: 0;
    }

    .contact-btn-area {
      display: flex;
      align-items: center;
      gap: 15px;
      justify-content: end;
      margin-top: -65px;
      position: relative;
      z-index: 1;

      @include sm-down-device() {
        margin-top: 25px;
        justify-content: start;

        img {
          display: none;
        }
      }
    }

    .home1-testimonial-slider {
      .swiper-slide-active {

        span,
        p {
          animation: fadeInDown 1.7s;
        }

        .author-content {
          animation: fadeInUp 1.7s;
        }
      }
    }
  }
}

.testimonial-card {
  display: flex;
  align-items: end;
  gap: 55px;

  @include xxl-down-device() {
    gap: 40px;
  }

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

  .testimonial-author-img {
    position: relative;
    padding-left: 70px;
    z-index: 1;
    margin-bottom: 40px;

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

    @include sm-down-device() {
      padding-left: 0;
    }

    img {
      min-width: 150px;
      max-width: 150px;
      height: 150px;
      border-radius: 50%;

      @include sm-down-device() {
        min-width: 130px;
        max-width: 130px;
        height: 130px;
      }
    }

    .quote {
      fill: rgba(var(--primary-color2-opc), 0.2);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      z-index: -1;

      @include sm-down-device() {
        display: none;
      }
    }
  }

  .testimonial-content {
    >span {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 16px;
      font-weight: 400;
      line-height: 23.92px;
      letter-spacing: 0.06em;
      display: block;
      margin-bottom: 20px;

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

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 22px;
      font-weight: 400;
      line-height: 48px;
      margin-bottom: 0;

      @include md-down-device() {
        line-height: 42px;
      }

      @include sm-down-device() {
        font-size: 18px;
        line-height: 36px;
      }
    }

    .author-area {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 25px;
      border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
      margin-top: 50px;

      @include xl-down-device() {
        margin-top: 35px;
      }

      @include sm-down-device() {
        margin-top: 25px;
        padding-top: 15px;
      }

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

      .author-content {
        h5 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 21px;
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: 0.03em;
          margin-bottom: 3px;
        }

        span {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.03em;
        }
      }
    }
  }

  &.style-2 {
    .testimonial-content {
      .quote {
        fill: var(--title-color);
        margin-bottom: 30px;

        @include sm-down-device() {
          margin-bottom: 25px;
        }
      }

      >span {
        color: var(--primary-color2);
      }

      p {
        @include lg-device() {
          font-size: 19px;
          line-height: 42px;
        }
      }
    }
  }

  &.style-3 {
    display: block;

    .testimonial-author-img-wrap {
      padding-top: 40px;
      margin-bottom: 60px;
      position: relative;

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

      @include sm-down-device() {
        margin-bottom: 30px;
      }

      .testimonial-author-img {
        padding-left: 0;
        width: 156px;
        height: 156px;
        border-radius: 50%;
        border: 1px solid rgba(var(--primary-color-opc), 0.1);
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        margin: 0 auto;
        transition: 0.5s;
        position: relative;
        overflow: hidden;

        @include sm-down-device() {
          width: 136px;
          height: 136px;
        }

        &::before,
        &::after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 164px;
          height: 164px;
          clip: rect(0px, 83px, 164px, 0px);
          background-color: white;
          transform: rotate3d(0, 0, 1, 0deg);
          z-index: 2;

          @include sm-down-device() {
            width: 155px;
            height: 155px;
            clip: rect(0px, 83px, 155px, 0px);
          }
        }

        &::after {
          content: " ";
          background: black;
          z-index: 1;
        }

        @keyframes spin {
          from {
            transform: rotate3d(0, 0, 1, 0deg);
          }

          to {
            transform: rotate3d(0, 0, 1, 180deg);
          }
        }

        @keyframes spin2 {
          from {
            background: black;
            transform: rotate3d(0, 0, 1, 180deg);
          }

          to {
            background: black;
            transform: rotate3d(0, 0, 1, 360deg);
          }
        }

        img {
          position: relative;
          z-index: 4;
          border: 7px solid white;
        }
      }

      .quote {
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        fill: none;
        stroke: rgba(var(--primary-color-opc), 0.1);
      }
    }

    .testimonial-content {
      >span {
        color: var(--primary-color2);
        text-transform: uppercase;
        text-align: center;
      }

      p {
        text-align: center;

        @include lg-device() {
          font-size: 19px;
          line-height: 42px;
        }
      }
    }
  }
}

/*=====================================
 13. Home1 Faq Section 
========================================*/
.faq-wrap {
  .accordion {
    .accordion-item {
      border: none;

      &:first-child {
        .accordion-header {
          .accordion-button {
            padding-top: 0;
          }
        }
      }

      .accordion-header {
        .accordion-button {
          border: none;
          border-radius: unset;
          box-shadow: none;
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 18px;
          font-weight: 400;
          line-height: 1.4;
          text-transform: capitalize;
          padding: 0;
          padding-bottom: 20px;
          padding-top: 35px;
          border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

          @include xl-down-device() {
            padding-top: 25px;
            padding-bottom: 15px;
          }

          &::after {
            width: unset;
            height: unset;
            content: '\F128';
            font-family: bootstrap-icons;
            background-image: none;
            font-weight: 800;
            font-size: 17px;
          }

          &:not(.collapsed) {
            background-color: unset;

            &::after {
              content: '\F148';
              transform: unset;
            }
          }

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

      .accordion-body {
        padding: 20px;
        padding-bottom: 10px;
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;

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

    }
  }

  &.style-2 {
    .accordion {
      .accordion-item {
        .accordion-header {
          .accordion-button {
            font-size: 16px;
          }
        }
      }
    }
  }
}

.home1-faq-section {
  .title-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

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

    .section-title {
      h2 {
        @include xl-device() {
          font-size: 52px;
        }
      }
    }

    .button-area {
      display: flex;
      justify-content: end;

      @include lg-down-device() {
        justify-content: start;
        padding-top: 20px;
      }
    }
  }
}

/*=====================================
 14. Home1 Blog Section 
========================================*/
.home1-blog-section {
  .slider-btn-grp {
    padding-top: 60px;

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

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

  .home1-blog-slider {
    .swiper-slide {
      &:nth-child(odd) {
        padding-top: 100px;

        @include xxl-down-device() {
          padding-top: 80px;
        }

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

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

.blog-card {
  &.standard {
    position: relative;
  }

  .post-video iframe,
  .post-audio iframe {
    min-height: 400px;
    width: 100%;
  }

  .post-gallery {
    position: relative;

    .slider-arrows {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .blog1-prev,
    .blog1-next {
      color: #fff;
      padding: 5px 20px;
      background-color: #000;
    }
  }

  .blog-img {
    position: relative;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease-out;

    img {
      transition: all 0.5s ease-out;
    }

    &::after {
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 1;
    }
  }

  .blog-content {
    padding-top: 30px;
    word-wrap: break-word;

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

    @include sm-down-device() {
      padding-top: 20px;
    }

    .blog-meta {
      margin-bottom: 15px;

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

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

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

        li {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -12px;
            width: 1px;
            height: 12px;
            background-color: rgba(var(--primary-color-opc), 0.2);
          }

          &:last-child {
            &::before {
              display: none;
            }
          }

          a {
            color: rgba(var(--title-color-opc), 0.5);
            font-family: var(--font-inter);
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            transition: 0.5s;

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

            &.blog-date {
              color: rgba(var(--primary-color2-opc), 0.7);
              text-decoration: underline;
              text-underline-offset: 3px;

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

    h4 {
      margin-bottom: 20px;

      a {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.04em;
        transition: 0.5s;

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

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

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

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

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

  &:hover {
    .blog-img {
      &::after {
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
      }

      img {
        transform: scale(1.1);
      }
    }
  }

  &.style-2 {
    .blog-content {
      padding-top: 0;
      margin-top: 30px;
      position: relative;
      margin-left: 35px;
      padding-left: 20px;

      @include xxl-down-device() {
        margin-left: 25px;
        padding-left: 15px;
      }

      @include lg-device() {
        margin-left: 15px;
        padding-left: 10px;
      }

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

      @include sm-down-device() {
        margin-left: 15px;
        padding-left: 10px;
      }

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 1px;
        height: 90px;
        background-color: rgba(var(--primary-color-opc), 0.2);
      }

      .blog-meta {
        ul {
          gap: 15px;

          li {
            &::before {
              display: none;
            }

            a {
              font-size: 12px;
              color: rgba(var(--primary-color2-opc), 0.7);
              text-decoration: underline;
              text-underline-offset: 3px;

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

              &.category {
                color: rgba(var(--title-color-opc), 0.5);
                text-decoration: none;
                padding: 4px 14px;
                border: 1px solid rgba(var(--primary-color-opc), 0.1);
                border-radius: 50px;

                &:hover {
                  background-color: var(--primary-color2);
                  border-color: var(--primary-color2);
                  color: var(--white-color);
                }
              }
            }
          }
        }
      }

      h4 {
        a {
          @include lg-device() {
            font-size: 22px;
            line-height: 1.4;
          }
        }
      }
    }
  }

  &.style-3 {
    display: grid;
    grid-template-columns: 47.5% 52.5%;

    @include md-down-device() {
      grid-template-columns: 42% 58%;
    }

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

    .blog-img {
      height: 100%;

      @include sm-down-device() {
        height: unset;
      }

      img {
        height: 100%;
        object-fit: cover;

        @include sm-down-device() {
          height: unset;
        }
      }
    }

    .blog-content-wrap {
      padding: 30px 30px 30px 34px;
      border: 1px solid rgba(var(--primary-color-opc), 0.05);
      border-left: unset;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;

      @include xxl-down-device() {
        padding: 25px 20px 25px 30px;
      }

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

      @include sm-down-device() {
        border: 1px solid rgba(var(--primary-color-opc), 0.05);
        border-top: unset;
      }
    }

    .blog-content {
      padding: 0;

      .blog-meta {
        margin-bottom: 10px;

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

      h4 {
        a {
          @include lg-device() {
            font-size: 20px;
          }

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

  &.style-4 {
    position: relative;

    .blog-img {
      max-width: 485px;

      @include lg-down-device() {
        max-width: 550px;
      }
    }

    .blog-content {
      background-color: var(--white-color);
      max-width: 384px;
      width: 100%;
      padding: 40px 30px;
      position: absolute;
      bottom: 0;
      right: 0;
      border: 1px solid rgba(var(--primary-color-opc), 0.05);
      z-index: 5;

      @include xl-device() {
        max-width: 360px;
        padding: 35px 20px;
      }

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

      @include sm-down-device() {
        max-width: 300px;
        padding: 20px 15px;
      }

      .blog-meta {
        margin-bottom: 10px;
      }

      h4 {
        a {
          @include sm-down-device() {
            font-size: 20px;
          }
        }
      }

      .details-btn {
        padding-top: 70px;

        @include sm-down-device() {
          padding-top: 30px;
        }
      }
    }
  }
}

/*=====================================
 15. Home1 Footer Top Banner Section 
========================================*/
.home1-footer-top-banner-section {
  background-image: linear-gradient(91.45deg, #000000 27.11%, rgba(0, 0, 0, 0.9) 53.38%, rgba(0, 0, 0, 0.8) 75.41%, rgba(0, 0, 0, 0.5) 98.52%), url(../img/home1/home1-contact-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding: 130px 0;
  clear: both;

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

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

  .banner-content {
    .button-area {
      padding-top: 65px;
      display: flex;
      align-items: center;
      gap: 55px;

      @include md-down-device() {
        padding-top: 50px;
        gap: 40px;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 30px;
        padding-top: 40px;
      }

      .primary-btn2 {
        padding: 20px 33px;

        @include sm-down-device() {
          padding: 18px 30px;
        }
      }
    }
  }

  &.two {
    background-image: linear-gradient(90.44deg, rgba(0, 0, 0, 0.75) 0.35%, #000000 35.13%, #000000 65.37%, rgba(0, 0, 0, 0.75) 99.62%), url(../img/home5/home5-footer-top-bg.jpg);
    padding: 110px 0;

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

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

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

    .banner-content {
      text-align: center;

      .button-area {
        justify-content: center;
        padding-top: 55px;

        @include md-down-device() {
          padding-top: 45px;
          gap: 40px;
        }

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

/*=====================================
 16. Home1 Footer Section 
========================================*/
.footer-section {
  overflow: hidden;

  .footer-wrapper {
    @include xl-down-device() {
      padding: 90px 80px;
    }

    @include lg-down-device() {
      padding: 70px 40px;
    }

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

    @include sm-down-device() {
      padding: 60px 20px;
    }

    .footer-logo-and-contact-area {
      padding: 50px 110px;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;

      @include eighteen-down-device() {
        padding: 50px 85px;
      }

      @include seventeen-down-device() {
        padding: 50px 75px;
      }

      @include xxl-device() {
        padding: 50px 45px;
      }

      @include xxl-down-device() {
        padding: 50px 25px;
      }

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

      @include md-down-device() {
        flex-wrap: wrap;
      }

      .footer-logo-area {
        max-width: 360px;
        width: 100%;

        .footer-logo {
          img {
            @include sm-down-device() {
              width: 150px;
            }
          }
        }

        .footer-content {
          padding-top: 55px;

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

          @include sm-down-device() {
            padding-top: 35px;
          }

          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 35px;

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

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

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

            li {
              a {
                text-align: center;
                display: block;

                i {
                  color: var(--paragraph-color);
                  transition: 0.5s;
                }

                span {
                  color: var(--paragraph-color);
                  font-family: var(--font-inter);
                  font-size: 12px;
                  font-weight: 400;
                  line-height: 1;
                  display: block;
                  padding-top: 5px;
                  transition: 0.5s;
                }

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

                  span {
                    color: var(--title-color);
                  }
                }
              }
            }
          }
        }
      }

      .contact-area {
        padding: 0;
        margin: 0;
        list-style: none;
        padding-left: 85px;
        position: relative;

        @include eighteen-down-device() {
          padding-left: 60px;
        }

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

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

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

        @include md-down-device() {
          display: flex;
          align-items: center;
          gap: 30px;
          flex-wrap: wrap;
          padding-left: 0;
          padding-top: 25px;
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 138px;
          background-color: rgba(var(--primary-color2-opc), 0.2);

          @include md-down-device() {
            display: none;
          }
        }

        li {
          margin-bottom: 20px;

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

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

          .single-contact {
            display: flex;
            align-items: center;
            gap: 12px;

            .icon {
              svg {
                fill: var(--primary-color);
              }
            }

            .content {
              position: relative;
              line-height: 1;
              text-align: start;

              span {
                font-family: var(--font-kanit);
                font-weight: 500;
                font-size: 12px;
                line-height: 1;
                color: var(--title-color);
                margin-bottom: 6px;
                display: inline-block;
              }

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

                a {
                  color: rgba(var(--title-color-opc), 0.6);
                  font-family: var(--font-kanit);
                  font-weight: 500;
                  font-size: 17px;
                  line-height: 1.5;
                  transition: 0.5s;

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

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

          .arrow {
            margin-top: 20px;
            fill: rgba(var(--primary-color2-opc), 0.3);
            margin-left: 70px;

            @include md-down-device() {
              display: none;
            }
          }
        }
      }
    }

    .address-area {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 60px;
      width: 100%;
      border-left: 1px solid rgba(var(--primary-color-opc), 0.1);
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

      @include eighteen-down-device() {
        padding: 60px 50px;
      }

      @include seventeen-down-device() {
        padding: 60px 45px;
      }

      @include xxl-device() {
        padding: 50px 25px;
      }

      @include xl-device() {
        padding: 45px 20px;
        gap: 15px;
      }

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

      @include md-down-device() {
        flex-wrap: wrap;
        gap: 25px;
      }

      .single-address {
        max-width: 240px;
        width: 100%;
        padding-left: 35px;
        position: relative;

        @include eighteen-down-device() {
          padding-left: 25px;
        }

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

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

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

        @include md-down-device() {
          padding-left: 0;
        }

        &::before {
          content: '';
          position: absolute;
          bottom: 5px;
          left: 0;
          width: 1px;
          height: 42px;
          background-color: var(--primary-color2);

          @include md-down-device() {
            display: none;
          }
        }

        &:first-child {
          padding-left: 0;

          &::before {
            display: none;
          }
        }

        span {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.06em;
          text-decoration: underline;
          display: block;
          margin-bottom: 20px;

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

        a {
          color: rgba(var(--title-color-opc), 0.6);
          font-family: var(--font-inter);
          font-size: 17px;
          font-weight: 400;
          line-height: 28px;
          margin-bottom: 0;
          transition: 0.5s;

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

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

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

    .contact-banner-area {
      background-image: linear-gradient(90deg, #000000 5.18%, rgba(0, 0, 0, 0.4) 100%), url(../img/home3/footer-contact-bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      padding: 64px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      @include seventeen-down-device() {
        padding: 64px 40px;
      }

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

      @include xl-device() {
        padding: 55px 20px;
      }

      @include lg-down-device() {
        padding: 64px 25px;
      }

      @include sm-device() {
        padding: 50px 20px;
        gap: 15px;
      }

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

      h4 {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.05em;
        margin-bottom: 0;
        max-width: 290px;
        width: 100%;

        @include xl-device() {
          font-size: 23px;
        }

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

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

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

        .form-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 4px 10px 4px 24px;
          border: 1px solid rgba(#fff, 0.6);
          border-radius: 5px;
          min-width: 380px;

          @include xxl-device() {
            min-width: 320px;
          }

          @include xl-device() {
            min-width: 270px;
          }

          @include lg-down-device() {
            min-width: 310px;
          }

          @include sm-device() {
            min-width: 245px;
            padding: 4px 10px 4px 15px;
          }

          @include sm-down-device() {
            min-width: unset;
            padding: 4px 10px 4px 15px;
          }

          input {
            background: transparent;
            height: unset;
            border: unset;
            padding: 0;
            color: var(--white-color);
            padding-right: 10px;

            &::placeholder {
              color: rgba(#fff, 0.75);
            }
          }

          button {
            min-width: 36px;
            max-width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.5s;

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

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

    .footer-menu {
      padding: 75px 110px;
      border-left: 1px solid rgba(var(--primary-color-opc), 0.1);

      @include eighteen-down-device() {
        padding: 75px 85px;
      }

      @include seventeen-down-device() {
        padding: 75px 70px;
      }

      @include xxl-device() {
        padding: 65px 55px;
      }

      @include xxl-down-device() {
        padding: 65px 45px;
      }

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

      .footer-widget {
        .widget-title {
          margin-bottom: 25px;

          h5 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.9px;
            margin-bottom: 0;
            position: relative;
            padding-bottom: 10px;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 107px;
              height: 2px;
              border-radius: 10px;
              background: linear-gradient(90.01deg, #000000 0.01%, rgba(0, 0, 0, 0) 102.8%);
            }
          }
        }

        .menu-container {
          display: flex;
          gap: 80px;

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

          .widget-list {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
              margin-bottom: 20px;
              line-height: 1;
              transition: .5s;
              position: relative;

              @include xl-down-device() {
                margin-bottom: 15px;
              }

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

              a {
                color: var(--paragraph-color);
                font-family: var(--font-kanit);
                font-size: 13px;
                font-weight: 400;
                line-height: 1.3;
                letter-spacing: 0.34px;
                text-transform: uppercase;
                display: inline-block;
                background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
                background-repeat: no-repeat;
                background-size: 0 1px;
                background-position: 0% 100%;
                transition: background-size 0.75s;

                &:hover {
                  color: var(--primary-color);
                  background-size: 100% 1px;
                  background-position: left 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-bottom-wrap {
    padding: 20px 0;
    border-top: 1px solid rgba(var(--primary-color-opc), 0.1);

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      @include lg-down-device() {
        flex-wrap: wrap;
        gap: 20px;
      }

      @include md-down-device() {
        justify-content: center;
        gap: 15px;
      }

      .copyright-area {
        p {
          color: var(--paragraph-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 300;
          line-height: normal;
          letter-spacing: 0.02em;
          margin-bottom: 0;

          a {
            color: var(--title-color);
            font-weight: 500;
            line-height: 1;
            display: inline-block;
            background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
            background-repeat: no-repeat;
            background-size: 0 1px;
            background-position: 0% 100%;
            transition: background-size 0.75s;

            &:hover {
              color: var(--primary-color);
              background-size: 100% 1px;
              background-position: left 100%;
            }
          }
        }
      }

      .footer-bottom-right {
        ul {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 45px;
          flex-wrap: wrap;
          line-height: 1;

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

          @include sm-down-device() {
            gap: 15px;
            justify-content: center;
          }

          li {
            a {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              letter-spacing: 0.3px;
              text-transform: uppercase;
              display: inline-block;
              background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
              background-repeat: no-repeat;
              background-size: 0 1px;
              background-position: 0% 100%;
              transition: background-size 0.75s;

              &:hover {
                color: var(--primary-color);
                background-size: 100% 1px;
                background-position: left 100%;
              }
            }
          }
        }
      }
    }
  }

  &.style-2 {
    background-color: #F7F7F7;

    .footer-wrapper {
      padding: 110px 100px;

      @include seventeen-down-device() {
        padding: 110px 75px;
      }

      @include xxl-device() {
        padding: 100px 45px;
      }

      @include xxl-down-device() {
        padding: 100px 35px;
      }

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

      @include lg-down-device() {
        padding: 70px 40px;
      }

      @include md-down-device() {
        padding: 70px 30px;
      }

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

      .footer-logo-and-contact-area {
        align-items: center;
        padding: 0;

        .contact-area {
          padding-right: 110px;

          @include eighteen-down-device() {
            padding-right: 85px;
          }

          @include seventeen-down-device() {
            padding-right: 75px;
          }

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

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

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

          &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 1px;
            height: 138px;
            background-color: rgba(var(--primary-color2-opc), 0.2);

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

      .address-area {
        padding: 0;
        display: block;
        border: unset;

        .single-address {
          padding-left: 0;
          margin-bottom: 45px;

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

          @include xl-down-device() {
            margin-bottom: 35px;
          }

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

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

          &::before {
            display: none;
          }

          span {
            margin-bottom: 15px;
          }
        }
      }

      .footer-menu {
        border: unset;
        padding: 0;
        padding-left: 110px;

        @include eighteen-down-device() {
          padding-left: 85px;
        }

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

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

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

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

    .footer-bottom-wrap {
      background-color: var(--white-color);
      border: unset;
    }
  }

  &.style-3 {
    .footer-wrapper {
      .address-area {
        padding: 0;
        display: block;
        border: unset;

        .single-address {
          padding-left: 0;
          margin-bottom: 45px;

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

          @include xl-down-device() {
            margin-bottom: 35px;
          }

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

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

          &::before {
            display: none;
          }

          span {
            margin-bottom: 15px;
          }
        }
      }

      .footer-menu {
        padding: 75px 60px;

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

  &.style-4 {
    background-color: var(--primary-color);
    border-top: 3px solid var(--primary-color2);

    .footer-wrapper {
      .footer-logo-and-contact-area {
        @include xxl-device() {
          padding: 50px 35px;
        }

        @include xxl-down-device() {
          padding: 50px 25px;
        }

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

        @include md-down-device() {
          flex-wrap: wrap;
        }

        .footer-logo-area {
          .footer-content {
            p {
              color: rgba(#fff, 0.7);
            }

            .social-list {
              li {
                a {
                  i {
                    color: rgba(#fff, 0.6);
                  }

                  span {
                    color: rgba(#fff, 0.6);
                  }

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

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

        .contact-area {
          li {
            .single-contact {
              .icon {
                svg {
                  fill: var(--white-color);
                }
              }

              .content {
                span {
                  color: var(--white-color);
                }

                h6 {
                  a {
                    color: rgba(#fff, 0.6);

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

      .contact-banner-area {
        background-image: linear-gradient(90deg, #101010 20.1%, rgba(16, 16, 16, 0.5) 100%), url(../img/home3/footer-contact-bg.jpg);

        @include seventeen-down-device() {
          padding: 64px 25px;
        }

        @include xxl-device() {
          padding: 64px 20px;
        }

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

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

          @include xl-device() {
            font-size: 21px;
          }
        }
      }

      .address-area {
        padding: 0;
        display: block;
        border: unset;

        .single-address {
          padding-left: 0;
          margin-bottom: 45px;

          @include seventeen-down-device() {
            max-width: 200px;
          }

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

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

          @include xl-down-device() {
            margin-bottom: 35px;
          }

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

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

          &::before {
            display: none;
          }

          span {
            margin-bottom: 15px;
            color: var(--white-color);
          }

          a {
            color: rgba(#fff, 0.6);

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

      .footer-menu {
        border-left: 1px solid rgba(#fff, 0.08);
        padding: 75px 60px;

        @include xxl-device() {
          padding: 75px 25px;
        }

        @include xxl-down-device() {
          padding: 75px 20px;
        }

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

        .footer-widget {
          .widget-title {
            h5 {
              color: var(--white-color);

              &::after {
                opacity: 0.4;
                background: linear-gradient(90.01deg, #FFFFFF 0.01%, rgba(255, 255, 255, 0) 102.8%);
              }
            }
          }

          .menu-container {
            .widget-list {
              li {
                a {
                  color: rgba(#fff, 0.6);
                  background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
                  background-repeat: no-repeat;
                  background-size: 0 1px;
                  background-position: 0% 100%;
                  transition: background-size 0.75s;

                  &:hover {
                    color: var(--white-color);
                    background-size: 100% 1px;
                    background-position: left 100%;
                  }
                }
              }
            }
          }
        }
      }
    }

    .footer-bottom-wrap {
      padding: 20px 0;
      border-top: unset;
      background-color: #101010;

      .footer-bottom {
        .copyright-area {
          p {
            color: rgba(#fff, 0.6);

            a {
              color: var(--white-color);
              background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
              background-repeat: no-repeat;
              background-size: 0 1px;
              background-position: 0% 100%;
              transition: background-size 0.75s;

              &:hover {
                background-size: 100% 1px;
                background-position: left 100%;
              }
            }
          }
        }

        .footer-bottom-right {
          ul {
            li {
              a {
                color: var(--white-color);
                background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
                background-repeat: no-repeat;
                background-size: 0 1px;
                background-position: 0% 100%;
                transition: background-size 0.75s;

                &:hover {
                  background-size: 100% 1px;
                  background-position: left 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 17. Home2 Banner Section 
========================================*/
.home2-banner-section {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(../img/home2/home2-banner-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-top: 20%;
  overflow: hidden;
  position: relative;
  z-index: 1;

  @include xxl-down-device() {
    padding-top: 22%;
  }

  @include lg-down-device() {
    min-height: 85vh;
    display: flex;
    align-items: end;
  }

  .banner-content-wrap {
    padding: 6.5% 20px 16%;
    background-color: rgba(#A1C5D3, 0.25);
    backdrop-filter: blur(2.5px);
    border-radius: 20px 20px 0 0;

    @include xxl-device() {
      padding: 5% 20px 12%;
    }

    @include xxl-down-device() {
      padding: 5% 20px 14%;
    }

    @include xl-down-device() {
      padding: 4% 20px 14%;
    }

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

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

    @include sm-down-device() {
      border-radius: 10px 10px 0 0;
      padding: 40px 20px 100px;
    }

    .banner-content {
      text-align: center;

      h1 {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 70px;
        font-weight: 500;
        line-height: 1.1;
        margin-bottom: 35px;

        @include xxl-down-device() {
          font-size: 65px;
          margin-bottom: 30px;
        }

        @include xl-down-device() {
          font-size: 62px;
          line-height: 1.2;
        }

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

        @include md-down-device() {
          font-size: 50px;
          margin-bottom: 25px;
        }

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

      .btn-and-video-area {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;

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

        .video-area {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;

          .icon {
            position: relative;

            .video-circle {
              stroke: var(--white-color);
              fill: none;
              transition: 0.5s;

              .top-half {
                stroke-dasharray: 320;
                stroke-dashoffset: 320;
                transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
              }
            }

            .play-icon {
              fill: var(--white-color);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              margin-left: 1px;
            }
          }

          h6 {
            color: var(--white-color);
            font-family: var(--font-kanit);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.48px;
            margin-bottom: 0;
          }

          &:hover {
            .icon {
              .video-circle {
                .top-half {
                  stroke-dashoffset: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  .scroll-text-area {
    display: flex;
    gap: 25px;
    overflow: hidden;
    user-select: none;
    position: absolute;
    bottom: 30px;
    left: 0;
    z-index: -1;

    @include xxl-device() {
      bottom: 20px;
    }

    @include xxl-down-device() {
      bottom: 20px;
    }

    .scroll-text {
      h2 {
        white-space: nowrap;
        font-family: var(--font-kanit);
        font-size: 110px;
        font-style: italic;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 0;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px rgba(#fff, 0.3);
        flex-shrink: 0;
        min-width: 100%;
        animation: scroll-x 30s linear infinite;

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

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

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

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

/*=====================================
 18. Home2 About Section 
========================================*/
.home2-about-section {
  .about-content {
    padding-left: 30px;

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

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

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 30px;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 55px;

      @include xxl-down-device() {
        margin-bottom: 45px;
        font-size: 28px;
      }

      @include lg-device() {
        font-size: 27px;
        margin-bottom: 35px;
      }

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

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

      span {
        color: var(--title-color);
      }
    }

    .about-bottom-content {
      padding-top: 95px;

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

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

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

      @include sm-down-device() {
        padding-top: 40px;
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 20px;

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

        li {
          max-width: 312px;
          width: 100%;

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

          h5 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 22px;
            font-weight: 500;
            line-height: 1.3;
            letter-spacing: 0.06em;
            margin-bottom: 15px;

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

          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

/*=====================================
 19. Home2 Service Section 
========================================*/
.home2-service-section {
  .service-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;

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

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

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

    li {
      h2 {
        margin-bottom: 0;

        a {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 57px;
          font-style: italic;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          position: relative;
          transition: 0.5s;

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

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

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

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

          .service-img {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: -1;
            opacity: 0;
            transform: scale(.4) translateY(-50%);
            transition: .5s;

            @include lg-down-device() {
              width: 220px;
            }

            @include sm-down-device() {
              width: 180px;
            }
          }

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

            .service-img {
              opacity: 1;
              transform: scale(1) translateY(-50%);
            }
          }
        }
      }

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

/*=====================================
 20. Home2 Property Description Section 
========================================*/
.home2-property-description-section {
  background-color: #F0F2F4;
  padding: 110px 0;

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

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

  .property-content-wrap {
    .property-description-nav {
      .nav-tabs {
        border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
        padding-left: 40px;
        gap: 65px;

        @include lg-down-device() {
          gap: 35px;
          padding-left: 20px;
        }

        @include md-down-device() {
          gap: 20px;
          padding-left: 0;
        }

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

        .nav-link {
          color: var(--paragraph-color);
          font-family: var(--font-kanit);
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0.36px;
          text-transform: uppercase;
          border: none;
          padding: 0;
          padding-bottom: 10px;
          background: linear-gradient(to bottom, rgba(var(--primary-color-opc), 1) 0%, rgba(var(--primary-color-opc), 1) 98%);
          background-size: 0px 1px;
          background-repeat: no-repeat;
          background-position: right 100%;
          transition: background-size .75s;

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

          &.active {
            color: var(--title-color);
            background-size: 100% 1px;
            background-position: 0% 100%;
          }
        }
      }
    }

    .property-description-tab {
      .property-content {
        p {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.8;
          margin-bottom: 50px;

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

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

        ul {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: start;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
          position: relative;
          margin-bottom: 70px;

          @include xl-down-device() {
            margin-bottom: 60px;
          }

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

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 100%;
            background-color: rgba(var(--primary-color-opc), 0.1);

            @include sm-down-device() {
              display: none;
            }
          }

          li {
            display: flex;
            gap: 15px;
            max-width: 260px;
            width: 100%;
            padding-bottom: 25px;
            position: relative;
            margin-bottom: 10px;

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

            @include lg-device() {
              max-width: 180px;
            }

            @include md-down-device() {
              padding-bottom: 15px;
            }

            &:nth-child(5) {
              @include sm-up-device() {
                padding-bottom: 0;
                margin-bottom: 0;

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

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

              &::before {
                display: none;
              }
            }

            &::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 1px;
              background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
              opacity: 0.1;
            }

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

            .content {
              h6 {
                color: var(--title-color);
                font-family: var(--font-kanit);
                font-size: 18px;
                font-weight: 400;
                line-height: 1.4;
                letter-spacing: 0.05em;
                margin-bottom: 0;

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

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

              span {
                color: var(--paragraph-color);
                font-family: var(--font-inter);
                font-size: 15px;
                font-weight: 400;
                line-height: 1;
                letter-spacing: 0.03em;
              }
            }
          }
        }

        .primary-btn2 {
          padding: 18px 30px;

          @include sm-down-device() {
            padding: 15px 22px;
          }
        }
      }
    }
  }
}

/*=====================================
 21. Home2 Feature Section 
========================================*/
.home2-feature-section {
  .feature-content-wrap {
    .feature-content {
      padding-top: 50px;
      padding-left: 50px;

      @include xxl-down-device() {
        padding-left: 30px;
        padding-top: 40px;
      }

      @include xl-down-device() {
        padding-left: 15px;
        padding-top: 35px;
      }

      @include lg-down-device() {
        padding-left: 0;
      }

      @include md-down-device() {
        padding-top: 30px;
      }

      .video-and-content {
        display: flex;
        align-items: center;
        gap: 50px;

        @include xxl-down-device() {
          gap: 40px;
        }

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

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

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

        .video-area {
          cursor: pointer;
          display: inline-block;

          .icon {
            position: relative;

            .video-circle {
              stroke: var(--primary-color2);
              fill: none;
              transition: 0.5s;

              @include sm-down-device() {
                width: 68px;
              }

              .top-half {
                stroke-dasharray: 430;
                stroke-dashoffset: 320;
                transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
              }
            }

            .play-icon {
              fill: var(--primary-color2);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              margin-left: 2px;

              @include sm-down-device() {
                width: 20px;
              }
            }
          }

          &:hover {
            .icon {
              .video-circle {
                .top-half {
                  stroke-dashoffset: 0;
                }
              }
            }
          }
        }

        .content {
          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 32px;
            margin-bottom: 0;
            padding-left: 15px;
            position: relative;

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

            @include sm-down-device() {
              padding-left: 0;
            }

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 2px;
              height: 77px;
              background-color: rgba(var(--primary-color-opc), 0.3);

              @include sm-down-device() {
                display: none;
              }
            }
          }
        }
      }

      .feature-list {
        padding-top: 60px;

        @include xxl-down-device() {
          padding-top: 50px;
        }

        @include md-down-device() {
          padding-top: 30px;
        }

        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 18px;
          font-weight: 500;
          line-height: 1.7;
          margin-bottom: 25px;

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

          span {
            font-size: 16px;
            font-weight: 400;
            color: rgba(var(--title-color-opc), 0.5);
            display: block;
          }
        }

        ul {
          margin: 0;
          list-style: none;
          padding-left: 15px;

          li {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            position: relative;
            padding-left: 22px;
            margin-bottom: 20px;

            strong {
              color: var(--title-color);
              font-weight: 600;
            }

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

            &::before {
              content: '';
              position: absolute;
              top: 8px;
              left: 0;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: rgba(var(--primary-color-opc), 0.6);
            }
          }
        }
      }
    }
  }
}

/*=====================================
 22. Home2 Counter Section 
========================================*/
.home2-counter-section {
  .single-countdown {
    .number {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      h2,
      span {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 2px var(--primary-color);
        font-family: var(--font-kanit);
        letter-spacing: 0.08em;
        font-size: 110px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0;

        @include xl-down-device() {
          font-size: 100px;
        }

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

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

    span {
      color: var(--paragraph-color);
      font-family: var(--font-kanit);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.06em;
      text-transform: uppercase;

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

/*=====================================
 23. Home2 Property Banner Section 
========================================*/
.home2-property-banner-section {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(../img/home2/home2-property-banner-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 800px;
  position: relative;

  @include xxl-device() {
    min-height: 700px;
  }

  @include xxl-down-device() {
    min-height: 650px;
  }

  @include lg-down-device() {
    min-height: 580px;
  }

  @include md-down-device() {
    min-height: 550px;
    background-position: 67%;
  }

  .indivisual-item-list {
    .single-item {
      position: absolute;
      bottom: 14%;
      left: 8%;
      background-color: var(--white-color);
      border: 1px solid var(--primary-color);
      padding: 5px 15px 5px 5px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: transform 0.7s ease;
      transform-origin: center;

      @include eighteen-down-device() {
        left: 3%;
      }

      @include xxl-down-device() {
        bottom: 20%;
      }

      @include lg-down-device() {
        left: 10px;
        bottom: 24%;
      }

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

      &:first-child {
        @include md-down-device() {
          display: none;
        }
      }

      &:nth-child(2) {
        bottom: 43%;
        left: 30%;

        @include lg-down-device() {
          bottom: 48%;
          left: 20%;
        }

        @include md-down-device() {
          left: 5%;
        }

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

      &:nth-child(3) {
        bottom: unset;
        top: 10%;
        left: 40%;

        @include lg-down-device() {
          top: 7%;
          left: 28%;
        }

        @include md-down-device() {
          left: 8%;
        }

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

      &:nth-child(4) {
        bottom: unset;
        left: unset;
        top: 8%;
        right: 12%;

        @include xxl-device() {
          right: 6%;
        }

        @include xxl-down-device() {
          right: 6%;
        }

        @include lg-down-device() {
          right: 10px;
        }

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

        @include sm-down-device() {
          top: 18%;
          flex-direction: row-reverse;
          padding: 5px 5px 5px 10px;
        }
      }

      &:last-child {
        left: unset;
        bottom: 8%;
        right: 28%;

        @include md-down-device() {
          right: 40%;
        }

        @include sm-down-device() {
          right: 45%;
          bottom: 12%;
        }
      }

      .content {
        line-height: 1;

        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 13px;
          font-weight: 400;
          line-height: 1.4;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          margin-bottom: 0;
        }

        span {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-kanit);
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.03em;
        }
      }

      &:hover {
        transform: scale(1.2);
      }
    }

    @keyframes zoom-In {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(1.2);
      }
    }
  }

  .primary-btn2 {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/*=====================================
 24. Home2 Property Section 
========================================*/
.property-card {
  .property-img-wrap {
    position: relative;
    margin-bottom: 20px;

    .property-img {
      position: relative;
      overflow: hidden;
      display: block;
      transition: all 0.5s ease-out;

      img {
        transition: all 0.5s ease-out;
      }

      &::after {
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 1;
      }
    }

    .price {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;

      span {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.06em;
        padding: 11px 22px;
        background-color: var(--primary-color);
        display: inline-block;

        @include lg-device() {
          padding: 10px 18px;
          font-size: 15px;
        }
      }
    }
  }

  .property-content {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 45px;
      margin-bottom: 15px;

      @include xxl-down-device() {
        gap: 25px;
      }

      @include lg-device() {
        gap: 15px;
        margin-bottom: 10px;
      }

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

      li {
        color: var(--paragraph-color);
        font-family: var(--font-kanit);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.06em;
        padding-right: 45px;
        position: relative;

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

        @include lg-device() {
          padding-right: 15px;
          font-size: 13px;
        }

        @include lg-down-device() {
          padding-right: 25px;
        }

        @include sm-down-device() {
          padding-right: 0;
        }

        &:last-child {
          padding-right: 0;

          &::after {
            display: none;
          }
        }

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: 1px;
          height: 11px;
          background-color: rgba(var(--primary-color2-opc), 0.3);

          @include md-down-device() {
            display: none;
          }
        }
      }
    }

    h5 {
      margin-bottom: 25px;

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

      a {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 23px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.04em;
        transition: 0.5s;

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

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

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

  &:hover {
    .property-img-wrap {
      .property-img {
        img {
          transform: scale(1.1);
        }

        &::after {
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }
    }
  }
}

/*=====================================
 25. Home2 Testimonial Section 
========================================*/
.home2-testimonial-section {
  background-color: #EFF3F6;
  padding: 110px 0;

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

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

  .section-title {
    max-width: 685px;
    width: 100%;

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

  .testimonial-left-content {
    .rating-area {
      padding: 0;
      margin: 0;
      list-style: none;
      padding: 22px 30px;
      background-color: #F9F3EE;
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 10px;
      position: relative;

      @include xxl-down-device() {
        padding: 22px 15px;
        gap: 20px;
      }

      @include lg-device() {
        flex-wrap: wrap;
        gap: 20px;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 25px;
        justify-content: center;
      }

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(var(--primary-color2-opc), 0.2);
        width: 1px;
        height: 35px;

        @include sm-down-device() {
          display: none;
        }
      }

      >li {
        .single-rating {
          display: flex;
          gap: 8px;

          .review {
            line-height: 1;

            span {
              color: var(--paragraph-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              line-height: 1;
              margin-bottom: 8px;
              display: block;
              white-space: nowrap;

              @include seventeen-down-device() {
                font-size: 13px;
              }
            }

            img {
              width: 64px;
            }
          }

          .rating {
            line-height: 1;
            margin-top: -1px;

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

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

            span {
              color: var(--paragraph-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              white-space: nowrap;

              @include seventeen-down-device() {
                font-size: 13px;
              }
            }
          }

          &.google {
            .rating {
              .star {
                li {
                  i {
                    color: #FFC107;
                  }
                }
              }
            }
          }
        }

        &:first-child {
          &::before {
            display: none;
          }
        }
      }
    }

    .slider-btn-area {
      padding: 68px 25px 40px;
      background-color: var(--white-color);
      text-align: center;

      @include lg-down-device() {
        padding: 55px 25px;
      }

      @include md-down-device() {
        padding: 45px 25px;
      }

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

      h4 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.05em;
        margin-bottom: 55px;

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

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

        @include sm-down-device() {
          font-size: 22px;
          margin-bottom: 35px;
        }
      }

      .slider-btn-grp {
        justify-content: center;

        .slider-btn {
          min-width: 35px;
          max-width: 35px;
          height: 35px;

          i {
            font-size: 18px;
          }
        }
      }
    }
  }

  .testimonial-slider-area {
    padding-left: 50px;

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

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

    .contact-btn-area {
      display: flex;
      align-items: center;
      gap: 15px;
      justify-content: end;
      margin-top: -50px;
      position: relative;
      z-index: 1;

      @include sm-down-device() {
        margin-top: 25px;
        justify-content: start;

        img {
          display: none;
        }
      }
    }

    .home1-testimonial-slider {
      .swiper-slide-active {

        span,
        p {
          animation: fadeInDown 1.7s;
        }

        .author-area {
          animation: fadeInUp 1.7s;
        }
      }
    }
  }
}

/*=====================================
 26. Home2 Award Section 
========================================*/
.home2-award-section {

  .award-wrap,
  .award-wrap2 {
    position: relative;

    .single-award {
      transition: 0.5s;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      padding: 35px 50px;
      border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);

      &:first-child {
        border-top: 1px solid rgba(var(--title-color-opc), 0.1);
      }

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

      @include xl-down-device() {
        grid-template-columns: 37% 37% 26%;
      }

      @include lg-down-device() {
        padding: 35px 20px;
        grid-template-columns: 39% 39% 22%;
      }

      @include md-down-device() {
        padding: 25px 0;
        grid-template-columns: 41% 41% 18%;
      }

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

      .award-img {
        width: 270px;
        height: 310px;
        position: absolute;
        top: -150px;
        left: 0;
        opacity: 0;
        transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 5px;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;

        @include md-down-device() {
          width: 190px;
          height: 215px;
          top: -50px;
        }

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

      .title {
        h5 {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 22px;
          font-weight: 400;
          line-height: 1.4;
          letter-spacing: 0.02em;
          text-transform: uppercase;
          margin-bottom: 0;

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

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

          @include sm-down-device() {
            margin-bottom: 10px;
            font-size: 18px;
          }
        }
      }

      .date {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.02em;
        text-align: center;
      }

      .dot {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        position: relative;
        z-index: 1;
        margin-left: auto;

        @include sm-down-device() {
          display: none;
        }

        &:after {
          content: '';
          height: 10px;
          width: 10px;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          background-color: var(--title-color);
          transition: 0.5s;
        }
      }

      &:hover {
        .award-img {
          opacity: 1;
        }

        .dot {
          &::after {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  &.two {
    padding: 100px 0;
    background-color: #F4F6FC;

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

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

    .award-wrap2 {
      .single-award {
        .award-img {
          width: unset;
          height: unset;
          mask-image: url(../img/home6/award-img-bg.png);
          mask-size: cover;
          mask-repeat: no-repeat;

          @include md-down-device() {
            width: 195px;
            height: 195px;
            top: -50px;
          }

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

          img {
            width: 250px;
            height: 250px;

            @include lg-down-device() {
              width: 220px;
              height: 220px;
            }
          }
        }
      }
    }
  }
}

/*=====================================
 27. Home2 Team Section 
========================================*/
.home2-team-section {
  background-color: var(--primary-color);
  padding: 120px 11%;

  @include eighteen-down-device() {
    padding: 120px 9%;
  }

  @include seventeen-down-device() {
    padding: 120px 7%;
  }

  @include xxl-device() {
    padding: 120px 5%;
  }

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

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

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

  .team-title-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
    padding: 50px 0;

    @include xl-down-device() {
      padding: 0;
      flex-direction: row;
      margin-bottom: 50px;
    }

    @include sm-down-device() {
      flex-wrap: wrap;
      margin-bottom: 40px;
      gap: 10px;
    }

    .contact-btn {
      position: relative;
      display: inline-block;

      .bg {
        svg {
          fill: rgba(#121212, 0.2);
          stroke: rgba(#fff, 0.2);
          transition: 0.5s;
        }
      }

      .primary-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
      }

      &:hover {
        .bg {
          svg {
            fill: var(--white-color);
            stroke: var(--white-color);
            transition: 0.5s;
          }
        }

        .primary-btn {
          --background-size: 0%;
          --stroke-dashoffset: 26;
          --stroke-duration: .3s;
          --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
          --stroke-delay: .195s;
          background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
          color: var(--title-color);

          &::after {
            opacity: 0;
            transition-delay: 0s;
            color: var(--title-color);
          }

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

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

    @include md-down-device() {
      padding-bottom: 0;
    }
  }

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

    @include md-down-device() {
      padding-top: 0;
    }
  }

  .team-divider {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width: 1px;
      background-color: rgba(#fff, 0.1);
      right: 0;
      top: 0;

      @include md-down-device() {
        display: none;
      }
    }
  }

  .team-border {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background-color: rgba(#fff, 0.1);

      @include md-down-device() {
        display: none;
      }
    }
  }

  .team-card2 {
    .team-img {
      width: 210px;
      height: 210px;
      border-radius: 50%;
      position: relative;
      margin: 0 auto;

      @include md-device() {
        width: 190px;
        height: 190px;
      }

      img {
        width: 210px;
        height: 210px;
        border-radius: 50%;

        @include md-device() {
          width: 190px;
          height: 190px;
        }
      }

      .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        top: 0;
        left: 0;
        background-color: rgba(#fff, 0.1);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0.4);
        opacity: 0;
        transition: all 0.35s ease-out;

        .social-area {
          border: 1px solid var(--primary-color);
          background-color: var(--white-color);
          border-radius: 50px;
          display: inline-flex;
          align-items: center;
          transition: 0.5s;
          position: relative;
          overflow: hidden;
          z-index: 1;

          &::after {
            position: absolute;
            content: "";
            border-radius: 30px;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            background-color: var(--primary-color);
            transform-origin: right;
            transform: scalex(0);
            z-index: -1;
            transition: transform 0.7s;
          }

          .icon {
            padding: 0 7px;

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

              i {
                color: var(--white-color);
                font-size: 12px;
                transition: 0.5s;
              }
            }
          }

          >span {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.03em;
            display: block;
            padding: 10px 17px;
            border-left: 1px solid var(--primary-color);
            transition: 0.5s;
          }

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

            &::after {
              transform: scalex(1);
              transform-origin: left;
            }

            .icon {
              span {
                background-color: var(--white-color);

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

            >span {
              color: var(--white-color);
              border-color: var(--white-color);
            }
          }
        }
      }
    }

    .team-content {
      padding-top: 20px;
      text-align: center;

      span {
        color: rgba(#fff, 0.6);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        display: block;
        margin-bottom: 3px;
      }

      h5 {
        color: var(--white-color);
        font-family: Kanit;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.03em;
        margin-bottom: 0;
      }
    }

    &:hover {
      .team-img {
        .overlay {
          transform: scale(1);
          opacity: 1;
        }
      }
    }
  }
}

/*=====================================
 28. Home2 Calculate Section 
========================================*/
.home2-calculate-section {
  .contact-btn {
    min-width: 146px;
    max-width: 146px;
    height: 146px;
    border-radius: 50%;
    border: 1px solid rgba(var(--primary-color-opc), 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.9s;

    svg {
      fill: var(--title-color);
      margin-bottom: 10px;
      transition: 0.5s;
    }

    span {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 16px;
      font-weight: 400;
      line-height: 23.92px;
      letter-spacing: 0.05em;
      transition: 0.5s;
    }

    &:hover {
      box-shadow: inset 0 0 0 10em var(--primary-color);

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

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

  .progress-bar-area {
    padding: 0;
    margin: 0;
    list-style: none;

    .single-progress {
      margin-bottom: 55px;

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

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

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

      .title-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 30px;

        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 16px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.05em;
          margin-bottom: 0;
        }

        span {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 16px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.05em;

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

      .progress {
        height: 2px;
        background-color: rgba(var(--primary-color-opc), 0.2);
        overflow: visible;

        .progress-bar {
          height: 2px;
          background-color: var(--primary-color);
          position: relative;
          overflow: visible;

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-color);
            z-index: 1;
          }
        }
      }
    }
  }

  .mini-statement-area {
    padding: 50px;
    background-color: rgba(var(--primary-color2-opc), 0.05);

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

    @include lg-device() {
      padding: 40px 15px;
    }

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

    .logo {
      text-align: center;
      margin-bottom: 50px;

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

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 60px;

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

      @include sm-down-device() {
        flex-wrap: wrap;
        margin-bottom: 40px;
      }

      .price-area {
        h4 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 25px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.06em;
          margin-bottom: 5px;

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

        span {
          color: var(--paragraph-color);
          font-family: var(--font-kanit);
          font-size: 17px;
          font-weight: 400;
          line-height: 1.2;
          letter-spacing: 0.06em;

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

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.9;
        margin-bottom: 0;
        max-width: 336px;
        width: 100%;
        padding-left: 45px;
        position: relative;

        @include xl-device() {
          padding-left: 30px;
          max-width: 290px;
        }

        @include lg-device() {
          padding-left: 15px;
          max-width: 265px;
        }

        @include md-down-device() {
          padding-left: 20px;
          max-width: 270px;
        }

        @include sm-down-device() {
          padding-left: 0;
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 95%;
          background-color: #D9D9D9;

          @include sm-down-device() {
            display: none;
          }
        }
      }
    }

    .primary-btn2 {
      width: 100%;
      text-align: center;
    }
  }
}

/*=====================================
 29. Home2 Contact Section 
========================================*/
.home2-contact-section {
  padding: 150px 0;
  background-color: #F6F6F6;
  position: relative;
  z-index: 1;

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

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

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

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

  .contact-form {
    .form-inner {
      input {
        background-color: transparent;
        border: unset;
        border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
        padding: 10px 12px;
        height: unset;
        border-radius: unset;
      }
    }

    button {
      margin-top: 60px;

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

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

      @include sm-down-device() {
        margin-top: 30px;
      }
    }
  }

  .vector1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: -1;

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

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

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

  .vector2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: -1;

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

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

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

/*=====================================
 30. Home2 Blog Section 
========================================*/
.home2-blog-section {
  .home2-blog-slider {
    .swiper-slide {
      &:nth-child(even) {
        padding-top: 20px;

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

.pagination-area {
  .pagination {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: unset;
    z-index: 9;
    bottom: unset;
    gap: 8px;

    @include sm-down-device() {
      justify-content: center;
      gap: 6px;
    }

    .swiper-pagination-bullet {
      height: 12px;
      width: 12px;
      background-color: transparent;
      border: 1px solid rgba(#3F444B, 0.6);
      opacity: 1;
      position: relative;

      &::after {
        content: '';
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background-color: rgba(#3F444B, 0.4);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      &.swiper-pagination-bullet-active {
        border-color: var(--primary-color);
        height: 16px;
        width: 16px;

        &::after {
          width: 8px;
          height: 8px;
          background-color: var(--primary-color);
        }
      }
    }
  }
}

/*=====================================
 31. Home2 Scroll Text Section 
========================================*/
.home2-scroll-text-section {
  padding: 40px 0;
  background-color: var(--primary-color);
  overflow: hidden;
  user-select: none;
  display: flex;
  gap: 25px;

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

  .scroll-text {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 25px;
    min-width: 100%;
    animation: scroll-x 30s linear infinite;

    h6 {
      color: rgba(#fff, 0.8);
      font-family: var(--font-inter);
      font-style: italic;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 1.2px;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      margin-bottom: 0;
    }

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

  @keyframes scroll-x {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }

  &.two {
    background-color: transparent;
    border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
    padding: 28px 0;

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

    .scroll-text {
      h6 {
        color: rgba(var(--primary-color-opc), 0.8);

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

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

/*=====================================
 32. Home3 Banner Section 
========================================*/
.home3-banner-section {
  display: flex;
  overflow: hidden;

  .social-list {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 40px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;

    @include xxl-device() {
      padding: 40px 25px;
    }

    @include xxl-down-device() {
      padding: 40px 20px;
    }

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

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

    li {
      position: relative;

      &:last-child {
        &::before {
          display: none;
        }
      }

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -30px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: rgba(var(--primary-color-opc), 0.2);
      }

      a {
        color: rgba(var(--primary-color-opc), 0.5);
        transition: 0.5s;

        i {
          font-size: 20px;

          &.bi-twitter-x {
            font-size: 16px;
          }
        }

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

  .banner-wrapper {
    background-image: url(../img/home3/hom3-banner-bg.png), linear-gradient(180deg, #A1C5D3 10.56%, rgba(70, 118, 137, 0) 81.08%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 90vh;
    width: 100%;

    @include lg-down-device() {
      min-height: unset;
    }

    @include md-down-device() {
      background-position: left;
    }

    .banner-content-and-logo {
      padding: 100px 70px;
      display: flex;
      justify-content: space-between;
      gap: 20px;

      @include xxl-device() {
        padding: 80px 50px;
      }

      @include xxl-down-device() {
        padding: 80px 50px;
      }

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

      @include lg-down-device() {
        padding: 70px 25px;
        flex-wrap: wrap;
        gap: 40px;
      }

      @include md-down-device() {
        flex-wrap: wrap;
        gap: 30px;
        padding: 70px 20px;
      }

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

      .banner-content {
        max-width: 990px;
        width: 100%;

        h1 {
          color: var(--white-color);
          font-family: var(--font-kanit);
          font-size: 90px;
          font-weight: 600;
          line-height: 1.2;
          letter-spacing: 0.03em;
          margin-bottom: 50px;

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

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

          @include xl-down-device() {
            font-size: 63px;
            line-height: 1.1;
          }

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

          @include md-down-device() {
            font-size: 50px;
            margin-bottom: 30px;
          }

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

      .banner-logo {
        img {
          @include md-down-device() {
            width: 180px;
          }

          @include sm-down-device() {
            width: 160px;
          }
        }
      }
    }
  }
}

.home3-banner-video-area {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  border-radius: 120px 0 0 0;
  overflow: hidden;
  position: relative;
  margin-top: -20%;
  margin-bottom: 120px;

  @include xxl-device() {
    max-width: 1000px;
    margin-top: -18%;
  }

  @include xxl-down-device() {
    max-width: 850px;
    margin-top: -15%;
  }

  @include xl-down-device() {
    max-width: 680px;
    margin-top: -24%;
  }

  @include lg-down-device() {
    max-width: unset;
    border-radius: 0;
    margin-top: 0;
  }

  .video-wrapper {
    position: relative;

    @include xxl-device() {
      max-height: 550px;
    }

    @include xxl-down-device() {
      max-height: 480px;
    }

    img {
      border-radius: 120px 0 0 0;
      max-height: 650px;
      width: 100%;

      @include lg-down-device() {
        border-radius: 0;
      }

      @include sm-down-device() {
        min-height: 350px;
        object-fit: cover;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.25);
      border-radius: 120px 0 0 0;

      @include lg-down-device() {
        border-radius: 0;
      }
    }
  }

  .play-btn {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .icon {
      position: relative;

      .video-circle {
        stroke: var(--white-color);
        fill: none;
        transition: 0.5s;

        @include md-down-device() {
          width: 65px;
        }

        .top-half {
          stroke-dasharray: 430;
          stroke-dashoffset: 320;
          transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
        }
      }

      .play-icon {
        fill: var(--white-color);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 2px;

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

    &:hover {
      .icon {
        .video-circle {
          .top-half {
            stroke-dashoffset: 0;
          }
        }
      }
    }
  }
}

/*=====================================
 33. Home3 Service Section 
========================================*/
.home3-service-section {
  .service-list {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;

    .single-service {
      padding: 51px 0;
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.2);
      background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 98%);
      background-size: 0;
      background-repeat: no-repeat;
      background-position: left 100%;
      transition: background-size 0.8s;

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

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

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

      &:first-child {
        border-top: 1px solid rgba(var(--primary-color-opc), 0.2);
      }

      .service-content {
        display: flex;
        align-items: center;
        gap: 50px;
        transition: 0.7s;

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

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

        span {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 18px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.02em;
          transition: 0.5s;
        }

        h5 {
          margin-bottom: 0;
          display: flex;
          align-items: baseline;
          gap: 10px;

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

          a {
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 23px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.01em;
            text-decoration: underline;
            -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
            text-decoration-thickness: 2px;
            text-underline-offset: 5px;
            transition: 0.5s;

            @include xl-down-device() {
              font-size: 22px;
            }

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

      &:hover {
        background-size: 100%;
        background-position: 0% 100%;
        color: var(--white-color);

        .service-content {
          transform: translateX(40px);

          span {
            color: rgba(#fff, 0.6);
          }

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

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

  .service-img-group {
    margin: 0;
    padding: 0;
    list-style: none;

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

    li {
      .service-img {
        min-height: 631px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        animation: qodef-animate-image-out 1s 0.1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
        z-index: 12;

        @include xxl-down-device() {
          min-height: 602px;
        }

        @include xl-down-device() {
          min-height: 567px;
        }

        img {
          height: 100%;
          object-fit: cover;
        }
      }

      position: relative;

      &.active {
        .service-img {
          animation: qodef-animate-image-in 1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
          z-index: 15;
        }
      }
    }

    @keyframes qodef-animate-image-out {
      0% {
        transform: scale(1) translateZ(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
      }

      100% {
        transform: scale(1);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
      }
    }

    @keyframes qodef-animate-image-in {
      0% {
        transform: scale(1.05) translateZ(0);
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
      }

      100% {
        transform: scale(1);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
      }
    }
  }
}

/*=====================================
 34. Home3 Project Section 
========================================*/
.home3-project-section {
  background-color: #F7F7FA;
  position: relative;
  padding: 100px 90px;
  z-index: 1;

  @include eighteen-down-device() {
    padding: 100px 80px;
  }

  @include seventeen-down-device() {
    padding: 100px 60px;
  }

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

  @include xxl-down-device() {
    padding: 100px 20px;
  }

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

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

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

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

  .vector {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}

.project-card2 {
  .project-content-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 45px 0;
    padding-right: 50px;
    height: 100%;
    max-width: 500px;
    margin-left: auto;

    @include xxl-down-device() {
      padding: 30px 0;
      padding-right: 30px;
      max-width: 480px;
    }

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

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

    @include md-down-device() {
      padding: 0;
      margin-left: unset;
      gap: 25px;
    }

    .project-content {
      span {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.02em;
        display: block;
        margin-bottom: 10px;
      }

      h2 {
        margin-bottom: 40px;

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

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

        @include sm-down-device() {
          margin-bottom: 15px;
        }

        a {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 30px;
          font-weight: 700;
          line-height: 36.31px;
          letter-spacing: 1.2;
          background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
          background-size: 0 2px;
          background-repeat: no-repeat;
          background-position: right 100%;
          transition: background-size 0.9s;

          @include xl-down-device() {
            font-size: 28px;
          }

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

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

          &:hover {
            background-size: 100% 2px;
            background-position: 0% 100%;
          }
        }
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

        li {
          display: flex;

          a {
            color: rgba(var(--title-color-opc), 0.5);
            font-family: var(--font-inter);
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            padding: 5px 14px;
            border-radius: 15px;
            border: 1px solid rgba(var(--primary-color-opc), 0.6);
            transition: 0.5s;

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

  .project-img {
    img {
      @include md-device() {
        min-height: 300px;
        object-fit: cover;
      }

      @include sm-down-device() {
        min-height: 250px;
        object-fit: cover;
      }
    }
  }

  &.two {
    .project-content-wrap {
      padding-right: 0;
      padding-left: 50px;
      margin-left: unset;
      margin-right: auto;

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

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

      @include md-down-device() {
        padding: 0;
        margin-right: unset;
      }
    }
  }
}

/*=====================================
 35. Home3 About Section 
========================================*/
.home3-about-section {
  .section-title {
    p {
      max-width: 670px;
      width: 100%;
    }
  }

  .about-content {
    .single-content {
      h5 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 22px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.06em;
        margin-bottom: 15px;

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

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 0;
        max-width: 312px;
        width: 100%;

        @include xl-device() {
          font-size: 13px;
        }

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

  .about-img {
    padding: 30px 30px 0 30px;
    background-color: rgba(var(--primary-color-opc), 0.05);
    max-width: 1144px;
    width: 100%;
    margin: 0 auto;

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

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

    img {
      @include sm-down-device() {
        min-height: 250px;
        object-fit: cover;
      }
    }
  }
}

/*=====================================
 36. Home3 Banner2 Section 
========================================*/
.home3-banner2-section {
  position: relative;
  overflow: hidden;

  img {
    min-height: 750px;
    object-fit: cover;

    @include xxl-device() {
      min-height: 700px;
    }

    @include xxl-down-device() {
      min-height: 650px;
    }

    @include lg-down-device() {
      max-height: 600px;
    }
  }

  h2 {
    font-family: var(--font-kanit);
    font-size: 70px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;

    @include xxl-device() {
      top: 90px;
    }

    @include xxl-down-device() {
      top: 80px;
      font-size: 65px;
    }

    @include lg-down-device() {
      top: 70px;
      font-size: 60px;
    }

    @include md-down-device() {
      font-size: 55px;
      top: 50px;
    }

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

  .banner2-back-img {
    position: relative;
    z-index: 3;
    clip-path: inset(0px 0px 0px 920px);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.1);
      z-index: -1;
    }

    h2 {
      color: var(--primary-color2);
    }
  }

  .banner2-front-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.5);
    }

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

  .image-handle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 1px solid var(--primary-color2);
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    @include md-down-device() {
      flex-direction: column;
      gap: 5px;
    }

    svg {
      fill: var(--primary-color2);

      @include md-down-device() {
        transform: rotate(90deg);
      }
    }
  }

  .button-area {
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom;
    transition: 0.5s;
    z-index: 99;
  }
}

/*=====================================
 37. Home3 Counter Section 
========================================*/
.home3-counter-section {
  .single-counter {
    width: 345px;
    height: 345px;
    border-radius: 50%;
    border: 1px solid rgba(var(--primary-color-opc), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;

    @include xxl-down-device() {
      width: 300px;
      height: 300px;
    }

    @include xl-down-device() {
      width: 256px;
      height: 256px;
    }

    @include lg-down-device() {
      width: 100%;
      height: unset;
      padding: 20px 20px;
      border-radius: 0px;
    }

    .content {
      .number {
        display: flex;
        justify-content: center;

        h2,
        span {
          color: var(--title-color);
          text-align: center;
          font-family: var(--font-inter);
          font-size: 90px;
          font-weight: 700;
          line-height: 1;
          margin-bottom: 5px;

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

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

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

      p {
        margin-bottom: 0;
        color: var(--paragraph-color);
        text-align: center;
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 0;

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

    &.two {
      margin-left: -15px;

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

    &.three {
      margin-left: -30px;

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

    &.four {
      margin-left: -45px;

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

/*=====================================
 38. Home3 Process Section 
========================================*/
.home3-process-section {
  background-color: #F4F6FC;
  padding: 110px 10%;

  @include nineteen-down-device() {
    padding: 110px 8%;
  }

  @include eighteen-down-device() {
    padding: 110px 6%;
  }

  @include seventeen-down-device() {
    padding: 110px 3%;
  }

  @include xxl-device() {
    padding: 110px 2%;
  }

  @include xxl-down-device() {
    padding: 110px 20px;
  }

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

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

  .process-slider-wrap {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 75%;
      height: 1px;
      background-color: rgba(var(--primary-color-opc), 0.4);

      @include lg-down-device() {
        width: 60%;
      }

      @include sm-down-device() {
        display: none;
      }
    }
  }

  .process-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    .step-no {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      background-color: var(--white-color);
      border: 1px solid var(--primary-color);
      border-radius: 50px;
      padding: 7px 22px;
      white-space: nowrap;
      position: relative;
      transition: 0.5s;

      @include sm-down-device() {
        margin-bottom: 30px;
      }

      &::before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 15px;
        height: 15px;
        background-color: var(--white-color);
        border: 1px solid var(--primary-color);
        border-radius: 0 0 4px 0;
        border-top: unset;
        border-left: unset;
        transition: 0.5s;
      }

      span {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.51px;
        transition: 0.5s;
      }
    }

    .process-content {
      padding: 35px 40px;
      background-color: var(--white-color);

      @include xxl-device() {
        padding: 35px 25px;
      }

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

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

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

      .icon {
        margin-bottom: 25px;

        svg {
          fill: rgba(var(--title-color-opc), 0.5);
        }
      }

      h4 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.03em;
        margin-bottom: 25px;

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

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
      }
    }

    &:hover {
      .step-no {
        border-color: var(--primary-color2);
        background-color: var(--primary-color);

        &::before {
          border-color: var(--primary-color2);
          background-color: var(--primary-color);
        }

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

      .process-content {
        .icon {
          svg {
            animation: bounceIn 1.2s linear;
          }
        }
      }
    }
  }
}

/*=====================================
 39. Home3 Why Choose Us Section 
========================================*/
.home3-why-choose-section {
  .why-choose-content {
    .btn-and-video-area {
      padding-top: 75px;
      display: flex;
      align-items: center;
      gap: 60px;

      @include xxl-down-device() {
        padding-top: 65px;
      }

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

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

      @include md-down-device() {
        padding-top: 35px;
      }

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

      .video-area {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;

        .icon {
          position: relative;

          .video-circle {
            stroke: var(--title-color);
            fill: none;
            transition: 0.5s;

            .top-half {
              stroke-dasharray: 320;
              stroke-dashoffset: 320;
              transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
            }
          }

          .play-icon {
            fill: var(--title-color);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: 1px;
          }
        }

        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.48px;
          margin-bottom: 0;
        }

        &:hover {
          .icon {
            .video-circle {
              .top-half {
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 40. Home3 Award Section 
========================================*/
.home3-award-section {
  background-color: var(--primary-color);
  padding: 130px 0;

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

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

  .award-img {
    img {
      border-radius: 190px;
    }
  }

  .award-list {
    padding-left: 50px;
    position: relative;

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

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

    @include lg-down-device() {
      padding-left: 0;
    }

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -15px;
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
      opacity: 0.1;

      @include xxl-down-device() {
        left: 0;
      }

      @include lg-device() {
        left: -5px;
      }

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

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 53%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
      opacity: 0.1;

      @include lg-device() {
        left: 52%;
      }

      @include lg-down-device() {
        left: 51%;
      }

      @include md-down-device() {
        display: none;
      }
    }

    .single-award {
      display: flex;
      align-items: start;
      gap: 15px;
      max-width: 348px;
      width: 100%;
      padding-bottom: 40px;
      position: relative;

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

      @include lg-device() {
        max-width: 260px;
      }

      @include sm-down-device() {
        padding-bottom: 25px;
      }

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
        opacity: 0.1;
      }

      .icon {
        margin-top: 5px;

        svg {
          fill: none;
          stroke: rgba(var(--primary-color2-opc), 0.5);
        }
      }

      .content {
        h4 {
          color: var(--white-color);
          font-family: var(--font-kanit);
          font-size: 27px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.03em;
          margin-bottom: 15px;

          @include lg-device() {
            font-size: 24px;
            margin-bottom: 10px;
          }

          @include sm-down-device() {
            font-size: 25px;
            margin-bottom: 12px;
          }
        }

        span {
          color: rgba(#fff, 0.6);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1.8;
        }
      }
    }
  }
}

/*=====================================
 41. Home3 Testimonial Section 
========================================*/
.home3-testimonial-section {
  .testimonial-slider-wrap {
    position: relative;

    .testimonial-slider {
      .contact-btn-area {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: end;
        margin-top: -50px;
        position: relative;
        z-index: 1;

        @include xl-device() {
          margin-top: -96px;
        }

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

        @include sm-down-device() {
          margin-top: 25px;
          justify-content: start;

          img {
            display: none;
          }
        }
      }
    }

    .slider-btn-grp {
      @include lg-down-device() {
        display: none;
      }

      .slider-btn {
        position: absolute;
        top: 60%;
        left: 0;

        &.testimonial-slider-next {
          left: unset;
          right: 0;
        }
      }
    }
  }

  .home1-testimonial-slider {
    .swiper-slide-active {
      .testimonial-author-img-wrap {
        .testimonial-author-img {

          &::before,
          &::after {
            animation: 0.5s spin2 linear 1s forwards;
          }

          &::after {
            animation: 0.5s spin linear 0.5s forwards;
          }
        }
      }

      span,
      p {
        animation: fadeInUp 1.7s;
      }
    }
  }
}

/*=====================================
 42. Home3 Testimonial Section 
========================================*/
.home3-team-section {
  padding: 120px 0;
  background-image: url(../img/home3/home3-team-bg.png), linear-gradient(180deg, rgba(#F0F2F4, 1) 0%, rgba(#F0F2F4, 1) 100%);

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

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

  .pagination-area {
    .swiper-pagination1 {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: unset;
      z-index: 9;
      bottom: unset;
      gap: 8px;

      @include sm-down-device() {
        justify-content: center;
        gap: 6px;
      }

      .swiper-pagination-bullet {
        height: 12px;
        width: 12px;
        background-color: transparent;
        border: 1px solid rgba(var(--title-color-opc), 0.6);
        opacity: 1;
        position: relative;

        &::after {
          content: '';
          height: 6px;
          width: 6px;
          border-radius: 50%;
          background-color: rgba(var(--title-color-opc), 0.4);
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        &.swiper-pagination-bullet-active {
          border-color: var(--primary-color2);
          height: 16px;
          width: 16px;

          &::after {
            width: 8px;
            height: 8px;
            background-color: var(--primary-color2);
          }
        }
      }
    }
  }
}

.team-card3 {
  position: relative;

  .team-img {
    overflow: hidden;

    img {
      transition: all 0.5s ease-out;

      @include lg-device() {
        min-height: 250px;
        object-fit: cover;
      }

      @include sm-down-device() {
        min-height: 250px;
        object-fit: cover;
      }
    }
  }

  .team-content {
    padding: 17px 25px;
    background-color: #F0F2F4;
    min-width: 220px;
    position: absolute;
    bottom: 0;
    right: 0;

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

    @include sm-down-device() {
      padding: 14px 20px;
    }

    span {
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-inter);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      display: block;
      margin-bottom: 2px;

      @include lg-device() {
        margin-bottom: 0;
        font-size: 13px;
      }

      @include sm-down-device() {
        margin-bottom: 0;
        font-size: 13px;
      }
    }

    h5 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: 0.03em;
      margin-bottom: 0;

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

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

  .social-list {
    position: absolute;
    top: 50%;
    left: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(-50%) scaleY(0);
    transform-origin: top;
    transition: 0.5s;

    li {
      margin-bottom: 20px;

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

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

      @include sm-down-device() {
        margin-bottom: 15px;
      }

      a {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(var(--primary-color-opc), 0.5);
        backdrop-filter: blur(4px);
        color: var(--white-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;

        i {
          font-size: 18px;

          &.bi-twitter-x {
            font-size: 12px;
            margin-top: 1px;
            margin-left: 1px;
            line-height: 1;
          }
        }

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

  &:hover {
    .team-img {
      img {
        transform: scale(1.1);
      }
    }

    .social-list {
      opacity: 1;
      transform: translateY(-50%) scaleY(1);
    }
  }
}

/*=====================================
 43. Home3 Blog Section 
========================================*/
.home3-blog-section {
  .primary-btn2 {
    margin-top: 50px;

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

    @include sm-down-device() {
      margin-top: 30px;
    }
  }

  .blog-card-area {
    margin-top: -70px;

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

/*=====================================
 44. Home3 Gallery Section 
========================================*/
.gallery-section {
  border-bottom: 3px solid var(--primary-color2);

  .title-area {
    h4 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 25px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.05em;
      margin-bottom: 0;
      padding-bottom: 10px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 2px;
        background-color: var(--primary-color);
      }
    }
  }

  .single-gallery-img {
    position: relative;
    line-height: 1;
    transition: 0.35s;
    display: flex;

    .icon-area {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: bottom;
      transform: scaleY(0);
      opacity: 0;
      transition: 0.5s;

      a {
        i {
          font-size: 38px;
          color: var(--white-color);
        }
      }
    }

    img {
      @include sm-down-device() {
        min-height: 200px;
        object-fit: cover;
      }
    }

    &:hover {
      .icon-area {
        transform: scaleY(1);
        opacity: 1;
      }
    }
  }

  &.two {
    border-bottom: unset;
  }
}

/*=====================================
 45. Home4 Banner Section 
========================================*/
.home4-banner-section {
  overflow: hidden;

  .banner-content-wrap {
    padding: 65px 160px 65px 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    @include seventeen-down-device() {
      padding: 65px 140px 65px 100px;
    }

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

    @include xxl-down-device() {
      padding: 65px 110px 65px 60px;
    }

    @include xl-down-device() {
      padding: 60px 70px 60px 30px;
    }

    @include lg-down-device() {
      flex-wrap: wrap;
    }

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

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

    .title-area {
      max-width: 1170px;
      width: 100%;

      h1 {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 100px;
        font-weight: 600;
        line-height: 1.15;
        margin-bottom: 0;

        @include seventeen-down-device() {
          font-size: 95px;
        }

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

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

        @include xl-down-device() {
          font-size: 65px;
          line-height: 1.3;
        }

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

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

        span {
          display: flex;
          align-items: center;
          gap: 40px;
          -webkit-text-fill-color: transparent;
          -webkit-text-stroke: 1px var(--primary-color2);
          font-family: var(--font-kanit);
          text-transform: uppercase;

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

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

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

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

          svg {
            fill: var(--primary-color2);

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

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

    @keyframes textRotation {
      to {
        transform: rotate(360deg);
      }
    }

    // Keyframes for rotation
    @keyframes rotate-circle {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg); // Rotates around its own center
      }
    }

    .circular-text {
      width: 168px;
      height: 168px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      >svg {
        width: 168px;
        height: 168px;
        animation: textRotation 20s linear infinite;

        textpath {
          fill: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
        }
      }

      .center-icon {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: rgba(var(--primary-color2-opc), 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;

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

  .banner-img-slider-area {
    margin-left: 110px;
    position: relative;

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

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

    @include xxl-down-device() {
      margin-left: 60px;
    }

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

    @include lg-down-device() {
      flex-wrap: wrap;
    }

    @include md-down-device() {
      margin-left: 20px;
    }

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

    .banner-bg {
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      min-height: 694px;
      animation: large 26s linear infinite alternate;

      @include xxl-device() {
        min-height: 650px;
      }

      @include xxl-down-device() {
        min-height: 600px;
      }

      @include xl-down-device() {
        min-height: 550px;
      }

      @include lg-down-device() {
        min-height: 500px;
      }

      @include sm-down-device() {
        min-height: 350px;
      }

      @keyframes large {
        0% {
          transform: scale(1);
        }

        100% {
          transform: scale(1.3);
        }
      }
    }

    .scroll-down-btn {
      min-width: 88px;
      max-width: 88px;
      height: 88px;
      border-radius: 50%;
      background-color: rgba(#fff, 0.3);
      border: 1px solid rgba(var(--title-color-opc), 0.3);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.8s;
      position: absolute;
      top: -45px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;

      @include sm-down-device() {
        min-width: 78px;
        max-width: 78px;
        height: 78px;
      }

      a {
        text-align: center;
        padding-top: 8px;

        span {
          color: rgba(var(--title-color-opc), 0.7);
          font-family: var(--font-kanit);
          font-size: 12px;
          font-weight: 500;
          line-height: 15px;
          display: block;
          transition: 0.5s;
        }

        svg {
          fill: rgba(var(--title-color-opc), 0.7);
          transition: 0.5s;
        }
      }

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

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

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

/*=====================================
 46. Home4 Service Section 
========================================*/
.home4-service-section {
  scroll-margin-top: 180px;

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

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

.service-card {
  .service-img-wrap {
    position: relative;

    .service-img {
      position: relative;
      overflow: hidden;
      display: block;
      transition: all 0.5s ease-out;

      img {
        transition: all 0.5s ease-out;
      }

      &::after {
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 1;
      }
    }

    .button-area {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;

      .primary-btn2 {
        padding: 11px 27px 7px;
        transition: 0.5s;

        span {
          font-size: 12px;
        }
      }
    }
  }

  .service-content {
    padding: 30px 25px;
    border: 1px solid rgba(var(--primary-color-opc), 0.05);
    border-top: unset;

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

    @include lg-device() {
      padding: 25px 15px;
    }

    @include sm-down-device() {
      padding: 25px 15px;
    }

    h4 {
      margin-bottom: 10px;

      a {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.4;
        transition: 0.5s;

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

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

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

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      margin-bottom: 0;

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

  &:hover {
    .service-img-wrap {
      .service-img {
        img {
          transform: scale(1.1);
        }

        &::after {
          height: 250%;
          transition: all 600ms linear;
          background-color: transparent;
        }
      }

      .button-area {
        .primary-btn2 {
          background-color: var(--primary-color2);

          span {
            background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
            color: var(--white-color);

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

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

/*=====================================
 47. Home4 Service Section 
========================================*/
.home4-project-section {
  overflow: hidden;
  padding: 110px 0 110px 11%;
  background-color: #F7F7FA;

  @include eighteen-down-device() {
    padding: 110px 0 110px 8%;
  }

  @include seventeen-down-device() {
    padding: 110px 0 110px 4%;
  }

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

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

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

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

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

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

  .project-title-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    height: 100%;

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

    .section-title2 {
      h2 {
        @include xxl-device() {
          font-size: 60px;
        }

        @include xl-device() {
          font-size: 55px;
        }

        span {
          @include xxl-device() {
            width: 70px;
          }

          @include xl-device() {
            width: 50px;
          }
        }
      }

      p {
        max-width: 336px;
        width: 100%;

        @include xl-device() {
          font-size: 15px;
        }

        @include lg-down-device() {
          max-width: unset;
        }
      }
    }

    .button-and-slider-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      .primary-btn2 {
        @include lg-device() {
          padding: 16px 25px;
        }
      }

      .slider-btn-grp {
        @include xxl-device() {
          gap: 30px;
        }

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

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

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

        .slider-btn {
          min-width: 40px;
          max-width: 40px;
          height: 40px;
        }
      }
    }
  }

  .project-slider-area {
    padding-left: 50px;

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

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

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

    @include lg-down-device() {
      padding-left: 0;
    }
  }
}

.project-card3 {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-out;

  img {
    @include lg-device() {
      min-height: 380px;
      object-fit: cover;
    }

    @include md-down-device() {
      min-height: 380px;
      object-fit: cover;
    }
  }

  .project-content-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.28%, rgba(0, 0, 0, 0.8) 91.5%);
    padding: 30px;
    display: flex;
    align-items: end;
    z-index: 2;

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

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

    .project-content {
      span {
        color: rgba(#fff, 0.7);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.02em;
        display: block;
        margin-bottom: 10px;
      }

      h3 {
        margin-bottom: 20px;

        a {
          color: var(--white-color);
          font-family: var(--font-kanit);
          font-size: 30px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.05em;
          transition: 0.5s;

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

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

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

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

        li {
          display: flex;

          a {
            color: var(--white-color);
            font-family: var(--font-inter);
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            padding: 5px 14px;
            border-radius: 15px;
            border: 1px solid rgba(#fff, 0.2);
            background-color: rgba(#fff, 0.15);
            backdrop-filter: blur(6px);
            transition: 0.5s;

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

  &::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
  }

  &:hover {
    &::after {
      height: 250%;
      transition: all 600ms linear;
      background-color: transparent;
    }
  }
}

/*=====================================
 48. Home4 About Section 
========================================*/
.home4-about-section {
  .section-title2 {
    p {
      margin-top: 40px;

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

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

  .about-wrapper {
    margin-top: 80px;

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

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

    .about-img {
      mask-image: url(../img/home4/about-img-bg.png);
      mask-size: cover;
      mask-repeat: no-repeat;
      mask-size: cover;
      min-width: 817px;

      @include xxl-down-device() {
        min-width: 760px;
      }

      @include xl-down-device() {
        min-width: 730px;
      }

      @include lg-down-device() {
        min-width: unset;
        mask-image: unset;
      }

      img {
        min-width: 817px;

        @include xxl-down-device() {
          min-width: 760px;
        }

        @include xl-down-device() {
          min-width: 730px;
        }

        @include lg-down-device() {
          min-width: unset;
        }

        @include sm-down-device() {
          min-height: 300px;
          object-fit: cover;
        }
      }
    }

    .about-content {
      margin-top: -30px;

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

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

        @include lg-down-device() {
          display: flex;
          align-items: center;
          gap: 50px;
        }

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

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

        li {
          max-width: 312px;
          width: 100%;
          margin-bottom: 60px;

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

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

          @include sm-down-device() {
            max-width: unset;
          }

          &:last-child {
            margin-bottom: 0;
            margin-left: -160px;

            @include xxl-down-device() {
              margin-left: -80px;
            }

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

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

          h5 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 22px;
            font-weight: 500;
            line-height: 1.4;
            letter-spacing: 0.06em;
            margin-bottom: 15px;

            @include lg-device() {
              font-size: 20px;
              margin-bottom: 10px;
            }

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

          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 0;

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

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

/*=====================================
 49. Home4 Process Section 
========================================*/
.home4-process-section {
  background-color: #F5FAFC;
  padding: 110px 0;

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

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

  .process-content {
    .section-title2 {
      p {
        max-width: 336px;
        width: 100%;

        @include lg-down-device() {
          max-width: unset;
        }
      }
    }

    .process-list {
      padding: 0;
      list-style: none;
      padding-top: 50px;
      max-width: 270px;
      width: 100%;
      margin: 0 auto;

      @include lg-down-device() {
        max-width: unset;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;
        padding-top: 40px;
      }

      @include md-down-device() {
        gap: 25px;
        padding-top: 30px;
      }

      li {
        margin-bottom: 30px;

        @include lg-down-device() {
          margin-bottom: 0;
          max-width: 300px;
          width: 100%;
        }

        @include md-down-device() {
          max-width: 245px;
        }

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

        .single-process {
          span {
            color: var(--primary-color2);
            font-family: var(--font-kanit);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.06em;
            display: block;
            margin-bottom: 10px;
          }

          h4 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 25px;
            font-weight: 400;
            line-height: 1.3;
            letter-spacing: 0.03em;
            margin-bottom: 15px;

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

          p {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 0;

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

        .arrow {
          margin-top: 25px;
          fill: rgba(var(--primary-color-opc), 0.15);
          margin-left: 45px;

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

  .process-video-area {
    position: -webkit-sticky;
    position: sticky;
    top: 110px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.4);
    }

    img {
      @include sm-down-device() {
        min-height: 300px;
        object-fit: cover;
      }
    }

    .play-btn {
      cursor: pointer;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .icon {
        position: relative;

        .video-circle {
          stroke: var(--white-color);
          fill: none;
          transition: 0.5s;

          @include sm-down-device() {
            width: 65px;
          }

          .top-half {
            stroke-dasharray: 430;
            stroke-dashoffset: 320;
            transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
          }
        }

        .play-icon {
          fill: var(--white-color);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin-left: 2px;

          @include sm-down-device() {
            width: 20px;
          }
        }
      }

      &:hover {
        .icon {
          .video-circle {
            .top-half {
              stroke-dashoffset: 0;
            }
          }
        }
      }
    }
  }
}

/*=====================================
 50. Home4 Why Choose Section 
========================================*/
.home4-why-choose-section {
  .divider {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 1px;
      height: 80%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, #000000 50.5%, rgba(0, 0, 0, 0.05) 100%);
      opacity: 0.1;

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

  .single-content {
    max-width: 340px;
    width: 100%;
    padding: 0 10px;

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

    @include lg-device() {
      max-width: 290px;
    }

    .icon {
      margin-bottom: 30px;

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

      @include sm-down-device() {
        margin-bottom: 20px;
      }

      svg {
        fill: var(--primary-color2);
        @include sm-down-device()
      }
    }

    h4 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 25px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: 0.03em;
      margin-bottom: 25px;

      @include lg-device() {
        font-size: 23px;
        margin-bottom: 20px;
      }

      @include md-down-device() {
        margin-bottom: 20px;
      }

      @include sm-down-device() {
        margin-bottom: 15px;
        font-size: 24px;
      }
    }

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 0;

      @include lg-device() {
        font-size: 15px;
      }
    }

    &.border-btm {
      padding-bottom: 45px;
      position: relative;

      @include lg-down-device() {
        padding-bottom: 0;
      }

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, #000000 50.5%, rgba(0, 0, 0, 0.05) 100%);
        opacity: 0.1;

        @include lg-down-device() {
          display: none;
        }
      }
    }
  }
}

/*=====================================
 51. Home4 Banner2 Section 
========================================*/
.home4-banner2-section {
  position: relative;

  video {
    width: 100%;
    min-height: 400px;
    height: 85vh;
    object-fit: cover;
  }

  @keyframes up-down2 {
    0% {
      transform: translateY(35px);
    }

    50% {
      transform: translateY(20px);
    }

    100% {
      transform: translateY(35px);
    }
  }

  .video-content {
    background-color: rgba(var(--primary-color-opc), 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner-content-wrap {
    padding: 80px 0;
    text-align: center;
    max-width: 635px;
    width: 100%;

    @include xl-down-device() {
      max-width: 570px;
    }

    .banner-content {
      margin-bottom: 10px;

      h2 {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 75px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: 0.05em;
        margin-bottom: 0;
        display: flex;

        &:nth-child(2) {
          padding-left: 20px;
          justify-content: end;

          @include sm-down-device() {
            padding-left: 0;
            justify-content: center;
          }
        }

        @include xl-down-device() {
          font-size: 68px;
        }

        @include md-down-device() {
          font-size: 62px;
        }

        @include sm-down-device() {
          font-size: 48px;
          justify-content: center;
        }
      }
    }

    .scroll-down-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      animation: up-down2 2s linear infinite alternate;

      .scroll-down-icon {
        width: 37px;
        height: 72px;
        border-radius: 110px;
        border: 1px solid rgba(#fff, 0.5);
        background-color: rgba(#fff, 0.2);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;

        svg {
          fill: none;
          stroke: rgba(#fff, 0.5);
          transition: 0.5s;
        }
      }

      span {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.06em;
        display: block;
        padding-top: 10px;
      }

      &:hover {
        .scroll-down-icon {
          background-color: var(--white-color);

          svg {
            stroke: var(--title-color);
          }
        }
      }
    }
  }
}

/*=====================================
 52. Home4 Faq Section 
========================================*/
.contact-form-wrap {
  padding: 45px 50px;
  background-color: #FAF8FB;
  border-radius: 20px;
  margin-left: 50px;

  @include xxl-down-device() {
    padding: 45px 40px;
  }

  @include lg-device() {
    padding: 40px 30px;
    margin-left: 20px;
  }

  @include lg-down-device() {
    margin-left: 0;
  }

  @include md-down-device() {
    padding: 40px 30px;
    border-radius: 15px;
  }

  @include sm-down-device() {
    padding: 35px 20px;
  }

  .form-inner {
    textarea {
      min-height: 90px;
      resize: none;
    }
  }

  .nice-select {
    border: 1px solid rgba(var(--primary-color-opc), 0.2);

    &::after {
      height: unset;
      width: unset;
      border-bottom: unset;
      border-right: unset;
      right: 20px;
      margin-top: -5px;
      content: url(../img/home4/icon/nice-select-down-arrow.svg);
      transform: unset;
      transition: all 0.15s ease-in-out;
    }

    &.open {
      &::after {
        content: url(../img/home4/icon/nice-select-down-up.svg);
      }
    }

    &:focus {
      border-color: var(--primary-color);
    }

    .list {
      .option {
        color: var(--title-color);

        &:hover {
          color: var(--white-color);
          background-color: var(--primary-color);
        }
      }
    }
  }

  .primary-btn2 {
    margin-top: 45px;

    @include sm-down-device() {
      margin-top: 35px;
    }
  }
}

/*=====================================
 53. Home4 Testimonial Section 
========================================*/
.home4-testimonial-section {
  .home4-testimonial-img-slider {
    height: 100%;
  }

  .testimonial-img {
    height: 100%;

    @include xl-down-device() {
      min-height: 600px;
    }

    .preview_image {
      height: 100%;

      .twentytwenty-wrapper {
        height: 100%;
      }

      .twentytwenty-container {
        height: 100% !important;
        width: 100%;

        img {
          border-radius: unset;
          height: 100%;
          object-fit: cover;
          width: 100%;
        }

        .twentytwenty-overlay {
          background-color: rgba(var(--primary-color-opc), 0.2);
          border-radius: unset;
          opacity: 1;

          .twentytwenty-before-label,
          .twentytwenty-after-label {
            opacity: 1;

            &::before {
              background: rgba(var(--primary-color-opc), 0.3);
              border: 1px solid rgba(#fff, 0.5);
              backdrop-filter: blur(4px);
              font-family: var(--font-kanit);
              font-size: 16px;
              font-weight: 400;
              letter-spacing: 0.05em;
              text-transform: uppercase;
            }
          }
        }

        .twentytwenty-handle {
          background-color: rgba(#fff, 0.7);
          border: unset;

          &::before,
          &::after {
            background-color: var(--white-color);
            box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
          }

          &::after {
            box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
          }

          .twentytwenty-left-arrow {
            border-right: 6px solid var(--title-color);
          }

          .twentytwenty-right-arrow {
            border-left: 6px solid var(--title-color);
          }
        }
      }
    }
  }

  .testimonial-content-area {
    background-color: #FBF8F3;
    padding: 85px 35px 35px;
    height: 100%;

    @include xxl-device() {
      padding: 60px 25px 30px;
    }

    @include xxl-down-device() {
      padding: 60px 25px 30px;
    }

    @include lg-down-device() {
      padding: 70px 25px;
    }

    @include md-down-device() {
      padding: 70px 20px;
    }

    @include sm-down-device() {
      padding: 70px 10px;
    }

    .section-title2 {
      margin-bottom: 95px;

      @include xxl-device() {
        margin-bottom: 70px;
      }

      @include xxl-down-device() {
        margin-bottom: 70px;
      }

      @include md-down-device() {
        margin-bottom: 50px;
      }
    }

    .testimonial-card-area {
      padding: 40px 45px;
      background-color: var(--white-color);
      border-radius: 20px;
      position: relative;

      @include xxl-device() {
        padding: 30px 35px;
      }

      @include xxl-down-device() {
        padding: 30px 25px;
      }

      @include sm-down-device() {
        padding: 30px 20px;
      }

      .testimonial-content-wrap {
        text-align: center;

        .quote {
          fill: var(--title-color);
          margin-bottom: 30px;

          @include sm-down-device() {
            margin-bottom: 25px;
          }
        }

        >span {
          color: var(--primary-color2);
          font-family: var(--font-kanit);
          font-size: 16px;
          font-weight: 400;
          line-height: 23.92px;
          letter-spacing: 0.06em;
          display: block;
          margin-bottom: 20px;

          @include xl-down-device() {
            margin-bottom: 10px;
          }
        }

        p {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 20px;
          font-weight: 500;
          line-height: 40px;
          margin-bottom: 0;

          @include xxl-device() {
            font-size: 19px;
          }

          @include sm-down-device() {
            font-size: 17px;
            line-height: 36px;
          }
        }

        .author-area {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding-top: 25px;
          border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
          margin-top: 40px;

          @include xl-down-device() {
            margin-top: 35px;
          }

          @include sm-down-device() {
            margin-top: 25px;
            padding-top: 15px;
          }

          .author-img {
            img {
              min-width: 50px;
              max-width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }

          .author-content {
            text-align: start;

            h5 {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 21px;
              font-weight: 500;
              line-height: 1.3;
              letter-spacing: 0.03em;
              margin-bottom: 3px;
            }

            span {
              color: var(--paragraph-color);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 1;
              letter-spacing: 0.03em;
            }
          }
        }
      }

      .slider-btn-grp {
        @include sm-down-device() {
          display: none;
        }

        .slider-btn {
          position: absolute;
          bottom: 45px;
          left: 45px;
          min-width: 35px;
          max-width: 35px;
          height: 35px;
          z-index: 1;

          @include xxl-device() {
            left: 35px;
          }

          @include xxl-down-device() {
            left: 25px;
          }

          i {
            font-size: 17px;
          }

          &.home4-testimonial-next {
            left: unset;
            right: 45px;

            @include xxl-device() {
              right: 35px;
            }

            @include xxl-down-device() {
              right: 25px;
            }
          }
        }
      }
    }
  }

  .home4-testimonial-content-slider {
    .swiper-slide-active {

      .quote,
      span,
      p {
        animation: fadeInDown 1.7s;
      }

      .author-area {
        animation: fadeInUp 1.7s;
      }
    }
  }
}

/*=====================================
 54. Home4 Blog Section 
========================================*/
.home4-blog-section {
  .blog-title-area {
    @include lg-down-device() {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 25px;
    }

    .section-title2 {
      margin-bottom: 50px;

      @include xl-down-device() {
        margin-bottom: 40px;
      }

      @include lg-down-device() {
        margin-bottom: 0;
      }

      p {
        max-width: 336px;
        width: 100%;

        @include lg-device() {
          font-size: 14px;
        }

        @include md-down-device() {
          max-width: unset;
        }
      }
    }
  }
}

/*=====================================
 55. Home5 Banner Section 
========================================*/
.home5-banner-section {
  display: flex;
  overflow: hidden;

  .social-list {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 200px 40px 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 60px;

    @include xxl-device() {
      padding: 180px 40px 40px;
    }

    @include xxl-down-device() {
      padding: 160px 20px 40px;
    }

    @include xl-down-device() {
      padding: 140px 10px 40px;
    }

    @include lg-down-device() {
      display: none;
    }

    li {
      position: relative;

      &:last-child {
        &::before {
          display: none;
        }
      }

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -30px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: rgba(var(--primary-color-opc), 0.2);
      }

      a {
        color: rgba(var(--primary-color-opc), 0.5);
        transition: 0.5s;

        i {
          font-size: 20px;

          &.bi-twitter-x {
            font-size: 16px;
          }
        }

        &:hover {
          color: var(--primary-color);
        }
      }
    }
  }

  .banner-area {
    position: relative;
    overflow: hidden;
    width: 100%;

    .banner-wrapper {
      .banner-bg {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        min-height: 820px;
        position: relative;
        animation: large 26s linear infinite alternate;

        @include xxl-device() {
          min-height: 95vh;
        }

        @include xxl-down-device() {
          min-height: 90vh;
        }

        @include sm-down-device() {
          min-height: 85vh;
        }
      }

      .banner-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        padding: 270px 20px;

        @include xxl-down-device() {
          padding: 250px 20px;
        }

        @include md-down-device() {
          padding: 190px 25px;
        }

        @include sm-down-device() {
          padding: 120px 20px;
          display: flex;
          align-items: center;
        }

        h1 {
          color: rgba(#fff, 0.5);
          font-family: var(--font-inter);
          font-size: 80px;
          font-weight: 700;
          line-height: 1.1;
          letter-spacing: 0.06em;

          @include xxl-device() {
            font-size: 75px;
          }

          @include xxl-down-device() {
            font-size: 70px;
          }

          @include xl-down-device() {
            font-size: 62px;
          }

          @include md-down-device() {
            font-size: 57px;
          }

          @include sm-down-device() {
            font-size: 52px;
          }
        }
      }
    }

    .counter-area {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      max-width: 1184px;
      width: 100%;
      background-color: var(--white-color);
      padding: 36px 110px 36px 10px;

      @include xxl-device() {
        max-width: 1084px;
      }

      @include xxl-down-device() {
        max-width: 1000px;
        padding: 30px 100px 30px 10px;
      }

      @include xl-down-device() {
        padding: 30px 70px 30px 10px;
        max-width: 830px;
      }

      @include lg-down-device() {
        padding: 25px 30px;
      }

      @include md-down-device() {
        padding: 25px 40px;
      }

      @include sm-down-device() {
        position: relative;
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;

        @include lg-down-device() {
          justify-content: center;
        }

        @include md-down-device() {
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 30px;
        }

        .single-counter {
          padding: 16px 92px;
          border-right: 1px solid rgba(var(--primary-color2-opc), 0.2);

          @include xxl-device() {
            padding: 16px 80px;
          }

          @include xxl-down-device() {
            padding: 16px 75px;
          }

          @include xl-down-device() {
            padding: 16px 50px;
          }

          @include lg-down-device() {
            padding: 12px 40px;
          }

          @include md-down-device() {
            padding: 0;
            border: unset;
          }

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            padding-right: 0;
            border-right: unset;
          }

          .number {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            h2,
            span {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 42px;
              font-weight: 500;
              line-height: 1;
              letter-spacing: 0.03em;
              margin-bottom: 0;

              @include lg-device() {
                font-size: 40px;
              }

              @include lg-down-device() {
                font-size: 38px;
              }
            }
          }

          span {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
          }
        }
      }
    }
  }

  .home5-banner-slider {
    .swiper-slide-active {
      .banner-content {
        animation: fadeInUp 1.7s;
      }
    }
  }
}

/*=====================================
 56. Home5 Service Section 
========================================*/
.home5-service-section {
  background-color: #FBF8F3;
  padding: 110px 0;

  @include xl-down-device() {
    padding: 90px 0;
  }

  @include md-down-device() {
    padding: 70px 0;
  }

  .service-slider-area {
    padding: 0 11%;

    @include eighteen-down-device() {
      padding: 0 8%;
    }

    @include seventeen-down-device() {
      padding: 0 5%;
    }

    @include xxl-device() {
      padding: 0 2%;
    }

    @include xxl-down-device() {
      padding: 0 20px;
    }

    .service-card2 {
      padding: 35px 40px;
      background-color: var(--white-color);
      position: relative;
      overflow: hidden;

      @include xxl-device() {
        padding: 35px 30px;
      }

      @include xl-device() {
        padding: 30px 20px;
      }

      @include xl-down-device() {
        padding: 30px 25px;
      }

      .icon {
        margin-bottom: 25px;

        svg {
          fill: rgba(var(--primary-color-opc), 0.5);
        }
      }

      h3 {
        margin-bottom: 23px;

        a {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 28px;
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: 0.05em;
          transition: 0.5s;

          @include xl-device() {
            font-size: 26px;
          }

          &:hover {
            color: var(--primary-color2);
          }
        }
      }

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        margin-bottom: 35px;

        @include xl-device() {
          font-size: 14px;
        }
      }

      .more-btn {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.02em;
        white-space: nowrap;
        position: relative;
        display: inline-block;
        background: linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 98%);
        background-repeat: no-repeat;
        background-size: 100% 2px;
        background-position: left 100%;
        transition: background-size 0.75s;

        &:hover {
          background-size: 0 1px;
          background-position: 0% 100%;
          color: var(--primary-color2);
        }
      }

      .arrow {
        position: absolute;
        top: -80px;
        right: -80px;
        transition: 0.5s;

        svg {
          fill: rgba(var(--primary-color-opc), 0.02);
          transition: 0.5s;

          &:hover {
            fill: rgba(var(--primary-color2-opc), 0.1);
          }
        }
      }

      &:hover {
        .icon {
          svg {
            animation: bounceIn 1.2s linear;
          }
        }

        .arrow {
          top: 0;
          right: 0;
        }
      }
    }
  }
}

/*=====================================
 57. Home5 About Section 
========================================*/
.home5-about-section {
  .pt-120 {
    padding-top: 120px;

    @include xl-down-device() {
      padding-top: 80px;
    }

    @include lg-down-device() {
      padding-top: 0;
    }
  }

  .section-title {
    @include lg-down-device() {
      margin-bottom: 60px;
    }

    .primary-btn {
      margin-top: 45px;
      background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
      color: var(--primary-color2);

      @include xl-down-device() {
        margin-top: 35px;
      }

      @include lg-down-device() {
        margin-top: 25px;
      }

      &::after {
        color: var(--primary-color2);
      }

      svg {
        stroke: var(--primary-color2);
      }
    }
  }

  .single-about {
    text-align: center;

    .about-img {
      width: 466px;
      height: 466px;
      border-radius: 50%;
      margin: 0 auto;
      margin-bottom: 30px;

      @include xl-down-device() {
        width: 400px;
        height: 400px;
        margin-bottom: 25px;
      }

      @include sm-down-device() {
        width: 280px;
        height: 280px;
        margin-bottom: 20px;
      }

      img {
        width: 466px;
        height: 466px;
        border-radius: 50%;

        @include xl-down-device() {
          width: 400px;
          height: 400px;
        }

        @include sm-down-device() {
          width: 280px;
          height: 280px;
        }
      }
    }

    .about-content {
      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.9;
        margin-bottom: 0;

        @include sm-down-device() {
          font-size: 14px;
        }
      }

      h3 {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 30px;
        font-weight: 500;
        line-height: 1.5;
        text-transform: uppercase;
        margin-bottom: 0;

        @include xl-down-device() {
          font-size: 28px;
        }

        @include md-down-device() {
          font-size: 25px;
        }

        @include sm-down-device() {
          font-size: 22px;
        }

        span {
          color: rgba(var(--title-color-opc), 0.5);
        }
      }
    }
  }
}

/*=====================================
 58. Home5 Faq Section 
========================================*/
.home5-faq-section {
  background-color: #1F1F1F;
  padding: 100px 0;

  @include xl-down-device() {
    padding: 90px 0;
  }

  @include md-down-device() {
    padding: 70px 0;
  }

  .section-title {
    h2 {
      @include lg-device() {
        font-size: 48px;
      }
    }
  }

  .faq-wrap {
    .accordion {
      .accordion-item {
        border: none;
        background-color: rgba(#fff, 0.2);
        backdrop-filter: blur(6px);
        border-radius: 5px;
        margin-bottom: 18px;

        &:last-child {
          margin-bottom: 0;
        }

        .accordion-header {
          padding: 10px 25px 10px 30px;
          border-radius: 5px;

          @include md-down-device() {
            padding: 10px 20px;
          }

          .accordion-button {
            border: none;
            border-radius: unset;
            box-shadow: none;
            // cursor: pointer;
            background-color: transparent;
            padding: 0;
            border: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-radius: 5px;

            @include sm-down-device() {
              font-size: 17px;
            }

            .step-no-and-title {
              display: flex;
              align-items: center;
              gap: 25px;

              @include md-down-device() {
                gap: 20px;
              }

              @include sm-down-device() {
                gap: 15px;
              }

              span {
                color: var(--white-color);
                font-family: var(--font-inter);
                font-size: 18px;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.02em;
                display: inline-block;
                padding: 10px 16px;
                background-color: rgba(#1F1F1F, 0.4);
                border-radius: 100px;

                @include sm-down-device() {
                  font-size: 15px;
                  padding: 10px 14px;
                }
              }

              h6 {
                color: var(--white-color);
                font-family: var(--font-inter);
                font-size: 18px;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.02em;
                margin-bottom: 0;

                @include sm-down-device() {
                  font-size: 16px;
                }
              }
            }

            svg {
              min-width: 14px;
              fill: var(--white-color);
              transition: transform 0.2s ease-in-out;
            }

            &::after {
              display: none;
              content: '';
              margin: 0;
            }

            &:not(.collapsed) {
              color: var(--white-color);

              svg {
                transform: rotate(-180deg);
                fill: var(--white-color);
              }

              &::after {
                content: '';
              }
            }
          }
        }

        .accordion-body {
          padding: 10px 90px 20px 157px;
          color: rgba(#fff, 0.7);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 1.9;
          letter-spacing: 0.48px;

          @include md-down-device() {
            padding: 5px 40px 20px 143px;
          }

          @include sm-down-device() {
            font-size: 14px;
            padding: 10px 30px;
          }
        }

      }
    }
  }

  .faq-img {
    @include lg-down-device() {
      display: none;
    }

    img {
      min-width: 656px;
      width: 100%;

      @include seventeen-down-device() {
        min-width: 520px;
      }

      @include xl-device() {
        min-width: 480px;
      }

      @include xl-down-device() {
        min-width: unset;
      }
    }
  }
}

/*=====================================
 59. Home5 Award Section 
========================================*/
.home5-award-section {
  background-color: #F5FAFC;
  padding: 110px 0;

  .section-title {
    max-width: 578px;
    width: 100%;
  }

  .award-area {
    padding: 0 9%;

    @include eighteen-down-device() {
      padding: 0 6%;
    }

    @include xxl-device() {
      padding: 0 2%;
    }

    @include xxl-down-device() {
      padding: 0 1%;
    }

    @include lg-device() {
      padding: 0 10px;
    }

    @include md-down-device() {
      padding: 0 10px;
    }

    .single-award {
      padding: 35px 30px;
      background-color: var(--white-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      @include xl-device() {
        padding: 35px 20px;
      }

      @include lg-device() {
        padding: 30px 15px;
      }

      @include md-down-device() {
        padding: 30px 20px;
      }

      @include sm-down-device() {
        flex-direction: column;
        gap: 40px;
      }

      .logo {
        min-width: 122px;
        max-width: 122px;
        width: 100%;

        @include xl-device() {
          min-width: 110px;
          max-width: 110px;
        }

        @include lg-device() {
          min-width: 100px;
          max-width: 100px;
        }

        @include md-down-device() {
          min-width: 115px;
          max-width: 115px;
        }

        @include sm-down-device() {
          margin: 0 auto;
        }

        img {
          max-width: 122px;

          @include xl-device() {
            max-width: 110px;
          }

          @include lg-device() {
            max-width: 100px;
          }

          @include md-down-device() {
            max-width: 115px;
          }

          @include sm-down-device() {
            max-width: unset;
          }
        }
      }

      svg {
        fill: rgba(var(--primary-color-opc), 0.2);

        @include xl-device() {
          min-width: 35px;
        }

        @include lg-device() {
          min-width: 35px;
        }

        @include md-down-device() {
          min-width: 35px;
        }

        @include sm-down-device() {
          transform: rotate(90deg);
          min-width: 30px;
        }
      }

      h6,
      span {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.02em;
        margin-bottom: 0;

        @include xl-device() {
          font-size: 15px;
        }

        @include lg-device() {
          font-size: 14px;
        }

        @include sm-down-device() {
          font-size: 15px;
        }
      }

      h6 {
        min-width: 150px;
        max-width: 150px;
        width: 100%;
        text-align: center;

        @include xl-device() {
          min-width: 145px;
          max-width: 145px;
        }

        @include lg-device() {
          min-width: 85px;
          max-width: 85px;
        }

        @include md-down-device() {
          min-width: 85px;
          max-width: 85px;
        }

        @include sm-down-device() {
          min-width: unset;
          max-width: unset;
        }
      }

      span {
        min-width: 152px;
        max-width: 152px;
        width: 100%;
        text-align: end;

        @include xl-device() {
          min-width: 145px;
          max-width: 145px;
        }

        @include lg-device() {
          min-width: 100px;
          max-width: 100px;
        }

        @include md-down-device() {
          min-width: 100px;
          max-width: 100px;
        }

        @include sm-down-device() {
          min-width: unset;
          max-width: unset;
          text-align: center;
        }
      }
    }
  }
}

/*=====================================
 60. Home5 Testimonial Section 
========================================*/
.home5-testimonial-section {
  background-color: #FBF8F3;
  padding: 100px 0;

  @include xl-down-device() {
    padding: 90px 0;
  }

  @include md-down-device() {
    padding: 70px 0;
  }

  .testimonial-img {
    padding-right: 50px;

    @include xxl-down-device() {
      padding-right: 20px;
    }

    @include xl-down-device() {
      padding-right: 0;
    }

    @include lg-down-device() {
      display: none;
    }
  }

  .testimonial-card-area {
    padding: 50px 35px;
    background-color: var(--white-color);
    border-radius: 20px;
    position: relative;

    @include xxl-down-device() {
      padding: 30px 25px;
    }

    @include sm-down-device() {
      padding: 30px 20px;
    }

    .testimonial-content-wrap {
      text-align: center;

      .quote {
        fill: var(--title-color);
        margin-bottom: 30px;

        @include sm-down-device() {
          margin-bottom: 25px;
        }
      }

      >span {
        color: var(--primary-color2);
        font-family: var(--font-kanit);
        font-size: 16px;
        font-weight: 400;
        line-height: 23.92px;
        letter-spacing: 0.06em;
        display: block;
        margin-bottom: 20px;

        @include xl-down-device() {
          margin-bottom: 10px;
        }
      }

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 0;

        @include xxl-device() {
          font-size: 19px;
        }

        @include sm-down-device() {
          font-size: 17px;
          line-height: 36px;
        }
      }

      .author-area {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding-top: 25px;
        border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
        margin-top: 55px;

        @include xxl-down-device() {
          margin-top: 45px;
        }

        @include xl-down-device() {
          margin-top: 45px;
        }

        @include sm-down-device() {
          margin-top: 25px;
          padding-top: 15px;
        }

        .author-img {
          img {
            min-width: 50px;
            max-width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        .author-content {
          text-align: start;

          h5 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 21px;
            font-weight: 500;
            line-height: 1.3;
            letter-spacing: 0.03em;
            margin-bottom: 3px;
          }

          span {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.03em;
          }
        }
      }
    }

    .slider-btn-grp {
      @include sm-down-device() {
        display: none;
      }

      .slider-btn {
        position: absolute;
        bottom: 45px;
        left: 45px;
        min-width: 35px;
        max-width: 35px;
        height: 35px;
        z-index: 1;

        @include xxl-device() {
          left: 35px;
        }

        @include xxl-down-device() {
          left: 25px;
        }

        i {
          font-size: 17px;
        }

        &.home4-testimonial-next {
          left: unset;
          right: 45px;

          @include xxl-device() {
            right: 35px;
          }

          @include xxl-down-device() {
            right: 25px;
          }
        }
      }
    }
  }

  .home5-testimonial-slider {
    .swiper-slide-active {

      .quote,
      span,
      p {
        animation: fadeInDown 1.7s;
      }

      .author-area {
        animation: fadeInUp 1.7s;
      }
    }
  }

  .logo-section {
    padding: 0;
    padding-top: 110px;
    border: unset;

    @include xl-down-device() {
      padding-top: 90px;
    }

    @include md-down-device() {
      padding-top: 70px;
    }

    @include sm-down-device() {
      padding-top: 60px;
    }
  }
}

/*=====================================
 61. Home5 Contact Section 
========================================*/
.home5-contact-section {
  .check-and-btn-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
  }
}

/*=====================================
 62. Home6 Container Section 
========================================*/
.main-container {
  overflow: hidden;

  .sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 90px;
    width: 100%;
    min-height: 100vh;
    background-color: var(--primary-color);
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    @include xxl-down-device() {
      max-width: 80px;
    }

    @include xl-down-device() {
      max-width: 70px;
    }

    @include lg-down-device() {
      max-width: unset;
      min-height: unset;
      position: relative;
      flex-direction: row;
      padding: 15px 30px;

      &.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background-color: var(--primary-color);
        box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
        z-index: 9999;

        @keyframes smooth-header {
          0% {
            transform: translateY(-30px);
          }

          100% {
            transform: translateY(0px);
          }
        }
      }
    }

    @include md-down-device() {
      padding: 15px 20px;
    }

    @include sm-down-device() {
      padding: 10px;
    }

    .sidebar-logo {
      img {
        @include lg-device() {
          width: 45px;
        }

        @include md-down-device() {
          width: 45px;
        }

        @include sm-down-device() {
          width: 40px;
        }
      }
    }

    .menu-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid rgba(#fff, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--white-color);
        z-index: -1;
      }

      svg {
        fill: var(--title-color);
      }

      &:hover {
        svg {
          animation: qode-draw 0.75s cubic-bezier(.57, .39, 0, .86) 1 forwards;
        }
      }
    }

    .header-btn {
      color: var(--white-color);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      line-height: 20.93px;
      text-transform: uppercase;
      text-align: center;

      @include lg-down-device() {
        display: none;
      }

      span {
        background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: 0% 100%;
        transition: background-size 0.75s;
        line-height: 1;
      }

      svg {
        fill: var(--white-color);
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        transition: 0.5s;
      }

      &:hover {
        span {
          background-size: 0 1px;
          background-position: right 100%;
        }

        svg {
          transform: rotate(-45deg);
        }
      }
    }
  }

  .main-content {
    position: relative;
    margin-left: 90px;
    max-width: calc(100% - 90px);
    width: 100%;

    @include xxl-down-device() {
      margin-left: 80px;
      max-width: calc(100% - 80px);
    }

    @include xl-down-device() {
      margin-left: 70px;
      max-width: calc(100% - 70px);
    }

    @include lg-down-device() {
      max-width: unset;
      margin-left: 0;
    }
  }
}

/*=====================================
 63. Home6 Banner Section 
========================================*/
.home6-banner-section {
  .banner-content {
    padding: 230px 0 70px 70px;
    position: relative;
    height: 100%;

    @include eighteen-down-device() {
      padding: 220px 0 60px 60px;
    }

    @include seventeen-down-device() {
      padding: 210px 0 50px 50px;
    }

    @include xxl-device() {
      padding: 200px 0 50px 30px;
    }

    @include xl-device() {
      padding: 180px 0 50px 20px;
    }

    @include xl-down-device() {
      padding: 50px 30px 70px;
    }

    @include md-down-device() {
      padding: 50px 20px;
    }

    @include sm-down-device() {
      padding: 40px 10px;
    }

    >span {
      color: rgba(var(--title-color-opc), 0.6);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 10px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -41px;
        width: 35px;
        height: 1px;
        background-color: var(--primary-color2);
      }
    }

    h1 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 60px;
      font-weight: 500;
      line-height: 1.1;
      margin-bottom: 0;

      @include seventeen-down-device() {
        font-size: 56px;
      }

      @include xxl-device() {
        font-size: 50px;
      }

      @include xl-device() {
        font-size: 44px;
      }

      @include xl-down-device() {
        font-size: 50px;
      }

      @include lg-down-device() {
        font-size: 50px;
      }

      @include md-down-device() {
        font-size: 46px;
        line-height: 1.2;
      }

      @include sm-down-device() {
        font-size: 38px;
      }
    }

    .button-area {
      padding-top: 55px;
      display: flex;
      align-items: center;
      gap: 34px;

      @include xl-down-device() {
        padding-top: 45px;
        padding-bottom: 40px;
      }

      @include lg-down-device() {
        padding-bottom: 25px;
      }

      @include md-down-device() {
        padding-top: 35px;
        padding-bottom: 0;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 25px;
      }

      .video-area {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;

        .icon {
          position: relative;

          .video-circle {
            stroke: var(--title-color);
            fill: none;
            transition: 0.5s;

            .top-half {
              stroke-dasharray: 320;
              stroke-dashoffset: 320;
              transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
            }
          }

          .play-icon {
            fill: var(--title-color);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: 1px;
          }
        }

        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 14px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.48px;
          text-transform: uppercase;
          margin-bottom: 0;
        }

        &:hover {
          .icon {
            .video-circle {
              .top-half {
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }

    .scroll-down-area {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 60px;

      @include xl-down-device() {
        position: relative;
        bottom: unset;
        left: unset;
        transform: unset;
        display: inline-block;
      }

      @include md-down-device() {
        display: none;
      }

      .scroll-down-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: up-down2 2s linear infinite alternate;

        .scroll-down-icon {
          width: 33px;
          height: 64px;
          border-radius: 110px;
          border: 1px solid rgba(var(--primary-color-opc), 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.5s;

          svg {
            fill: none;
            stroke: rgba(var(--primary-color-opc), 0.3);
            transition: 0.5s;
          }
        }

        span {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.06em;
          display: block;
          padding-top: 10px;
        }

        &:hover {
          .scroll-down-icon {
            background-color: var(--primary-color);
            border-color: var(--primary-color);

            svg {
              stroke: var(--white-color);
            }
          }
        }
      }
    }
  }

  .banner-slider-area {
    position: relative;

    #home6-banner-bg {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(../img/home6/home6-banner-bg1.jpg);
      min-height: 820px;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: center;

      @include xxl-device() {
        min-height: 730px;
      }

      @include xxl-down-device() {
        min-height: 680px;
      }

      @include xl-down-device() {
        min-height: 650px;
      }

      @include lg-down-device() {
        min-height: 600px;
      }

      @include md-down-device() {
        min-height: 560px;
      }

      @include sm-down-device() {
        min-height: 480px;
      }
    }

    .banner-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .home6-banner-slider {
      height: 100%;

      .swiper-wrapper {
        .swiper-slide {
          height: 100%;
        }
      }
    }
  }

  .banner-card {
    display: flex;
    height: 100%;
    align-items: end;
    position: relative;
    padding: 70px 70px;

    @include xxl-device() {
      padding: 60px 40px;
    }

    @include xl-device() {
      padding: 60px 25px;
    }

    @include xl-down-device() {
      padding: 60px 30px;
    }

    @include lg-down-device() {
      padding: 60px 20px;
    }

    @include md-down-device() {
      padding: 60px 15px;
    }

    &::after {
      content: '';
      height: 100%;
      width: 1px;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0.5;
      background: linear-gradient(360deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .card-content {
      .catgory-and-title {
        transform: translateY(20px);
        will-change: transform;
        transition: transform .5s ease;

        >a {
          border-radius: 50%;
          border: 1px solid rgba(#D9D9D9, 0.5);
          background: transparent;
          display: inline-block;
          color: var(--white-color);
          text-align: center;
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          padding: 9px 22px;
          line-height: 1;
          margin-bottom: 25px;

          @include md-down-device() {
            margin-bottom: 20px;
          }
        }

        h2 {
          margin-bottom: 0;

          a {
            color: var(--white-color);
            font-family: var(--font-kanit);
            font-size: 35px;
            font-weight: 400;
            transition: 0.35s;

            @include seventeen-down-device() {
              font-size: 32px;
            }

            @include xl-device() {
              font-size: 30px;
            }

            @include md-down-device() {
              font-size: 28px;
            }

            &:hover {
              color: #CACACA;
            }
          }
        }
      }
    }

    &:hover {
      .card-content {
        .catgory-and-title {
          transform: translateY(0);
        }

        p {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
}

/*=====================================
 64. Home6 About Section 
========================================*/
.home6-about-section {
  scroll-margin-top: 50px;

  .about-top-area {
    margin-bottom: 45px;

    h2 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 55px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-align: center;
      margin-bottom: 60px;

      @include xxl-down-device() {
        font-size: 50px;
        margin-bottom: 55px;
      }

      @include xl-down-device() {
        font-size: 45px;
        margin-bottom: 45px;
      }

      @include lg-down-device() {
        font-size: 42px;
        margin-bottom: 30px;
      }

      @include md-down-device() {
        font-size: 38px;
      }

      @include sm-down-device() {
        font-size: 34px;
      }

      span {
        color: var(--paragraph-color);
      }
    }

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.9;
      margin-bottom: 0;
      max-width: 645px;
      width: 100%;
      margin-left: auto;
      padding-left: 15px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 2px;
        height: 80px;
        background-color: var(--primary-color2);
      }

      @include lg-down-device() {
        max-width: unset;
        margin-left: 0;
        font-size: 15px;
      }

      @include sm-down-device() {
        font-size: 14px;
      }
    }
  }

  .about-img {
    img {
      @include sm-down-device() {
        min-height: 250px;
        object-fit: cover;
      }
    }
  }

  .about-content {
    margin-bottom: 30px;

    @include xxl-down-device() {
      margin-bottom: 20px;
    }

    @include lg-device() {
      margin-bottom: 15px;
    }

    @include lg-down-device() {
      margin-bottom: 0;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        padding-left: 22px;
        position: relative;
        margin-bottom: 25px;

        @include xxl-down-device() {
          margin-bottom: 20px;
        }

        @include lg-device() {
          font-size: 14px;
          margin-bottom: 15px;
        }

        @include sm-down-device() {
          font-size: 14px;
        }

        &:last-child {
          margin-bottom: 0;
        }

        span {
          color: var(--title-color);
          font-weight: 600;
        }

        &::before {
          content: '';
          position: absolute;
          top: 8px;
          left: 0;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: var(--primary-color2);
        }
      }
    }
  }
}

/*=====================================
 65. Home6 Project Section 
========================================*/
.home6-project-section {
  background-color: #F4F6FC;
  padding: 100px 110px;

  @include seventeen-down-device() {
    padding: 100px;
  }

  @include xxl-device() {
    padding: 100px 30px;
  }

  @include xxl-down-device() {
    padding: 100px 20px;
  }

  @include xl-down-device() {
    padding: 90px 10px;
  }

  @include lg-down-device() {
    padding: 90px 20px;
  }

  @include md-down-device() {
    padding: 70px 10px;
  }

  @include md-down-device() {
    padding: 70px 0;
  }

  .title-area {
    padding-left: 50px;

    @include xxl-device() {
      padding-left: 30px;
    }

    @include xxl-down-device() {
      padding-left: 20px;
    }

    @include xl-down-device() {
      padding-left: 0px;
    }

    .section-title {
      h2 {
        @include xl-device() {
          font-size: 50px;
        }
      }
    }
  }

  .nav-tabs {
    border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
    padding-left: 40px;
    gap: 60px;

    @include xxl-device() {
      gap: 50px;
      padding-left: 30px;
    }

    @include xxl-down-device() {
      gap: 50px;
      padding-left: 30px;
    }

    @include lg-device() {
      gap: 30px;
      padding-left: 20px;
    }

    @include lg-down-device() {
      gap: 50px;
      padding-left: 0;
    }

    @include md-down-device() {
      gap: 20px;
      margin-top: 1.5rem;
    }

    .nav-link {
      color: var(--paragraph-color);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      padding: 10px 0;
      border: none;
      background: linear-gradient(to bottom, rgba(var(--primary-color-opc), 1) 0%, rgba(var(--primary-color-opc), 1) 98%);
      background-size: 0px 1px;
      background-repeat: no-repeat;
      background-position: right 100%;
      transition: background-size .75s;

      @include sm-down-device() {
        padding-bottom: 5px;
        margin-right: 15px;
        padding: 0;
      }

      &.active {
        color: var(--title-color);
        background-size: 100% 1px;
        background-position: 0% 100%;
      }
    }
  }

  .pt-80 {
    padding-top: 80px;

    @include xxl-device() {
      padding-top: 70px;
    }

    @include xxl-down-device() {
      padding-top: 50px;
    }

    @include xl-down-device() {
      padding-top: 30px;
    }

    @include lg-down-device() {
      padding-top: 0;
    }
  }
}

.project-info-flow-card {
  position: relative;

  .info-flow-img {
    position: relative;
    display: block;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(var(--primary-color-opc), 0.2);
    }
  }

  .info-flow-content {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);

    h6 {
      margin-bottom: 0;
      line-height: 1;

      a {
        color: var(--white-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.02em;
        background-color: var(--primary-color);
        display: inline-block;
        padding: 7px 20px;

        @include xl-down-device() {
          padding: 7px 15px;
          font-size: 18px;
        }

        @include md-down-device() {
          font-size: 16px;
        }
      }
    }

    >a {
      color: rgba(var(--title-color-opc), 0.6);
      font-family: var(--font-inter);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      display: inline-block;
      padding: 10px 20px;
      background-color: #FF8B4A;
    }
  }

  &:hover {
    .info-flow-content {
      opacity: 1;
    }
  }
}

/*=====================================
 66. Home6 Sketch Section 
========================================*/
.home6-sketch-section {
  margin-bottom: 120px;

  @include lg-device() {
    margin-bottom: 90px;
  }

  @include lg-down-device() {
    margin-bottom: 30px;
  }

  @include md-down-device() {
    margin-bottom: 20px;
  }

  .title-area {
    max-width: 509px;
    width: 100%;
    margin-left: auto;
    margin-bottom: -60px;
    padding-right: 10px;
    position: relative;

    @include xxl-device() {
      max-width: 440px;
    }

    @include xxl-down-device() {
      max-width: 445px;
    }

    @include xxl-down-device() {
      margin-bottom: -25px;
    }

    @include xl-down-device() {
      margin-bottom: -10px;
    }

    @include lg-down-device() {
      margin-bottom: 30px;
      padding: 0 20px;
      max-width: 430px;
    }

    @include sm-down-device() {
      padding: 0 10px;
    }

    h2 {
      color: rgba(var(--primary-color-opc), 0.5);
      font-family: var(--font-kanit);
      font-size: 45px;
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: 0.03em;
      margin-bottom: 0;

      @include lg-down-device() {
        font-size: 40px;
      }

      @include sm-down-device() {
        font-size: 38px;
      }
    }

    .vector {
      position: absolute;
      top: 120px;
      left: 80px;

      @include xxl-device() {
        top: 115px;
        left: unset;
        right: 90px;
      }

      @include xxl-down-device() {
        top: 104px;
        left: unset;
        right: 70px;
        width: 110px;
      }

      @include xl-down-device() {
        top: 100px;
        left: unset;
        right: 50px;
        width: 100px;
      }

      @include lg-down-device() {
        display: none;
      }
    }
  }

  .home6-sketch-bg {
    overflow: hidden;
    background-image: url(../img/home6/home6-sketch-img.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 724px;
    position: relative;

    @include xxl-device() {
      background-position: 40%;
    }

    @include xxl-down-device() {
      background-position: 40%;
    }

    @include xl-down-device() {
      min-height: 600px;
    }

    @include lg-down-device() {
      min-height: 500px;
    }

    @include sm-down-device() {
      min-height: 400px;
    }

    .indicator-area {
      ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          position: absolute;

          &:nth-child(1) {
            top: 30%;
            left: 25%;

            @include eighteen-down-device() {
              left: 22%;
            }

            @include xxl-device() {
              left: 21%;
            }

            @include xxl-down-device() {
              left: 20%;
            }

            @include xl-down-device() {
              left: 17%;
            }

            @include md-down-device() {
              left: 8%;
            }

            @include sm-down-device() {
              left: 3%;
            }
          }

          &:nth-child(2) {
            top: 7%;
            left: 39%;

            @include eighteen-down-device() {
              left: 37%;
            }

            @include xxl-device() {
              left: 39%;
            }

            @include xxl-down-device() {
              left: 38%;
            }

            @include sm-down-device() {
              left: 35%;
            }
          }

          &:nth-child(3) {
            top: 28%;
            right: 46%;

            @include xxl-device() {
              right: 40%;
            }

            @include xxl-down-device() {
              right: 33%;
            }

            @include xl-down-device() {
              right: 36%;
            }

            @include md-down-device() {
              right: 30%;

              .single-item {
                right: 0;
                left: unset;
              }
            }

            @include sm-down-device() {
              right: 20%;
            }
          }

          &:nth-child(4) {
            bottom: 45%;
            left: 33%;

            @include eighteen-down-device() {
              left: 31%;
            }

            @include seventeen-down-device() {
              left: 30%;
            }

            @include xxl-device() {
              left: 31%;
            }

            @include xxl-down-device() {
              left: 30%;
            }

            @include xl-down-device() {
              left: 29%;
            }

            @include sm-down-device() {
              left: 21%;
            }
          }

          &:nth-child(5) {
            bottom: 35%;
            left: 47%;

            @include xxl-down-device() {
              left: 52%;
            }

            @include sm-down-device() {
              left: 48%;
            }
          }

          &:nth-child(6) {
            bottom: 40%;
            right: 31%;

            @include eighteen-down-device() {
              right: 29%;
            }

            @include seventeen-down-device() {
              right: 27%;
            }

            @include xxl-device() {
              right: 19%;
            }

            @include xxl-down-device() {
              right: 12%;
            }

            @include xl-down-device() {
              .single-item {
                right: 0;
                left: unset;
              }
            }
          }

          .dot-main {
            position: relative;
            display: inline-block;
            cursor: pointer;

            .waves {
              position: absolute;
              width: 25px;
              height: 25px;
              background: var(--primary-color);
              filter: blur(2px);
              opacity: 0;
              border-radius: 100%;
              right: -16px;
              bottom: -8px;
              z-index: 1;
              animation: waves 3s ease-in-out infinite;
              transition: 0.5s;

              &.wave-1 {
                animation-delay: 0s;
              }

              &.wave-2 {
                animation-delay: 1s;
              }

              &.wave-3 {
                animation-delay: 2s;
                background: var(--primary-color);
                transition: 0.5s;
              }
            }

            @keyframes waves {
              0% {
                transform: scale(0.2, 0.2);
                opacity: 0;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
              }

              50% {
                opacity: 0.9;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
              }

              100% {
                transform: scale(0.9, 0.9);
                opacity: 0;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
              }
            }
          }

          .single-item {
            min-width: 220px;
            position: absolute;
            right: 0;
            bottom: -130px;
            transform: scale(0);
            transition: 0.5s;
            z-index: 2;

            @include xl-down-device() {
              right: unset;
              left: 0;
              bottom: -125px;
            }

            @include sm-down-device() {
              left: 0px;
              min-width: 160px;
              bottom: -100px;
            }

            span {
              position: absolute;
              top: 0;
              left: 0;
              background-color: var(--white-color);
              padding: 6px 8px;
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 12px;
              font-weight: 400;
              line-height: 1;
              letter-spacing: 0.06em;
              text-transform: uppercase;
            }
          }

          &.active {
            .dot-main {
              .waves {
                background: var(--primary-color2);

                &.wave-3 {
                  background: var(--primary-color2);
                }
              }
            }

            .single-item {
              transform: scale(1);
            }
          }
        }
      }
    }
  }
}

/*=====================================
 67. Home6 Service Section 
========================================*/
.home6-service-section {
  padding: 95px 124px;
  background-color: #000;

  @include eighteen-down-device() {
    padding: 95px 90px;
  }

  @include seventeen-down-device() {
    padding: 95px 25px;
  }

  @include xxl-device() {
    padding: 95px 20px;
  }

  @include xl-down-device() {
    padding: 90px 20px;
  }

  @include md-down-device() {
    padding: 70px 10px;
  }

  @include sm-down-device() {
    padding: 70px 0px;
  }

  .section-title {
    margin-bottom: 90px;

    @include xxl-down-device() {
      margin-bottom: 70px;
    }

    @include xl-down-device() {
      margin-bottom: 40px;
    }

    @include md-down-device() {
      margin-bottom: 30px;
    }
  }

  .service-wrapper {
    .divider {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 54%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        height: 1px;
        background-color: rgba(#fff, 0.1);

        @include xl-device() {
          top: 52%;
        }

        @include lg-device() {
          top: 51%;
        }

        @include lg-down-device() {
          display: none;
        }
      }
    }

    .single-service {
      padding: 20px 20px 40px 20px;
      position: relative;

      @include seventeen-down-device() {
        padding: 20px 15px 40px 15px;
      }

      @include xxl-device() {
        padding: 20px 10px 40px 10px;
      }

      @include xl-device() {
        padding: 20px 10px 30px 10px;
      }

      @include lg-down-device() {
        padding: 0;
      }

      h4 {
        margin-bottom: 20px;

        @include md-down-device() {
          margin-bottom: 15px;
        }

        a {
          color: var(--white-color);
          font-family: var(--font-kanit);
          font-size: 26px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.03em;
          transition: 0.5s;

          @include xxl-device() {
            font-size: 24px;
          }

          @include xl-device() {
            font-size: 23px;
          }

          @include xl-down-device() {
            font-size: 24px;
          }

          @include sm-device() {
            font-size: 22px;
          }

          &:hover {
            color: var(--primary-color2);
          }
        }
      }

      p {
        color: rgba(#fff, 0.7);
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 30px;

        @include xl-down-device() {
          margin-bottom: 25px;
        }

        @include md-down-device() {
          margin-bottom: 20px;
        }
      }

      .more-btn {
        color: var(--primary-color2);
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.7;
        letter-spacing: 0.02em;
        white-space: nowrap;
        position: relative;
        display: inline-block;
        background: linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 98%);
        background-repeat: no-repeat;
        background-size: 100% 2px;
        background-position: left 100%;
        transition: background-size 0.75s;

        &:hover {
          background-size: 0 2px;
          background-position: 0% 100%;
        }
      }

      &.br {
        border-right: 1px solid rgba(#fff, 0.1);

        @include lg-down-device() {
          border: unset;
        }
      }

      &.pl-0 {
        padding-left: 0;
      }

      &.pr-0 {
        padding-right: 0;
      }

      .service-img {
        position: absolute;
        bottom: 20px;
        right: 50px;
        transition: 0.5s;
        opacity: 0;
        transform: scale(0.4);

        @include xxl-device() {
          right: 30px;
        }

        @include xxl-down-device() {
          right: 30px;
        }
      }

      &:hover {
        .service-img {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

/*=====================================
 68. Home6 Process Section 
========================================*/
.home6-process-section {
  .progress-area {
    .progress-pagination {
      margin-top: 23px;
      position: relative;
      background: rgba(var(--primary-color-opc), 0.1);
      height: 25px;
      border-radius: 14px;

      @include sm-down-device() {
        height: 20px;
      }

      .swiper-pagination-progressbar-fill {
        background: var(--primary-color);
        border-radius: 14px;
      }
    }

    span {
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.05em;
      display: block;
      text-align: center;
      padding-top: 20px;
    }
  }

  .process-slider-wrap {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 1px;
      background-color: rgba(var(--primary-color-opc), 0.2);
    }
  }

  .process-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;

    .step-no {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      background-color: var(--white-color);
      border: 1px solid var(--primary-color);
      border-radius: 50px;
      padding: 7px 22px;
      white-space: nowrap;
      position: relative;
      transition: 0.5s;

      @include sm-down-device() {
        margin-bottom: 30px;
      }

      &::before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 15px;
        height: 15px;
        background-color: var(--white-color);
        border: 1px solid var(--primary-color);
        border-radius: 0 0 4px 0;
        border-top: unset;
        border-left: unset;
        transition: 0.5s;
      }

      span {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.51px;
        transition: 0.5s;
      }
    }

    .process-card {
      background-color: #F4F6FC;
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      padding: 10px 10px 10px 35px;
      display: grid;
      grid-template-columns: 48% 52%;
      align-items: center;

      @include xxl-down-device() {
        grid-template-columns: 53% 47%;
        padding: 10px 10px 10px 20px;
      }

      @include lg-device() {
        padding: 10px 10px 10px 15px;
      }

      @include sm-device() {
        padding: 10px 10px 10px 15px;
      }

      @include sm-down-device() {
        display: block;
        padding: 15px;
      }

      .process-content {
        @include xxl-down-device() {
          padding: 15px 0;
        }

        @include lg-down-device() {
          padding: 15px 10px 15px 0;
        }

        @include sm-down-device() {
          padding: 0;
          padding-bottom: 20px;
        }

        svg {
          fill: rgba(var(--title-color-opc), 0.5);
          margin-bottom: 25px;
          transition: 0.5s;

          @include xxl-down-device() {
            margin-bottom: 20px;
          }

          @include lg-device() {
            width: 50px;
            margin-bottom: 15px;
          }
        }

        h4 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 25px;
          font-weight: 400;
          line-height: 28px;
          letter-spacing: 0.03em;
          margin-bottom: 25px;

          @include xxl-down-device() {
            margin-bottom: 20px;
          }

          @include lg-device() {
            font-size: 22px;
            margin-bottom: 15px;
          }

          @include md-down-device() {
            font-size: 22px;
            margin-bottom: 15px;
          }
        }

        p {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          line-height: 26px;
          margin-bottom: 0;

          @include lg-device() {
            font-size: 13px;
          }

          @include sm-device() {
            font-size: 15px;
          }
        }
      }

      .process-img {
        height: 100%;

        @include sm-down-device() {
          height: unset;
        }

        img {
          height: 100%;
          object-fit: cover;

          @include sm-down-device() {
            height: unset;
          }
        }
      }
    }

    &:hover {
      .step-no {
        border-color: var(--primary-color2);
        background-color: var(--primary-color);

        &::before {
          border-color: var(--primary-color2);
          background-color: var(--primary-color);
        }

        span {
          color: var(--white-color);
        }
      }

      .process-card {
        .process-content {
          svg {
            animation: bounceIn 1.2s linear;
          }
        }
      }
    }
  }
}

/*=====================================
 69. Home6 Testimonial Section 
========================================*/
.home6-testimonial-section {
  .testimonial-content-wrap {
    .section-title {
      margin-bottom: 45px;

      @include xl-down-device() {
        margin-bottom: 35px;
      }

      @include lg-down-device() {
        margin-bottom: 30px;
      }

      p {
        padding-top: 35px;

        @include xl-down-device() {
          padding-top: 30px;
        }

        @include lg-down-device() {
          padding-top: 20px;
        }
      }
    }

    .rating-area {
      padding: 0;
      margin: 0;
      list-style: none;
      padding: 28px 30px;
      background-color: #F9F3EE;
      border: 1px solid rgba(var(--primary-color-opc), 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 50px;
      position: relative;

      @include xxl-down-device() {
        padding: 28px 15px;
        gap: 20px;
      }

      @include xl-down-device() {
        margin-bottom: 40px;
      }

      @include lg-device() {
        flex-wrap: wrap;
        gap: 20px;
      }

      @include lg-down-device() {
        margin-bottom: 30px;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 25px;
        justify-content: center;
        border-radius: 10px;
      }

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(var(--primary-color2-opc), 0.2);
        width: 1px;
        height: 35px;

        @include sm-down-device() {
          display: none;
        }
      }

      >li {
        .single-rating {
          display: flex;
          gap: 8px;

          .review {
            line-height: 1;

            span {
              color: var(--paragraph-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              line-height: 1;
              margin-bottom: 8px;
              display: block;
              white-space: nowrap;

              @include seventeen-down-device() {
                font-size: 13px;
              }
            }

            img {
              width: 64px;
            }
          }

          .rating {
            line-height: 1;
            margin-top: -1px;

            .star {
              padding: 0;
              margin: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: 4px;
              margin-bottom: 9px;
              line-height: 1;

              li {
                i {
                  color: #E62415;
                  font-size: 12px;
                }
              }
            }

            span {
              color: var(--paragraph-color);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              white-space: nowrap;

              @include seventeen-down-device() {
                font-size: 13px;
              }
            }
          }

          &.google {
            .rating {
              .star {
                li {
                  i {
                    color: #FFC107;
                  }
                }
              }
            }
          }
        }

        &:first-child {
          &::before {
            display: none;
          }
        }
      }
    }

    .contact-btn-area {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
      z-index: 1;
    }
  }

  .testimonial-card-area {
    padding: 50px 35px;
    background-color: #F9F3EE;
    border-radius: 20px;
    position: relative;
    margin-left: 40px;

    @include seventeen-down-device() {
      padding: 50px 40px;
    }

    @include xxl-down-device() {
      padding: 30px 25px;
      margin-left: 30px;
    }

    @include xl-down-device() {
      margin-left: 0;
    }

    @include lg-device() {
      padding: 30px 20px;
    }

    @include md-down-device() {
      padding: 30px 20px;
    }

    .testimonial-content-wrap {
      text-align: center;

      .quote {
        fill: var(--title-color);
        margin-bottom: 30px;

        @include sm-down-device() {
          margin-bottom: 25px;
        }
      }

      >span {
        color: var(--primary-color2);
        font-family: var(--font-kanit);
        font-size: 16px;
        font-weight: 400;
        line-height: 23.92px;
        letter-spacing: 0.06em;
        display: block;
        margin-bottom: 20px;

        @include xl-down-device() {
          margin-bottom: 10px;
        }
      }

      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 0;

        @include xxl-device() {
          font-size: 19px;
        }

        @include lg-device() {
          font-size: 19px;
        }

        @include md-down-device() {
          font-size: 19px;
        }

        @include sm-down-device() {
          font-size: 17px;
          line-height: 36px;
        }
      }

      .author-area {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding-top: 25px;
        border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
        margin-top: 55px;

        @include xxl-down-device() {
          margin-top: 45px;
        }

        @include xl-down-device() {
          margin-top: 45px;
        }

        @include md-down-device() {
          margin-top: 35px;
        }

        @include sm-down-device() {
          margin-top: 25px;
          padding-top: 15px;
        }

        .author-img {
          img {
            min-width: 50px;
            max-width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        .author-content {
          text-align: start;

          h5 {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 21px;
            font-weight: 500;
            line-height: 1.3;
            letter-spacing: 0.03em;
            margin-bottom: 3px;
          }

          span {
            color: var(--paragraph-color);
            font-family: var(--font-inter);
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.03em;
          }
        }
      }
    }

    .slider-btn-grp {
      @include sm-down-device() {
        display: none;
      }

      .slider-btn {
        position: absolute;
        bottom: 45px;
        left: 45px;
        min-width: 35px;
        max-width: 35px;
        height: 35px;
        z-index: 1;

        @include seventeen-down-device() {
          bottom: 60px;
        }

        @include xxl-device() {
          left: 35px;
        }

        @include xxl-down-device() {
          left: 25px;
          bottom: 40px;
        }

        i {
          font-size: 17px;
        }

        &.home4-testimonial-next {
          left: unset;
          right: 45px;

          @include xxl-device() {
            right: 35px;
          }

          @include xxl-down-device() {
            right: 25px;
          }
        }
      }
    }
  }

  .home5-testimonial-slider {
    .swiper-slide-active {

      .quote,
      span,
      p {
        animation: fadeInDown 1.7s;
      }

      .author-area {
        animation: fadeInUp 1.7s;
      }
    }
  }
}

/*=====================================
 70. Home6 Banner2 Section 
========================================*/
.home6-banner2-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;

  @include xxl-device() {
    min-height: 700;
  }

  @include xxl-down-device() {
    min-height: 650px;
  }

  @include sm-down-device() {
    min-height: 80vh;
    background-attachment: unset;
  }

  .circular-text {
    width: 144px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    >svg {
      width: 144px;
      height: 144px;
      animation: textRotation 20s linear infinite;

      text {
        textpath {
          fill: var(--white-color);
          font-family: var(--font-inter);
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
        }
      }
    }

    .video-area {
      width: 91px;
      height: 91px;
      border-radius: 50%;
      background-color: rgba(#fff, 0.3);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;

      .play-btn {
        cursor: pointer;
        display: inline-block;

        .icon {
          position: relative;

          .video-circle {
            stroke: var(--white-color);
            fill: rgba(#fff, 0.2);
            transition: 0.5s;

            .top-half {
              stroke-dasharray: 430;
              stroke-dashoffset: 320;
              transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
            }
          }

          .play-icon {
            fill: var(--white-color);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: 2px;

            @include sm-down-device() {
              width: 20px;
            }
          }
        }

        &:hover {
          .icon {
            .video-circle {
              .top-half {
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 71. Home6 Blog Section 
========================================*/
.home6-blog-section {
  .primary-btn3 {
    padding: 17px 22px;
  }

  .blog-card {
    &.style-4 {
      height: 100%;

      .blog-img {
        max-width: 435px;
        height: 100%;

        @include sm-down-device() {
          height: 300px;
        }

        img {
          height: 100%;
          object-fit: cover;

          @include sm-down-device() {
            height: unset;
          }
        }
      }
    }

    &.style-3 {
      grid-template-columns: 50% 50%;

      @include lg-device() {
        grid-template-columns: 48% 52%;
      }

      @include md-down-device() {
        grid-template-columns: 48% 52%;
      }

      .blog-img {
        img {
          @include xl-device() {
            min-height: 255px;
            object-fit: cover;
          }

          @include lg-device() {
            min-height: 220px;
            object-fit: cover;
          }

          @include md-down-device() {
            min-height: 220px;
            object-fit: cover;
          }
        }
      }

      .blog-content-wrap {
        padding: 30px 25px;

        @include xxl-down-device() {
          padding: 30px 20px;
        }

        @include lg-device() {
          padding: 25px 15px;
        }

        @include sm-device() {
          padding: 20px 15px;
          gap: 45px;
        }

        @include sm-down-device() {
          padding: 20px 15px;
          gap: 30px;
        }

        .blog-content {
          h4 {
            a {
              @include xxl-down-device() {
                font-size: 23px;
              }

              @include lg-device() {
                font-size: 21px;
              }

              @include sm-device() {
                font-size: 21px;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 72. Home6 Team Section 
========================================*/
.home6-team-section {
  .counter-area {
    padding: 80px 60px;
    background-color: #FFFCF4;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    @include seventeen-down-device() {
      padding: 80px 30px;
    }

    @include xxl-device() {
      padding: 80px 20px;
    }

    @include xl-device() {
      padding: 80px 10px;
    }

    @include xl-down-device() {
      padding: 70px 30px;
    }

    @include sm-down-device() {
      padding: 50px 10px;
    }

    .single-counter {
      padding-bottom: 60px;
      min-width: 188px;

      @include xl-device() {
        min-width: 164px;
        padding-bottom: 50px;
      }

      @include xl-down-device() {
        padding-bottom: 40px;
      }

      @include sm-down-device() {
        padding-bottom: 0;
      }

      .number {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        @include sm-down-device() {
          margin-bottom: 5px;
        }

        h2,
        span {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 65px;
          font-weight: 700;
          line-height: 1;
          margin-bottom: 0;

          @include xxl-device() {
            font-size: 55px;
          }

          @include xl-device() {
            font-size: 50px;
          }

          @include md-down-device() {
            font-size: 55px;
          }

          @include sm-down-device() {
            font-size: 50px;
          }
        }
      }

      >span {
        color: var(--paragraph-color);
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.06em;
        text-transform: uppercase;

        @include xxl-device() {
          font-size: 14px;
        }

        @include xl-device() {
          font-size: 12px;
        }
      }

      &.two {
        padding-bottom: 0;
        padding-top: 60px;

        @include xl-device() {
          padding-top: 50px;
        }

        @include xl-down-device() {
          padding-top: 40px;
        }

        @include sm-down-device() {
          padding-top: 0;
        }
      }
    }

    .divider {
      position: relative;

      @include xl-down-device() {
        max-width: 540px;
        width: 100%;
      }

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 20.5%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 80%);

        @include sm-down-device() {
          display: none;
        }
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.5%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 80%);

        @include sm-down-device() {
          display: none;
        }
      }
    }
  }

  .team-wrap {
    padding: 90px 80px;
    background-color: #F4F6FC;

    @include seventeen-down-device() {
      padding: 90px 50px;
    }

    @include xxl-device() {
      padding: 90px 25px;
    }

    @include xl-device() {
      padding: 70px 20px;
    }

    @include xl-down-device() {
      padding: 70px 30px;
    }

    @include lg-down-device() {
      padding: 70px 20px;
    }

    @include sm-down-device() {
      padding: 50px 10px;
    }

    .section-title {
      h2 {
        @include xxl-device() {
          font-size: 54px;
        }
      }
    }

    .pb-35 {
      padding-bottom: 35px;

      @include md-down-device() {
        padding-bottom: 0;
      }
    }

    .pt-35 {
      padding-top: 35px;

      @include md-down-device() {
        padding-top: 0;
      }
    }

    .team-divider {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        background-color: rgba(var(--primary-color-opc), 0.1);
        right: 0;
        top: 0;

        @include md-down-device() {
          display: none;
        }
      }
    }

    .team-border {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background-color: rgba(var(--primary-color-opc), 0.1);

        @include md-down-device() {
          display: none;
        }
      }
    }

    .team-card4 {
      max-width: 224px;
      width: 100%;

      @include xl-device() {
        max-width: 190px;
      }

      @include md-device() {
        max-width: 190px;
      }

      @include md-down-device() {
        margin: 0 auto;
      }

      .team-img {
        position: relative;
        z-index: 1;
        margin-bottom: 15px;

        &::before {
          content: '';
          position: absolute;
          bottom: 1px;
          left: 0;
          width: 100%;
          height: 60px;
          border-radius: 50%;
          background-color: rgba(var(--primary-color-opc), 0.1);
          z-index: -1;
        }

        img {
          border-radius: 0 0 40% 40%;
        }

        .social-wrap {
          position: absolute;
          bottom: 16px;
          left: 50%;
          transform: translateX(-50%) scale(0.4);
          opacity: 0;
          transform-origin: bottom;
          transition: all 0.35s ease-out;

          .social-area {
            border: 1px solid var(--primary-color);
            background-color: var(--white-color);
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            transition: 0.5s;
            position: relative;
            overflow: hidden;
            z-index: 1;

            &::after {
              position: absolute;
              content: "";
              border-radius: 30px;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              background-color: var(--primary-color);
              transform-origin: right;
              transform: scalex(0);
              z-index: -1;
              transition: transform 0.7s;
            }

            .icon {
              padding: 0 7px;

              span {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: var(--primary-color);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.5s;

                i {
                  color: var(--white-color);
                  font-size: 12px;
                  transition: 0.5s;
                }
              }
            }

            >span {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              letter-spacing: 0.03em;
              display: block;
              padding: 10px 17px;
              border-left: 1px solid var(--primary-color);
              transition: 0.5s;
            }

            &:hover {
              border-color: var(--white-color);

              &::after {
                transform: scalex(1);
                transform-origin: left;
              }

              .icon {
                span {
                  background-color: var(--white-color);

                  i {
                    color: var(--title-color);
                  }
                }
              }

              >span {
                color: var(--white-color);
                border-color: var(--white-color);
              }
            }
          }
        }
      }

      .team-content {
        text-align: center;

        span {
          color: var(--paragraph-color);
          font-family: var(--font-inter);
          font-size: 14px;
          font-weight: 400;
          line-height: 1.5;
          display: block;
          margin-bottom: 2px;
        }

        h5 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 22px;
          font-weight: 400;
          line-height: 1.4;
          letter-spacing: 0.03em;
          margin-bottom: 0;
        }
      }

      &:hover {
        .team-img {
          .social-wrap {
            transform: translateX(-50%) scale(1);
            opacity: 1;
          }
        }
      }
    }
  }
}

/*=====================================
 73. Home6 Contact Section 
========================================*/
.home6-contact-section {
  .contact-wrapper {
    padding: 35px;
    background-color: #FAF8FB;
    border-radius: 30px;

    @include xl-down-device() {
      padding: 25px;
    }

    @include lg-down-device() {
      padding: 35px 25px;
    }

    @include md-down-device() {
      padding: 35px 20px;
      border-radius: 15px;
    }

    @include sm-down-device() {
      padding: 35px 10px;
    }

    .contact-content {
      padding-left: 35px;

      @include xxl-down-device() {
        padding-left: 25px;
      }

      @include xl-down-device() {
        padding-left: 20px;
      }

      @include lg-down-device() {
        padding-left: 0;
      }

      .section-title {
        max-width: 450px;
        width: 100%;
        margin-bottom: 60px;

        @include lg-down-device() {
          margin-bottom: 30px;
        }

        @include sm-down-device() {
          margin-bottom: 20px;
        }
      }

      >svg {
        fill: rgba(var(--primary-color-opc), 0.2);
        margin-left: 60px;
        margin-bottom: 70px;

        @include lg-down-device() {
          margin-bottom: 40px;
        }

        @include sm-down-device() {
          height: 100px;
          margin-bottom: 30px;
        }
      }

      .contact-list {
        padding: 0;
        margin: 0;
        list-style: none;

        @include lg-down-device() {
          display: flex;
          align-items: center;
          gap: 30px;
        }

        @include sm-down-device() {
          flex-wrap: wrap;
        }

        .single-contact {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 50px;

          &:last-child {
            margin-bottom: 0;
          }

          @include lg-down-device() {
            margin-bottom: 0;
          }

          .icon {
            svg {
              fill: var(--primary-color2);
            }
          }

          .content {
            position: relative;
            line-height: 1;

            span {
              color: var(--paragraph-color);
              font-family: var(--font-kanit);
              font-size: 14px;
              font-weight: 400;
              line-height: 1;
              text-transform: uppercase;
              display: block;
              margin-bottom: 10px;
            }

            h6 {
              margin-bottom: 0;

              a {
                color: var(--title-color);
                font-family: var(--font-inter);
                font-size: 18px;
                font-weight: 600;
                line-height: 1;
                transition: 0.5s;

                &:hover {
                  color: var(--primary-color2);
                }
              }
            }

            &::after {
              content: "";
              height: 35px;
              width: 1px;
              background-color: rgba(var(--primary-color-opc), 0.15);
              position: absolute;
              left: -10px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }

    .contact-form-wrap {
      background-color: var(--white-color);
      margin-left: 10px;

      @include xl-down-device() {
        margin-left: 0;
      }

      .primary-btn3 {
        margin-top: 40px;
        padding: 14px 27px;
      }
    }
  }
}

/*=====================================
 74. Breadcrumb Section 
========================================*/
.breadcrumb-section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 175px 0;
  background-color: #000000;

  @include xl-down-device() {
    padding: 160px 0;
  }

  @include lg-down-device() {
    padding: 120px 0;
  }

  .banner-content {
    position: relative;
    z-index: 1;

    span {
      color: rgba(#fff, 0.6);
      font-family: var(--font-kanit);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 15px;
      position: relative;

      @include md-down-device() {
        margin-bottom: 10px;
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -41px;
        width: 35px;
        height: 1px;
        background-color: var(--primary-color2);
      }
    }

    h1 {
      color: var(--white-color);
      font-family: var(--font-kanit);
      font-size: 70px;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: 0.03em;
      margin-bottom: 0;
      word-break: break-all;

      @include xxl-down-device() {
        font-size: 65px;
      }

      @include xl-down-device() {
        font-size: 60px;
      }

      @include lg-down-device() {
        font-size: 52px;
      }

      @include md-down-device() {
        font-size: 48px;
      }

      @include sm-down-device() {
        font-size: 38px;
        line-height: 1.3;
      }
    }

    .breadcrumb-list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 15px;

      li {
        position: relative;
        color: rgba(#fff, 0.5);
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        text-transform: capitalize;
        padding-left: 26px;
        word-break: break-all;

        a {
          color: var(--primary-color2);
        }

        &::before {
          content: url(../img/inner-pages/icon/breadcrumb-arrow-white.svg);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:first-child {
          padding-left: 0;

          &::before {
            content: '';
          }
        }
      }
    }
  }
}

/*=====================================
 75. Project Info Flow Page 
========================================*/
.project-info-flow-page {
  padding: 0px 8% 0;

  @include seventeen-down-device() {
    padding: 120px 6% 0;
  }

  @include xxl-device() {
    padding: 120px 4% 0;
  }

  @include xxl-down-device() {
    padding: 120px 2% 0;
  }

  @include xl-down-device() {
    padding: 90px 20px 0;
  }

  @include lg-down-device() {
    padding: 80px 20px 0;
  }

  @include md-down-device() {
    padding: 80px 10px 0;
  }

  @include sm-down-device() {
    padding: 80px 0px 0;
  }
}

/*=====================================
 76. Project Single Page 
========================================*/
.project-single-page {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--primary-color2);

  .project-single-wrapper {
    .project-bg {
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      min-height: 90vh;
      animation: large 26s linear infinite alternate;
    }

    .project-content-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 30px;
      display: flex;
      align-items: end;
      z-index: 2;
      padding: 90px 80px;

      @include xxl-device() {
        padding: 90px 70px;
      }

      @include xxl-down-device() {
        padding: 90px 60px;
      }

      @include xl-down-device() {
        padding: 90px 40px;
      }

      @include lg-down-device() {
        padding: 80px 30px;
      }

      @include md-down-device() {
        padding: 80px 20px;
      }

      @include sm-down-device() {
        padding: 80px 10px;
      }

      .project-content {
        max-width: 900px;
        width: 100%;

        @include xl-down-device() {
          max-width: 700px;
        }

        @include lg-down-device() {
          max-width: 530px;
        }

        span {
          color: rgba(#fff, 0.7);
          font-family: var(--font-inter);
          font-size: 13px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.02em;
          display: block;
          margin-bottom: 10px;
        }

        h2 {
          margin-bottom: 25px;

          a {
            color: var(--white-color);
            font-family: var(--font-kanit);
            font-size: 50px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.05em;
            transition: 0.5s;

            @include xxl-down-device() {
              font-size: 45px;
            }

            @include sm-down-device() {
              font-size: 40px;
            }

            &:hover {
              color: var(--primary-color2);
            }
          }
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;

          li {
            display: flex;

            a {
              color: var(--white-color);
              font-family: var(--font-inter);
              font-size: 12px;
              font-weight: 500;
              line-height: 1;
              padding: 5px 14px;
              border-radius: 15px;
              border: 1px solid rgba(#fff, 0.2);
              transition: 0.5s;

              &:hover {
                background-color: var(--white-color);
                border-color: var(--white-color);
                color: var(--title-color);
              }
            }
          }
        }
      }
    }
  }

  .slider-btn-grp {
    position: absolute;
    bottom: 70px;
    right: 80px;
    z-index: 2;

    @include xxl-device() {
      right: 70px;
    }

    @include xxl-down-device() {
      right: 60px;
    }

    @include xl-down-device() {
      right: 40px;
    }

    @include lg-down-device() {
      right: 30px;
      bottom: 60px;
    }

    @include sm-down-device() {
      display: none;
    }

    .slider-btn {
      border: 1px solid var(--white-color);

      @include sm-down-device() {
        gap: 30px;
      }

      i {
        color: var(--white-color);
      }

      &:hover {
        border-color: var(--white-color);
        background-color: var(--white-color);

        i {
          color: var(--title-color);
        }
      }
    }
  }

  .project-single-slider {
    .swiper-slide-active {

      span,
      h2 {
        animation: fadeInDown 1.7s;
      }

      ul {
        animation: fadeInUp 1.7s;
      }
    }
  }
}

/*=====================================
 77. Contact Page 
========================================*/
.contact-map-section {
  iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    filter: invert(1) hue-rotate(180deg) brightness(0.7) grayscale(1);
    border-radius: 30px;

    @include xxl-down-device() {
      min-height: 550px;
    }

    @include lg-down-device() {
      min-height: 500px;
      border-radius: 20px;
    }

    @include sm-down-device() {
      min-height: 450px;
      border-radius: 10px;
    }
  }
}

/*=====================================
 78. Faq Page 
========================================*/
.faq-page {
  .section-title2 {
    h2 {
      @include xl-device() {
        font-size: 58px;
      }
    }
  }
}

/*=====================================
 79. Error Page 
========================================*/
.error-page {
  .error-wrapper {
    text-align: center;

    .error-img {
      img {
        @include xl-down-device() {
          max-width: 650px;
          width: 100%;
        }

        @include lg-down-device() {
          max-width: 600px;
        }

        @include md-down-device() {
          max-width: 500px;
        }
      }
    }

    .error-content {
      padding-top: 105px;

      @include xxl-down-device() {
        padding-top: 95px;
      }

      @include xxl-down-device() {
        padding-top: 75px;
      }

      @include xl-down-device() {
        padding-top: 70px;
      }

      @include lg-down-device() {
        padding-top: 65px;
      }

      @include md-down-device() {
        padding-top: 55px;
      }

      @include sm-down-device() {
        padding-top: 50px;
      }

      h1 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 80px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.01em;
        margin-bottom: 30px;

        @include xxl-device() {
          font-size: 75px;
        }

        @include xxl-down-device() {
          font-size: 70px;
          margin-bottom: 25px;
        }

        @include lg-down-device() {
          font-size: 60px;
          margin-bottom: 20px;
        }

        @include md-down-device() {
          font-size: 50px;
        }

        @include sm-down-device() {
          font-size: 45px;
        }
      }

      p {
        color: rgba(var(--title-color-opc), 0.5);
        font-family: var(--font-inter);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.9;
        letter-spacing: 0.03em;
        margin: 0 auto;
        max-width: 746px;
        width: 100%;
        padding-bottom: 55px;

        @include xxl-down-device() {
          padding-bottom: 45px;
        }

        @include lg-down-device() {
          padding-bottom: 40px;
        }

        @include md-down-device() {
          font-size: 16px;
        }

        @include sm-down-device() {
          font-size: 14px;
          padding-bottom: 30px;
        }
      }

      .primary-btn3 {
        padding: 17px 31px;
      }
    }
  }
}

.innerpage-pagination-area {

  .paginations {
    margin: 70px 0 0 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    border: 1px solid rgba(var(--primary-color-opc), 0.2);
    border-radius: 40px;
    padding: 6px 20px;

    @include lg-down-device() {
      gap: 24px;
    }

    .page-item {

      a {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        border: 1px solid rgba(var(--primary-color-opc), 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;

        &.current {
          background-color: var(--primary-color2);
          border-color: var(--primary-color2);
          color: var(--white-color);
        }

        &:hover {
          background-color: var(--primary-color2);
          border-color: var(--primary-color2);
          color: var(--white-color);
        }
      }



      &.paginations-button {
        a {
          width: unset;
          height: unset;
          border: unset;
          background-color: unset;

          svg {
            fill: var(--paragraph-color);
            transition: 0.5s;
          }

          &:hover {
            svg {
              fill: var(--primary-color2);
            }
          }
        }
      }
    }
  }
}

/*=====================================
 80. Blog Sidebar Page 
========================================*/
.blog-sidebar-area {
  .widget-title {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-size: 20px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--title-color);
    display: inline-block;
    margin-bottom: 30px;

    @include sm-down-device() {
      margin-bottom: 25px;
    }
  }

  .single-widget {
    padding: 35px 35px;
    border: 1px solid rgba(var(--primary-color-opc), 0.1);
    background-color: #FAF9F9;
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }

    @include xl-device() {
      padding: 30px 25px;
    }

    @include lg-device() {
      padding: 30px 20px;
    }

    @include sm-down-device() {
      padding: 30px 15px;
    }

    .category-list {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        transition: 0.5s;

        &:last-child {
          margin-bottom: 0;
        }

        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          flex-wrap: wrap;
          gap: 5px;
          transition: 0.5s;

          span {
            color: rgba(var(--title-color-opc), 0.7);
            font-family: var(--font-kanit);
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: 0.5s;

            svg {
              fill: rgba(var(--title-color-opc), 0.7);
              transition: 0.5s;

              path {
                &:last-child {
                  fill: var(--white-color);
                }
              }
            }

            &:last-child {
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 400;
            }
          }
        }

        &:hover {
          a {
            span {
              color: var(--primary-color2);

              svg {
                fill: var(--primary-color2);
              }
            }
          }
        }
      }
    }

    .recent-post-widget {
      display: flex;
      align-items: center;
      gap: 15px;

      .recent-post-img {
        img {
          min-width: 92px;
          max-width: 92px;
          height: 71px;
        }
      }

      .recent-post-content {
        line-height: 1;

        >a {
          color: #3F444B;
          font-family: var(--font-inter);
          font-size: 12px;
          font-weight: 500;
          display: block;
          margin-bottom: 8px;
          transition: 0.5s;

          @include sm-down-device() {
            margin-bottom: 5px;
          }

          &:hover {
            color: var(--primary-color2);
          }
        }

        h6 {
          margin-bottom: 0;

          a {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 17px;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0.32px;
            transition: 0.5s;

            @include lg-device() {
              font-size: 14px;
            }

            @include sm-down-device() {
              font-size: 15px;
            }

            &:hover {
              color: var(--primary-color2);
            }
          }
        }
      }
    }

    .tag-list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;

      @include xxl-down-device() {
        gap: 10px;
      }

      @include lg-device() {
        gap: 14px;
      }

      li {
        margin: 0;

        a {
          color: rgba(var(--title-color-opc), 0.7);
          font-family: var(--font-kanit);
          font-size: 10px;
          font-weight: 400;
          display: block;
          line-height: 1;
          padding: 9px 12px;
          border-radius: 100px;
          text-transform: uppercase;
          background: var(--white-color);
          transition: 0.5s;

          @include sm-down-device() {
            font-size: 9px;
          }
        }

        &:hover {
          a {
            color: var(--white-color);
            background-color: var(--primary-color2);
          }
        }
      }
    }

    .search-box {
      display: flex;
      align-items: center;

      input {
        width: 100%;
        padding: 8px 20px;
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 12px;
        height: 45px;
        border: 1px solid rgba(var(--primary-color-opc), 0.3);
        border-right: unset;

        &:focus {
          border: 1px solid #ddd;
        }

        &::placeholder {
          color: rgba(var(--title-color-opc), 0.4);
        }
      }

      button {
        background-color: var(--primary-color);
        min-width: 90px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        z-index: 1;

        @include xxl-down-device() {
          min-width: 75px;
        }

        &::after {
          position: absolute;
          content: "";
          display: block;
          left: 15%;
          right: -20%;
          top: -4%;
          height: 150%;
          width: 150%;
          bottom: 0;
          border-radius: 2px;
          background-color: var(--primary-color2);
          transform: skewX(45deg) scale(0, 1);
          z-index: -1;
          transition: all 0.5s ease-out 0s;
        }

        i {
          color: var(--white-color);
          font-size: 22px;
        }

        @include sm-down-device() {
          min-width: 70px;
        }

        &:hover {
          &::after {
            transform: skewX(45deg) scale(1, 1);
          }
        }
      }
    }

    .social-list {
      display: flex;
      align-items: center;
      gap: 30px;

      li {
        display: block;
        text-align: center;

        a {
          i {
            color: var(--text-color);
            transition: 0.5s;
          }

          span {
            color: var(--text-color);
            font-family: var(--font-hankenGrotesk);
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            display: block;
            padding-top: 2px;
            transition: 0.5s;
          }
        }

        &:hover {
          a {
            i {
              color: var(--primary-color1);
            }

            svg {
              fill: var(--primary-color1);
            }

            span {
              color: var(--primary-color1);
            }
          }
        }
      }
    }
  }
}

/*=====================================
 81. Blog Masonary Page 
========================================*/
.blog-masonary-page {
  .pt-25 {
    padding-top: 25px;

    @include xl-down-device() {
      padding-top: 20px;
    }

    @include lg-down-device() {
      padding-top: 0;
    }
  }
}

/*=====================================
 82. Blog Details Page 
========================================*/
.blog-details-page {
  .blog-details-top-area {
    max-width: 970px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 35px;

    @include xl-down-device() {
      max-width: 830px;
    }

    .blog-meta {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      line-height: 1;
      margin-bottom: 30px;

      @include md-down-device() {
        margin-bottom: 25px;
      }

      li {
        color: rgba(var(--title-color-opc), 0.5);
        font-family: var(--font-inter);
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 0.3px;
        margin-right: 50px;
        display: flex;
        align-items: center;
        position: relative;
        transition: 0.25s ease;

        @include sm-device() {
          font-size: 13px;
          margin-right: 20px;
        }

        @include sm-down-device() {
          margin-right: 16px;
          font-size: 12px;
          line-height: 1.2;
        }

        svg {
          margin-right: 8px;
          fill: rgba(var(--title-color-opc), 0.5);
          transition: 0.25s ease;

          @include md-down-device() {
            width: 14px;
          }

          @include sm-device() {
            margin-right: 5px;
          }

          @include sm-down-device() {
            margin-right: 5px;
          }
        }

        a {
          color: rgba(var(--title-color-opc), 0.5);
          transition: 0.5s;
        }

        &:hover {
          a {
            color: var(--primary-color2);

            svg {
              fill: var(--primary-color2);
            }
          }
        }

        &::before {
          content: "";
          position: absolute;
          right: -25px;
          top: 3px;
          width: 2px;
          height: 10px;
          line-height: 5px;
          background-color: var(--primary-color2);
          border-radius: 4px;

          @include sm-device() {
            right: -10px;
          }

          @include sm-down-device() {
            right: -8px;
          }
        }

        &:last-child {
          margin-right: 0;

          &::before {
            display: none;
            visibility: hidden;
          }
        }
      }
    }

    h2 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 50px;
      font-weight: 500;
      line-height: 1.1;
      text-align: center;
      margin-bottom: 35px;

      @include xl-down-device() {
        font-size: 45px;
        margin-bottom: 30px;
      }

      @include lg-down-device() {
        font-size: 40px;
        margin-bottom: 25px;
      }

      @include md-down-device() {
        font-size: 36px;
      }

      @include sm-down-device() {
        font-size: 32px;
        margin-bottom: 20px;
      }
    }

    .author-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .author-img {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .author-content {
        h6 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 15px;
          font-weight: 400;
          line-height: 1;
          margin-bottom: 0;

          a {
            color: var(--primary-color2);
            text-decoration: underline;
          }
        }
      }
    }
  }

  .blog-details-thumb {
    text-align: center;

    img {
      @include md-down-device() {
        min-height: 300px;
        object-fit: cover;
      }
    }
  }

  .tag-and-social-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    clear: both;

    .tag-list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;

      li {
        a {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-syne);
          font-size: 15px;
          font-weight: 400;
          line-height: 1;
          transition: 0.5s;

          span {
            color: var(--primary-color2);
          }

          &:hover {
            color: var(--primary-color2);
          }
        }
      }
    }

    .social-area {
      display: flex;
      align-items: center;
      gap: 20px;

      h6 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        margin-bottom: 0;
      }

      .social-link {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 28px;
        line-height: 1;

        li {
          &::before {
            display: none;
          }

          a {
            i {
              font-size: 18px;
              color: rgba(var(--title-color-opc), 0.4);
              transition: 0.5s;

              &.bi-twitter-x {
                font-size: 15px;
              }
            }

            &:hover {
              i {
                color: var(--primary-color2);
              }
            }
          }
        }
      }
    }
  }

  .details-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    padding: 30px 0;
    border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
    border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

    @include md-down-device() {
      padding: 25px 0;
    }

    .navigation-arrow {
      width: 40px;
      height: 30px;
      border-radius: 15px;
      background-color: rgba(var(--primary-color2-opc), 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;

      svg {
        fill: var(--primary-color2);
        transition: 0.5s;
      }

      &:hover {
        background-color: var(--primary-color2);

        svg {
          fill: var(--white-color);
        }
      }
    }

    p {
      a {
        color: rgba(var(--title-color-opc), 0.7);
        font-family: var(--font-kanit);
        font-size: 22px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0;
        word-break: break-all;

        @include md-down-device() {
          font-size: 18px;
        }
      }
    }
  }

  .comment-area {
    scroll-margin-top: 200px;
    margin-top: 80px;

    .title {
      margin-bottom: 55px;

      @include lg-down-device() {
        margin-bottom: 45px;
      }

      h3 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 0;
        line-height: 1;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;

        @include sm-down-device() {
          font-size: 25px;
        }
      }
    }

    .comment {
      margin: 0;
      padding: 0;
      list-style: none;

      ul.children {
        margin-bottom: 35px;

        .single-comment-area {

          +div#respond {
            margin: 30px 0;
          }
        }
      }

      li {
        padding-bottom: 35px;
        margin-bottom: 35px;
        border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: unset;
        }
      }

      .single-comment-area {
        display: flex;
        align-items: flex-start;
        gap: 20px;

        @include sm-down-device() {
          gap: 10px;
        }

        +div#respond {
          margin-bottom: 30px;
        }

        .author-img {
          width: 100px;

          img {
            max-width: 100px;
            min-width: 100px;
            height: 100px;

            @include sm-down-device() {
              max-width: 70px;
              min-width: 70px;
              height: 70px;
            }
          }
        }

        .comment-content {
          width: calc(100% - 120px);

          .author-name-date {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;

            @include md-down-device() {
              margin-bottom: 15px;
            }

            h4 {
              line-height: 1;
              margin-bottom: 0;
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 24px;
              font-weight: 400;

              @include md-down-device() {
                font-size: 22px;
              }

              @include sm-down-device() {
                font-size: 20px;
              }
            }

            span {
              color: rgba(var(--title-color-opc), 0.5);
              font-family: var(--font-kanit);
              font-size: 18px;
              font-weight: 400;
              line-height: 1;
            }
          }

          p {
            color: rgba(var(--title-color-opc), 0.5);
            font-family: var(--font-inter);
            font-size: 18px;
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 28px;

            @include sm-down-device() {
              font-size: 15px;
            }
          }

          .replay-btn {
            display: inline-block;
            padding: 10px 26px;
            border: 1px solid var(--primary-color2);
            border-radius: 100px;
            line-height: 1;
            cursor: pointer;
            transition: 0.35s;

            svg {
              transition: 0.35s;
              fill: var(--primary-color2);
            }

            .details-button {
              transition: 0.5s;
              position: relative;
              display: inline-block;
              vertical-align: top;
              line-height: 1;
              font-weight: 500;
              text-decoration: none;
              outline: none;
              padding: 0 1.375em .0625em 0;
              cursor: pointer;
              background-color: transparent;
              background-position: 100% 100%;
              background-repeat: no-repeat;
              background-size: var(--background-size, 100%) 0.0625em;
              transition: background-size 0.2s linear var(--background-delay, 0.15s);
              // transform: translateZ(0);
              border: none;
              background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
              color: var(--primary-color2);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 500;
              white-space: nowrap;

              &::after {
                content: "\f123";
                font-family: "bootstrap-icons";
                display: block;
                position: absolute;
                right: 0;
                left: initial;
                top: 0;
                opacity: 1;
                -webkit-transition: opacity 0.3s 0.15s;
                transition: opacity 0.3s 0.15s;
                color: var(--primary-color2);
              }

              svg {
                position: absolute;
                display: block;
                line-height: 1.8125em;
                width: 1.375em;
                height: 1.8125em;
                right: 0;
                left: initial;
                top: 50%;
                margin: -.92em 0 0;
                fill: none;
                stroke: var(--primary-color2);
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 1px;
                stroke-dasharray: 7.95 30;
                stroke-dashoffset: var(--stroke-dashoffset, 46);
                transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
              }

              a {
                color: var(--primary-color2);
              }
            }

            &:hover {
              background-color: var(--primary-color2);

              .details-button {
                --background-size: 0%;
                --stroke-dashoffset: 26;
                --stroke-duration: .3s;
                --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
                --stroke-delay: .195s;
                background-image: linear-gradient(0deg, #fff 0%, #fff 100%);

                svg {
                  stroke: var(--white-color);
                }

                color: var(--white-color);

                &::after {
                  opacity: 0;
                  transition-delay: 0s;
                  color: var(--white-color);
                }

                a {
                  color: var(--white-color);
                }
              }
            }
          }
        }
      }
    }

    .contact-form-area {
      padding-top: 120px;

      @include xl-down-device() {
        padding-top: 90px;
      }

      @include lg-down-device() {
        padding-top: 70px;
      }

      .contact-form {
        background: #FAF8FB;
        border: 1px solid rgba(var(--primary-color-opc), 0.05);
        padding: 45px 55px;

        @include md-down-device() {
          padding: 45px 30px;
        }

        @include sm-down-device() {
          padding: 40px 25px;
          border-radius: 15px;
        }

        .form-inner {

          input,
          textarea {
            background-color: var(--white-color);
            border-color: rgba(var(--primary-color-opc), 0.1);

            &:focus {
              border-color: var(--primary-color2);
            }
          }

          input {
            height: 50px;
          }
        }

        button {
          border: unset;

        }
      }
    }
  }
}

.details-content-wrapper {
  .line-break {
    height: 15px;
    display: block;

    @include sm-down-device() {
      height: 10px;
    }
  }

  p {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;

    @include sm-down-device() {
      font-size: 17px;
    }

    &.first-para {
      &::first-letter {
        float: left;
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 70px;
        font-weight: 700;
        line-height: 1;
        margin-right: 15px;

        @include sm-down-device() {
          font-size: 60px;
          margin-right: 10px;
        }
      }
    }
  }

  h3 {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
  }

  h4 {
    color: var(--title-color);
    font-family: var(--font-kanit);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
  }

  blockquote {
    background-color: #FFF9F6;
    padding: 28px 40px;
    border-radius: 20px;
    border: none;

    @include lg-device() {
      padding: 28px 30px;
    }

    @include lg-down-device() {
      padding: 28px 25px;
    }

    @include md-down-device() {
      padding: 28px 25px;
    }

    @include sm-down-device() {
      padding: 28px 20px;
    }

    svg {
      fill: var(--primary-color2);
    }

    p {
      color: rgba(var(--title-color-opc), 0.5);
      font-family: var(--font-kanit);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.9;
      padding-top: 20px;
      margin-bottom: 20px;

      @include lg-down-device() {
        font-size: 19px;
      }

      @include md-down-device() {
        font-size: 18px;
        margin-bottom: 20px;
      }

      @include md-down-device() {
        font-size: 17px;
      }
    }

    h3 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 0;

      @include md-down-device() {
        font-size: 25px;
      }

      @include md-down-device() {
        font-size: 22px;
      }
    }
  }

  ul.list-details {
    padding: 0;
    margin: 0;
    list-style: none;
    -moz-columns: 2;
    columns: 2;

    @include sm-down-device() {
      columns: unset;
    }

    li {
      color: rgba(var(--title-color-opc), 0.7);
      font-family: var(--font-kanit);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.34px;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;

      &:last-child {
        // margin-bottom: 0;
      }

      svg {
        fill: var(--primary-color2);
      }
    }
  }
}

/*=====================================
 83. Properties Page 
========================================*/
.property-form-section {
  .property-form-wrap {
    margin-top: -57px;
    position: relative;
    border-radius: 100px;
    padding: 35px 60px;
    background-color: var(--white-color);
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
    gap: 30px;

    @include xxl-down-device() {
      padding: 35px 40px;
    }

    @include xl-down-device() {
      padding: 30px 25px;
    }

    @include lg-down-device() {
      border-radius: 30px;
      padding: 30px 20px;
    }

    @include sm-down-device() {
      padding: 25px 15px;
      border-radius: 20px;
    }
  }

  .single-dropdown {
    .nice-select {
      // width: 195px;
      height: 44px;
      border-radius: 30px;
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 15px;
      font-weight: 400;
      text-transform: capitalize;
      padding-left: 25px;
      display: flex;
      align-items: center;

      &:focus {
        border-color: var(--primary-color);
      }

      @include xl-down-device() {
        padding-left: 20px;
      }

      @include md-down-device() {
        padding-left: 18px;
        padding-right: 15px;
      }

      &::after {
        border-bottom: 2px solid var(--primary-color);
        border-right: 2px solid var(--primary-color);
        width: 8px;
        height: 8px;
        right: 28px;
        top: 48%;

        @include xl-down-device() {
          right: 20px;
        }

        @include md-down-device() {
          right: 20px;
        }
      }

      &.open {
        .list {
          width: 100%;

          .option {
            padding-left: 25px;
            font-family: var(--font-dmsans);
            font-size: 14px;

            @include md-down-device() {
              padding-left: 15px;
            }
          }
        }
      }
    }
  }

  button {
    color: var(--white-color);
    font-family: var(--font-kanit);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    background-color: var(--primary-color);
    padding: 14px 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 70px;

    @include xxl-down-device() {
      padding: 15px 22px;
      font-size: 14px;
    }

    svg {
      fill: var(--white-color);
    }
  }
}

/*=====================================
 84. Shop Page 
========================================*/
.product-card {
  transition: 0.5s;
  position: relative;

  .product-card-img {
    position: relative;
    overflow: hidden;

    >a {
      .batch {
        position: absolute;
        left: 5px;
        top: 5px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;

        >span {
          padding: 2px 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--title-color);
          text-align: center;
          font-size: 13px;
          font-weight: 400;
          font-family: var(--font-kanit);
          letter-spacing: 0.3px;
          text-transform: uppercase;
          background-color: var(--white-color);
          z-index: 1;

          &.new {
            background-color: var(--primary-color2);
            color: var(--white-color);
          }

          &.sale {
            background-color: var(--primary-color);
            color: var(--white-color);
          }
        }
      }
    }

    .cart-btn-area {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      background-color: rgba(#fff, 0.1);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: 0.5s ease-in-out;

      .add-cart-btn {
        color: var(--white-color);
        font-family: var(--font-kanit);
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        background: var(--primary-color);
        padding: 14px 33px;
        line-height: 1;
        display: inline-block;
        position: relative;
        overflow: hidden;
        z-index: 1;
        white-space: nowrap;
        transition: 0.5s;

        &::after {
          position: absolute;
          content: "";
          display: block;
          left: 15%;
          right: -20%;
          top: -4%;
          height: 150%;
          width: 150%;
          bottom: 0;
          border-radius: 2px;
          background-color: var(--primary-color2);
          transform: skewX(45deg) scale(0, 1);
          z-index: -1;
          transition: all 0.5s ease-out 0s;
        }

        &:hover {
          &::after {
            transform: skewX(45deg) scale(1, 1);
          }
        }
      }
    }

    .view-and-favorite-area {
      position: absolute;
      top: 10px;
      right: 10px;
      transform-origin: right;
      transform: scaleX(0);
      opacity: 0;
      transition: 0.5s;

      ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          a,
          button {
            width: 32px;
            height: 32px;
            background-color: rgba(var(--primary-color-opc), 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.5s;
            border: none;
            border-radius: 0;
            padding: 0;
            text-align: center;

            svg,
            i {
              color: var(--title-color);
              transition: 0.5s;
              width: 20px;
            }

            &:hover {
              background-color: var(--primary-color);

              svg,
              i {
                color: var(--white-color);
              }
            }
          }
        }
      }
    }
  }

  .product-card-content {
    padding-top: 25px;

    @include sm-down-device() {
      padding-top: 20px;
    }

    h6 {
      margin-bottom: 15px;

      @include sm-down-device() {
        margin-bottom: 10px;
      }

      a {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0.5px;
        line-height: 1.3;
        transition: 0.5s;

        &:hover {
          color: var(--primary-color2);
        }
      }
    }

    >span {
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 600;
      display: block;

      del {
        color: rgba(var(--primary-color-opc), 0.3);
        font-size: 15px;
        font-weight: 400;
      }
    }

    .rating {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 20px;

      @include sm-down-device() {
        margin-bottom: 15px;
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 5px;

        li {
          line-height: 1;

          i {
            color: #FFC200;
            font-size: 14px;
          }
        }
      }

      span {
        color: rgba(var(--primary-color-opc), 0.3);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
      }
    }
  }

  &:hover {
    .product-card-img {
      .cart-btn-area {
        opacity: 1;
        transform: scaleY(1);
      }

      .view-and-favorite-area {
        transform: scaleX(1);
        opacity: 1;
      }
    }
  }
}

/*=====================================
 85. Product Details Page 
========================================*/
.product-details-top-section {
  .product-details-img {
    .nav-pills {
      padding-top: 30px;
      gap: 35px;

      @include xl-down-device() {
        gap: 20px;
        padding-top: 25px;
      }

      @include sm-down-device() {
        gap: 15px;
      }

      .nav-link {
        background-color: unset;
        border-radius: unset;
        padding: 0;
        width: 100px;
        height: 100px;

        @include xl-down-device() {
          width: 95px;
          height: 95px;
        }

        &.active {
          border: 1px solid var(--primary-color2);
        }

        @include lg-device() {
          border: 1px solid #eee;
        }

        @include sm-down-device() {
          border: 1px solid #eee;
          width: 70px;
          height: 70px;
          padding: 0;
        }
      }
    }
  }

  .product-details-content {
    h2 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 35px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.7px;
      text-transform: capitalize;
      margin-bottom: 10px;

      @include xl-down-device() {
        font-size: 32px;
      }

      @include sm-down-device() {
        font-size: 30px;
        margin-bottom: 15px;
      }
    }

    .rating-review {
      display: flex;
      align-items: center;
      gap: 40px;
      margin-bottom: 20px;

      @include sm-down-device() {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;

      }

      .rating {
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1;

        .star {
          display: flex;
          align-items: center;
          gap: 6px;

          i {
            font-size: 14px;
            color: #ffc107;
          }
        }

        p {
          a {
            color: rgba(var(--title-color-opc), 0.5);
            font-family: var(--font-kanit);
            font-size: 15px;
            font-weight: 300;
            text-transform: capitalize;
            transition: 0.5s;

            &:hover {
              color: var(--title-color);
            }
          }

          margin-bottom: 0;
        }
      }

      p {
        color: var(--primary-color1);
        font-family: var(--font-Jost);
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0.3px;
        text-transform: capitalize;
        margin-bottom: 0;
      }
    }

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.48px;
      margin-bottom: 20px;

      @include lg-device() {
        font-size: 15px;
      }
    }

    .price-area {
      margin-bottom: 35px;

      @include lg-device() {
        margin-bottom: 30px;
      }

      h4 {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 25px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 0;

        del {
          color: #ABABAB;
          font-family: var(--font-kanit);
          font-size: 18px;
          font-weight: 400;
          line-height: 1;
        }
      }
    }

    .quantity-color-area {
      display: flex;
      align-items: flex-start;
      gap: 50px;
      margin-bottom: 35px;

      @include lg-device() {
        gap: 40px;
      }

      @include sm-down-device() {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
      }

      .quantity-color {
        .widget-title {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 16px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0.48px;
          margin-bottom: 20px;

          @include sm-down-device() {
            margin-bottom: 15px;
          }
        }

        .quantity-counter {
          display: flex;
          align-items: center;
          gap: 10px;

          a {
            width: 40px;
            height: 40px;
            background-color: rgba(var(--primary-color-opc), 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--title-color);
          }

          .quantity__input {
            max-width: 58px;
            width: 100%;
            height: 40px;
            border: 1px solid var(--primary-color);
            text-align: center;
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 16px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.48px;

            &:focus {
              border: 1px solid #ddd;
            }
          }
        }

        .color-list {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;

          @include lg-device() {
            gap: 8px;
          }

          li {
            width: 30px;
            height: 30px;
            border: 1px solid transparent;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            span {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background-color: #730718;
              display: inline-block;
            }

            &:nth-child(2) {
              span {
                background-color: #815147;
              }
            }

            &:nth-child(3) {
              span {
                background-color: #4A212B;
              }
            }

            &:nth-child(4) {
              span {
                background-color: #ED5C31;
              }
            }

            &:nth-child(5) {
              span {
                background-color: #93625F;
              }
            }

            &:nth-child(6) {
              span {
                background-color: #CE626C;
              }
            }

            &.selected {
              border: 1px solid var(--primary-color);
            }
          }
        }
      }
    }

    .product-details-btn {
      display: flex;
      align-items: center;
      gap: 30px;
      border-bottom: 1px solid var(--primary-color);
      padding-bottom: 30px;
      flex-wrap: wrap;

      @include sm-down-device() {
        gap: 20px;
      }

      .primary-btn2 {
        padding: 17px 45px;

        &.transparent {
          padding: 16px 34px;
        }
      }
    }

    .product-info {
      padding-top: 25px;
      margin-bottom: 30px;

      .product-info-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        @include sm-down-device() {
          flex-wrap: wrap;
          gap: 8px;
        }

        li {
          color: #868686;
          font-family: var(--font-kanit);
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0.32px;
          text-transform: capitalize;

          a {
            color: #868686;
            transition: 0.35s;

            &:hover {
              color: var(--primary-color1);
            }
          }

          @include sm-down-device() {
            margin-right: 15px;
          }

          span {
            color: var(--title-color);
          }
        }
      }
    }

    .payment-method {
      padding: 17px 30px;
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      max-width: 460px;
      width: 100%;
      border-radius: 5px;
      margin-bottom: 20px;

      @include sm-down-device() {
        padding: 15px 20px;
      }

      h6 {
        color: var(--title-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.48px;
        text-transform: capitalize;
        margin-bottom: 15px;
      }

      .payment-card-list {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;

        @include sm-down-device() {
          gap: 10px;
        }

        li {
          img {
            min-width: 35px;
          }
        }
      }
    }

    .wishlist-area {
      a {
        color: var(--paragraph-color);
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        transition: 0.5s;

        span {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          border: 1px solid rgba(var(--primary-color-opc), 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.5s;

          svg {
            fill: var(--title-color);
            transition: 0.5s;
          }
        }

        &:hover {
          span {
            background-color: var(--primary-color);

            svg {
              fill: var(--white-color);
            }
          }
        }
      }
    }
  }
}

.product-details-description-section {
  .product-details-description-nav {
    .nav-tabs {
      border-bottom: 1px solid var(--primary-color);
      padding-left: 80px;
      gap: 65px;

      @include lg-down-device() {
        gap: 50px;
      }

      @include md-down-device() {
        gap: 20px;
        padding-left: 0;
      }

      @include sm-down-device() {
        gap: 10px;
      }

      .nav-link {
        color: var(--paragraph-color);
        font-family: var(--font-kanit);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.36px;
        text-transform: capitalize;
        border: none;
        background: linear-gradient(to bottom, rgba(#222, 1) 0%, rgba(#222, 1) 98%);
        background-size: 0px 3px;
        background-repeat: no-repeat;
        background-position: right 100%;
        transition: background-size .75s;

        @include sm-down-device() {
          padding-bottom: 5px;
          margin-right: 15px;
          padding: 0;
        }

        &.active {
          color: var(--title-color);
          background-size: 100% 3px;
          background-position: 0% 100%;
        }
      }
    }
  }

  .product-details-description-tab {
    .description-tab-img {
      img {
        @include lg-down-device() {
          max-height: 380px;
          object-fit: cover;
        }

        @include md-down-device() {
          max-height: 300px;
        }
      }
    }

    h6 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 10px;

      @include xl-down-device() {
        font-size: 20px;
      }
    }

    p {
      color: var(--paragraph-color);
      font-family: var(--font-inter);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      letter-spacing: 0.45px;

      @include lg-device() {
        font-size: 14px;
      }
    }

    .description-content {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      @include lg-down-device() {
        align-items: flex-start;
        gap: 20px;
      }

      .description-left-content1 {
        padding-top: 45px;

        @include xxl-down-device() {
          padding-top: 30px;
        }

        @include lg-down-device() {
          padding-top: 0;
        }
      }

      .description-left-content2 {
        margin-bottom: 120px;

        @include xxl-down-device() {
          margin-bottom: 70px;
        }

        @include xl-down-device() {
          margin-bottom: 0;
        }

        @include lg-down-device() {
          margin-bottom: 0;
        }
      }

      .description-right-content2 {
        margin-bottom: 70px;

        @include xl-down-device() {
          margin-bottom: 20px;
        }

        @include lg-down-device() {
          margin-bottom: 0;
        }
      }
    }

    .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(--title-color);
              font-family: var(--font-kanit);
              font-size: 14px;
              font-weight: 400;
              line-height: 30px;
              vertical-align: middle;

              @include md-down-device() {
                padding: 10px;
              }

              &:nth-child(1) {
                font-weight: 500;
                font-size: 16px;
                text-align: start;
                line-height: 26px;

                @include lg-up-device() {
                  width: 25%;
                }
              }
            }
          }
        }
      }
    }

    .reviews-area {
      .number-of-review {
        line-height: 1;
        margin-bottom: 40px;

        h4 {
          line-height: 1;
          margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 24px;
          font-weight: 500;

          @include sm-down-device() {
            font-size: 22px;
          }
        }
      }

      .comment {
        margin: 0;
        padding: 0;
        list-style: none;

        >li {
          margin-bottom: 40px;

          >.single-comment-area {
            margin-bottom: 24px;
          }

          &:last-child {
            margin-bottom: 0;

            >.single-comment-area {
              margin-bottom: 0;
            }
          }
        }

        .single-comment-area {
          display: flex;
          align-items: flex-start;
          gap: 20px;

          @include sm-down-device() {
            gap: 12px;
          }

          .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-kanit);
                font-size: 15px;
                font-weight: 500;
              }

              span {
                color: rgba(var(--title-color-opc), 0.6);
                font-family: var(--font-inter);
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
              }
            }

            .author-and-review {
              .review {
                padding: 0;
                margin: 0;
                list-style: none;
                gap: 5px;
                line-height: 1;
                margin-bottom: 5px;

                li {
                  line-height: 1;

                  i {
                    color: #DDA701;
                    font-size: 12px;
                  }
                }
              }
            }

            p {
              color: rgba(var(--title-color-opc), 0.6);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 28px;
              margin-bottom: 12px;
            }

            .replay-btn {
              color: rgba(var(--title-color-opc), 0.6);
              font-family: var(--font-inter);
              font-size: 14px;
              font-weight: 600;
              display: inline-flex;
              align-items: center;
              gap: 5px;
              line-height: 1;
              cursor: pointer;
              transition: 0.35s;

              svg {
                transition: 0.35s;
                fill: rgba(var(--title-color-opc), 0.6);
              }

              &:hover {
                color: var(--primary-color);

                svg {
                  fill: var(--primary-color);
                }
              }
            }
          }
        }

        .comment-replay {
          padding: 0;
          margin: 0;
          list-style: none;
          margin-left: 70px;
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          padding: 24px 0;

          >li {
            margin-bottom: 30px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .review-form {
      background-color: var(--white-color);
      border: 1px solid var(--border-color);
      box-shadow: 4px 3px 40px 0px rgba(16, 33, 34, 0.06);
      padding: 50px 40px;
      border-radius: 10px;

      @include lg-device() {
        padding: 40px 30px;
      }

      @include sm-down-device() {
        padding: 40px 25px;
      }

      .number-of-review {
        line-height: 1;
        margin-bottom: 30px;

        h4 {
          line-height: 1;
          margin-bottom: 0;
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 24px;
          font-weight: 500;
        }
      }

      .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;
          }
        }
      }
    }
  }
}

/*=====================================
 86. 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-kanit);
      font-size: 30px;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 0;
    }
  }

  .cart-shopping-wrapper {
    .cart-table {
      width: 100%;

      @include md-down-device() {
        margin-bottom: 30px;
      }

      thead {
        tr {
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);

          th {
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
            padding: 20px 15px;

            @include md-down-device() {
              display: none;
            }

            &:first-child {
              padding-left: 0;
            }
          }
        }
      }

      tbody {
        tr {
          @include md-down-device() {
            border-bottom: 1px solid var(--border-color);
          }

          td {
            padding: 30px 15px;
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;

            span {
              color: rgba(var(--title-color-opc), 0.7);
            }

            &: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 {
                  max-width: 120px;
                }
              }

              .product-info-content {
                h6 {
                  color: var(--title-color);
                  font-family: var(--font-kanit);
                  font-size: 18px;
                  font-weight: 500;
                  line-height: 1.4;
                  margin-bottom: 10px;
                }

                p {
                  color: var(--paragraph-color);
                  font-family: var(--font-inter);
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 1;
                  margin-bottom: 35px;

                  span {
                    color: var(--title-color);
                    font-weight: 600;
                  }
                }

                ul {
                  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(--paragraph-color);
                    font-family: var(--font-inter);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1;
                    cursor: pointer;
                    position: relative;
                    transition: 0.5s;

                    &:last-child {
                      &::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: -10px;
                        width: 1px;
                        height: 11px;
                        background-color: rgba(var(--title-color-opc), 0.2);
                      }
                    }

                    .quantity-area {
                      position: absolute;
                      top: -30px;
                      right: -60px;
                      opacity: 0;
                      transform: scaleY(0);
                      transform-origin: bottom;

                      @include lg-down-device() {
                        right: unset;
                        left: -60px;
                      }

                      .quantity {
                        display: flex;
                        gap: 5px;

                        a {
                          height: 24px;
                          width: 34px;
                          border-radius: 4px;
                          background: rgba(var(--primary-color-opc), 0.07);
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-size: 20px;
                          color: var(--title-color);
                          font-weight: 600;
                          cursor: pointer;
                          transition: 0.35s;

                          i {
                            color: var(--title-color);
                            transition: 0.35s;
                            line-height: 1;
                          }

                          &:hover {
                            background: var(--primary-color);
                            color: var(--white-color);

                            i {
                              color: var(--white-color);
                            }
                          }
                        }

                        input {
                          height: 24px;
                          width: 34px;
                          border-radius: 4px;
                          border: 1px solid var(--primary-color);
                          background-color: var(--white-color);
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-size: 14px;
                          color: var(--title-color);
                          font-weight: 500;
                          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-color);
                      }
                    }
                  }
                }
              }
            }

            @include md-down-device() {
              display: block;
              width: 100%;
              text-align: right;
              position: relative;
              padding: 15px;

              &::before {
                content: attr(data-label);
                position: absolute;
                left: 15px;
                color: var(--title-color);
                font-family: var(--font-inter);
                font-size: 18px;
                font-weight: 600;

                @include sm-down-device() {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }

    .details-button {
      position: relative;
      display: inline-block;
      vertical-align: top;
      line-height: 1.4;
      font-weight: 500;
      text-decoration: none;
      outline: none;
      padding: 0 1.375em .0625em 0;
      cursor: pointer;
      background-color: transparent;
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: var(--background-size, 100%) 0.0625em;
      transition: background-size 0.2s linear var(--background-delay, 0.15s);
      transform: translateZ(0);
      border: none;
      background-image: linear-gradient(0deg, var(--primary-color) 0%, var(--primary-color) 100%);
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 17px;
      font-weight: 500;
      white-space: nowrap;

      &::after {
        content: "\f123";
        font-family: "bootstrap-icons";
        display: block;
        position: absolute;
        right: 0;
        left: initial;
        top: 0;
        opacity: 1;
        -webkit-transition: opacity 0.3s 0.15s;
        transition: opacity 0.3s 0.15s;
        color: var(--primary-color);
      }

      svg {
        position: absolute;
        display: block;
        line-height: 1.8125em;
        width: 1.375em;
        height: 1.8125em;
        right: 0;
        left: initial;
        top: 50%;
        margin: -.92em 0 0;
        fill: none;
        stroke: var(--title-color);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1px;
        stroke-dasharray: 7.95 30;
        stroke-dashoffset: var(--stroke-dashoffset, 46);
        transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
      }

      &:hover {
        --background-size: 0%;
        --stroke-dashoffset: 26;
        --stroke-duration: .3s;
        --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
        --stroke-delay: .195s;
        color: var(--title-color);

        &::after {
          opacity: 0;
          transition-delay: 0s;
        }
      }
    }
  }

  .cart-order-sum-area {
    @include lg-up-device() {
      padding-left: 15px;
    }

    .order-summary-wrap {
      padding: 40px 30px;
      border: 1px solid var(--border-color);
      border-radius: 10px;

      @include lg-device() {
        padding: 40px 25px;
      }

      @include sm-down-device() {
        padding: 30px 20px;
      }

      .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 var(--border-color);
          }

          span {
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            display: inline-block;
          }

          .order-info {
            text-align: right;

            p {
              color: rgba(var(--title-color-opc), 0.6);
              font-family: var(--font-inter);
              font-size: 16px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 5px;
            }

            strong {
              color: var(--title-color);
              font-family: var(--font-inter);
              font-size: 16px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 0;
            }
          }

          .coupon-area {
            width: 100%;
            margin-bottom: 10px;

            span {
              margin-bottom: 15px;
            }

            .form-inner {
              position: relative;

              input {
                width: 100%;
                height: 45px;
                padding: 10px 100px 10px 20px;
                border-radius: 5px;

                &::placeholder {
                  color: rgba(var(--title-color-opc), .5);
                }

                &:focus {
                  border-color: #eee;
                }
              }

              .apply-btn {
                padding: 13px 23px;
                border-radius: 0 5px 5px 0;
                background-color: var(--primary-color);
                border: 1px solid var(--primary-color);
                color: var(--white-color);
                font-family: var(--font-syne);
                font-size: 17px;
                font-weight: 500;
                letter-spacing: 0.48px;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: 0.5s;
                overflow: hidden;
                z-index: 1;
                white-space: nowrap;
                position: absolute;
                top: 0;
                right: 0;

                &::after {
                  position: absolute;
                  content: "";
                  display: block;
                  left: 15%;
                  right: -20%;
                  top: -4%;
                  height: 150%;
                  width: 150%;
                  bottom: 0;
                  border-radius: 2px;
                  background-color: var(--white-color);
                  transform: skewX(45deg) scale(0, 1);
                  z-index: -1;
                  transition: all 0.5s ease-out 0s;
                }

                &:hover {
                  color: var(--title-color);

                  &::after {
                    transform: skewX(45deg) scale(1, 1);
                  }
                }
              }
            }
          }

          &:last-child {
            margin-bottom: 40px;

            span {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }

      >.primary-btn2 {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 18px 25px;
      }
    }
  }
}

/*=====================================
 87. Checkout Page 
========================================*/
.checkout-page {
  .checkout-form-wrapper {
    .checkout-form-title {
      margin-bottom: 30px;

      h4 {
        margin-bottom: 0;
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 30px;
        font-weight: 500;

        @include md-down-device() {
          font-size: 26px;
        }
      }
    }

    .checkout-form {
      border-radius: 10px;
      border: 1px solid var(--border-color);
      padding: 45px 35px 50px;

      @include md-down-device() {
        padding: 45px 20px 50px;
      }
    }
  }

  .cart-menu {
    min-height: 10rem;
    z-index: 99;
    transform-origin: top;
  }

  .cart-body {
    ul {
      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;

                @include md-down-device() {
                  // height: unset;
                  object-fit: cover;
                }
              }
            }

            .content-and-quantity {
              width: 100%;
            }

            .content {
              line-height: 1;
              margin-bottom: 10px;

              span {
                font-family: var(--font-inter);
                font-weight: 600;
                font-size: 14px;
                color: var(--paragraph-color);
                display: inline-block;
              }

              h6 {
                margin-bottom: 0;
                line-height: 1;

                a {
                  font-family: var(--font-inter);
                  font-weight: 600;
                  font-size: 16px;
                  line-height: 1.5;
                  color: var(--title-color);
                  transition: 0.5s;

                  @include md-down-device() {
                    font-size: 14px;
                  }

                  &:hover {
                    color: var(--primary-color);
                  }
                }
              }
            }
          }
        }

        .quantity-area {
          .quantity {
            display: flex;
            gap: 5px;

            a {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              background: rgba(var(--primary-color-opc), 0.07);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              color: var(--title-color);
              font-weight: 600;
              cursor: pointer;
              transition: 0.35s;

              i {
                color: var(--title-color);
                transition: 0.35s;
              }

              &:hover {
                background: var(--primary-color);
                color: var(--white-color);

                i {
                  color: var(--white-color);
                }
              }
            }

            input {
              height: 24px;
              width: 34px;
              border-radius: 4px;
              border: 1px solid var(--border-color);
              background-color: var(--white-color);
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: var(--font-inter);
              font-size: 14px;
              color: var(--title-color);
              font-weight: 600;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .cart-footer {
    justify-content: flex-start;
    padding: 0;
    border-top: 1px solid var(--border-color);

    .pricing-area {
      width: 100%;

      ul {
        margin: 0;
        list-style: none;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        padding: 10px 0px 10px;

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 30px;
        }

        li {
          font-family: var(--font-inter);
          font-weight: 600;
          font-size: 16px;
          color: var(--title-color);
          display: flex;
          justify-content: space-between;
          width: 100%;
        }

        &.total {
          li {
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }

    .primary-btn2 {
      width: 100%;
      justify-content: center;
    }
  }

  .choose-payment-method {
    margin-bottom: 40px;
    line-height: 1;

    h6 {
      margin-bottom: 10px;
      color: var(--title-color);
      font-family: var(--font-inter);
      font-size: 17px;
      font-weight: 600;
    }

    .payment-option {
      line-height: 1;

      ul {
        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: 1px solid var(--border-color);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;

          .checked {
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            background: #D2E7EF;
            clip-path: polygon(0 0, 0% 100%, 100% 0);
            border-top-left-radius: 5px;

            i {
              opacity: 0;
              color: var(--white-color);
              margin-left: 2px;
            }
          }

          &.active {
            .checked {
              background: var(--primary-color);

              i {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 88. Brand Page 
========================================*/
.brand-page {
  .logo-wrap {
    border: 0.5px solid rgba(var(--primary-color-opc), 0.1);

    .single-logo {
      padding: 35px 10px;
      border: 0.5px solid rgba(var(--primary-color-opc), 0.1);
      display: flex;
      align-items: center;
      justify-content: center;

      @include lg-device() {
        padding: 25px 10px;
      }

      @include md-down-device() {
        padding: 20px 10px;
      }

      img {
        @include lg-device() {
          width: 95px;
        }

        @include sm-device() {
          width: 85px;
        }

        @include sm-down-device() {
          width: 95px;
        }
      }
    }
  }
}

/*=====================================
 89. Project Details Page 
========================================*/
.project-details-page {
  .project-details-thumb {
    img {
      @include md-down-device() {
        min-height: 300px;
        object-fit: cover;
      }
    }
  }

  .project-details-sidebar {
    position: sticky;
    top: 110px;

    .project-info-wrap {
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      background: #FAF9F9;
      padding: 35px 30px;

      @include xxl-down-device() {
        padding: 35px 25px;
      }

      @include lg-device() {
        padding: 30px 20px;
      }

      .project-info {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          display: flex;
          align-items: center;
          gap: 20px;
          border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
          padding-bottom: 25px;
          margin-bottom: 30px;

          @include lg-device() {
            padding-bottom: 20px;
            margin-bottom: 25px;
          }

          &:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
          }

          .icon {
            svg {
              fill: rgba(var(--title-color-opc), 0.3);
            }
          }

          .content {
            line-height: 1;

            span {
              color: rgba(var(--title-color-opc), 0.5);
              font-family: var(--font-inter);
              font-size: 15px;
              font-weight: 400;
              line-height: 1;
              display: inline-block;
              margin-bottom: 10px;
            }

            h5 {
              color: var(--title-color);
              font-family: var(--font-kanit);
              font-size: 20px;
              font-weight: 400;
              line-height: 1.2;
              margin-bottom: 0;

              @include xl-down-device() {
                font-size: 18px;
              }
            }
          }
        }
      }
    }

    .sidebar-banner {
      position: relative;

      img {
        @include lg-device() {
          min-height: 420px;
          object-fit: cover;
        }
      }

      .banner-content-wrap {
        background: linear-gradient(189.54deg, rgba(0, 0, 0, 0.1) 6.82%, rgba(0, 0, 0, 0.9) 78.76%, rgba(0, 0, 0, 0.9) 91.39%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: end;
        padding: 35px;

        @include xxl-down-device() {
          padding: 35px 25px;
        }

        @include lg-device() {
          padding: 35px 20px;
        }

        @include md-device() {
          padding: 50px 40px;
        }

        h2 {
          color: var(--white-color);
          font-family: var(--font-kanit);
          font-size: 42px;
          font-weight: 600;
          line-height: 1.2;
          letter-spacing: 0.01em;
          max-width: 280px;
          width: 100%;
          margin-bottom: 25px;

          @include xl-down-device() {
            font-size: 35px;
          }

          @include md-device() {
            font-size: 50px;
            max-width: 400px;
          }

          @include sm-device() {
            font-size: 45px;
            max-width: 400px;
          }

          span {
            color: var(--primary-color2);
            font-weight: 500;
          }
        }

        .primary-btn2 {
          padding: 17px 27px;

          span {
            font-size: 16px;
          }

          @include sm-down-device() {
            font-size: 17px;
            padding: 15px 28px;
          }
        }
      }
    }
  }

  .details-navigation {
    padding: 35px 0;
    border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
    border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;

    @include lg-down-device() {
      gap: 40px;
    }

    .single-navigation {
      display: flex;
      align-items: center;
      gap: 50px;

      @include sm-down-device() {
        gap: 35px;
      }

      .nav-btn {
        svg {
          fill: var(--primary-color2);
          transition: 0.5s;
        }

        color: var(--primary-color2);
        font-family: var(--font-kanit);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        text-decoration: underline;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        transition: 0.5s;

        &:hover {
          color: var(--primary-color);

          svg {
            transform: rotate(-30deg);
            fill: var(--primary-color);
          }
        }
      }

      .content {
        h6 {
          margin-bottom: 0;
          position: relative;
          max-width: 290px;
          width: 100%;

          a {
            color: var(--paragraph-color);
            font-family: var(--font-kanit);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            transition: 0.5s;

            @include sm-down-device() {
              font-size: 15px;
            }

            &:hover {
              color: var(--title-color);
            }
          }

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -25px;
            background: linear-gradient(88.68deg, rgba(255, 139, 74, 0.2) 1.26%, rgba(255, 139, 74, 0.133683) 17.47%, rgba(255, 139, 74, 0.0724742) 34.48%, rgba(255, 139, 74, 0.03) 55.7%);
            width: 44px;
            height: 84px;
            border-radius: 10px 0 0 10px;

            @include lg-down-device() {
              height: 74px;
              width: 35px;
              left: -20px;
            }
          }
        }
      }

      &.two {
        .nav-btn {
          &:hover {
            svg {
              transform: rotate(30deg);
            }
          }
        }

        .content {
          h6 {
            text-align: end;

            &::before {
              left: unset;
              right: -25px;
              background: linear-gradient(-88.68deg, rgba(255, 139, 74, 0.2) 1.26%, rgba(255, 139, 74, 0.133683) 17.47%, rgba(255, 139, 74, 0.0724742) 34.48%, rgba(255, 139, 74, 0.03) 55.7%);
              border-radius: 0 10px 10px 0;

              @include lg-down-device() {
                right: -20px;
              }
            }
          }
        }
      }
    }
  }
}

/*=====================================
 90. Service Details Page 
========================================*/
.service-details-page {
  .service-details-thumb {
    img {
      @include md-down-device() {
        min-height: 300px;
        object-fit: cover;
      }

      @include sm-down-device() {
        object-position: 70%;
      }
    }
  }

  .title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;

    h2 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 60px;
      font-weight: 500;
      line-height: 1;
      margin-bottom: 0;

      @include xxl-down-device() {
        font-size: 55px;
      }

      @include xl-down-device() {
        font-size: 50px;
      }

      @include sm-down-device() {
        font-size: 45px;
      }

      span {
        color: rgba(var(--title-color-opc), 0.5);
        display: block;
        font-size: 55px;
        font-weight: 400;
        padding-left: 50px;

        @include xxl-down-device() {
          font-size: 50px;
        }

        @include xl-down-device() {
          font-size: 45px;
          padding-left: 40px;
        }

        @include sm-down-device() {
          font-size: 40px;
        }
      }
    }

    .tag-list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;

      li {
        color: var(--title-color);
        font-family: var(--font-kanit);
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.07em;
        padding: 7px 13px;
        border: 1px solid rgba(var(--primary-color-opc), 0.1);
        border-radius: 50px;
      }
    }
  }

  .details-content-wrapper {
    p {
      font-size: 16px;
    }
  }

  .service-details-faq-area {
    padding-left: 40px;
    position: sticky;
    top: 120px;

    @include xxl-down-device() {
      padding-left: 30px;
    }

    @include xl-down-device() {
      padding-left: 10px;
    }

    @include lg-down-device() {
      padding-left: 0;
    }
  }
}

/*=====================================
 91. Property Details Page 
========================================*/
.property-details-page {
  .property-details-img-grp {
    img {
      min-height: 230px;
      object-fit: cover;
      height: 100%;

      @include lg-down-device() {
        max-height: 490px;
        width: 100%;
      }

      @include sm-down-device() {
        min-height: 220px;
      }
    }

    .video-and-img-area {
      .video-area {
        position: sticky;
        top: 110px;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(var(--primary-color-opc), 0.3);
          border-radius: 0 0 50px 50px;
        }

        img {
          border-radius: 0 0 50px 50px;

          @include sm-down-device() {
            border-radius: 0 0 35px 35px;
          }
        }

        .play-btn {
          cursor: pointer;
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          .icon {
            position: relative;

            .video-circle {
              stroke: var(--white-color);
              fill: none;
              transition: 0.5s;

              .top-half {
                stroke-dasharray: 430;
                stroke-dashoffset: 320;
                transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
              }
            }

            .play-icon {
              fill: var(--white-color);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              margin-left: 2px;

              @include sm-down-device() {
                width: 20px;
              }
            }
          }

          &:hover {
            .icon {
              .video-circle {
                .top-half {
                  stroke-dashoffset: 0;
                }
              }
            }
          }
        }
      }

      .video-bottom-img {
        img {
          border-radius: 50px 50px 0 0;

          @include sm-down-device() {
            border-radius: 35px 35px 0 0;
          }
        }
      }
    }
  }

  .property-details-content-wrap {
    h2 {
      color: var(--title-color);
      font-family: var(--font-kanit);
      font-size: 35px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.03em;
      margin-bottom: 30px;

      @include xl-down-device() {
        font-size: 33px;
      }

      @include md-down-device() {
        font-size: 30px;
        margin-bottom: 25px;
      }

      @include sm-down-device() {
        font-size: 27px;
      }
    }

    .title-and-pricing-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(var(--primary-color-opc), 0.08);

      @include lg-down-device() {
        padding-bottom: 40px;
      }

      @include md-down-device() {
        padding-bottom: 30px;
      }

      @include sm-down-device() {
        flex-wrap: wrap;
        gap: 25px;
        padding-bottom: 25px;
      }

      .title-area {
        >span {
          color: var(--primary-color2);
          font-family: var(--font-kanit);
          font-size: 12px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          padding: 4px 19px;
          background-color: rgba(var(--primary-color2-opc), 0.1);
          border: 1px solid rgba(var(--primary-color-opc), 0.1);
          display: inline-block;
          margin-bottom: 8px;
        }

        h2 {
          @include xl-down-device() {
            margin-bottom: 25px;
          }

          @include md-down-device() {
            margin-bottom: 20px;
          }

          @include sm-down-device() {
            margin-bottom: 15px;
          }
        }
      }

      .address-area {
        display: flex;
        align-items: center;
        gap: 12px;

        .icon {
          svg {
            fill: none;
            stroke: var(--title-color);
          }
        }

        .content {
          span {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 5px;
          }

          a {
            color: var(--paragraph-color);
            font-family: var(--font-kanit);
            font-size: 17px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.04em;
            transition: 0.5s;

            &:hover {
              color: var(--primary-color2);
            }
          }
        }
      }

      .price {
        h4 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 25px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: 0.03em;
          margin-bottom: 0;

          @include sm-down-device() {
            font-size: 22px;
          }
        }
      }
    }

    .property-details-table {
      // border: 0.5px solid rgba( var(--primary-color-opc), 0.08);
      box-shadow: 0 0 0 0.5px rgba(var(--primary-color-opc), 0.08);

      .single-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 28px 30px;
        // border: 0.5px solid rgba( var(--primary-color-opc), 0.08);
        box-shadow: 0 0 0 0.5px rgba(var(--primary-color-opc), 0.08);
        min-height: 82px;

        @include xxl-down-device() {
          padding: 28px 25px;
        }

        @include lg-device() {
          padding: 22px 15px;
        }

        @include lg-down-device() {
          padding: 20px 20px;
        }

        @include sm-down-device() {
          padding: 20px 15px;
        }

        .title {
          display: flex;
          align-items: center;
          gap: 8px;
          max-width: 150px;
          width: 100%;

          @include lg-device() {
            max-width: 125px;
            min-width: 125px;
            gap: 5px;
          }

          @include sm-down-device() {
            max-width: 135px;
            min-width: 135px;
            gap: 5px;
          }

          svg {
            fill: var(--title-color);
            min-width: 22px;

            @include lg-device() {
              min-width: 18px;
            }

            @include sm-down-device() {
              min-width: 18px;
            }
          }

          h6 {
            color: var(--title-color);
            font-family: var(--font-inter);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            margin-bottom: 0;

            @include xl-device() {
              font-size: 14px;
            }

            @include lg-device() {
              font-size: 13px;
            }

            @include md-device() {
              font-size: 14px;
            }

            @include sm-down-device() {
              font-size: 14px;
            }
          }
        }

        svg {
          fill: rgba(var(--primary-color2-opc), 0.2);
          min-width: 43px;

          @include lg-device() {
            min-width: 40px;
          }

          @include sm-down-device() {
            min-width: 40px;
          }
        }

        span {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 500;
          line-height: 1;
          text-align: end;
          max-width: 105px;
          width: 100%;

          @include xl-device() {
            font-size: 14px;
          }

          @include lg-device() {
            font-size: 13px;
          }

          @include md-device() {
            font-size: 14px;
          }

          @include sm-down-device() {
            font-size: 14px;
          }
        }
      }
    }

    .description-area {
      p {
        color: var(--paragraph-color);
        font-family: var(--font-inter);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 30px;

        &:last-child {
          margin-bottom: 0;
        }

        @include sm-down-device() {
          font-size: 15px;
          margin-bottom: 20px;
        }
      }
    }

    .nav-and-tab-area {
      .nav-tabs {
        border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
        gap: 65px;
        margin-bottom: 35px;

        @include lg-down-device() {
          gap: 50px;
        }

        @include md-down-device() {
          gap: 30px;
        }

        @include sm-down-device() {
          margin-bottom: 30px;
        }

        .nav-link {
          color: var(--title-color);
          font-family: var(--font-inter);
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0.36px;
          text-transform: capitalize;
          display: flex;
          align-items: center;
          gap: 10px;
          border: none;
          padding: 0;
          padding-bottom: 15px;
          background: linear-gradient(to bottom, rgba(var(--primary-color2-opc), 1) 0%, rgba(var(--primary-color2-opc), 1) 98%);
          background-size: 0px 1px;
          background-repeat: no-repeat;
          background-position: right 100%;
          transition: background-size .75s;

          svg {
            fill: var(--title-color);
          }

          &.active {
            color: var(--primary-color2);
            background-size: 100% 1px;
            background-position: 0% 100%;

            svg {
              fill: var(--primary-color2);
            }
          }
        }
      }

      .tab-content {
        .video-area {
          position: sticky;
          top: 110px;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--primary-color-opc), 0.3);
          }

          .play-btn {
            cursor: pointer;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .icon {
              position: relative;

              .video-circle {
                stroke: var(--white-color);
                fill: none;
                transition: 0.5s;

                .top-half {
                  stroke-dasharray: 430;
                  stroke-dashoffset: 320;
                  transition: stroke-dashoffset .8s cubic-bezier(.33, 1, .68, 1);
                }
              }

              .play-icon {
                fill: var(--white-color);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                margin-left: 2px;

                @include sm-down-device() {
                  width: 20px;
                }
              }
            }

            &:hover {
              .icon {
                .video-circle {
                  .top-half {
                    stroke-dashoffset: 0;
                  }
                }
              }
            }
          }
        }

        img {
          @include sm-down-device() {
            min-height: 250px;
            object-fit: cover;
          }
        }
      }
    }

    .attachment-area {
      .attachment-list {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 60px;

        @include xl-down-device() {
          gap: 50px;
        }

        @include md-down-device() {
          gap: 30px;
        }

        @include sm-down-device() {
          flex-wrap: wrap;
          gap: 20px;
        }

        .single-attachment {
          padding: 22px 30px;
          max-width: 312px;
          width: 100%;
          border: 1px solid rgba(var(--primary-color-opc), 0.1);

          @include xl-down-device() {
            padding: 18px 25px;
          }

          @include md-down-device() {
            padding: 18px 20px;
          }

          a {
            display: inline-flex;
            align-items: center;
            gap: 15px;

            .content {
              h6 {
                color: var(--title-color);
                font-family: var(--font-inter);
                font-size: 20px;
                font-weight: 500;
                line-height: 1;
                margin-bottom: 0;

                @include md-down-device() {
                  font-size: 18px;
                }

                span {
                  color: rgba(var(--title-color-opc), 0.5);
                  font-family: var(--font-inter);
                  font-size: 15px;
                  font-weight: 500;
                  line-height: 1;
                  letter-spacing: 0.03em;
                  display: block;
                  margin-top: 5px;
                }
              }

              span {
                color: rgba(var(--title-color-opc), 0.5);
                font-family: var(--font-inter);
                font-size: 15px;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.03em;
              }
            }
          }
        }
      }
    }
  }

  .property-details-sidebar {
    .profile-area {
      padding: 30px;
      border: 1px solid rgba(var(--primary-color-opc), 0.1);
      background-color: #FEFAF7;
      border-radius: 20px;

      @include xl-down-device() {
        padding: 30px 20px;
      }

      .profile-img {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        margin: 0 auto;

        img {
          width: 130px;
          height: 130px;
          border-radius: 50%;
        }
      }

      .name-and-designation {
        padding-top: 25px;
        margin-bottom: 30px;
        text-align: center;

        h4 {
          color: var(--title-color);
          font-family: var(--font-kanit);
          font-size: 28px;
          font-weight: 400;
          line-height: 1.3;
          letter-spacing: 0.03em;
          margin-bottom: 8px;

          @include lg-device() {
            font-size: 25px;
          }

          @include sm-down-device() {
            font-size: 25px;
          }
        }

        span {
          color: rgba(var(--title-color-opc), 0.5);
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 400;
          line-height: 1.3;
        }
      }

      .contact-area {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 30px;

        .icon {
          svg {
            fill: var(--title-color);
          }
        }

        .content {
          span {
            color: var(--title-color);
            font-family: var(--font-kanit);
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 5px;
            display: block;
          }

          a {
            color: var(--paragraph-color);
            font-family: var(--font-kanit);
            font-size: 17px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.04em;
            transition: 0.5s;

            &:hover {
              color: var(--primary-color2);
            }
          }
        }
      }

      .primary-btn2 {
        display: flex;
        justify-content: center;
        background-color: rgba(var(--primary-color2-opc), 0.15);
        border-radius: 15px;
        padding: 22px 33px;

        @include sm-down-device() {
          border-radius: 10px;
        }

        span {
          background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
          color: var(--title-color);

          &::after {
            color: var(--title-color);
          }

          svg {
            fill: none;
            stroke: var(--title-color);
          }
        }
      }
    }

    .sidebar-contact-form {
      padding: 45px 30px;
      border: 1px solid rgba(var(--primary-color-opc), 0.05);
      background-color: #FAF8FB;
      border-radius: 20px;

      @include xl-device() {
        padding: 40px 25px;
      }

      @include lg-device() {
        padding: 40px 20px;
      }

      @include sm-down-device() {
        padding: 40px 20px;
      }

      .form-inner {

        input,
        textarea {
          background-color: var(--white-color);
          border-color: rgba(var(--primary-color-opc), 0.1);

          &:focus {
            border-color: var(--primary-color2);
          }
        }
      }

      .form-inner2 {
        margin-top: 15px;
      }

      .primary-btn2 {
        margin-top: 40px;
        border-radius: 5px;
        padding: 16px 26px;

        @include sm-down-device() {
          margin-top: 35px;
        }
      }
    }
  }
}

.home2-testimonial-section .testimonial-slider-area .contact-btn-area img {
  max-width: 300px;
}

.home2-property-banner-section .indivisual-item-list .single-item img {
  max-width: 48px;
}

.home2-testimonial-section .testimonial-left-content .rating-area>li .single-rating .rating {
  line-height: 1;
  margin-top: -1px;
}

.home2-testimonial-section .testimonial-left-content .rating-area>li .single-rating .rating ul.tripadvisor {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 9px;
  line-height: 1;
}

.home2-testimonial-section .testimonial-left-content .rating-area>li .single-rating .rating ul.tripadvisor li {
  list-style: none;
}

.home2-testimonial-section .testimonial-left-content .rating-area>li .single-rating .rating ul.tripadvisor li i {
  color: #FFC107;
  font-size: 12px;
  list-style: none;
}



.home6-testimonial-section .testimonial-content-wrap .rating-area>li .single-rating .rating {
  line-height: 1;
  margin-top: -1px;
}

.home6-testimonial-section .testimonial-content-wrap .rating-area>li .single-rating .rating ul.tripadvisor {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 9px;
  line-height: 1;
}

.home6-testimonial-section .testimonial-content-wrap .rating-area>li .single-rating .rating ul.tripadvisor li {
  list-style: none;
}

.home6-testimonial-section .testimonial-content-wrap .rating-area>li .single-rating .rating ul.tripadvisor li i {
  color: #FFC107;
  font-size: 12px;
  list-style: none;
}

.home1-testimonial-section .testimonial-slider-area .contact-btn-area img {
  max-width: 150px;
}

.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area img {
  max-width: 150px;
}

.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li .dropdown-icon2 i {
  color: var(--title-color);
}

.sidebar-menu .sidebar-menu-wrap .main-menu>li .sub-menu li>.dropdown-icon2 {
  top: -5px;
  background: transparent;
  display: none;
}

.sidebar-menu .sidebar-menu-wrap .main-menu>li .sub-menu li.menu-item-has-children>.dropdown-icon2 {
  display: flex;
}

.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li.menu-item-has-children .dropdown-icon2 i {
  opacity: 1;
}

.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li .dropdown-icon2 i {
  opacity: 0;
}

.sidebar-menu .sidebar-menu-wrap .main-menu li.menu-item-has-children .dropdown-icon2 i {
  opacity: 1;
}

.sidebar-menu .sidebar-menu-wrap .main-menu li .dropdown-icon2 i {
  opacity: 0;
}

.sidebar-menu .sidebar-menu-wrap .main-menu li.menu-item-has-children .dropdown-icon2 {
  opacity: 1;
}

.sidebar-menu .sidebar-menu-wrap .main-menu li .dropdown-icon2 {
  opacity: 0;
}

.sidebar-menu .sidebar-menu-wrap .main-menu>li .sub-menu .dropdown-icon2 {
  height: unset;
  width: unset;
  background-color: transparent;
  top: -7px;
}

body.header_six {
  padding-left: 90px;
}

@media (max-width: 575px) {

  /* Adjust the breakpoint as needed */
  body.header_six {
    padding-left: 0px;
  }
}


.project-info-flow-page .project-info-flow-card a img {
  min-height: 453px;
  object-fit: cover;
}

.properties-page .property-img-wrap a img {
  max-height: 327px;
}

.project-masonary-page .project-card3 img {
  width: 100%;
  max-height: unset;
  height: 100%;

}

// Ajax Loading CSS 
.loading {
  position: relative;
  opacity: 0.5;

  &::before {
    position: absolute;
    content: "";
    top: 20%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    margin-left: -20px;
    border-radius: 50%;
    border: 5px solid #ccc;
    box-sizing: border-box;
    border-top-color: #000;
    animation: spin 1s linear infinite;
    z-index: 2;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}