@charset "UTF-8";
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
@import url(./../../assets/css/bootstrap-select.min.css);
:root {
  --black: #000000;
  --white: #ffffff;
  --primary: #1A79FF;
  --white-2: #FFFFFFB3;
  /* Text */
  --text: #A6A6A6;
  --text-2: #F9F9F9;
  --text-3: #808080;
  --text-4: #CCCCCC;
  --text-5: #666666;
  --text-6: #7E8695;
  --text-7: #9DA5B4;
  --text-8: #666666CC;
  --text-9: #999999;
  --text-10: #001533;
  --text-11: #E6E6E6B2;
  --text-12: #001634;
  --text-13: #4D4D4D;
  --text-14: #1A1A1A;
  --text-15: #6B7280;
  --text-16: #FFFFFF29;
  --text-17: #00000099;
  --text-18: #000000E5;
  --text-19: #282828;
  --text-20: #FFFDF7CC;
  --text-21: #5F697C;
  --text-22: #020202;
  --text-23: #BBC1CE;
  /* Border */
  --line: #333333;
  --line-2: #E5F0FF0D;
  --line-3: #494949;
  --line-4: #2B303B;
  --line-5: #11111180;
  --line-6: #2E2E2E;
  --line-7: #DDDDDD;
  --line-8: #FFFFFF33;
  --line-9: #E3E3E3;
  --line-10: #BBBBBB;
  --line-11: #0000001A;
  --line-12: #C7C4BC;
  --line-13: #D9D9D9;
  --line-14: #E9F6DC33;
  --line-15: #FFFFFF4D;
  --line-16: #CEDEEF;
  --line-17: #DAE8F5;
  /* Background */
  --bg: #0C0C0C;
  --bg-2: #333333;
  --bg-3: #171717;
  --bg-4: #474E5C;
  --bg-5: #1F1F1F;
  --bg-6: #111111;
  --bg-7: #262626;
  --bg-8: #20334D;
  --bg-9: #1A1A1ACC;
  --bg-10: #F5F5F5;
  --bg-11: #FDFDFD;
  --bg-12: #FFFFFF99;
  --bg-13: #E9E9E9;
  --bg-14: #FFFFFF1A;
  --bg-15: #1F2021;
  --bg-16: #F9F5EB;
  --bg-17: #151515;
  --bg-18: #E0DBCF;
  --bg-19: #4F3D35;
  --bg-20: #0000004D;
  --bg-21: #0D0D0D;
  --bg-22: #141414;
  --bg-23: #FFFFFF26;
  --bg-24: #C4C0B6B2;
  --bg-25: #1D7363;
  --bg-26: #F3F3F3;
  --bg-27: #E6E6E6;
  --bg-28: #222222;
  --bg-29: #FBFBFB;
  --bg-30: #272727;
  --bg-31: #EEEEEED1;
  --bg-32: #FAFAFA;
  --bg-33: #252525;
  /* Orther */
  --down-color: #FC3F43;
  --color-1: #FF0000;
  --color-2: #FFFFFF80;
  --color-3: #0160A0;
  --gray-10: #EEEEEE;
  --gray-20: #DDDDDD;
  --gray-30: #BBBBBB;
  --gray-40: #999999;
  --gray-50: #707070;
  --gray-60: #666666;
  --gray-70: #494949;
  --gray-80: #333333;
  --gray-90: #111111;
  --gray-100: #E7E9E9;
  --gray-200: #C9CFCF;
  --gray-300: #B7BEBE;
  --gray-400: #A1AAAA;
  --gray-500: #899494;
  --gray-600: #6F7B7B;
  --gray-700: #525B5B;
  --gray-800: #303636;
  --gray-900: #181B1B;
  --surface: #F2F2F2;
  --surface-2: #F0EEE8;
  --surface-3: #EFEFEF;
  --dark-90: #151515;
  --white-3: rgba(255, 255, 255, 0.03);
  --white-4: rgba(255, 255, 255, 0.04);
  --white-7: rgba(255, 255, 255, 0.07);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-20: #FFFFFF33;
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: #FFFFFFB2;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  --black-6: rgba(0, 0, 0, 0.06);
  --black-8: rgba(0, 0, 0, 0.08);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-12: rgba(0, 0, 0, 0.12);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-90: rgba(0, 0, 0, 0.9);
  --success: #2A9C00;
  --light-green: #E9F6DC;
  --light-beige: #FFFDF7;
  --beige: #F0EEE8;
  --yellow: #F69401;
  --orange: #FF5700;
  --shadow: 0px 3px 8px 0px #0000001A,
      0px 6px 14px 0px #0000000D,
      0px 31px 19px 0px #0000000D,
      0px 55px 22px 0px #00000003,
      0px 87px 24px 0px #00000000,
      0px 2px 0px 0px #DADADA;
}

.body-landing {
  --primary: var(--orange);
}

/*------------ Core CSS ------------ */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Elements
-------------------------------------------------------------- */
html {
  margin-right: 0 !important;
  scroll-behavior: smooth;
}

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

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  background-color: var(--white);
}
body::-webkit-scrollbar {
  width: 4px;
}
body::-webkit-scrollbar-thumb {
  cursor: grab;
  background-color: var(--primary);
}
body.demo-camping {
  background-color: var(--bg-16);
}
body.demo-lunex {
  background-color: var(--bg);
}
body.demo-agency {
  font-family: "Inter Tight", sans-serif;
}
body.body-landing {
  background-color: var(--surface-3);
}

img {
  max-width: 100%;
  height: auto;
  transform: scale(1);
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ul,
li {
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

table {
  width: 100%;
  overflow-x: auto;
  table-layout: auto;
  border-collapse: collapse;
}

td,
th {
  padding: 12px 16px;
}
@media (min-width: 1200px) {
  td,
  th {
    padding: 16px 24px;
  }
}

svg path {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

button {
  background: transparent;
  border: 0;
  display: inline-flex;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

select,
option {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder {
  color: var(--secondary-2);
}

b,
strong {
  font-weight: bolder;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-stroke-white {
  -webkit-text-stroke: 2px var(--white);
  color: transparent;
}

.text-normal {
  text-transform: none !important;
}

.text-purple {
  color: var(--bg-4) !important;
}

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  color: var(--text);
}
a:focus, a:hover {
  outline: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

[data-grid=grid-1] {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

[data-grid=grid-2] {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr;
}

[data-grid=grid-3] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

[data-grid=grid-4] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}

[data-grid=grid-5] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(5, 1fr);
}

[data-grid=grid-6] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(6, 1fr);
}

[data-grid=grid-7] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(7, 1fr);
}

.grid-template-columns-2 {
  grid-template-columns: 1fr 1fr;
}

.tf-row-flex {
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  row-gap: 30px;
}

#scroll-top {
  position: fixed;
  display: block;
  width: 48px;
  height: 48px;
  line-height: 50px;
  border-radius: 4px;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  background-color: var(--main);
  border: 0;
  bottom: 92px;
  right: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#scroll-top.show {
  opacity: 1;
  visibility: visible;
}
#scroll-top.type-1 {
  bottom: 140px;
}
#scroll-top:hover {
  transform: translateY(-5px);
  background-color: var(--primary);
}

/* Preload 
------------------------------------------- */
.preload-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99999999999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 3px solid transparent;
  border-top: 3px solid var(--primary);
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.br-line {
  width: 100%;
  height: 1px;
  display: inline-flex;
  background-color: var(--line);
}
.br-line.type-vertical {
  width: 1px;
  height: 16px;
}
.br-line.style-dashed {
  background-color: transparent;
  border: 1px dashed var(--line-8);
}
.br-line.h-24 {
  height: 24px;
}

.br-dot {
  display: flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--black);
}

.opacity-10 {
  opacity: 0.1 !important;
}

.simpleParallax {
  height: 100%;
  width: 100%;
}
.simpleParallax img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.backdrop-ft-unset {
  backdrop-filter: unset !important;
}

.tf-swiper .swiper-slide {
  height: auto;
}
.tf-swiper .swiper-slide > * {
  height: 100%;
}

.initial-child-container {
  flex: 0 0 auto;
  display: flex;
  min-width: auto;
  flex-direction: row;
  align-items: center;
}

.marquee-wrapper {
  display: flex;
  animation: infiniteScroll 7s linear infinite;
  align-items: center;
  transition: animation-duration 300ms;
}

.min-w-unset {
  min-width: unset !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.flex-1 {
  flex: 1;
}

@media (min-width: 1200px) {
  .flex-xl-1 {
    flex: 1 !important;
  }
}

@media (min-width: 576px) {
  .flex-sm-1 {
    flex: 1 !important;
  }
}

.h-unset {
  height: unset !important;
}

@media (min-width: 576px) {
  .h-sm-100 {
    height: 100% !important;
  }
}
@media (min-width: 1200px) {
  .gap-xl-64 {
    gap: 64px !important;
  }
  .gap-xl-40 {
    gap: 40px !important;
  }
  .h-xl-unset {
    height: unset !important;
  }
}
@media (min-width: 1440px) {
  .text-xxl-nowrap {
    white-space: nowrap !important;
  }
}
@media (min-width: 1600px) {
  .d-xxxl-flex {
    display: flex !important;
  }
}
.w-maxcontent {
  width: max-content !important;
}

[data-background] {
  background-size: cover;
  background-repeat: no-repeat;
}

.text-scale {
  white-space: pre-wrap;
  transform-origin: top left;
}

.tf-letter {
  display: inline-block;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
/* Typography
============================================================== */
/* Heading */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: 500;
  margin-bottom: 0;
  letter-spacing: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Poppins", sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: 0;
}

h1,
.h1 {
  font-size: clamp(48px, 6vw, 80px);
  line-height: clamp(56px, 6.5vw, 88px);
}

h2,
.h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: clamp(36px, 5.5vw, 72px);
}

h3,
.h3 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: clamp(44px, 5vw, 56px);
}

h4,
.h4 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: clamp(34px, 4vw, 52px);
}

h5,
.h5 {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: clamp(32px, 3.5vw, 48px);
}

h6,
.h6 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: clamp(24px, 3vw, 36px);
}

/* Text Design */
.text-sub-head {
  font-size: clamp(20px, 2vw, 24px);
  line-height: clamp(24px, 2.5vw, 30px);
}

.text-body-1 {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: clamp(22px, 2vw, 24px);
}

.text-body-2 {
  font-size: 18px;
  line-height: 24px;
}

.text-body-3 {
  font-size: 16px;
  line-height: 24px;
}

.text-body-4 {
  font-size: 14px;
  line-height: 20px;
}

.text-link {
  font-size: 14px;
  line-height: normal;
}

.text-caption {
  font-size: 12px;
  line-height: 16px;
}

.fw-4 {
  font-weight: 400 !important;
}

.fw-5 {
  font-weight: 500 !important;
}

.fw-6 {
  font-weight: 600 !important;
}

.fw-7 {
  font-weight: 700 !important;
}

.fw-8 {
  font-weight: 800 !important;
}

/* Font custom */
.font-main {
  font-family: "Poppins", sans-serif !important;
}

.font-anta {
  font-family: "Anta", sans-serif;
}

.font-barlow {
  font-family: "Barlow", sans-serif;
}

.font-inter {
  font-family: "Inter", sans-serif !important;
}

.font-inter_tight {
  font-family: "Inter Tight", sans-serif !important;
}

.font-instrument {
  font-family: "Instrument Serif", serif !important;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.font-red_hat {
  font-family: "Red Hat Display", sans-serif;
}

.font-cover_by {
  font-family: "Covered By Your Grace", cursive;
}

.font-geist {
  font-family: "Geist", sans-serif;
}

.text-32 {
  font-size: clamp(20px, 3vw, 32px);
  line-height: clamp(20px, 3vw, 32px);
}

.text-56 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: clamp(34px, 5vw, 56px);
}

.text-64 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: clamp(36px, 5vw, 64px);
}

.text-72 {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: clamp(36px, 5.5vw, 72px);
}

.text-80 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: clamp(48px, 6.6vw, 88px);
  letter-spacing: -0.03em !important;
}

.text-96 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: clamp(48px, 7vw, 96px);
}

.text-112 {
  font-size: clamp(42px, 9vw, 112px);
  line-height: clamp(42px, 9vw, 112px);
}

.text-125 {
  font-size: clamp(60px, 13vw, 180px);
  line-height: clamp(60px, 9vw, 125px);
  letter-spacing: -0.04em;
}

.text-128 {
  font-size: clamp(40px, 8vw, 128px);
  line-height: clamp(40px, 8vw, 128px);
}

.text-180 {
  font-size: clamp(56px, 10.97px + 12vw, 180px);
  line-height: clamp(48px, 9.23px + 10vw, 150px);
}

.text-132 {
  font-size: clamp(48px, 10vw, 132px);
  line-height: clamp(48px, 10vw, 132px);
}

.text-210 {
  font-size: clamp(50px, 15vw, 210px);
  line-height: clamp(60px, 12.5vw, 220px);
  letter-spacing: -0.04em;
}

.text-28-32 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: clamp(24px, 2.3vw, 32px);
}

.text-28-36 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: clamp(24px, 2.3vw, 36px);
}

.text-28-40 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: clamp(26px, 2.3vw, 40px);
}

.text-72-76 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: clamp(38px, 5.3vw, 76px);
}

.text-80-84 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: clamp(48px, 6.6vw, 84px);
}

/* Font size */
.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: clamp(20px, 1.8vw, 24px) !important;
}

.fs-32 {
  font-size: 32px;
}

.fs-35 {
  font-size: 35px;
}

.fs-36 {
  font-size: clamp(20px, 3vw, 36px);
}

.fs-52 {
  font-size: clamp(32px, 4vw, 52px);
}

.fs-72 {
  font-size: clamp(36px, 5vw, 72px);
}

.fs-76 {
  font-size: clamp(32px, 5vw, 76px);
}

/* Line height */
.lh-100per {
  line-height: 100%;
}

.lh-8 {
  line-height: 8px !important;
}

.lh-10 {
  line-height: 10px !important;
}

.lh-11 {
  line-height: 11px !important;
}

.lh-12 {
  line-height: 12px !important;
}

.lh-13 {
  line-height: 13px !important;
}

.lh-13 {
  line-height: 13px !important;
}

.lh-16 {
  line-height: 16px !important;
}

.lh-19 {
  line-height: 19px !important;
}

.lh-20 {
  line-height: 20px !important;
}

.lh-22 {
  line-height: 22px !important;
}

.lh-24 {
  line-height: 24px !important;
}

.lh-25 {
  line-height: 25px !important;
}

.lh-26 {
  line-height: 26px !important;
}

.lh-28 {
  line-height: clamp(25px, 2.2vw, 28px) !important;
}

.lh-30 {
  line-height: 30px !important;
}

.lh-32 {
  line-height: 32px !important;
}

.lh-34 {
  line-height: clamp(28px, 2.5vw, 34px) !important;
}

.lh-38 {
  line-height: clamp(28px, 4vw, 38px);
}

.lh-40 {
  line-height: clamp(28px, 4vw, 40px);
}

.lh-44 {
  line-height: clamp(28px, 4vw, 44px);
}

.lh-58 {
  line-height: clamp(40px, 4vw, 58px) !important;
}

.lh-59 {
  line-height: clamp(40px, 4vw, 59px);
}

.lh-76 {
  line-height: clamp(38px, 5.3vw, 76px);
}

.lh-96 {
  line-height: clamp(48px, 7vw, 96px);
}

/* Letter spacing */
.letter-space-0 {
  letter-spacing: 0 !important;
}

.letter-space-1 {
  letter-spacing: 0.01em !important;
}

.letter-space-2 {
  letter-spacing: 0.02em !important;
}

.letter-space-3 {
  letter-spacing: 0.03em !important;
}

.letter-space--1 {
  letter-spacing: -0.01em !important;
}

.letter-space--2 {
  letter-spacing: -0.02em !important;
}

.letter-space--3 {
  letter-spacing: -0.03em !important;
}

.letter-space--4 {
  letter-spacing: -0.04em !important;
}

.letter-space--5 {
  letter-spacing: -0.05em !important;
}

.letter-space--6 {
  letter-spacing: -0.06em !important;
}

/* Responsive */
@media (min-width: 1440px) {
  .lh-xxl-11 {
    line-height: 11px !important;
  }
  .lh-xxl-19 {
    line-height: 19px !important;
  }
  .lh-xxl-22 {
    line-height: 22px !important;
  }
  .lh-xxl-56 {
    line-height: 56px !important;
  }
  .lh-xxl-72 {
    line-height: 72px !important;
  }
}
@media (min-width: 1200px) {
  .fs-xl-20 {
    font-size: 20px !important;
  }
  .lh-xl-24 {
    line-height: 24px !important;
  }
  .lh-xl-54 {
    line-height: 54px !important;
  }
  .lh-xl-36 {
    line-height: 36px !important;
  }
}
@media (min-width: 992px) {
  .lh-lg-56 {
    line-height: 56px !important;
  }
}
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
/* General
============================================================== */
/* Margin */
.mb-2 {
  margin-bottom: 2px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mb-7 {
  margin-bottom: 7px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

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

.mb-14 {
  margin-bottom: 14px !important;
}

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

.mb-16 {
  margin-bottom: 16px !important;
}

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

.mb-24 {
  margin-bottom: 24px !important;
}

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

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-52 {
  margin-bottom: 52px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

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

.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}

/* Padding */
.pt-30 {
  padding-top: 30px;
}

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

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

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

/* Gap */
.gap-4 {
  gap: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-13 {
  gap: 13px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-28 {
  gap: 28px !important;
}

.gap-30 {
  gap: 30px;
}

.gap-40 {
  gap: 40px !important;
}

/* Spacing */
.flat-spacing {
  padding-top: 130px;
  padding-bottom: 130px;
}
@media (max-width: 1439px) {
  .flat-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-2 {
  padding-top: 128px;
  padding-bottom: 128px;
}
@media (max-width: 1439px) {
  .flat-spacing-2 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-3 {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 991px) {
  .flat-spacing-3 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-4 {
  padding-top: 160px;
  padding-bottom: 160px;
}
@media (max-width: 1439px) {
  .flat-spacing-4 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-4 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-5 {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 991px) {
  .flat-spacing-5 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-6 {
  padding-top: 160px;
  padding-bottom: 160px;
}
@media (max-width: 1439px) {
  .flat-spacing-6 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-6 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-7 {
  padding-top: 108px;
  padding-bottom: 108px;
}
@media (max-width: 1439px) {
  .flat-spacing-7 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-7 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-8 {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 1439px) {
  .flat-spacing-8 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-8 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-9 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.flat-spacing-10 {
  padding-top: 156px;
  padding-bottom: 156px;
}
@media (max-width: 1439px) {
  .flat-spacing-10 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-10 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-11 {
  padding-top: 152px;
  padding-bottom: 152px;
}
@media (max-width: 1439px) {
  .flat-spacing-11 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-11 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-12 {
  padding-top: 110px;
  padding-bottom: 110px;
}
@media (max-width: 1439px) {
  .flat-spacing-12 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-12 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-13 {
  padding-top: 116px;
  padding-bottom: 116px;
}
@media (max-width: 1439px) {
  .flat-spacing-13 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-13 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-14 {
  padding-top: 60px;
  padding-bottom: 80px;
}
@media (max-width: 1439px) {
  .flat-spacing-14 {
    padding-bottom: 60px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-14 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-15 {
  padding-top: 136px;
  padding-bottom: 136px;
}
@media (max-width: 1439px) {
  .flat-spacing-15 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing-15 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.flat-spacing-top {
  padding-top: 220px;
}
@media (max-width: 1199px) {
  .flat-spacing-top {
    padding-top: 120px;
  }
}

/* Orther */
.cl-1 {
  color: var(--color-1);
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.cl-text-main {
  color: var(--text) !important;
}

.cl-text-2 {
  color: var(--text-2) !important;
}

.cl-text-3 {
  color: var(--text-3) !important;
}

.cl-text-4 {
  color: var(--text-4) !important;
}

.cl-text-5 {
  color: var(--text-5) !important;
}

.cl-text-6 {
  color: var(--text-6) !important;
}

.cl-text-7 {
  color: var(--text-7) !important;
}

.cl-text-8 {
  color: var(--text-8) !important;
}

.cl-text-9 {
  color: var(--text-9) !important;
}

.cl-text-10 {
  color: var(--text-10) !important;
}

.cl-text-11 {
  color: var(--text-11) !important;
}

.cl-text-12 {
  color: var(--text-12) !important;
}

.cl-text-13 {
  color: var(--text-13) !important;
}

.cl-text-14 {
  color: var(--text-14) !important;
}

.cl-text-15 {
  color: var(--text-15) !important;
}

.cl-text-16 {
  color: var(--text-16) !important;
}

.cl-text-17 {
  color: var(--text-17) !important;
}

.cl-text-18 {
  color: var(--text-18) !important;
}

.cl-text-19 {
  color: var(--text-19) !important;
}

.cl-text-20 {
  color: var(--text-20) !important;
}

.cl-text-21 {
  color: var(--text-21) !important;
}

.cl-dark-90 {
  color: var(--dark-90) !important;
}

.text-gray-90 {
  color: var(--gray-90) !important;
}

.cl-gray-20 {
  color: var(--gray-20) !important;
}

.cl-gray-30 {
  color: var(--gray-30) !important;
}

.cl-gray-40 {
  color: var(--gray-40) !important;
}

.cl-gray-50 {
  color: #808080;
}

.cl-gray-60 {
  color: var(--gray-60);
}

.cl-gray-70 {
  color: var(--gray-70);
}

.cl-gray-90 {
  color: var(--gray-90);
}

.cl-gray-100 {
  color: var(--gray-100);
}

.cl-gray-400 {
  color: var(--gray-400);
}

.cl-gray-500 {
  color: var(--gray-500);
}

.cl-gray-600 {
  color: var(--gray-600);
}

.cl-gray-700 {
  color: var(--gray-700);
}

.cl-gray-800 {
  color: var(--gray-800);
}

.cl-gray-900 {
  color: var(--gray-900);
}

.cl-white-60 {
  color: var(--white-60);
}

.cl-white-70 {
  color: var(--white-70);
}

.cl-white-80 {
  color: var(--white-80);
}

.cl-white-90 {
  color: var(--white-90);
}

.cl-light-beige {
  color: var(--light-beige);
}

.cl-light-green {
  color: var(--light-green) !important;
}

.cl-black-10 {
  color: var(--black-10);
}

.cl-black-50 {
  color: var(--black-50);
}

.cl-black-60 {
  color: var(--black-60);
}

.cl-black-90 {
  color: var(--black-90);
}

.link {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link:hover {
  color: var(--primary) !important;
}

.link-2 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link-2:hover {
  color: var(--secondary) !important;
}

.link-black {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link-black:hover {
  color: var(--black) !important;
}

.link-white {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link-white:hover {
  color: var(--white) !important;
}

.link-underline {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.link-underline:hover {
  text-decoration-color: var(--primary);
}

.link-underline-white {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.link-underline-white:hover {
  text-decoration-color: var(--white);
}

.lt-sp-nor {
  letter-spacing: -0.32px;
}

.text-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.cs-pointer {
  cursor: pointer;
}

.cs-none {
  cursor: none;
}

.max-width_1 {
  max-width: 1424px;
  width: 100%;
}

.gap-x-10 {
  column-gap: 10px !important;
}

.gap-x-20 {
  column-gap: 20px !important;
}

.gap-x-24 {
  column-gap: 24px !important;
}

.radius-3 {
  border-radius: 3px !important;
}

.radius-5 {
  border-radius: 5px !important;
}

.radius-10 {
  border-radius: 10px !important;
}

.radius-12 {
  border-radius: 12px !important;
}

.radius-16 {
  border-radius: 16px !important;
}

.radius-20 {
  border-radius: 20px !important;
}

.radius-24 {
  border-radius: 24px !important;
}

.radius-28 {
  border-radius: 28px !important;
}

.radius-30 {
  border-radius: 30px !important;
}

.radius-60 {
  border-radius: 60px !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-white-2 {
  background-color: var(--bg-10);
}

.bg-white_20 {
  background-color: var(--white-20);
}

.bg-white_60 {
  background-color: var(--white-60) !important;
}

.bg-line-7 {
  background: var(--line-7);
}

.bg-linear {
  background: linear-gradient(180deg, #ffe6e6 0%, #ffecd3 100%);
}

.bg-20 {
  background-color: var(--bg-20);
}

.bg-28 {
  background-color: var(--bg-28) !important;
}

.bg-gray-20 {
  background-color: var(--gray-20);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-dark-90 {
  background: var(--dark-90);
}

.overflow-unset {
  overflow: unset !important;
}

.sticky-top {
  position: sticky !important;
  z-index: 50;
  top: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.wmax {
  width: max-content !important;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-auto {
  cursor: auto;
}

.z-1 {
  z-index: 1;
}

.z-3 {
  z-index: 3;
}

.z-5 {
  z-index: 5;
}

.pore-z10 {
  position: relative;
  z-index: 10;
}

.text-line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  overflow: hidden;
}

.text-line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.text-line-clamp-3 {
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.aspect-ratio-0 {
  aspect-ratio: 0 !important;
}

.aspect-ratio-1 {
  aspect-ratio: 1/1 !important;
}

.line-bt {
  border-bottom: 1px solid var(--line);
}

.bg-main {
  background: var(--bg);
}

.bg-surface {
  background: var(--surface);
}

.bg-surface-2 {
  background: var(--surface-2);
}

.bg-surface-3 {
  background: var(--surface-3);
}

.bg-black-10 {
  background-color: var(--black-10);
}

.bg-beige {
  background-color: var(--beige);
}

.bg-10 {
  background-color: var(--bg-10);
}

.fw-800 {
  font-weight: 800 !important;
}

.w-full {
  width: 100%;
  max-width: 100%;
}

.overlay-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*-- Responsive --*/
@media (min-width: 426px) {
  .d-ssm-inline-flex {
    display: inline-flex !important;
  }
  .d-ssm-block {
    display: block !important;
  }
}
@media (min-width: 576px) {
  .gap-sm-24 {
    gap: 24px !important;
  }
}
@media (min-width: 992px) {
  .h-lg-100 {
    height: 100% !important;
  }
}
@media (min-width: 1200px) {
  .gap-xl-20 {
    gap: 20px !important;
  }
  .row-gap-xl-32 {
    row-gap: 32px !important;
  }
  .mt-xl-20 {
    margin-top: 20px !important;
  }
}
@media (min-width: 1440px) {
  .h-xxl-60 {
    height: 60px !important;
  }
}
@media (max-width: 1199px) {
  .xl-hide {
    display: none !important;
  }
}
@media (max-width: 991px) {
  .lg-hide {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .md-mb-20 {
    margin-bottom: 20px;
  }
  .md-hide {
    display: none !important;
  }
}
@media (max-width: 575px) {
  .sm-hide {
    display: none !important;
  }
}
/*------------ Component ------------ */
/* ------------ Layout ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-grid-layout {
  display: grid;
  column-gap: 24px;
  row-gap: 32px;
}
.tf-grid-layout.tf-col-2 {
  grid-template-columns: 1fr 1fr;
}
.tf-grid-layout.tf-col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.tf-grid-layout.tf-col-4 {
  grid-template-columns: repeat(4, 1fr);
}
.tf-grid-layout.tf-col-5 {
  grid-template-columns: repeat(5, 1fr);
}
.tf-grid-layout.tf-col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.tf-grid-layout.tf-col-7 {
  grid-template-columns: repeat(7, 1fr);
}
.tf-grid-layout .wd-full {
  grid-column: 1/-1;
}
.tf-grid-layout .wd-2-cols {
  grid-column: span 2;
}
@media (min-width: 426px) {
  .tf-grid-layout.ssm-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.ssm-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.ssm-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.ssm-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.ssm-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.ssm-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 576px) {
  .tf-grid-layout.sm-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.sm-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.sm-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.sm-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.sm-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.sm-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 768px) {
  .tf-grid-layout.md-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.md-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.md-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.md-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.md-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.md-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 992px) {
  .tf-grid-layout {
    row-gap: 48px;
  }
  .tf-grid-layout.lg-col-1 {
    grid-template-columns: 1fr;
  }
  .tf-grid-layout.lg-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.lg-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.lg-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.lg-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.lg-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.lg-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 1200px) {
  .tf-grid-layout {
    row-gap: 64px;
  }
  .tf-grid-layout.row-xl-gap-40 {
    row-gap: 40px;
  }
  .tf-grid-layout.row-xl-gap-56 {
    row-gap: 56px;
  }
  .tf-grid-layout.xl-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.xl-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.xl-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.xl-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.xl-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.xl-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 1440px) {
  .tf-grid-layout.xxl-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.xxl-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.xxl-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.xxl-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.xxl-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.xxl-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

.row {
  margin-right: -16px;
  margin-left: -16px;
}
.row > * {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1200px) {
  .row {
    margin-right: -24px;
    margin-left: -24px;
  }
  .row > * {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 12px;
  padding-left: 12px;
  width: 1304px;
  max-width: 100%;
}
.container .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.container .row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.container-2 {
  padding-right: 10px;
  padding-left: 10px;
  width: 1364px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-2 .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.container-2 .row > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.container-3 {
  padding-right: 15px;
  padding-left: 15px;
  width: 1350px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-3 .row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}
.container-3 .row > * {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.container-4 {
  padding-right: 15px;
  padding-left: 15px;
  width: 1326px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-4 .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.container-4 .row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.container-5 {
  padding-right: 15px;
  padding-left: 15px;
  width: 1342px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-5 .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.container-5 .row > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.container-6 {
  padding-right: 15px;
  padding-left: 15px;
  width: 1350px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-6 .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.container-6 .row > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.container-1288 {
  padding-right: 10px;
  padding-left: 10px;
  width: 1308px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container-1288 .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.container-1288 .row > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.container-layout-right {
  width: calc(100vw - (100vw - 1350px) / 2);
  margin-right: unset;
  max-width: 100%;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.container-layout-left {
  width: calc(100vw - (100vw - 1548px) / 2 - 4px);
  margin-left: unset;
  max-width: 100%;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.container-wrap {
  max-width: 1416px;
  margin: 0 auto;
  background: var(--black);
  border-radius: 24px;
}

.container-full {
  padding-left: 28px;
  padding-right: 28px;
}
@media (max-width: 1199px) {
  .container-full {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ------------ Header ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
header {
  position: sticky;
  z-index: 99;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
header.header-sticky {
  background-color: var(--bg);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.1);
}
header.header-sticky.tf-header-2::after {
  display: none;
}
header.header-sticky.tf-header-4 {
  background-color: var(--bg-24);
  backdrop-filter: blur(9px);
  border-radius: 0px 0px 40px 40px;
}
header.header-fixed.tf-header-4 {
  padding-top: 10px;
  padding-bottom: 10px;
}
header.normal.header-sticky {
  background-color: var(--white);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 991px) {
  header.header-fixed.tf-header-4 {
    border-radius: 0px 0px 20px 20px;
  }
}

.tf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding-top: 28px;
  padding-bottom: 28px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-header.scrolling {
  background-color: var(--bg);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  padding-bottom: 10px;
}
.tf-header.header-hidden {
  transform: translateY(-100%);
}
@media (max-width: 767px) {
  .tf-header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 575px) {
  .tf-header .logo {
    max-width: 40px;
  }
}

.tf-header-block-height {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-title {
  padding-top: 65px;
  padding-bottom: 80px;
}
.page-title .title {
  font-size: clamp(32px, 5vw, 64px);
  line-height: clamp(32px, 5vw, 64px);
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}
.page-title .ic-plus {
  margin-bottom: 20px;
}
.page-title .sub-title {
  color: rgba(255, 255, 255, 0.6);
}
.page-title .page-title_content {
  display: grid;
  place-items: center;
}
.page-title.has-btn .page-title_content {
  margin-bottom: 64px;
}
@media (max-width: 1439px) {
  .page-title {
    padding-bottom: 80px;
  }
  .page-title .title,
  .page-title .ic-plus {
    margin-bottom: 20px;
  }
}
@media (max-width: 991px) {
  .page-title {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.demo-lunex .canvas-mb {
  background-color: var(--bg);
}
.demo-lunex .canvas-mb .icon-close-popup {
  color: var(--white);
}
.demo-lunex .canvas-body {
  background-color: var(--bg);
}

.canvas-mb {
  width: 325px !important;
}
.canvas-mb .canvas-header {
  position: relative;
}
.canvas-mb .canvas-header .br-line {
  position: absolute;
  height: 1px;
  background-color: #EDEDED;
  left: 24px;
  right: 24px;
  bottom: 0px;
  width: auto;
}
.canvas-mb .canvas-header .icon {
  font-weight: 600;
}
.canvas-mb .canvas-body {
  display: flex;
  flex-direction: column;
}
.canvas-mb .canvas-body > *:not(:last-child) {
  margin-bottom: 32px;
}
.canvas-mb .mb-content-top {
  flex: 1;
}
.canvas-mb .canvas-footer {
  display: flex;
  gap: 16px;
  box-shadow: unset;
}
.canvas-mb .canvas-footer .br-line {
  width: 1px;
  height: 24px;
  background-color: #EDEDED;
}
.canvas-mb .group-btn {
  gap: 12px;
}
.canvas-mb .group-btn .icon {
  font-weight: 600;
}
.canvas-mb .group-btn > * {
  width: 100%;
}

.flow-us-wrap .title {
  margin-bottom: 16px;
}

.payment-wrap .title {
  margin-bottom: 8px;
}

.mb-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mb-menu-link .icon {
  font-size: 14px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform: rotate(0deg);
}
.mb-menu-link:not(.collapsed) {
  padding-bottom: 24px;
}
.mb-menu-link:not(.collapsed) .icon {
  transform: rotate(180deg);
}

.sub-nav-link .icon {
  font-size: 14px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform: rotate(0deg);
}
.sub-nav-link:not(.collapsed) {
  padding-bottom: 24px;
}
.sub-nav-link:not(.collapsed) .icon {
  transform: rotate(180deg);
}

.nav-ul-mb li:not(:last-child) .mb-menu-link {
  padding-bottom: 12px;
}
.nav-ul-mb li:not(:last-child) .sub-nav-menu:not(.sub-menu-level-2) {
  margin-bottom: 12px;
}
.nav-ul-mb:not(.type-2) .mb-menu-link {
  color: var(--black);
}
.nav-ul-mb:not(.type-2) .sub-nav-link {
  color: #5F615E;
}

.sub-nav-menu {
  padding-left: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 16px;
  border-left: 1px solid #EDEDED;
}
.sub-nav-menu .sub-nav-link {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: center;
  justify-content: space-between;
}
.sub-nav-menu .sub-nav-link .icon {
  font-size: 14px;
}
.sub-nav-menu .sub-nav-link.active {
  font-weight: 700;
  color: var(--black);
}

.payment-method-list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-method-list li {
  max-width: 50px;
}

.box-support-online {
  display: flex;
  align-items: center;
  gap: 16px;
}
.box-support-online .icon {
  font-size: 24px;
}
.box-support-online .br-line {
  height: 52px;
}
.box-support-online .sp-wrap {
  display: grid;
}

/* Demo Camping */
.topbar {
  padding-top: 14px;
  padding-bottom: 14px;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 425px) {
  .topbar-inner {
    flex-direction: column;
    gap: 6px;
  }
}

.topbar-left .track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .topbar-right,
  .topbar-left {
    flex: 1;
  }
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.tf-header-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  max-width: 1344px;
  width: 100%;
  margin: 0 auto;
  height: 1px;
  background-color: var(--black-20);
}
.tf-header-2 .header-left {
  display: flex;
  align-items: center;
  gap: 64px;
}
.tf-header-2 .header-right {
  display: flex;
  justify-content: end;
}
.tf-header-2 .item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 68px;
  color: var(--white);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
}
.tf-header-2.style-abs {
  margin-bottom: -68px;
}
.tf-header-2.style-abs::after {
  background-color: var(--white-20);
}
@media (max-width: 1199px) {
  .tf-header-2 {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .tf-header-2.style-abs {
    margin-bottom: -56px;
  }
}

.box-nav-menu {
  display: flex;
  gap: 36px;
}
.box-nav-menu .item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.box-nav-menu .item-link .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 13px;
}
.box-nav-menu .item-link::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% + 62px);
  height: 100%;
  display: none;
}

.box-navigation.style-black .item-link {
  color: var(--black);
}

.nav-icon-list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-icon-list li,
.nav-icon-list a {
  display: flex;
}
.nav-icon-list .nav-icon-item {
  font-size: 22px;
  color: var(--white);
}
@media (min-width: 1200px) {
  .nav-icon-list {
    gap: 20px;
  }
  .nav-icon-list .nav-icon-item {
    font-size: 28px;
  }
}

.menu-item.has-sub_menu {
  position: relative;
}
.menu-item:hover .item-link {
  color: var(--primary);
}
.menu-item:hover .item-link::after {
  display: block;
}
.menu-item:hover .item-link .icon {
  color: var(--primary);
  transform: rotate(180deg);
}
.menu-item:hover .sub-menu {
  transform: scale(1);
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.sub-menu {
  position: absolute;
  top: 100%;
  background-color: var(--white);
  box-shadow: 0px 12px 46px 0px rgba(0, 0, 0, 0.1019607843);
  min-width: 180px;
  left: -31px;
  transform: scale(0.9);
  transform-origin: top;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sub-menu_list {
  padding: 18px 0px;
}

.sub-menu_link {
  color: #5F615E;
  padding: 8px 20px;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.sub-menu_link:hover {
  color: var(--black);
}

/* -- Demo Agency -- */
.tf-header-3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.tf-header-3.header-fixed {
  background-color: var(--white);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.tf-header-3 .box-nav-menu {
  gap: 32px;
  align-items: center;
  justify-content: center;
}
.tf-header-3 .item-link {
  line-height: 52px;
  color: var(--black);
  font-family: "Inter Tight", sans-serif;
  gap: 4px;
}
.tf-header-3 .header-right {
  display: flex;
  justify-content: end;
}
.tf-header-3 .btn-mobile-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  padding-right: 0;
  color: var(--black);
}
.tf-header-3 .btn-mobile-wrap:hover {
  color: var(--primary);
}
.tf-header-3 .btn-mobile-wrap:hover .btn-mobile-menu-3 span {
  background-color: var(--primary);
}
@media (max-width: 991px) {
  .tf-header-3 .btn-mobile-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* -- Demo Business -- */
.tf-header-4 {
  padding: 24px 0px;
}
.tf-header-4.style-abs {
  margin-bottom: -106px;
}
.tf-header-4 .logo-site {
  background-color: var(--black-10);
  backdrop-filter: blur(22px);
  border-radius: 12px;
  overflow: hidden;
  padding-left: 24px;
  padding-right: 24px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tf-header-4 .box-navigation {
  display: flex;
  justify-content: center;
}
.tf-header-4 .box-nav-menu {
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.1019607843);
  backdrop-filter: blur(22px);
  border-radius: 12px;
  gap: 0;
}
.tf-header-4 .box-nav-menu:hover .item-link.active {
  color: var(--white);
}
.tf-header-4 .box-nav-menu:hover .item-link:hover {
  color: var(--primary);
}
.tf-header-4 .item-link {
  line-height: 44px;
  border-radius: 12px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Inter", sans-serif;
  gap: 8px;
  border-radius: 8px;
  color: var(--white);
}
.tf-header-4 .item-link .icon {
  font-size: 20px;
  display: none;
  transform: unset !important;
}
.tf-header-4 .item-link.active {
  color: var(--primary);
}
.tf-header-4 .item-link.active .icon {
  display: block;
}
.tf-header-4 .header-right {
  display: flex;
  justify-content: end;
  gap: 8px;
  align-items: center;
}
.tf-header-4 .indicator {
  opacity: 0;
}
@media (max-width: 1199px) {
  .tf-header-4 {
    padding-top: 10px;
    padding-bottom: 14px;
    min-height: 68px;
    display: flex;
    align-items: center;
  }
  .tf-header-4 .logo-site {
    height: 44px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .tf-header-4.style-abs {
    margin-bottom: -74px;
  }
}

/* -- Demo Cosmetic -- */
.tf-header-5 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.tf-header-5 .header-inner {
  padding-top: 49px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-header-5.header-fixed.scrolling {
  background-color: var(--white-40);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.tf-header-5.header-fixed.scrolling .br-line.bottom {
  display: none !important;
}
.tf-header-5.style-abs.header-fixed.scrolling {
  background-color: var(--black-30);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.1);
}
.tf-header-5 .header-right {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 8px;
}
.tf-header-5 .box-nav-menu {
  justify-content: center;
}
.tf-header-5 .box-nav-menu .item-link {
  color: var(--black);
  font-weight: 400;
  padding-top: 7px;
  padding-bottom: 24px;
  line-height: 24px;
  font-family: "Poppins", sans-serif;
}
.tf-header-5 .menu-item:hover .item-link {
  color: var(--secondary);
}
.tf-header-5 .sub-menu_link {
  font-weight: normal;
}
.tf-header-5 .nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  background-color: var(--bg-6);
  border-radius: 1212px;
}
.tf-header-5 .nav-icon .br-line {
  height: 20px;
}
.tf-header-5 .nav-icon li {
  display: flex;
}
.tf-header-5 .nav-icon_link {
  font-size: 20px;
  color: var(--white);
  display: flex;
  align-items: center;
}
.tf-header-5 .nav-icon_link .icon {
  aspect-ratio: 1;
}
.tf-header-5 .btn-open-shop {
  gap: 2px;
}
.tf-header-5 .btn-open-shop .number-count {
  font-size: 14px;
  font-weight: 500;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary);
  color: var(--white);
  border-radius: 50%;
}
.tf-header-5 .br-line.bottom {
  background-color: var(--black-10);
}
.tf-header-5.style-abs {
  margin-bottom: -87px;
}
.tf-header-5.style-abs .header-inner {
  padding-top: 31px;
}
.tf-header-5.style-abs .item-link {
  color: var(--white);
}
.tf-header-5.style-abs .nav-icon {
  background-color: var(--white);
}
.tf-header-5.style-abs .nav-icon_link {
  color: var(--black);
}
.tf-header-5.style-abs .br-line.bottom {
  background-color: rgba(255, 255, 255, 0.2784313725);
}
.tf-header-5.header-sticky .br-line.bottom {
  display: none !important;
}
@media (min-width: 992px) {
  .tf-header-5 .logo-site {
    margin-top: 8px;
  }
  .tf-header-5.header-fixed.scrolling .header-inner {
    padding-top: 15px;
  }
}
@media (min-width: 1200px) {
  .tf-header-5.header-sticky .header-inner {
    padding-top: 20px;
  }
  .tf-header-5 .box-nav-menu {
    gap: 45px;
  }
}
@media (max-width: 1439px) {
  .tf-header-5.style-abs:not(.header-sticky) .logo-site {
    padding-left: 12px;
  }
  .tf-header-5.style-abs:not(.header-sticky) .header-right {
    padding-right: 12px;
  }
}
@media (max-width: 991px) {
  .tf-header-5 .header-inner {
    padding-bottom: 15px;
    padding-top: 15px;
  }
  .tf-header-5.style-abs.scrolling .header-inner {
    padding-top: 15px;
  }
}

/* -- Demo Fimoor -- */
.tf-header-d6 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding-top: 12px;
  padding-bottom: 12px;
}
.tf-header-d6.header-fixed {
  background: var(--bg-10);
  backdrop-filter: blur(37px);
}
.tf-header-d6.scrolling {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.tf-header-d6 .box-nav-menu {
  justify-content: center;
}
.tf-header-d6 .item-link {
  line-height: 64px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.tf-header-d6 .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
@media (min-width: 1200px) {
  .tf-header-d6 .box-nav-menu {
    gap: 40px;
  }
}

.canvas-bottom {
  display: grid;
  gap: 16px;
}

.canvas-mb.cv-mb-1 .icon-close-popup {
  width: 40px;
  height: 40px;
  background-color: var(--bg-5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229, 240, 255, 0.1019607843);
}
.canvas-mb.cv-mb-1 .icon-close-popup .icon {
  font-size: 16px;
}
@media (min-width: 1200px) {
  .canvas-mb.cv-mb-1 {
    width: 430px !important;
  }
}

/* ------------ Blog ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.article-blog .blog-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
}
.article-blog .blog-image img {
  aspect-ratio: 1.6639676113;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-blog .meta {
  color: #808080;
  margin-bottom: 8px;
}
.article-blog .title {
  padding-left: 18px;
  position: relative;
  max-width: 338px;
}
.article-blog .title::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  top: 6px;
  left: 0;
  background-color: var(--primary);
}
.article-blog.style-abs {
  position: relative;
}
.article-blog.style-abs .blog-image {
  margin-bottom: 0;
}
.article-blog.style-abs .blog-content {
  position: absolute;
  left: 16px;
  bottom: 16px;
}
.article-blog.style-abs .title {
  padding-left: 28px;
  max-width: unset;
}
.article-blog.style-abs .title::after {
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.article-blog.style-abs .meta {
  margin-bottom: 16px;
}
@media (min-width: 1200px) {
  .article-blog.style-abs .blog-content {
    position: absolute;
    left: 36px;
    bottom: 36px;
  }
}
.article-blog.style-full {
  margin-bottom: 62px;
}
.article-blog.style-full .blog-image img {
  min-height: 350px;
  aspect-ratio: 1.7250673854;
}
.article-blog.style-home .blog-image img {
  aspect-ratio: 1.7244897959;
}
.article-blog.style-home .title {
  max-width: unset;
}
.article-blog.style-home .title::after {
  top: 50%;
  transform: translateY(-50%);
}

.wd-pagination {
  display: flex;
  justify-content: center;
  gap: 48px;
}
.wd-pagination .pagination-item,
.wd-pagination .btn-direc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 8px;
  color: var(--text-5);
}
.wd-pagination .pagination-item:hover,
.wd-pagination .btn-direc:hover {
  background-color: var(--primary);
  color: var(--white);
}
.wd-pagination .pagination-item.active {
  background-color: var(--primary);
  color: var(--white);
}
.wd-pagination .btn-direc {
  background-color: var(--bg-2);
}
.wd-pagination.style-2 .pagination-item,
.wd-pagination.style-2 .btn-direc {
  border-radius: 50%;
  background-color: transparent;
  color: var(--gray-60);
}
.wd-pagination.style-2 .pagination-item.active, .wd-pagination.style-2 .pagination-item:hover {
  background-color: var(--white);
  color: var(--text-18);
}
.wd-pagination.style-2 .btn-direc {
  background-color: var(--white);
  color: var(--text-18);
}
.wd-pagination.style-2 .btn-direc:hover {
  color: var(--white);
  background-color: var(--dark-90);
}
.wd-pagination.style-3 .pagination-item,
.wd-pagination.style-3 .btn-direc {
  border: 1px solid var(--primary);
  color: var(--primary);
  background-color: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.wd-pagination.style-3 .pagination-item:hover, .wd-pagination.style-3 .pagination-item.active,
.wd-pagination.style-3 .btn-direc:hover,
.wd-pagination.style-3 .btn-direc.active {
  background-color: var(--primary);
  color: var(--white);
}
.wd-pagination.style-4 {
  gap: 10px;
}
.wd-pagination.style-4 .pagination-item,
.wd-pagination.style-4 .btn-direc {
  border: 1px solid var(--gray-30);
  color: var(--black);
  background-color: transparent;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  font-size: 14px;
}
.wd-pagination.style-4 .pagination-item:hover, .wd-pagination.style-4 .pagination-item.active,
.wd-pagination.style-4 .btn-direc:hover,
.wd-pagination.style-4 .btn-direc.active {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.wd-pagination.style-4 .btn-direc {
  color: var(--gray-30);
}
@media (min-width: 992px) {
  .wd-pagination.style-2 {
    gap: 55px;
  }
  .wd-pagination.style-2 .pagination-list {
    gap: 12px;
  }
}
@media (min-width: 1200px) {
  .wd-pagination {
    margin-top: 32px;
  }
  .wd-pagination.style-2 {
    margin-top: 12px;
  }
  .wd-pagination.style-3 {
    margin-top: 24px;
  }
}
@media (max-width: 991px) {
  .wd-pagination {
    gap: 16px;
    flex-wrap: wrap;
  }
  .wd-pagination .pagination-item,
  .wd-pagination .btn-direc {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.pagination-list {
  display: flex;
  gap: 8px;
}

/* Blog Detail */
.blog-detail_heading {
  margin-bottom: 64px;
}
.blog-detail_heading .entry-date {
  padding-left: 18px;
  position: relative;
  margin-bottom: 36px;
}
.blog-detail_heading .entry-date::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.blog-detail_heading .entry-title {
  margin-bottom: 28px;
}
.blog-detail_heading .entry-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-detail_heading .author-wrap {
  display: flex;
  gap: 15px;
  align-items: center;
}
.blog-detail_heading .author_avatar {
  max-width: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.blog-detail_heading .meta-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 48px;
}
.blog-detail_heading .meta-wrap .icon {
  font-size: 26px;
}
.blog-detail_heading .meta_share_list,
.blog-detail_heading .meta_share,
.blog-detail_heading .meta_copy,
.blog-detail_heading .meta_heart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.blog-detail_heading .meta_share_list li,
.blog-detail_heading .meta_share_list a {
  display: flex;
}

.blog-detail_image {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 60px;
}
.blog-detail_image img {
  aspect-ratio: 2.2326388889;
  width: 100%;
  object-fit: cover;
  min-height: 350px;
}

.blog-detail_heading,
.blog-detail_content,
.blog-detail_author,
.blog-detail_comment {
  max-width: 846px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.blog-detail_content {
  margin-bottom: 36px;
}
.blog-detail_content > *:not(:last-child) {
  margin-bottom: 40px;
}
.blog-detail_content .content-text {
  margin-bottom: 24px;
}
.blog-detail_content .content-text .title {
  margin-bottom: 16px;
}
.blog-detail_content .content-text.head .title {
  margin-bottom: 24px;
}
.blog-detail_content .content-image {
  border-radius: 12px;
  overflow: hidden;
}
.blog-detail_content .content-image img {
  width: 100%;
  object-fit: cover;
  min-height: 233px;
}
.blog-detail_content .block-quote {
  padding: 24px;
  border-radius: 12px;
  background-color: var(--bg-3);
}
.blog-detail_content .block-quote .text-quote {
  margin-bottom: 11px;
}
.blog-detail_content .block-quote .icon {
  opacity: 0.2;
}
@media (min-width: 992px) {
  .blog-detail_content .content-text {
    margin-bottom: 40px;
  }
  .blog-detail_content .content-text:last-child {
    margin-bottom: 36px;
  }
  .blog-detail_content .block-quote {
    padding: 51px 40px 23px 40px;
  }
  .blog-detail_content .block-quote .text-quote {
    margin-bottom: -28px;
  }
}

.blog-detail_tag-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 64px;
}
.blog-detail_tag-list li {
  padding-left: 14px;
  padding-right: 14px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background-color: var(--bg-4);
  color: var(--white);
}

.blog-detail_author {
  display: flex;
  align-items: start;
  gap: 22px;
  padding: 30px 16px;
  border-radius: 12px;
  background-color: var(--bg-5);
  margin-bottom: 33px;
}
.blog-detail_author .author_avatar {
  max-width: 64px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.blog-detail_author .author_name {
  margin-bottom: 8px;
}
.blog-detail_author .author_duty,
.blog-detail_author .author_desc {
  margin-bottom: 26px;
}
.blog-detail_author .author_social {
  display: flex;
  gap: 10px;
}
.blog-detail_author .author_social .icon {
  font-size: 14px;
}
.blog-detail_author .author_social .social-link {
  border-radius: 8px;
  border: 1px solid var(--text-6);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-detail_author .author_social .social-link:hover {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}
@media (min-width: 1200px) {
  .blog-detail_author {
    padding: 32px 20px;
  }
}

.blog-detail_comment {
  padding: 32px 16px;
  background-color: var(--bg-6);
}
@media (min-width: 1200px) {
  .blog-detail_comment {
    padding: 48px 32px;
  }
}

.show-comment-wrap {
  margin-bottom: 33px;
}
.show-comment-wrap .comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.show-comment-wrap .comment-count_wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.show-comment-wrap .comment-count {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
}
.show-comment-wrap .comment-count .icon {
  font-size: 26px;
}

.comment-review-item {
  padding-top: 40px;
  padding-bottom: 39px;
  border-bottom: 1px solid var(--line-4);
}
.comment-review-item:first-child {
  border-top: 1px solid var(--line-4);
}
.comment-review-item .review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.comment-review-item .author_review {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.comment-review-item .author__image {
  border-radius: 12px;
  overflow: hidden;
}
.comment-review-item .author__infor .info-name {
  margin-bottom: 8px;
}
.comment-review-item .btn-reply {
  padding-left: 14px;
  padding-right: 14px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  color: var(--white);
  font-weight: 500;
}
.comment-review-item .btn-reply:hover {
  background-color: var(--primary);
}

.leave-comment-wrap .sub-title {
  margin-bottom: 25px;
}
.leave-comment-wrap .title {
  margin-bottom: 18px;
}

/*-- Blog Agency --*/
.article-blog-v02 {
  display: flex;
  flex-direction: column;
}
.article-blog-v02 .entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background-color: var(--white);
  gap: 12px 8px;
  flex-wrap: wrap;
}
.article-blog-v02 .meta_author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.article-blog-v02 .author__image {
  border-radius: 50%;
  overflow: hidden;
}
.article-blog-v02 .author__info {
  display: grid;
}
.article-blog-v02 .meta_date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-70);
}
.article-blog-v02 .meta_date .icon {
  font-size: 16px;
}
.article-blog-v02 .entry-image {
  border-radius: 16px;
  padding: 4px;
  background-color: var(--white);
  margin-bottom: 20px;
}
.article-blog-v02 .entry-image .image {
  border-radius: 12px;
  overflow: hidden;
}
.article-blog-v02 .entry-title {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Inter Tight", sans-serif;
}
@media (min-width: 768px) {
  .article-blog-v02 .entry-meta {
    padding: 16px 24px;
  }
}

.article-blog-v03 {
  padding: 20px 15px;
  background-color: var(--white);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.article-blog-v03 .entry-tag,
.article-blog-v03 .entry-image,
.article-blog-v03 .entry-desc {
  margin-bottom: 24px;
}
.article-blog-v03 .entry-image {
  border-radius: 8px;
  overflow: hidden;
}
.article-blog-v03 .entry-name {
  margin-bottom: 12px;
}
.article-blog-v03 .entry-desc {
  color: var(--gray-500);
}
.article-blog-v03 .entry-name,
.article-blog-v03 .entry-desc {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.article-blog-v03 .author__name {
  color: var(--gray-800);
}
.article-blog-v03 .entry-date {
  color: var(--gray-90);
}
.article-blog-v03 .entry-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.article-blog-v03 .entry-author .author_info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-blog-v03 .entry-author .author__image {
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .article-blog-v03 {
    padding: 24px;
  }
  .article-blog-v03 .entry-image,
  .article-blog-v03 .entry-desc {
    margin-bottom: 32px;
  }
}

@media (min-width: 768px) {
  .grid-layout-blog {
    row-gap: 40px;
  }
}

.s-blog-single-v2 {
  padding-top: 220px;
}
.s-blog-single-v2 .single-content {
  display: grid;
  gap: 40px;
  margin-bottom: 64px;
}
.s-blog-single-v2 .box-text {
  display: grid;
  gap: 28px;
}
.s-blog-single-v2 .box-text-lv2 {
  display: grid;
  gap: 16px;
}
.s-blog-single-v2 .single-tag {
  margin-bottom: 24px;
}
.s-blog-single-v2 .single-name {
  margin-bottom: 32px;
}
.s-blog-single-v2 .single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-200);
}
.s-blog-single-v2 .single-meta .meta_info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-blog-single-v2 .single-meta .info__image {
  border-radius: 50%;
  overflow: hidden;
}
.s-blog-single-v2 .single-image {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 78px;
}
.s-blog-single-v2 .single-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}
.s-blog-single-v2 .single_benefit li {
  padding-left: 25px;
  position: relative;
}
.s-blog-single-v2 .single_benefit li::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--gray-700);
  left: 10px;
  top: 10px;
}
.s-blog-single-v2 .single-meta-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1200px) {
  .s-blog-single-v2 .single-meta-bottom .tf-social-icon-2 {
    gap: 8px;
  }
  .s-blog-single-v2 .single-meta-bottom .tf-social-icon-2 .social-link {
    height: 48px;
    width: 48px;
  }
  .s-blog-single-v2 .single-meta-bottom .tf-social-icon-2 .icon {
    font-size: 20px;
  }
}
@media (max-width: 1199px) {
  .s-blog-single-v2 {
    padding-top: 120px;
  }
}
@media (max-width: 991px) {
  .s-blog-single-v2 .single-meta,
  .s-blog-single-v2 .single-image {
    margin-bottom: 50px;
  }
  .s-blog-single-v2 .single-content {
    gap: 30px;
    margin-bottom: 32px;
  }
  .s-blog-single-v2 .box-text {
    gap: 20px;
  }
  .s-blog-single-v2 .box-text-lv2 {
    gap: 10px;
  }
  .s-blog-single-v2 .single-name {
    margin-bottom: 24px;
  }
  .s-blog-single-v2 .single-meta {
    padding-top: 24px;
  }
}

.block-quote-v2 {
  border-radius: 24px;
  background-color: var(--light-beige);
  padding: 40px;
}
.block-quote-v2 .quote-wrap {
  border-left: 8px solid var(--primary);
  border-radius: 8px 0px 0px 8px;
  padding-left: 28px;
}
.block-quote-v2 .quote-text {
  margin-bottom: 24px;
}
.block-quote-v2 .br-line {
  margin-bottom: 23px;
  background-color: var(--gray-100);
}
.block-quote-v2 .quote-author {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .block-quote-v2 {
    padding: 20px 15px;
  }
  .block-quote-v2 .quote-wrap {
    padding-left: 15px;
  }
}

/*-- Blog Cosmetic --*/
.article-blog-v04 {
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.article-blog-v04 .blog-content {
  position: absolute;
  inset: 20px 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  pointer-events: none;
}
.article-blog-v04 .blog-content > * {
  pointer-events: all;
}
.article-blog-v04 .blog-image {
  display: flex;
}
.article-blog-v04 .blog-image img {
  min-height: 300px;
}
.article-blog-v04 .entry-name {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  padding-bottom: 4px;
}
.article-blog-v04 .entry-date {
  margin-bottom: 12px;
}
@media (min-width: 1200px) {
  .article-blog-v04 .entry-badge_list {
    display: flex;
    gap: 8px;
  }
  .article-blog-v04 .tag-badge {
    height: 40px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .article-blog-v04 .blog-content {
    inset: 32px 32px 36px;
  }
  .article-blog-v04.style-large .blog-content {
    inset: 32px 32px 36px 32px;
  }
}

.section-blog-detail-cosmetic .heading {
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  place-items: center;
  text-align: center;
}
.section-blog-detail-cosmetic .heading .heading-tag {
  margin-bottom: 40px;
}
.section-blog-detail-cosmetic .heading .tag-badge {
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1215686275);
}
.section-blog-detail-cosmetic .heading .heading-name {
  margin-bottom: 32px;
}
.section-blog-detail-cosmetic .image-large {
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 64px;
}
.section-blog-detail-cosmetic .image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 250px;
}
.section-blog-detail-cosmetic .midle {
  display: grid;
  gap: 48px;
  margin-bottom: 64px;
}
.section-blog-detail-cosmetic .midle .box-text {
  display: grid;
  gap: 36px;
}
.section-blog-detail-cosmetic .midle .image {
  border-radius: 12px;
  overflow: hidden;
}
.section-blog-detail-cosmetic .midle .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 250px;
}
.section-blog-detail-cosmetic .blog-tag-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 39px;
  border-bottom: 1px solid var(--gray-20);
}
.section-blog-detail-cosmetic .tf-social-icon-2 {
  gap: 8px;
}
.section-blog-detail-cosmetic .tf-social-icon-2 .social-link {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.section-blog-detail-cosmetic .wrap-direc-blog {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
  gap: 12px;
  border-bottom: 1px solid var(--black-10);
}
.section-blog-detail-cosmetic .wrap-direc-blog .btn-direc {
  display: grid;
  gap: 32px;
}
@media (min-width: 1200px) {
  .section-blog-detail-cosmetic .tag-badge {
    height: 40px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-blog-detail-cosmetic .wrap-direc-blog {
    padding-top: 60px;
    padding-bottom: 59px;
  }
}

.s-blog-post-list .wd-pagination {
  margin-top: 16px;
}

.main-blog-detail {
  padding-top: 64px;
}

.article-blog-d6 {
  padding: 19px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--gray-10);
  display: grid;
}
.article-blog-d6 .blog-meta {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-blog-d6 .entry-author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.article-blog-d6 .author_avt {
  border-radius: 50%;
  overflow: hidden;
}
.article-blog-d6 .entry-date {
  display: flex;
  align-items: center;
  gap: 6px;
}
.article-blog-d6 .blog-image {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.article-blog-d6 .blog-image img {
  aspect-ratio: 1.51171875;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .article-blog-d6 {
    padding-bottom: 23px;
  }
}
@media (max-width: 767px) {
  .article-blog-d6 {
    padding: 20px 15px;
  }
}

.pagination-d6 {
  display: inline-flex;
  align-items: center;
  gap: 30px;
}
.pagination-d6 .pag-list {
  display: flex;
  align-items: center;
}
.pagination-d6 .btn-direc,
.pagination-d6 .pag-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.pagination-d6 .btn-direc:hover,
.pagination-d6 .pag-item:hover {
  background: var(--primary);
  color: var(--white);
}
.pagination-d6 .pag-item.active {
  pointer-events: none;
}
.pagination-d6 .btn-direc {
  font-size: 24px;
  box-shadow: 0px 4.8px 14.4px 0px rgba(26, 41, 61, 0.0705882353);
  background: var(--white);
}
.pagination-d6 .btn-direc:not(:hover) {
  color: var(--gray-70);
}
@media (min-width: 1200px) {
  .pagination-d6 {
    gap: 48px;
  }
  .pagination-d6 .btn-direc,
  .pagination-d6 .pag-item {
    width: 48px;
    height: 48px;
  }
}
@media (max-width: 575px) {
  .pagination-d6 .btn-direc {
    display: none;
  }
}

.s-blog-grid-d6 .list-tab-btn-2 {
  margin-bottom: 32px;
}

.s-blog-single-d6 .entry-single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 39px;
  border-top: 1px solid var(--line-16);
}
.s-blog-single-d6 .entry-single-meta .entry-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-blog-single-d6 .entry-single-meta .author-avt {
  border-radius: 50%;
  overflow: hidden;
}
.s-blog-single-d6 .sect-title-d6 .entry-single-name {
  margin-bottom: 40px;
}
.s-blog-single-d6 .single-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 31px;
  border-top: 1px solid var(--line-16);
}
.s-blog-single-d6 .entry-image-large,
.s-blog-single-d6 .entry-image-2 {
  border-radius: 20px;
  overflow: hidden;
}
.s-blog-single-d6 .entry-image-large,
.s-blog-single-d6 .single-content {
  margin-bottom: 40px;
}
.s-blog-single-d6 .single-content {
  display: grid;
  gap: 40px;
}
.s-blog-single-d6 .box-text {
  display: grid;
  gap: 20px;
}
@media (min-width: 1200px) {
  .s-blog-single-d6 .entry-image-large,
  .s-blog-single-d6 .single-content {
    margin-bottom: 80px;
  }
}
@media (max-width: 1199px) {
  .s-blog-single-d6 .sect-title-d6 .entry-single-name {
    margin-bottom: 20px;
  }
  .s-blog-single-d6 .entry-single-meta {
    padding-top: 20px;
  }
  .s-blog-single-d6 .single-content {
    gap: 32x;
  }
  .s-blog-single-d6 .box-text {
    gap: 12px;
  }
  .s-blog-single-d6 .single-bottom {
    padding-top: 20px;
  }
}

.block-quote-d6 {
  padding: 8px;
  border-radius: 20px;
  box-shadow: 0px 0px 14.94px 0px rgba(0, 0, 0, 0.0588235294) inset;
  background: var(--bg-10);
}
.block-quote-d6 .content {
  background: var(--white);
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 16px 12px 0px rgba(255, 255, 255, 0.1215686275), 0px 44px 32px 0px rgba(221, 221, 221, 0.1294117647), 0px 18px 18px 0px rgba(229, 229, 213, 0.1411764706), 0px 12px 12px 0px rgba(229, 229, 229, 0.1215686275), 0px -4px 0px 0px rgba(229, 229, 229, 0.8784313725) inset, 0px 1.5px 0px 0px rgba(229, 229, 229, 0.6) inset;
}
.block-quote-d6 .wrap {
  padding-left: 40px;
  position: relative;
}
.block-quote-d6 .wrap::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  position: absolute;
  background: var(--primary);
  border-radius: 1212px;
}
.block-quote-d6 .wrap .br-line {
  background: var(--gray-100);
  margin-bottom: 23px;
}
.block-quote-d6 .quote-text {
  margin-bottom: 24px;
}
.block-quote-d6 .quote-author {
  margin-bottom: 10px;
}
@media (max-width: 1199px) {
  .block-quote-d6 .content {
    padding: 20px;
  }
  .block-quote-d6 .wrap {
    padding-left: 30px;
  }
  .block-quote-d6 .wrap::after {
    width: 6px;
  }
  .block-quote-d6 .wrap .br-line {
    margin-bottom: 18px;
  }
  .block-quote-d6 .quote-text {
    margin-bottom: 18px;
  }
}
@media (max-width: 575px) {
  .block-quote-d6 .content {
    padding: 20px 15px;
  }
  .block-quote-d6 .wrap {
    padding-left: 24px;
  }
  .block-quote-d6 .wrap::after {
    width: 4px;
  }
}

/* ------------ Element ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

form {
  position: relative;
  z-index: 30;
}
form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] {
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  padding: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  background-color: var(--bg-3);
  border-radius: 12px;
  color: var(--white);
  overflow: hidden;
  margin-bottom: 0;
  border: 1px solid var(--bg-3);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
form textarea::placeholder,
form input[type=text]::placeholder,
form input[type=password]::placeholder,
form input[type=datetime]::placeholder,
form input[type=datetime-local]::placeholder,
form input[type=date]::placeholder,
form input[type=month]::placeholder,
form input[type=time]::placeholder,
form input[type=week]::placeholder,
form input[type=number]::placeholder,
form input[type=email]::placeholder,
form input[type=url]::placeholder,
form input[type=search]::placeholder,
form input[type=tel]::placeholder,
form input[type=color]::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-7);
}
form textarea.style-2,
form input[type=text].style-2,
form input[type=password].style-2,
form input[type=datetime].style-2,
form input[type=datetime-local].style-2,
form input[type=date].style-2,
form input[type=month].style-2,
form input[type=time].style-2,
form input[type=week].style-2,
form input[type=number].style-2,
form input[type=email].style-2,
form input[type=url].style-2,
form input[type=search].style-2,
form input[type=tel].style-2,
form input[type=color].style-2 {
  height: 44px;
  padding: 0px 16px;
  border-radius: 8px;
  background-color: var(--bg-5);
  border-color: var(--bg-5);
}
form textarea.style-2::placeholder,
form input[type=text].style-2::placeholder,
form input[type=password].style-2::placeholder,
form input[type=datetime].style-2::placeholder,
form input[type=datetime-local].style-2::placeholder,
form input[type=date].style-2::placeholder,
form input[type=month].style-2::placeholder,
form input[type=time].style-2::placeholder,
form input[type=week].style-2::placeholder,
form input[type=number].style-2::placeholder,
form input[type=email].style-2::placeholder,
form input[type=url].style-2::placeholder,
form input[type=search].style-2::placeholder,
form input[type=tel].style-2::placeholder,
form input[type=color].style-2::placeholder {
  color: var(--text-15);
}
form textarea.style-3,
form input[type=text].style-3,
form input[type=password].style-3,
form input[type=datetime].style-3,
form input[type=datetime-local].style-3,
form input[type=date].style-3,
form input[type=month].style-3,
form input[type=time].style-3,
form input[type=week].style-3,
form input[type=number].style-3,
form input[type=email].style-3,
form input[type=url].style-3,
form input[type=search].style-3,
form input[type=tel].style-3,
form input[type=color].style-3 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.02em;
}
form textarea.style-3::placeholder,
form input[type=text].style-3::placeholder,
form input[type=password].style-3::placeholder,
form input[type=datetime].style-3::placeholder,
form input[type=datetime-local].style-3::placeholder,
form input[type=date].style-3::placeholder,
form input[type=month].style-3::placeholder,
form input[type=time].style-3::placeholder,
form input[type=week].style-3::placeholder,
form input[type=number].style-3::placeholder,
form input[type=email].style-3::placeholder,
form input[type=url].style-3::placeholder,
form input[type=search].style-3::placeholder,
form input[type=tel].style-3::placeholder,
form input[type=color].style-3::placeholder {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.02em;
}
form textarea.style-4,
form input[type=text].style-4,
form input[type=password].style-4,
form input[type=datetime].style-4,
form input[type=datetime-local].style-4,
form input[type=date].style-4,
form input[type=month].style-4,
form input[type=time].style-4,
form input[type=week].style-4,
form input[type=number].style-4,
form input[type=email].style-4,
form input[type=url].style-4,
form input[type=search].style-4,
form input[type=tel].style-4,
form input[type=color].style-4 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  background-color: var(--bg-23);
  border-color: transparent;
  padding: 19px 24px;
}
form textarea.style-4::placeholder,
form input[type=text].style-4::placeholder,
form input[type=password].style-4::placeholder,
form input[type=datetime].style-4::placeholder,
form input[type=datetime-local].style-4::placeholder,
form input[type=date].style-4::placeholder,
form input[type=month].style-4::placeholder,
form input[type=time].style-4::placeholder,
form input[type=week].style-4::placeholder,
form input[type=number].style-4::placeholder,
form input[type=email].style-4::placeholder,
form input[type=url].style-4::placeholder,
form input[type=search].style-4::placeholder,
form input[type=tel].style-4::placeholder,
form input[type=color].style-4::placeholder {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: var(--white-70);
}
form textarea.style-5,
form input[type=text].style-5,
form input[type=password].style-5,
form input[type=datetime].style-5,
form input[type=datetime-local].style-5,
form input[type=date].style-5,
form input[type=month].style-5,
form input[type=time].style-5,
form input[type=week].style-5,
form input[type=number].style-5,
form input[type=email].style-5,
form input[type=url].style-5,
form input[type=search].style-5,
form input[type=tel].style-5,
form input[type=color].style-5 {
  background-color: var(--light-beige);
  padding: 13px 23px;
  border-color: var(--light-beige);
  color: var(--black);
}
form textarea.style-5::placeholder,
form input[type=text].style-5::placeholder,
form input[type=password].style-5::placeholder,
form input[type=datetime].style-5::placeholder,
form input[type=datetime-local].style-5::placeholder,
form input[type=date].style-5::placeholder,
form input[type=month].style-5::placeholder,
form input[type=time].style-5::placeholder,
form input[type=week].style-5::placeholder,
form input[type=number].style-5::placeholder,
form input[type=email].style-5::placeholder,
form input[type=url].style-5::placeholder,
form input[type=search].style-5::placeholder,
form input[type=tel].style-5::placeholder,
form input[type=color].style-5::placeholder {
  color: var(--gray-500);
}
form textarea.style-5:focus,
form input[type=text].style-5:focus,
form input[type=password].style-5:focus,
form input[type=datetime].style-5:focus,
form input[type=datetime-local].style-5:focus,
form input[type=date].style-5:focus,
form input[type=month].style-5:focus,
form input[type=time].style-5:focus,
form input[type=week].style-5:focus,
form input[type=number].style-5:focus,
form input[type=email].style-5:focus,
form input[type=url].style-5:focus,
form input[type=search].style-5:focus,
form input[type=tel].style-5:focus,
form input[type=color].style-5:focus {
  border-color: var(--gray-300);
}
form textarea.style-line-bt,
form input[type=text].style-line-bt,
form input[type=password].style-line-bt,
form input[type=datetime].style-line-bt,
form input[type=datetime-local].style-line-bt,
form input[type=date].style-line-bt,
form input[type=month].style-line-bt,
form input[type=time].style-line-bt,
form input[type=week].style-line-bt,
form input[type=number].style-line-bt,
form input[type=email].style-line-bt,
form input[type=url].style-line-bt,
form input[type=search].style-line-bt,
form input[type=tel].style-line-bt,
form input[type=color].style-line-bt {
  border: 0;
  border-radius: 0px;
  border-bottom: 1px solid #000000;
  color: var(--main);
  background-color: transparent;
}
form textarea.style-line-bt:focus,
form input[type=text].style-line-bt:focus,
form input[type=password].style-line-bt:focus,
form input[type=datetime].style-line-bt:focus,
form input[type=datetime-local].style-line-bt:focus,
form input[type=date].style-line-bt:focus,
form input[type=month].style-line-bt:focus,
form input[type=time].style-line-bt:focus,
form input[type=week].style-line-bt:focus,
form input[type=number].style-line-bt:focus,
form input[type=email].style-line-bt:focus,
form input[type=url].style-line-bt:focus,
form input[type=search].style-line-bt:focus,
form input[type=tel].style-line-bt:focus,
form input[type=color].style-line-bt:focus {
  border-color: var(--primary);
}
form textarea.style-line-bt-2,
form input[type=text].style-line-bt-2,
form input[type=password].style-line-bt-2,
form input[type=datetime].style-line-bt-2,
form input[type=datetime-local].style-line-bt-2,
form input[type=date].style-line-bt-2,
form input[type=month].style-line-bt-2,
form input[type=time].style-line-bt-2,
form input[type=week].style-line-bt-2,
form input[type=number].style-line-bt-2,
form input[type=email].style-line-bt-2,
form input[type=url].style-line-bt-2,
form input[type=search].style-line-bt-2,
form input[type=tel].style-line-bt-2,
form input[type=color].style-line-bt-2 {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 11px;
  border: 0;
  border-radius: 0px;
  border-bottom: 1px solid var(--line-11);
  color: var(--black);
  background-color: transparent;
}
form textarea.style-line-bt-2::placeholder,
form input[type=text].style-line-bt-2::placeholder,
form input[type=password].style-line-bt-2::placeholder,
form input[type=datetime].style-line-bt-2::placeholder,
form input[type=datetime-local].style-line-bt-2::placeholder,
form input[type=date].style-line-bt-2::placeholder,
form input[type=month].style-line-bt-2::placeholder,
form input[type=time].style-line-bt-2::placeholder,
form input[type=week].style-line-bt-2::placeholder,
form input[type=number].style-line-bt-2::placeholder,
form input[type=email].style-line-bt-2::placeholder,
form input[type=url].style-line-bt-2::placeholder,
form input[type=search].style-line-bt-2::placeholder,
form input[type=tel].style-line-bt-2::placeholder,
form input[type=color].style-line-bt-2::placeholder {
  color: rgba(0, 0, 0, 0.3019607843);
}
form textarea.style-line-bt-2:focus,
form input[type=text].style-line-bt-2:focus,
form input[type=password].style-line-bt-2:focus,
form input[type=datetime].style-line-bt-2:focus,
form input[type=datetime-local].style-line-bt-2:focus,
form input[type=date].style-line-bt-2:focus,
form input[type=month].style-line-bt-2:focus,
form input[type=time].style-line-bt-2:focus,
form input[type=week].style-line-bt-2:focus,
form input[type=number].style-line-bt-2:focus,
form input[type=email].style-line-bt-2:focus,
form input[type=url].style-line-bt-2:focus,
form input[type=search].style-line-bt-2:focus,
form input[type=tel].style-line-bt-2:focus,
form input[type=color].style-line-bt-2:focus {
  border-color: var(--primary);
}
form textarea.style-line,
form input[type=text].style-line,
form input[type=password].style-line,
form input[type=datetime].style-line,
form input[type=datetime-local].style-line,
form input[type=date].style-line,
form input[type=month].style-line,
form input[type=time].style-line,
form input[type=week].style-line,
form input[type=number].style-line,
form input[type=email].style-line,
form input[type=url].style-line,
form input[type=search].style-line,
form input[type=tel].style-line,
form input[type=color].style-line {
  border-radius: 0px;
  border: 1px solid var(--line);
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 20px;
  padding-right: 20px;
}
form textarea.style-line::placeholder,
form input[type=text].style-line::placeholder,
form input[type=password].style-line::placeholder,
form input[type=datetime].style-line::placeholder,
form input[type=datetime-local].style-line::placeholder,
form input[type=date].style-line::placeholder,
form input[type=month].style-line::placeholder,
form input[type=time].style-line::placeholder,
form input[type=week].style-line::placeholder,
form input[type=number].style-line::placeholder,
form input[type=email].style-line::placeholder,
form input[type=url].style-line::placeholder,
form input[type=search].style-line::placeholder,
form input[type=tel].style-line::placeholder,
form input[type=color].style-line::placeholder {
  color: var(--text-9);
}
form textarea.style-line-2,
form input[type=text].style-line-2,
form input[type=password].style-line-2,
form input[type=datetime].style-line-2,
form input[type=datetime-local].style-line-2,
form input[type=date].style-line-2,
form input[type=month].style-line-2,
form input[type=time].style-line-2,
form input[type=week].style-line-2,
form input[type=number].style-line-2,
form input[type=email].style-line-2,
form input[type=url].style-line-2,
form input[type=search].style-line-2,
form input[type=tel].style-line-2,
form input[type=color].style-line-2 {
  border-radius: 0px;
  border: 1px solid var(--black);
  background-color: transparent;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 24px;
  padding-right: 24px;
  color: var(--black);
}
form textarea.style-line-2:focus,
form input[type=text].style-line-2:focus,
form input[type=password].style-line-2:focus,
form input[type=datetime].style-line-2:focus,
form input[type=datetime-local].style-line-2:focus,
form input[type=date].style-line-2:focus,
form input[type=month].style-line-2:focus,
form input[type=time].style-line-2:focus,
form input[type=week].style-line-2:focus,
form input[type=number].style-line-2:focus,
form input[type=email].style-line-2:focus,
form input[type=url].style-line-2:focus,
form input[type=search].style-line-2:focus,
form input[type=tel].style-line-2:focus,
form input[type=color].style-line-2:focus {
  border-color: var(--primary);
}
form textarea.ipt-d6,
form input[type=text].ipt-d6,
form input[type=password].ipt-d6,
form input[type=datetime].ipt-d6,
form input[type=datetime-local].ipt-d6,
form input[type=date].ipt-d6,
form input[type=month].ipt-d6,
form input[type=time].ipt-d6,
form input[type=week].ipt-d6,
form input[type=number].ipt-d6,
form input[type=email].ipt-d6,
form input[type=url].ipt-d6,
form input[type=search].ipt-d6,
form input[type=tel].ipt-d6,
form input[type=color].ipt-d6 {
  background-color: transparent;
  border: 1px solid var(--line-16);
  color: var(--gray-90);
  padding: 9px 15px;
  line-height: 24px;
  border-radius: 8px;
  font-size: 16px;
}
form textarea.ipt-d6:focus,
form input[type=text].ipt-d6:focus,
form input[type=password].ipt-d6:focus,
form input[type=datetime].ipt-d6:focus,
form input[type=datetime-local].ipt-d6:focus,
form input[type=date].ipt-d6:focus,
form input[type=month].ipt-d6:focus,
form input[type=time].ipt-d6:focus,
form input[type=week].ipt-d6:focus,
form input[type=number].ipt-d6:focus,
form input[type=email].ipt-d6:focus,
form input[type=url].ipt-d6:focus,
form input[type=search].ipt-d6:focus,
form input[type=tel].ipt-d6:focus,
form input[type=color].ipt-d6:focus {
  border-color: var(--primary);
}
form textarea:focus,
form input[type=text]:focus,
form input[type=password]:focus,
form input[type=datetime]:focus,
form input[type=datetime-local]:focus,
form input[type=date]:focus,
form input[type=month]:focus,
form input[type=time]:focus,
form input[type=week]:focus,
form input[type=number]:focus,
form input[type=email]:focus,
form input[type=url]:focus,
form input[type=search]:focus,
form input[type=tel]:focus,
form input[type=color]:focus {
  border-color: var(--white);
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
  background-color: transparent;
  overflow: hidden;
  padding: 0;
}
form textarea {
  height: 208px;
  resize: none;
  padding-top: 15px;
}
form textarea.style-2 {
  padding-top: 16px;
  padding-bottom: 16px;
  height: 179px;
}
form .form-content {
  display: grid;
  gap: 12px;
}
form .fieldset-ip .fieldset_label {
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--white);
}

.form-leave_comment .form-content {
  margin-bottom: 32px;
}
.form-leave_comment fieldset input {
  padding: 13px 18px;
}

.form-contact .form-content {
  gap: 24px;
  margin-bottom: 32px;
}
.form-contact .tf-grid-layout {
  gap: 24px;
}
@media (min-width: 1200px) {
  .form-contact .tf-grid-layout {
    gap: 32px;
  }
  .form-contact.style-2 fieldset input {
    height: 59px;
  }
  .form-contact.style-2 textarea {
    padding-top: 24px;
    height: 177px;
  }
}

.form-search_popup {
  position: relative;
  width: 100%;
}
.form-search_popup fieldset input {
  padding: 10px 42px 9px 30px;
}
@media (min-width: 1200px) {
  .form-search_popup fieldset input {
    padding: 17px 42px 16px;
  }
}
.form-search_popup button {
  position: absolute;
  display: flex;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--black);
}
.form-search_popup button .icon {
  font-size: 28px;
}
.form-search_popup.style-radius {
  max-width: 346px;
  width: 100%;
}
.form-search_popup.style-radius button {
  left: 10px;
}
@media (max-width: 1199px) {
  .form-search_popup button .icon {
    font-size: 20px;
  }
}

.form-sub {
  position: relative;
}
.form-sub .form-content input.style-line {
  padding-right: 60px;
}
.form-sub .btn-submit {
  width: 36px;
  height: 36px;
  color: var(--white);
  font-size: 15px;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
}
.form-sub.style-2 .form-content input {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--black);
}
.form-sub.style-2 .form-content input.style-line-bt {
  padding-top: 20px;
  padding-left: 8px;
  padding-right: 30px;
  padding-bottom: 7px;
}
.form-sub.style-2 .form-content input::placeholder {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--black);
}
.form-sub.style-2 .btn-submit {
  font-size: 20px;
  width: unset;
  height: unset;
  background-color: transparent;
  color: var(--gray-80);
  top: auto;
  right: 8px;
  bottom: 8px;
}

.tf-check {
  position: relative;
  background: transparent;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid var(--line-10);
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-check:checked {
  border-color: var(--black);
  background-color: var(--black);
}
.tf-check:checked::before {
  opacity: 1;
  transform: scale(1);
}
.tf-check::before {
  line-height: 1;
  font-weight: 500;
  font-family: "icomoon";
  content: "\e908";
  position: absolute;
  color: var(--white);
  opacity: 0;
  font-size: 16px;
  transform: scale(0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-check.style-2 {
  width: 24px;
  height: 24px;
  min-width: 24px;
}
.tf-check.style-3 {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 2px;
}
.tf-check.style-3::before {
  font-size: 12px;
}
.tf-check.style-4 {
  border-radius: 6px;
}
.tf-check.style-4::before {
  font-size: 14px;
}
.tf-check.style-4 ~ label {
  color: var(--gray-60);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-check.style-4:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}
.tf-check.style-4:checked ~ label {
  color: var(--black);
}
.tf-check.style-5 {
  border-width: 2px;
  border-color: var(--black-20);
}
.tf-check.style-5:not(:checked) {
  background-color: var(--white);
}
.tf-check.style-white {
  background-color: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.tf-check.style-border-black {
  border: 1px solid var(--black);
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox-wrap input {
  padding: 0;
}
.checkbox-wrap label {
  cursor: pointer;
}
.checkbox-wrap .text-term {
  color: var(--color-3);
}
.checkbox-wrap .type-2 {
  gap: 8px;
}

.tf-field {
  display: grid;
}
.tf-field .tf-label {
  margin-bottom: 8px;
}

.tf-field-2 {
  position: relative;
}
.tf-field-2 .icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--black);
}

.tf-field-d6 {
  display: grid;
}
.tf-field-d6 label {
  margin-bottom: 12px;
}

.form-connect {
  background-color: var(--white);
  padding: 24px 16px;
  border-radius: 24px;
}
.form-connect .tf-label {
  margin-bottom: 20px;
}
.form-connect .form-content {
  gap: 20px;
  margin-bottom: 32px;
}
.form-connect .form-content input::placeholder {
  font-weight: normal !important;
  letter-spacing: 0.01em;
}
.form-connect textarea {
  height: 120px;
}
.form-connect .salary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.form-connect .salary-item {
  border-radius: 100px;
  padding: 9px 23px;
  border: 1px solid var(--line-11);
  color: var(--black);
}
.form-connect .salary-item:hover {
  background-color: var(--line-11);
}
@media (min-width: 768px) {
  .form-connect {
    padding: 30px 20px;
  }
}
@media (min-width: 1200px) {
  .form-connect {
    padding: 44px;
  }
  .form-connect .form-content {
    gap: 40px;
    margin-bottom: 64px;
  }
  .form-connect .salary-list {
    margin-bottom: 72px;
  }
  .form-connect button.btn-wrap {
    height: 68px;
  }
}

.form-sub-2 {
  position: relative;
  max-width: 394px;
  width: 100%;
}
.form-sub-2 button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 8px !important;
  height: unset !important;
}
.form-sub-2 input {
  padding-right: 130px !important;
}

.form-contact-v2 .tf-label {
  color: var(--black);
  font-weight: 500;
  margin-bottom: 12px;
}
.form-contact-v2 .tf-label span {
  color: #FF0000;
}
.form-contact-v2 .form-content {
  gap: 24px;
  margin-bottom: 32px;
}
.form-contact-v2 .tf-grid-layout {
  gap: 24px 16px;
}
.form-contact-v2 select {
  background-color: var(--light-beige);
  padding: 13px 23px;
  border: 1px solid var(--light-beige);
  color: var(--black);
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.form-contact-v2 select::placeholder {
  color: var(--gray-500);
}
.form-contact-v2 select:focus {
  border-color: var(--gray-300);
}
.form-contact-v2 .tf-field textarea {
  padding-top: 23px;
  padding-bottom: 23px;
  height: 192px;
}
.form-contact-v2 .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
.form-contact-v2 .bottom button {
  flex-shrink: 0;
}
@media (min-width: 1200px) {
  .form-contact-v2 {
    padding: 0px 56px;
  }
  .form-contact-v2 .bottom {
    gap: 40px;
    flex-wrap: nowrap;
  }
}

.form-sub-3 {
  width: 100%;
  position: relative;
}
.form-sub-3 fieldset input.style-line-bt-2 {
  color: var(--black);
  padding-left: 2px;
  padding-bottom: 5px;
  border-color: var(--text-3);
}
.form-sub-3 fieldset input.style-line-bt-2::placeholder {
  color: var(--text-3);
}
.form-sub-3 .btn-submit {
  position: absolute;
  right: 2px;
  top: 0;
  font-size: 20px;
  color: var(--text-3);
}
@media (min-width: 576px) {
  .form-sub-3 {
    max-width: 312px;
  }
}

.tf-select {
  position: relative;
}
.tf-select .lb-select {
  position: absolute;
  left: 24px;
  top: 9.5px;
  pointer-events: none;
}
.tf-select select {
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  outline: 0 !important;
  border-radius: 0px;
  border: 1px solid var(--black);
  background-color: transparent;
  color: var(--black);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-sizing: border-box;
  padding: 28.5px 23px 8.5px 23px;
  font-size: 14px;
  line-height: 20px;
}
.tf-select::after {
  font-family: "icomoon";
  position: absolute;
  content: "\e911";
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  z-index: 1;
  font-weight: 400;
  color: var(--black);
}
.tf-select:hover select {
  border-color: var(--primary);
}

.tf-checkout-cart-main {
  display: grid;
  gap: 40px;
}
.tf-checkout-cart-main .box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 9px;
}
.tf-checkout-cart-main .title {
  margin-bottom: 16px;
}
.tf-checkout-cart-main fieldset input {
  height: 59px;
}
.tf-checkout-cart-main fieldset input::placeholder {
  color: var(--gray-60);
}
.tf-checkout-cart-main .box-ip-delivery .form-content {
  gap: 8px;
}
.tf-checkout-cart-main .box-ip-delivery .form-content .checkbox-wrap {
  margin-top: 4px;
}
.tf-checkout-cart-main .box-ip-delivery .tf-grid-layout {
  gap: 8px;
}
.tf-checkout-cart-main .enter-your-ship {
  padding: 20px;
  width: 100%;
  background-color: var(--black-6);
  text-align: center;
}
.tf-checkout-cart-main .box-ip-payment .payment-body {
  background: var(--black-6);
}
.tf-checkout-cart-main .box-ip-payment .box-title {
  margin-bottom: 12px;
}
.tf-checkout-cart-main .box-ip-payment .tf-grid-layout {
  gap: 10px;
}
.tf-checkout-cart-main .box-ip-payment .payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px;
  border: 1px solid #EC542D;
  background: rgba(236, 84, 45, 0.1019607843);
  gap: 10px;
}
.tf-checkout-cart-main .box-ip-payment .wrap-content {
  padding: 20px;
}
.tf-checkout-cart-main .box-ip-payment .form-content {
  gap: 10px;
  margin-bottom: 12px;
}
.tf-checkout-cart-main .box-ip-payment .form-content input {
  background-color: var(--white);
}
.tf-checkout-cart-main .box-ip-payment .form-content input:not(:focus) {
  border-color: var(--black-20);
}
.tf-checkout-cart-main .action-sign:not(:hover) {
  color: #2951FF;
}
@media (max-width: 767px) {
  .tf-checkout-cart-main {
    gap: 28px;
  }
  .tf-checkout-cart-main .enter-your-ship {
    padding: 20px 15px;
  }
  .tf-checkout-cart-main .box-ip-payment .wrap-content {
    padding: 20px 15px;
  }
}

.form-discount {
  display: flex;
  align-items: center;
  gap: 20px;
}
.form-discount fieldset input {
  background-color: var(--gray-10) !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}
.form-discount fieldset input:not(:focus) {
  border-color: var(--black-10);
}
.form-discount .action-submit {
  background-color: var(--primary);
  height: 44px;
  color: var(--white);
  min-width: 96px;
}

.form-sub-4 {
  position: relative;
}
.form-sub-4 .ipt {
  border: 1px solid rgba(34, 34, 34, 0.1019607843);
  box-shadow: 0px 2px 0px 0px rgba(51, 51, 51, 0.2) inset, 0px 1px 0px 0px #000000;
  background: var(--bg-17);
  padding: 15px;
  border-radius: 12px;
}
.form-sub-4 .btn-action {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  color: var(--white);
  border-radius: 8px;
  padding: 3px;
}
.form-sub-4 .btn-action span {
  padding-left: 11.5px;
  padding-right: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
  background: #1D78EF;
  border-radius: 5px;
}
.form-sub-4 .btn-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(164.27deg, #1B50B2 -26%, #1D78EF 88.64%);
  z-index: 0;
}

.form-contact-d6 {
  padding: 12px;
  background: var(--bg-10);
  border-radius: 20px;
  box-shadow: 0px 0px 14.94px 0px rgba(0, 0, 0, 0.0588235294) inset, 0px 3px 0px 0px rgba(0, 0, 0, 0.0588235294);
}
.form-contact-d6 .wrap {
  padding: 32px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0px 16px 12px 0px rgba(255, 255, 255, 0.1215686275), 0px 44px 32px 0px rgba(221, 221, 221, 0.1294117647), 0px 18px 18px 0px rgba(229, 229, 213, 0.1411764706), 0px 12px 12px 0px rgba(229, 229, 229, 0.1215686275), 0px -6px 0px 0px rgba(229, 229, 229, 0.8) inset, 0px 3px 0px 0px rgba(229, 229, 229, 0.6) inset;
}
.form-contact-d6 .f-title {
  margin-bottom: 11px;
}
.form-contact-d6 .f-desc {
  margin-bottom: 48px;
}
.form-contact-d6 .form-content {
  margin-bottom: 48px;
}
.form-contact-d6 textarea {
  height: 179px;
}
@media (max-width: 1199px) {
  .form-contact-d6 .f-desc,
  .form-contact-d6 .form-content {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .form-contact-d6 .wrap {
    padding: 20px 15px;
  }
}

.form-log-d2 {
  max-width: 474px;
  margin: 0 auto;
}
.form-log-d2 .form-content {
  margin-bottom: 32px;
}
.form-log-d2 .btn-action {
  margin-bottom: 20px;
}
.form-log-d2 fieldset input:not(:focus) {
  border-color: var(--black-20);
}
@media (min-width: 1200px) {
  .form-log-d2 .form-content {
    gap: 28px;
  }
  .form-log-d2 .tf-label {
    margin-bottom: 12px;
  }
  .form-log-d2 fieldset input {
    height: 59px;
  }
  .form-log-d2 .form-content {
    margin-bottom: 40px;
  }
  .form-log-d2 .btn-action {
    height: 60px !important;
  }
}

.form-log-d5 {
  max-width: 464px;
  margin: 0 auto;
}
.form-log-d5 .tf-label {
  margin-bottom: 10px;
}
.form-log-d5 .tf-label span {
  color: #FF0000;
}
.form-log-d5 .form-content {
  gap: 20px;
  margin-bottom: 30px;
}
.form-log-d5 .form-content .tf-field input {
  border-radius: 8px;
}
.form-log-d5 .form-content .tf-field input:not(:focus) {
  border-color: var(--black-20);
}
.form-log-d5 .btn-action {
  margin-bottom: 20px;
  border-radius: 12px;
}
@media (min-width: 1200px) {
  .form-log-d5 .btn-action {
    height: 60px !important;
  }
  .form-log-d5 .form-content {
    gap: 32px;
    margin-bottom: 48px;
  }
  .form-log-d5 .tf-label {
    margin-bottom: 16px;
  }
  .form-log-d5 .tf-field input {
    height: 59px;
  }
}

.form-ai-d6 {
  padding: 7px;
  background: var(--gray-10);
  border: 1px soli var(--gray-20);
  border-radius: 16px;
}
.form-ai-d6 .wrap-form {
  position: relative;
}
.form-ai-d6 fieldset textarea {
  height: 128px;
  background: var(--white);
  padding: 16px;
  border-radius: 12px;
  padding-bottom: 42px;
}
.form-ai-d6 fieldset textarea::placeholder {
  font-weight: 500;
  color: var(--text-15);
}
.form-ai-d6 fieldset textarea:not(:focus) {
  border-color: transparent;
}
.form-ai-d6 .group-btn-action {
  position: absolute;
  bottom: 12px;
  right: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-ai-d6 .btn-action {
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 6px;
  overflow: hidden;
  animation: hue-rotate 5s infinite linear;
  padding: 1px;
  background: linear-gradient(90.9deg, #9F9DFB 0%, #709AF5 50%, #A5DCF3 100%);
  position: relative;
}
.form-ai-d6 .btn-action span {
  position: relative;
  z-index: 1;
  padding-left: 11px;
  padding-right: 11px;
  color: var(--gray-9);
}
.form-ai-d6 .btn-action::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  background: var(--white);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
@keyframes sliderShape {
  0%, 100% {
    border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  34% {
    border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  67% {
    border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
  }
}
@keyframes tf-animate-zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ripple-line {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes shine-reverse {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
@-webkit-keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ani-zoom {
  animation: tf-animate-zoom-in-out 30s linear infinite;
}

@keyframes iconBounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes float1 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-5deg);
  }
}
@keyframes float2 {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(5px) rotate(10deg);
  }
}
@keyframes float3 {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-8deg);
  }
}
@keyframes float4 {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px);
  }
}
@keyframes float5 {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(5deg) scale(1.05);
  }
  75% {
    transform: rotate(-5deg) scale(1.05);
  }
}
@keyframes bgMove {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@keyframes spin-reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes sway1 {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(3deg) translateY(2px);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  75% {
    transform: rotate(-3deg) translateY(2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes sway2 {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-4deg) translateY(3px);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  75% {
    transform: rotate(4deg) translateY(3px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes lineRun {
  0% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}
@keyframes slideOutInSmooth {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(calc(100% + 56px));
    opacity: 0;
  }
  55% {
    transform: translateX(calc(-100% - 56px));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutIn {
  0% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(200%);
  }
  41% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveUp {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -1000px;
  }
}
@keyframes bar_anim {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}
@keyframes left50To0 {
  0% {
    left: 50%;
  }
  100% {
    left: -10%;
  }
}
@keyframes right50To0 {
  0% {
    right: 50%;
  }
  100% {
    right: -10%;
  }
}
@keyframes lineRunBottom {
  0% {
    bottom: 50%;
    height: 0px;
  }
  30% {
    height: 66px;
  }
  100% {
    bottom: -30%;
  }
}
@keyframes lineRunTop {
  0% {
    top: 50%;
    height: 0px;
  }
  30% {
    height: 66px;
  }
  100% {
    top: -30%;
  }
}
@keyframes moveLeftToRight {
  0% {
    left: 0%;
    width: 0;
  }
  10% {
    width: 50px;
  }
  70% {
    width: 50px;
  }
  100% {
    left: calc(100% - 100px);
    width: 0;
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(20px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
}
@keyframes moveLeft {
  0% {
    transform: translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
}
@keyframes moveLeftToRight2 {
  0% {
    left: calc(0% - 100px);
  }
  100% {
    left: calc(100% + 100px);
  }
}
@keyframes grow {
  from {
    width: 0;
  }
  to {
    width: var(--w, 0);
  }
}
@keyframes rippleFade {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.parallax-main * {
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bgMoveTopRight {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 300px -300px;
  }
}
@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.hover-img .img-style {
  overflow: hidden;
}
.hover-img .img-style > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
  transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
}
.hover-img:hover .img-style > img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hover-img .img-style2 {
  overflow: hidden;
  border-radius: 10px;
}
.hover-img .img-style2 .img-hv {
  width: 100%;
  object-fit: cover;
  -webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
  transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
  transition: transform 500ms ease;
}

.hover-img2 .img-style2 {
  overflow: hidden;
  border-radius: 8px;
}
.hover-img2 .img-style2 .img2 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.hover-img2:hover .img2 {
  transform: scale(1.1) rotate(3deg);
}

.hover-img3 .img-style3 {
  border-radius: 8px;
  overflow: hidden;
}
.hover-img3 .img-style3 img {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.hover-img3:hover img {
  transform: scale(1.075);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hover-img4 .img-style4 {
  position: relative;
  overflow: hidden;
}
.hover-img4 .img-style4:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
}
.hover-img4 .img-style4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s;
}
.hover-img4:hover .img-style4:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.hover-img4:hover .img-style4 img {
  transform: scale(1.1);
}

.pagi2 .swiper-pagination2:hover .box-img .icon-practice,
.swiper-button-next2:hover .box-img .icon-practice,
.swiper-button-prev2:hover .box-img .icon-practice,
.hv-one:hover .box-img .icon-practice {
  opacity: 1;
  z-index: 99;
  top: 50%;
  transition-delay: 0.5s;
}
.pagi2 .swiper-pagination2:hover .img-style::before,
.swiper-button-next2:hover .img-style::before,
.swiper-button-prev2:hover .img-style::before,
.hv-one:hover .img-style::before {
  opacity: 1;
}
.pagi2 .swiper-pagination2 .img-style,
.swiper-button-next2 .img-style,
.swiper-button-prev2 .img-style,
.hv-one .img-style {
  border-radius: 10px;
  overflow: hidden;
}
.pagi2 .swiper-pagination2 .img-style::before,
.swiper-button-next2 .img-style::before,
.swiper-button-prev2 .img-style::before,
.hv-one .img-style::before {
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5019607843);
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 99;
  opacity: 0;
  border-radius: 10px;
}
.pagi2 .swiper-pagination2 .img-style.s-one::before,
.swiper-button-next2 .img-style.s-one::before,
.swiper-button-prev2 .img-style.s-one::before,
.hv-one .img-style.s-one::before {
  border-radius: 50%;
}

.hv-one2:hover .img-style2::before {
  opacity: 1;
  visibility: visible;
}
.hv-one2 .img-style2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  border-radius: 10px;
}

.hv-tool {
  position: relative;
  transition: all 0.3s ease;
}

.hover-tooltip {
  position: relative;
}
.hover-tooltip .tooltip {
  position: absolute;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 2px;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  color: var(--white);
  background-color: var(--black);
  transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
  z-index: 5;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  border-radius: 8px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  display: none;
}
.hover-tooltip .tooltip::before {
  content: "";
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  top: 20px;
  position: absolute;
  background: var(--black);
  width: 9px;
  height: 9px;
  z-index: -1;
}
@media (min-width: 1200px) {
  .hover-tooltip .tooltip {
    display: block;
  }
}
.hover-tooltip .tooltip.bg-primary::before {
  background: var(--primary);
}
.hover-tooltip:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
.hover-tooltip.tooltip-bot .tooltip {
  top: calc(100% + 10px);
  bottom: unset;
}
.hover-tooltip.tooltip-bot .tooltip::before {
  top: -4px;
}
.hover-tooltip.tooltip-left .tooltip {
  right: 100%;
  bottom: auto;
  transform: translateX(0px);
  left: unset;
}
.hover-tooltip.tooltip-left .tooltip::before {
  top: 50%;
  left: auto;
  transform: translateY(-50%) rotate(45deg);
  right: -4px;
}
.hover-tooltip.tooltip-left:hover .tooltip {
  transform: translateX(-12px);
}
.hover-tooltip.tooltip-right .tooltip {
  left: 100%;
  bottom: auto;
  transform: translateX(0px);
}
.hover-tooltip.tooltip-right .tooltip::before {
  top: 50%;
  right: auto;
  transform: translateY(-50%) rotate(45deg);
  left: -4px;
}
.hover-tooltip.tooltip-right:hover .tooltip {
  transform: translateX(8px);
}

.hover-overlay {
  position: relative;
}
.hover-overlay::before {
  position: absolute;
  z-index: 2;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  transition: 0.4s ease 0.1s;
  opacity: 0;
  visibility: hidden;
}
.hover-overlay:hover::before {
  opacity: 1;
  visibility: visible;
}

.hover-cursor-img .hover-image {
  display: none;
}
@media (min-width: 1200px) {
  .hover-cursor-img {
    position: relative;
  }
  .hover-cursor-img .hover-image {
    position: fixed;
    display: block;
    transform: scale(0);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
  }
  .hover-cursor-img .hover-image img {
    border-radius: 50%;
    max-width: 150px;
    box-shadow: 0px 10px 25px 0px rgba(43, 52, 74, 0.1215686275);
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tf-social-icon {
  display: inline-flex;
  gap: 16px;
  --facebook-cl: rgb(59, 89, 152);
  --x-cl: rgb(85, 85, 85);
  --instagram-cl: linear-gradient(#8a3ab9, #e95950, #fccc63);
  --threads-cl: rgb(224, 53, 102);
  --youtube-cl: rgb(205, 32, 31);
  --tiktok-cl: linear-gradient(#25f4ee, #000, #fe2c55);
  --tiktok-cl2: rgb(254, 44, 85);
  --pinterest-cl: rgb(203, 32, 39);
  --tumblr-cl: rgb(55, 69, 92);
  --vimeo-cl: rgb(26, 183, 234);
  --snapchat-cl: rgb(255, 221, 0);
  --whatsapp-cl: rgb(0, 230, 118);
  --linked_in-cl: rgb(23, 106, 255);
  --wechat-cl: rgb(26, 173, 24);
  --reddit-cl: rgb(255, 69, 0);
  --line-cl: rgb(0, 195, 77);
  --spotify-cl: rgb(30, 125, 96);
}
.tf-social-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--line-3);
  position: relative;
  color: var(--black);
}
.tf-social-icon a .icon {
  display: inline-flex;
  position: relative;
  z-index: 1;
  font-size: 20px;
}
.tf-social-icon a::after {
  content: "";
  border-radius: 50%;
  position: absolute;
  background: transparent;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.tf-social-icon.style-small {
  gap: 12px;
}
.tf-social-icon.style-small a {
  width: 38px;
  height: 38px;
}
.tf-social-icon.style-small a .icon {
  font-size: 16px;
}
.tf-social-icon.style-2 a {
  border-color: var(--line-3);
  color: var(--white);
}
.tf-social-icon .social-facebook::after {
  background: var(--facebook-cl);
}
.tf-social-icon .social-facebook:hover {
  color: var(--white);
}
.tf-social-icon .social-facebook:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-instagram::after {
  background: var(--instagram-cl);
}
.tf-social-icon .social-instagram:hover {
  color: var(--white);
}
.tf-social-icon .social-instagram:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-x::after {
  background: var(--x-cl);
}
.tf-social-icon .social-x:hover {
  color: var(--white);
}
.tf-social-icon .social-x:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-snapchat::after {
  background: var(--snapchat-cl);
}
.tf-social-icon .social-snapchat:hover {
  color: var(--white);
}
.tf-social-icon .social-snapchat:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-pinterest::after {
  background: var(--pinterest-cl);
}
.tf-social-icon .social-pinterest:hover {
  color: var(--white);
}
.tf-social-icon .social-pinterest:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-linkin::after {
  background: var(--linked_in-cl);
}
.tf-social-icon .social-linkin:hover {
  color: var(--white);
}
.tf-social-icon .social-linkin:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-tiktok::after {
  background: var(--tiktok-cl);
}
.tf-social-icon .social-tiktok:hover {
  color: var(--white);
}
.tf-social-icon .social-tiktok:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-pinterest::after {
  background: var(--pinterest-cl);
}
.tf-social-icon .social-pinterest:hover {
  color: var(--white);
}
.tf-social-icon .social-pinterest:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon.style-white a {
  color: var(--white);
  border-color: var(--line);
}
.tf-social-icon.style-square {
  gap: 12px;
}
.tf-social-icon.style-square a {
  border-radius: 8px;
  border: 1px solid var(--line-7);
  color: var(--primary);
}
.tf-social-icon.style-square a .icon {
  font-size: 24px;
}
.tf-social-icon.style-square a::after {
  content: none;
}
.tf-social-icon.style-square a:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.tf-social-icon.style-d7 {
  gap: 8px;
}
.tf-social-icon.style-d7 a {
  color: var(--black);
  border: unset;
  background-color: rgba(0, 0, 0, 0.0392156863);
}
.tf-social-icon.style-d7 a .icon {
  font-size: 20px;
}
@media (min-width: 992px) {
  .tf-social-icon.style-d7 a {
    height: 48px;
    width: 48px;
  }
}
@media (min-width: 1200px) {
  .tf-social-icon {
    gap: 24px;
  }
}
@media (max-width: 991px) {
  .tf-social-icon a {
    width: 40px;
    height: 40px;
  }
  .tf-social-icon a .icon {
    font-size: 16px;
  }
}

.tf-social-icon-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tf-social-icon-2 .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--text-3);
  color: var(--text-3);
}
.tf-social-icon-2 .social-link .icon {
  font-size: 16px;
}
.tf-social-icon-2 .social-link:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.tf-social-icon-2.style-circle .social-link {
  border-radius: 50%;
  border: 1px solid var(--gray-30);
  color: var(--black);
}
.tf-social-icon-2.style-circle .social-link:hover {
  border-color: var(--white);
  background-color: var(--white);
}
.tf-social-icon-2.style-2 .social-link {
  background-color: #282828;
  color: var(--white);
}
.tf-social-icon-2.style-2 .social-link:hover {
  background-color: var(--white);
  color: var(--gray-90);
}
.tf-social-icon-2.style-3 .social-link {
  border-radius: 8px;
  background-color: transparent;
  color: var(--light-green);
  border-color: var(--line-14);
}
.tf-social-icon-2.style-3 .social-link:hover {
  background-color: var(--light-green);
  border-color: var(--light-green);
  color: var(--primary);
}
.tf-social-icon-2.style-4 .social-link {
  border-radius: 8px;
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.tf-social-icon-2.style-4 .social-link:hover {
  background-color: var(--primary);
  color: var(--light-beige);
}
.tf-social-icon-2.style-5 .social-link {
  border-radius: 50%;
  background-color: var(--gray-10);
  color: var(--black);
  border: 0;
}
.tf-social-icon-2.style-5 .social-link:hover {
  background-color: var(--primary);
  color: var(--white);
}

.tf-social-d6 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(238, 238, 238, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(216, 216, 216, 0.1019607843), 0px 0px 2.5px 0px rgba(0, 0, 0, 0.1215686275) inset;
}
.tf-social-d6 a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--gray-50);
}
.tf-social-d6 a:hover {
  background: var(--primary);
  box-shadow: 0px -2px 0px 0px #1b50b2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 12.52px 10.02px 0px rgba(27, 80, 178, 0.1333333333), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
  color: var(--white);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.offcanvas {
  border: none !important;
  color: var(--black);
  z-index: 3000;
}
.offcanvas .icon-close-popup {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  padding: 10px;
  border: none;
  color: var(--black);
  z-index: 10;
}
.offcanvas .icon-close-popup:hover {
  color: var(--primary);
}
.offcanvas .icon-close-popup.type-right {
  top: 16px;
  right: 16px;
}
.offcanvas .offcanvas-content {
  height: 100%;
}
.offcanvas.offcanvas-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  opacity: 0;
  visibility: hidden;
  max-width: calc(100vw - 30px);
}
.offcanvas.offcanvas-center.show {
  visibility: visible;
  opacity: 1;
}

.offcanvas-backdrop {
  z-index: 2999;
  cursor: url(./../icons/cursor-close.svg), auto;
}

.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 0px;
}

.modal {
  cursor: url(./../icons/cursor-close.svg), auto;
}
.modal .icon-close-popup {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  padding: 16px;
  border: none;
  color: var(--black);
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}
.modal .icon-close-popup:hover {
  color: var(--primary);
}
@media (min-width: 576px) {
  .modal .icon-close-popup {
    top: 10px;
    right: 10px;
  }
}
.modal .modal-content {
  border: 0;
}
.modal .modal-body {
  padding: 0;
}
.modal.fullRight .modal-dialog {
  transform: translate(100%, 0);
  min-width: 100%;
  height: 100%;
  margin: 0;
  transition: transform 1s ease-out;
}
.modal.fullRight .modal-dialog .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 0;
}
.modal.fullRight .modal-dialog .modal-content .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullRight.show .modal-dialog {
  transform: none;
  transition: transform 0.4s ease-out;
}
.modal.fullLeft .modal-dialog {
  transform: translate(-100%, 0) !important;
  min-width: 100%;
  height: 100%;
  margin: 0;
  transition: all 0.3s !important;
}
.modal.fullLeft .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  padding: 0;
}
.modal.fullLeft .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullLeft.show .modal-dialog {
  transform: translate(0, 0) !important;
}
.modal.fullBottom .modal-dialog {
  transform: translate(0, 100%);
  min-width: 100%;
  height: 100%;
  max-height: unset;
  margin: 0;
  transition: transform 0.3s linear !important;
}
.modal.fullBottom .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  max-height: max-content;
}
.modal.fullBottom .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullBottom.show .modal-dialog {
  transform: translate(0, 0);
}
.modal.modalCentered .modal-dialog {
  margin: 15px auto;
  padding-left: 15px;
  padding-right: 15px;
  transform: translate(0, 0) !important;
}
.modal.fade:not(.show) {
  opacity: 0;
}
.modal .modal-content {
  cursor: default !important;
  border-radius: 0px;
}

.modal-heading {
  position: relative;
  margin-bottom: 30px;
}
.modal-heading .icon-close-popup {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: unset;
  font-size: 24px;
}
@media (min-width: 992px) {
  .modal-heading {
    margin-bottom: 40px;
  }
}

.canvas-sidebar {
  max-width: 320px;
  width: 100%;
}
@media (min-width: 992px) {
  .canvas-sidebar {
    max-width: 535px;
    width: 100% !important;
  }
}

.canvas-wrapper {
  padding: 0;
  isolation: isolate;
  height: 100%;
  width: 100%;
  max-height: none;
  display: grid;
  grid-auto-rows: auto minmax(0, 1fr) auto;
  align-content: start;
}

.canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  position: relative;
  text-transform: capitalize;
}
.canvas-header .icon-close-popup {
  font-size: 20px;
  padding: 0;
}
@media (min-width: 1200px) {
  .canvas-header {
    padding: 32px;
  }
}

.canvas-body {
  background-color: var(--white);
  padding: 10px 24px;
  overscroll-behavior-y: contain;
  overflow-y: auto;
  flex: 1;
}
.canvas-body::-webkit-scrollbar {
  width: 2px;
}
.canvas-body::-webkit-scrollbar-track {
  background-color: var(--white);
}
.canvas-body::-webkit-scrollbar-thumb {
  background: var(--primary);
}
@media (min-width: 1200px) {
  .canvas-body {
    padding: 24px 32px 24px;
  }
}

.canvas-footer,
.canvas-bottom {
  padding: 16px 24px 24px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1200px) {
  .canvas-footer,
  .canvas-bottom {
    padding: 16px 32px 32px;
  }
}

.offcanvas-search {
  height: 100vh !important;
  background-color: transparent;
}
.offcanvas-search.offcanvas-top {
  height: 504px;
}
.offcanvas-search .offcanvas-content {
  padding: 30px 0px;
  overflow-y: auto;
}
.offcanvas-search .popup-content {
  max-width: 746px;
  width: 100%;
  margin: 0 auto;
}
.offcanvas-search .form-search_popup {
  margin-bottom: 30px;
}
.offcanvas-search .form-search_popup .icon-close-popup {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.offcanvas-search .offcanvas-content {
  height: auto;
  background-color: var(--white);
}
.offcanvas-search .close {
  flex: 1;
  cursor: url(./../icons/cursor-close.svg), auto;
}
@media (min-width: 1200px) {
  .offcanvas-search .offcanvas-content {
    padding: 64px 0px;
  }
  .offcanvas-search .form-search {
    margin-bottom: 64px;
  }
  .offcanvas-search .feature-wrap .title {
    margin-bottom: 26px;
  }
}

.sidebar-filter {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: transparent;
}
.sidebar-filter .canvas-header {
  color: var(--black);
}
.sidebar-filter .canvas-wrapper {
  background-color: var(--white);
}
.sidebar-filter .canvas-body {
  padding-bottom: 30px;
}
@media (min-width: 1200px) {
  .sidebar-filter .canvas-body {
    overflow: hidden;
    background-color: transparent;
  }
  .sidebar-filter .canvas-wrapper {
    background-color: transparent;
  }
  .sidebar-filter .canvas-body,
  .sidebar-filter .canvas-bottom {
    padding: 0;
  }
}
@media (max-width: 1199px) {
  .sidebar-filter {
    position: fixed;
    bottom: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background-clip: padding-box;
    outline: 0;
  }
  .sidebar-filter.left {
    top: 0;
    left: 0;
    transform: translateX(-100%);
  }
  .sidebar-filter.right {
    top: 0;
    right: 0;
    transform: translateX(100%);
  }
  .sidebar-filter.show {
    transform: none;
  }
}

.offcanvas-shop-cart {
  background-color: var(--bg-16);
}
.offcanvas-shop-cart .tf-mini-cart-threshold {
  padding: 12px;
  background-color: var(--primary);
  text-align: center;
}
.offcanvas-shop-cart .wrap {
  display: flex;
  flex-direction: column;
}
.offcanvas-shop-cart .tf-mini-cart-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}
.offcanvas-shop-cart.type-2 {
  background-color: var(--white);
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-threshold {
  background-color: transparent;
  padding: 19px;
  border: 1px solid var(--gray-20);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 28px;
}
.offcanvas-shop-cart.type-2 .canvas-header {
  border-bottom: 1px solid var(--black-10);
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .tf-mini-cart-info {
  padding-top: 12px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .tf-mini-cart-image img {
  aspect-ratio: 0.8;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .prd-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .price-wrap {
  padding-top: 12px;
  align-self: flex-start;
  margin-bottom: 0;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .prd-name {
  margin-bottom: 4px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .type-select {
  margin-bottom: 24px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item .wg-quantity {
  height: 36px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-view-checkout {
  display: grid;
  gap: 12px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-bottom .desc {
  margin-bottom: 20px;
}
.offcanvas-shop-cart.type-2 .action-checkout {
  gap: 10px;
}
.offcanvas-shop-cart.type-2 .action-checkout .br-line {
  width: 6px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-items {
  padding-left: 64px;
  padding-right: 64px;
}
.offcanvas-shop-cart.type-2 .tf-mini-cart-item {
  border-bottom: 1px solid var(--gray-20);
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 1200px) {
  .offcanvas-shop-cart.type-2 {
    width: 599px !important;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-threshold {
    margin-left: 64px;
    margin-right: 64px;
  }
  .offcanvas-shop-cart.type-2 .canvas-header {
    padding-left: 64px;
    padding-right: 64px;
  }
  .offcanvas-shop-cart.type-2 .canvas-header {
    padding-top: 44px;
    padding-bottom: 19px;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-item {
    padding-top: 24px;
    padding-bottom: 23px;
  }
}
@media (min-width: 768px) {
  .offcanvas-shop-cart {
    width: 616px !important;
  }
  .offcanvas-shop-cart .canvas-header {
    padding-left: 48px;
    padding-right: 48px;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-bottom {
    padding-top: 31px;
    padding-bottom: 32px;
  }
}
@media (max-width: 1199px) {
  .offcanvas-shop-cart.type-2 .tf-mini-cart-threshold {
    margin-left: 48px;
    margin-right: 48px;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-items {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 767px) {
  .offcanvas-shop-cart .tf-mini-cart-item {
    padding: 24px;
    gap: 12px;
  }
  .offcanvas-shop-cart .tf-mini-cart-item .prd-name {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
  }
  .offcanvas-shop-cart .tf-mini-cart-item .tf-mini-cart-info > *:not(:last-child) {
    margin-bottom: 8px;
  }
  .offcanvas-shop-cart .tf-mini-cart-bottom {
    padding: 24px;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-threshold {
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 12px;
  }
  .offcanvas-shop-cart.type-2 .tf-mini-cart-items {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 425px) {
  .offcanvas-shop-cart {
    max-width: 320px !important;
  }
}

.tf-mini-cart-main {
  flex: 1 1 auto;
  position: relative;
}

.tf-mini-cart-sroll {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}
.tf-mini-cart-sroll::-webkit-scrollbar {
  width: 0px;
}
.tf-mini-cart-sroll::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 3px;
}
.tf-mini-cart-bottom {
  border-top: 1px solid var(--black-10);
  padding: 48px;
}
.tf-mini-cart-bottom .title {
  margin-bottom: 8px;
}
.tf-mini-cart-bottom .desc {
  margin-bottom: 16px;
}
.tf-mini-cart-bottom fieldset {
  margin-bottom: 20px;
}
.tf-mini-cart-bottom fieldset input.style-line-2 {
  padding: 11px;
  font-size: 12px;
  line-height: 16px;
}
.tf-mini-cart-bottom fieldset input.style-line-2::placeholder {
  font-size: 12px;
  line-height: 16px;
  color: var(--gray-60);
}
.tf-mini-cart-bottom fieldset input:not(:focus) {
  border-color: var(--black-10);
}
.tf-mini-cart-bottom .action-submit {
  gap: 24px;
}
.tf-mini-cart-bottom .action-submit .dot-square {
  width: 4px;
  height: 4px;
}
@media (max-width: 767px) {
  .tf-mini-cart-bottom .action-submit {
    gap: 12px;
  }
}

.tf-progress-ship {
  width: 100%;
  background-color: var(--gray-20);
  height: 4px;
  position: relative;
  border-radius: 4px;
}
.tf-progress-ship .value {
  height: 100%;
  background: var(--primary);
  position: relative;
  transition: width 2s ease;
  border-radius: 4px;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.flat-animate-tab .tab-content {
  position: relative;
  overflow: hidden;
}
.flat-animate-tab .tab-pane {
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  transition-timing-function: ease-in;
  transition-duration: 0.2s;
}
.flat-animate-tab .tab-pane.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
}

.flat-animate-tab-2 {
  overflow: hidden;
}
.flat-animate-tab-2 .tab-content {
  position: relative;
}
.flat-animate-tab-2 .tab-pane {
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  transition-timing-function: ease-in;
  transition-duration: 0.2s;
}
.flat-animate-tab-2 .tab-pane.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
}

.list-tab-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 64px;
  position: relative;
  overflow: auto;
}
.list-tab-btn.line-bottom::before {
  content: "";
}
.list-tab-btn::before {
  position: absolute;
  content: none;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--line);
}
.list-tab-btn .nav-tab-btn {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--text-3);
  font-weight: 500;
}
.list-tab-btn .nav-tab-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  scale: 0;
  background-color: var(--primary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.list-tab-btn .nav-tab-btn.active {
  color: var(--primary);
}
.list-tab-btn .nav-tab-btn.active::before {
  scale: 1;
  transform-origin: center;
}
.list-tab-btn .nav-tab-btn.has-num {
  display: flex;
  align-self: center;
  gap: 8px;
}
.list-tab-btn.style-2 {
  border-bottom: 1px solid var(--line-7);
  margin-bottom: 30px;
}
.list-tab-btn.style-2 .nav-tab-btn {
  color: var(--black);
}
.list-tab-btn.style-3 {
  background-color: #282828;
  padding: 8px;
  border-radius: 999px;
}
@media (min-width: 1200px) {
  .list-tab-btn.style-2 {
    margin-bottom: 40px;
    gap: 20px;
  }
  .list-tab-btn.style-2 .nav-tab-btn {
    padding: 24px 64px 25px;
    height: unset;
  }
}
@media (max-width: 425px) {
  .list-tab-btn {
    justify-content: start;
  }
}

.list-tab-btn-2 {
  padding: 4px;
  border-radius: 12px;
  display: inline-flex;
  background-color: var(--white);
  overflow: auto;
  white-space: nowrap;
}
.list-tab-btn-2 .tf-tab-btn {
  border-radius: 8px;
  color: var(--gray-500);
  background-color: transparent;
  border: 0;
  height: 40px;
}
.list-tab-btn-2 .tf-tab-btn.active, .list-tab-btn-2 .tf-tab-btn:hover {
  background-color: transparent;
}
.list-tab-btn-2 .indicator {
  background-color: var(--beige);
}
.list-tab-btn-2.style-2 {
  background-color: var(--bg-31);
  box-shadow: 0px 1.5px 0px 0px rgba(216, 216, 216, 0.1019607843), 0px 0px 2.5px 0px rgba(0, 0, 0, 0.1215686275) inset;
}
.list-tab-btn-2.style-2 .nav-tab-item {
  border-radius: 12px;
}
.list-tab-btn-2.style-2 .indicator {
  background-color: var(--primary);
  box-shadow: 0px -2px 0px 0px #1B50B2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 12.52px 10.02px 0px rgba(27, 80, 178, 0.1333333333), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
}
.list-tab-btn-2.style-2 .tf-tab-btn.active {
  color: var(--white);
}
.list-tab-btn-2.style-2:hover .tf-tab-btn:hover {
  color: var(--white);
}
.list-tab-btn-2.style-2:hover .tf-tab-btn:not(:hover) {
  color: var(--gray-50);
}
@media (min-width: 1200px) {
  .list-tab-btn-2.style-2 {
    padding: 8px;
    border-radius: 20px;
    gap: 20px;
  }
  .list-tab-btn-2.style-2 .tf-tab-btn {
    height: 44px;
  }
  .list-tab-btn-2.style-2 .indicator {
    top: 8px;
    bottom: 8px;
    border-radius: 12px;
  }
}

.tab-img-benefit .img-benefit {
  border-radius: 12px;
  overflow: hidden;
}
.tab-img-benefit .img-benefit img {
  width: 100%;
  object-fit: cover;
}

.tf-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid var(--line-11);
  color: var(--gray-60);
  border-radius: 60px;
}
.tf-tab-btn.active, .tf-tab-btn:hover {
  color: var(--dark-90);
  background-color: var(--white);
  border-color: var(--white);
}
.tf-tab-btn.type-2 {
  border-color: transparent;
  background-color: transparent;
  color: var(--white);
}
.tf-tab-btn.type-2.active, .tf-tab-btn.type-2:hover {
  border-color: var(--bg-14);
  background-color: var(--gray-70);
}

.list-tab-service {
  display: flex;
  gap: 8px;
}
.list-tab-service .tf-btn-tab {
  border-radius: 12px;
  backdrop-filter: blur(36px);
  background: rgba(255, 255, 255, 0.0784313725);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white-50);
  padding-left: 20px;
  padding-right: 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-tab-service .tf-btn-tab:hover, .list-tab-service .tf-btn-tab.active {
  border-color: var(--white-50);
  color: var(--white);
}

.tab-btn-product_list {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.tab-btn-product_list .nav-tab-item {
  display: flex;
  align-items: center;
  gap: 48px;
}
.tab-btn-product_list .tf-btn-tab {
  color: var(--gray-30);
}
.tab-btn-product_list .tf-btn-tab.active {
  color: var(--black);
}
@media (max-width: 991px) {
  .tab-btn-product_list .nav-tab-item {
    gap: 24px;
  }
}

.tab-btn-work_list {
  display: flex;
  margin-bottom: 60px;
  overflow: auto;
  white-space: nowrap;
}
.tab-btn-work_list > * {
  flex: 1;
}
.tab-btn-work_list .tf-btn-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  color: var(--black-40);
  font-weight: 500;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--black-10);
  padding-left: 15px;
  padding-right: 15px;
}
.tab-btn-work_list .tf-btn-tab.active {
  color: var(--black);
  border-color: var(--black);
}
.tab-btn-work_list .tf-btn-tab.active span {
  color: var(--black-60);
}
@media (max-width: 991px) {
  .tab-btn-work_list {
    margin-bottom: 40px;
  }
  .tab-btn-work_list .tf-btn-tab {
    padding-bottom: 10px;
  }
}

.list-tab-btn-d6 {
  display: flex;
  gap: 20px;
  overflow: auto;
}
.list-tab-btn-d6 > * {
  flex: 1;
}
.list-tab-btn-d6 .tab-btn-d6 {
  color: var(--gray-50);
  font-weight: 500;
  align-items: center;
  gap: 12px;
  display: flex;
  justify-content: center;
  padding-bottom: 18px;
  border-bottom: 2px solid #222222;
  padding-left: 12px;
  padding-right: 12px;
}
.list-tab-btn-d6 .tab-btn-d6 .icon {
  font-size: 20px;
}
.list-tab-btn-d6 .tab-btn-d6.active, .list-tab-btn-d6 .tab-btn-d6:hover {
  border-color: var(--primary);
  color: var(--white);
}
@media (max-width: 991px) {
  .list-tab-btn-d6 {
    gap: 12px;
  }
  .list-tab-btn-d6 .tab-btn-d6 {
    padding-bottom: 10px;
    border-width: 1px;
    gap: 8px;
  }
}

.list-tab-btn-d6-v2 {
  display: inline-flex;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  background: var(--white-8);
  box-shadow: 0px 1.5px 0px 0px rgba(81, 81, 81, 0.1019607843), 0px 0px 2px 0px rgba(255, 255, 255, 0.0784313725) inset;
}
.list-tab-btn-d6-v2 .tab-btn {
  color: var(--white);
  padding: 8px 16px;
}
.list-tab-btn-d6-v2 .indicator {
  top: 8px;
  bottom: 8px;
  background: linear-gradient(0deg, #1D78EF, #1D78EF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #1B50B2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
}

.work-tab-d6 .tab-content {
  margin-bottom: 29px;
}
.work-tab-d6 .list-tab-btn-work {
  display: flex;
  gap: 20px;
}
.work-tab-d6 .list-tab-btn-work > * {
  flex: 1;
}
.work-tab-d6 .tab-btn {
  display: grid;
}
.work-tab-d6 .tab-btn .br-line {
  height: 5px;
  border-radius: 81px;
  background: var(--gray-30);
  margin-bottom: 24px;
}
.work-tab-d6 .tab-btn .tab-ic {
  font-size: 32px;
  margin-bottom: 16px;
}
.work-tab-d6 .tab-btn .tab-title {
  margin-bottom: 6px;
}
.work-tab-d6 .tab-btn .br-line,
.work-tab-d6 .tab-btn .tab-title {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.work-tab-d6 .tab-btn.active .br-line, .work-tab-d6 .tab-btn:hover .br-line {
  background: var(--primary);
}
.work-tab-d6 .tab-btn.active .tab-title, .work-tab-d6 .tab-btn:hover .tab-title {
  color: var(--primary);
}

.work-tab-d6-v2 .wd-why {
  margin-bottom: 29px;
}
.work-tab-d6-v2 .tab-btn-work {
  display: grid;
}
.work-tab-d6-v2 .tab-btn-work .br-line {
  height: 5px;
  border-radius: 81px;
  background: var(--gray-30);
  margin-bottom: 24px;
}
.work-tab-d6-v2 .tab-btn-work .tab-ic {
  font-size: 32px;
  margin-bottom: 16px;
}
.work-tab-d6-v2 .tab-btn-work .tab-title {
  margin-bottom: 6px;
}
.work-tab-d6-v2 .tab-btn-work .br-line,
.work-tab-d6-v2 .tab-btn-work .tab-title {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.work-tab-d6-v2 .tab-btn-work.active .br-line, .work-tab-d6-v2 .tab-btn-work:hover .br-line {
  background: var(--primary);
}
.work-tab-d6-v2 .tab-btn-work.active .tab-title, .work-tab-d6-v2 .tab-btn-work:hover .tab-title {
  color: var(--primary);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
#goTop {
  position: fixed;
  padding: 0;
  bottom: 90px;
  right: 20px;
  width: 38px;
  height: 38px;
  background: var(--white);
  color: black;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#goTop .border-progress {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 50%;
  border: 1px solid #000;
  mask-image: conic-gradient(#000 var(--progress-angle, 0deg), transparent 0);
  -webkit-mask-image: conic-gradient(#000 var(--progress-angle, 0deg), transparent 0);
  content: "";
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#goTop.show {
  opacity: 1;
  visibility: visible;
}
#goTop .icon {
  font-size: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #000;
  animation: iconBounce 2s linear 0s infinite;
}
#goTop .icon-arrow-right-2 {
  transform: rotate(-90deg);
}
#goTop:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
@media (min-width: 992px) {
  #goTop {
    right: 40px;
  }
}
@media (max-width: 1199px) {
  #goTop.pos1 {
    bottom: 200px;
  }
}
@media (max-width: 767px) {
  #goTop.pos1 {
    bottom: 230px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  height: 56px;
  background-color: #1F1F1F;
  border: 1px solid rgba(229, 240, 255, 0.1019607843);
  border-radius: 4px;
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-btn .text {
  padding-left: 16px;
  padding-right: 12px;
}
.tf-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
}
.tf-btn .br {
  width: 1px;
  height: 100%;
  background-color: rgba(229, 240, 255, 0.1019607843);
}
.tf-btn:hover {
  color: var(--primary);
}
.tf-btn.h-48 {
  height: 48px;
}
.tf-btn.btn-2 {
  padding-right: 32px;
  padding-left: 32px;
  height: 48px;
  border-radius: 8px;
  border: 0;
  background-color: var(--primary);
}
.tf-btn.btn-2:hover {
  background-color: var(--primary);
  color: var(--white);
}
.tf-btn.btn-3 {
  background-color: var(--bg-5);
  border-radius: 4px;
  border: 1px solid var(--line-6);
}
.tf-btn.btn-bg-primary {
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.tf-btn.btn-bg-primary .br {
  background-color: var(--bg-3);
}
.tf-btn.btn-bg-primary .icon {
  color: var(--white);
}
@media (min-width: 1200px) {
  .tf-btn.btn-xl-h60 {
    height: 60px;
  }
  .tf-btn.btn-xl-large {
    height: 62px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .tf-btn.btn-xl-large-2 {
    height: 56px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .tf-btn.btn-3 {
    height: 72px;
  }
}

.animate-btn {
  position: relative;
  overflow: hidden;
}
.animate-btn:hover::after {
  animation: shine-reverse 1s forwards;
}

.animate-btn:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
  top: 0;
  left: -100%;
  opacity: 0.6;
}

button.animate-btn::after,
.animate-btn.tf-btn::after {
  background-image: linear-gradient(120deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0) 70%);
}

.animate-btn.animate-dark::after {
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent);
}

.btn-mobile-menu {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(229, 240, 255, 0.1019607843);
  background-color: #1F1F1F;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.btn-mobile-menu span {
  width: 24px;
  height: 2px;
  display: block;
  background-color: var(--white);
  pointer-events: all;
}
.btn-mobile-menu:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.btn-mobile-menu:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.btn-mobile-menu:hover span:nth-child(3) {
  animation-delay: 0.2s;
}
@media (max-width: 575px) {
  .btn-mobile-menu {
    width: 40px;
    height: 40px;
  }
  .btn-mobile-menu span {
    width: 18px;
  }
}

.btn-mobile-menu-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  position: relative;
}
.btn-mobile-menu-2 span {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--black);
  border-radius: 5px;
}
.btn-mobile-menu-2::after, .btn-mobile-menu-2::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: var(--black);
  border-radius: 1px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-mobile-menu-2::before {
  top: 5px;
}
.btn-mobile-menu-2::after {
  bottom: 5px;
}
.btn-mobile-menu-2.type-small {
  width: 20px;
  height: 20px;
}
.btn-mobile-menu-2.type-small > span {
  width: 16px;
}
.btn-mobile-menu-2.type-small::after, .btn-mobile-menu-2.type-small::before {
  width: 16px;
}
.btn-mobile-menu-2.style-white span, .btn-mobile-menu-2.style-white::after, .btn-mobile-menu-2.style-white::before {
  background-color: var(--white);
}
.btn-mobile-menu-2.style-primary span, .btn-mobile-menu-2.style-primary::after, .btn-mobile-menu-2.style-primary::before {
  background-color: var(--primary);
}

.btn-mobile-menu-3 {
  width: 18px;
  height: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-mobile-menu-3 span {
  position: absolute;
  display: flex;
  width: 4px;
  height: 4px;
  background-color: var(--black);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-mobile-menu-3 span.dot-1 {
  top: 0;
  left: 0;
}
.btn-mobile-menu-3 span.dot-2 {
  top: 0;
  right: 0;
}
.btn-mobile-menu-3 span.dot-4 {
  bottom: 0;
  left: 0;
}
.btn-mobile-menu-3 span.dot-5 {
  bottom: 0;
  right: 0;
}

.btn-mobile-wrap:hover .btn-mobile-menu-3 span.dot-1 {
  top: calc(100% - 4px);
  left: calc(100% - 4px);
}
.btn-mobile-wrap:hover .btn-mobile-menu-3 span.dot-2 {
  top: calc(100% - 4px);
  right: calc(100% - 4px);
}
.btn-mobile-wrap:hover .btn-mobile-menu-3 span.dot-4 {
  bottom: calc(100% - 4px);
  left: calc(100% - 4px);
}
.btn-mobile-wrap:hover .btn-mobile-menu-3 span.dot-5 {
  bottom: calc(100% - 4px);
  right: calc(100% - 4px);
}

.btn-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
}
.btn-wrap.btn-1 {
  height: 48px;
  background-color: var(--primary);
  color: var(--white);
}
.btn-wrap.btn-1.stroke {
  border: 1px solid var(--primary);
  background-color: var(--white);
  color: var(--primary);
}
.btn-wrap.btn-1.stroke:hover {
  background-color: var(--primary);
  color: var(--white);
}
.btn-wrap.btn-2 {
  padding-left: 16px;
  padding-right: 4px;
  border-radius: 1000px;
  height: 48px;
  background-color: var(--black);
  gap: 16px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.btn-wrap.btn-2 .icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  color: var(--gray-90);
  background-color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.btn-wrap.btn-2 .icon i {
  position: relative;
  z-index: 1;
}
.btn-wrap.btn-2 .icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: var(--black);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
}
.btn-wrap.btn-2 .text_btn {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.btn-wrap.btn-2:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  background-color: var(--white);
}
.btn-wrap.btn-2:hover .icon {
  color: var(--white);
}
.btn-wrap.btn-2:hover .icon::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}
.btn-wrap.btn-2:hover::after {
  transform: scale(10);
}
.btn-wrap.btn-2:hover .text_btn {
  color: var(--black);
}
.btn-wrap.btn-2.type-white {
  background-color: var(--white);
  color: var(--gray-90);
}
.btn-wrap.btn-2.type-white .icon {
  background-color: var(--gray-90);
  color: var(--white);
}
.btn-wrap.btn-2.type-white .icon::after {
  background-color: var(--white);
}
.btn-wrap.btn-2.type-white:hover {
  background-color: var(--black);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.25);
}
.btn-wrap.btn-2.type-white:hover .icon {
  color: var(--black);
}
.btn-wrap.btn-2.type-white:hover .text_btn {
  color: var(--white);
}
.btn-wrap.btn-2.type-2:not(:hover) {
  background-color: var(--gray-80);
}
.btn-wrap.btn-2.stroke {
  background-color: transparent;
  border: 1px solid var(--line-3);
  padding-left: 20px;
  padding-right: 20px;
  gap: 16px;
}
.btn-wrap.btn-2.stroke:hover {
  background-color: var(--line-3);
}
.btn-wrap.btn-2.stroke:hover .text_btn {
  color: var(--white);
}
.btn-wrap.btn-2.stroke .br-dot {
  background-color: #EEEEEE;
}
.btn-wrap.btn-3 {
  border-radius: 12px;
  height: 44px;
  background-color: var(--primary);
  color: var(--light-green);
  font-weight: 500;
}
.btn-wrap.btn-3.type-2 {
  position: relative;
  padding-right: 70px;
}
.btn-wrap.btn-3.type-2 .ic-wrap {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  background-color: var(--light-green);
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-wrap.btn-3.type-2 .icon {
  color: var(--primary);
  font-size: 20px;
}
.btn-wrap.btn-3.type-bg {
  background-color: var(--light-green);
  color: var(--primary);
}
.btn-wrap.btn-3.type-bg .ic-wrap {
  background-color: var(--primary);
}
.btn-wrap.btn-3.type-bg .ic-wrap .icon {
  color: var(--light-green);
}
.btn-wrap.btn-3.stroke {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-wrap.btn-3.stroke:hover {
  background-color: var(--primary);
  color: var(--white);
}
.btn-wrap.btn-4 {
  padding-left: 47px;
  padding-right: 47px;
  height: 46px;
  border-radius: 30px;
}
.btn-wrap.btn-4.stroke {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-wrap.btn-4.stroke:hover {
  background-color: var(--primary);
  color: var(--white);
}
.btn-wrap.btn-stroke {
  background-color: transparent;
  border: 1px solid var(--black);
  color: var(--black);
  height: 48px;
}
.btn-wrap.btn-stroke:hover {
  background-color: var(--black);
  color: var(--white);
}
.btn-wrap.btn-fill {
  background-color: var(--gray-90);
  color: var(--white);
  height: 48px;
  border-radius: 1000px;
}
.btn-wrap.btn-fill-white {
  background-color: var(--white);
  color: var(--black);
}
.btn-wrap.btn-fill-black {
  background-color: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-wrap.btn-fill-primary {
  background-color: var(--primary);
  color: var(--white);
  padding-left: 23px;
  padding-right: 23px;
}
.btn-wrap.w-100 {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-wrap.hei-48 {
  height: 48px !important;
}
@media (min-width: 1200px) {
  .btn-wrap.btn-1 {
    padding-right: 28px;
    padding-left: 28px;
  }
  .btn-wrap.btn-2 {
    height: 52px;
    padding-right: 8px;
  }
  .btn-wrap.hei-56 {
    height: 56px;
  }
  .btn-wrap.h-xl-52 {
    height: 52px;
  }
  .btn-wrap.btn-3 {
    height: 52px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .btn-wrap.btn-3.type-2.large {
    height: 60px;
    padding-right: 80px;
  }
  .btn-wrap.btn-3.type-2.large .icon {
    font-size: 24px;
  }
}

.tf-btn-2 {
  padding: 5px;
  border: 1px solid var(--white);
  background-color: var(--white-40);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-btn-2 .wrap-text {
  border-radius: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 28px;
  padding-right: 28px;
  box-shadow: 0px 3.71px 4.85px 0px rgba(255, 88, 0, 0.1529411765), 0px 10.27px 13.4px 0px rgba(255, 88, 0, 0.2196078431), 0px 24.72px 32.26px 0px rgba(255, 88, 0, 0.1882352941), 0px 1px 4px 2px #FFEDDB inset, 0px 1px 18px 2px #FFEDDB inset;
  background: linear-gradient(180deg, #FF5700 0%, #EF5200 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-btn-2 .wrap-text::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./../../assets/images/landing/item/bg-galaxy.png");
  background-size: cover;
  background-repeat: repeat-y;
  background-position: center;
  z-index: 1;
  opacity: 0.4;
  pointer-events: none;
}
.tf-btn-2 .ic-wrap {
  background-color: var(--bg-13);
  box-shadow: 0px 1px 1px 0px rgba(200, 68, 0, 0.6) inset, 0px 4px 4px 0px rgba(255, 118, 27, 0.2509803922) inset, 0px -1px 1px 0px #FFFFFF inset;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.tf-btn-2 .ic-wrap .icon {
  font-size: 20px;
  color: var(--orange);
}
.tf-btn-2.has-icon {
  padding: 5px;
}
.tf-btn-2.has-icon .wrap-text {
  padding: 8px 28px 8px 8px;
}
.tf-btn-2.has-icon.has-ic-large {
  padding: 7px;
  background: var(--white-12);
  border-color: var(--white-20);
}
.tf-btn-2.has-icon.has-ic-large .wrap-text {
  padding: 10px;
  padding-right: 28px;
  gap: 16px;
}
.tf-btn-2.has-icon.has-ic-large .ic-wrap {
  width: 48px;
  height: 48px;
}
.tf-btn-2.has-icon.has-ic-large .ic-wrap .icon {
  font-size: 28px;
}
.tf-btn-2.style-dark .wrap-text {
  background: var(--black);
  box-shadow: 0px 3px 4.5px 0px rgba(119, 119, 119, 0.1215686275), 0px 10px 12px 0px rgba(119, 119, 119, 0.2), 0px 25px 32px 0px rgba(119, 119, 119, 0.1607843137), 0px 40px 100px 0px rgba(119, 119, 119, 0.2784313725), 0px 1px 4px 2px rgba(230, 230, 230, 0.5019607843) inset, 0px 1px 18px 2px rgba(230, 230, 230, 0.5019607843) inset;
}
.tf-btn-2.style-dark .text {
  color: var(--white);
}
.tf-btn-2.style-icon {
  border-color: rgba(255, 87, 0, 0.0588235294);
  background-color: rgba(255, 87, 0, 0.0392156863);
  padding: 5px;
  border-radius: 12px;
}
.tf-btn-2.style-icon .wrap-text {
  padding: 12px;
  border-radius: 10px;
}
.tf-btn-2.style-icon:hover {
  box-shadow: unset;
}
.tf-btn-2.style-icon:hover .wrap-text {
  transform: scale(1.1);
}
.tf-btn-2.style-icon.st-ic-2 {
  padding: 3px;
}
.tf-btn-2.style-icon.st-ic-2 .wrap-text {
  padding: 8px;
}
.tf-btn-2.style-icon.st-ic-2 .icon {
  font-size: 24px;
}
.tf-btn-2.style-2 {
  padding: 8px;
}
.tf-btn-2.style-2 .wrap-text {
  display: grid;
  gap: 12px;
  place-items: center;
}
.tf-btn-2.style-2 .icon {
  font-size: 64px;
}
.tf-btn-2.style-3 {
  background: rgba(255, 255, 255, 0.1215686275);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.tf-btn-2.style-4 {
  padding: 7px;
  background: var(--black-12);
  border-color: var(--black-12);
}
.tf-btn-2.style-4 .wrap-text {
  padding: 0;
  aspect-ratio: 1;
  min-width: 72px;
  justify-content: center;
}
.tf-btn-2.style-5 {
  padding: 8px;
}
.tf-btn-2.style-5 .wrap-text {
  gap: 12px;
}
.tf-btn-2.style-5 .box-text_right {
  display: grid;
  gap: 4px;
}
.tf-btn-2:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.tf-btn-2:hover .wrap-text {
  transform: scale(1.03);
}
.tf-btn-2:hover .wrap-text::after {
  animation: moveUp 90s linear infinite;
}
@media (min-width: 1200px) {
  .tf-btn-2 {
    padding: 7px;
  }
  .tf-btn-2 .wrap-text {
    gap: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .tf-btn-2.style-icon .icon {
    font-size: 28px;
  }
  .tf-btn-2.style-2 {
    width: 100%;
  }
  .tf-btn-2.style-2 .wrap-text {
    width: 100%;
    padding: 27px 15px;
  }
  .tf-btn-2.style-5 .wrap-text {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

.tf-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--black);
}
.tf-btn-icon.circle {
  border-radius: 50%;
}
.tf-btn-icon .icon {
  font-size: 16px;
}
.tf-btn-icon:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.tf-btn-stroke {
  height: 44px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}
.tf-btn-stroke.style-2 {
  border-color: var(--line-11);
  color: var(--gray-70);
}
.tf-btn-stroke.style-2:hover {
  background-color: var(--line-11);
}
.tf-btn-stroke:hover {
  background-color: var(--line);
}

.tf-btn-line {
  color: var(--black);
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(to right, var(--primary) 50%, var(--black) 50%);
  background-size: 200% 100%;
  background-position: right;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.3s linear;
  cursor: pointer;
  padding-bottom: 8px;
}
.tf-btn-line::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0px;
  height: 1px;
  background-color: var(--black);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-btn-line::before {
  position: absolute;
  content: "";
  left: 0;
  width: 0;
  bottom: 0px;
  height: 1px;
  background-color: var(--primary);
  transition: width 0.3s linear;
  z-index: 1;
}
.tf-btn-line.style-white {
  color: var(--white);
  background: linear-gradient(to right, var(--primary) 50%, var(--white) 50%);
  background-size: 200% 100%;
  background-position: right;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.3s linear;
}
.tf-btn-line.style-white::after {
  background-color: var(--white);
}
.tf-btn-line:hover {
  background-position: left;
}
.tf-btn-line:hover::before {
  width: 100%;
}
.tf-btn-line.active {
  background-position: left;
}
.tf-btn-line.active::before {
  width: 100%;
}

.btn-add-shop {
  display: flex;
  color: var(--primary);
  font-size: 32px;
}
.btn-add-shop .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.action-shop-list {
  cursor: pointer;
  position: relative;
  z-index: 21;
}
.action-shop-list .product-action-list {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.action-shop-list .action-card {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  color: var(--black);
}
.action-shop-list .action-card:hover {
  background-color: var(--black);
  color: var(--white);
}
.action-shop-list li {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.action-shop-list.active .btn-add-shop .icon, .action-shop-list:hover .btn-add-shop .icon {
  transform: rotate(45deg);
}
.action-shop-list.active .product-action-list {
  pointer-events: all;
}
.action-shop-list.active .product-action-list li {
  opacity: 1;
  visibility: visible;
}
.action-shop-list.active .product-action-list li:nth-child(1) {
  transform: translateY(0px);
  transition-delay: 0.3s;
}
.action-shop-list.active .product-action-list li:nth-child(2) {
  transform: translateY(0px);
  transition-delay: 0.2s;
}
.action-shop-list.active .product-action-list li:nth-child(3) {
  transform: translateY(0px);
  transition-delay: 0.1s;
}
.action-shop-list.active .product-action-list li:nth-child(4) {
  transform: translateY(0px);
}

.text-linear {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE6C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-d6 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--primary);
  border-radius: 12px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.btn-d6::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  height: 0%;
  width: 100%;
  background-color: var(--black);
  border-radius: 12px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 0;
}
.btn-d6 .b-text {
  position: relative;
  z-index: 1;
}
.btn-d6:hover::after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-d6:hover .b-text {
  animation: scaleUp 0.3s ease-in-out;
}
.btn-d6.type-dark {
  background-color: var(--black);
}
.btn-d6.type-dark::after {
  background-color: var(--primary);
}
.btn-d6.type-white {
  background-color: var(--white);
  color: var(--primary);
}
.btn-d6.type-white:hover {
  color: var(--white);
}
.btn-d6.type-transparent {
  background-color: transparent;
  color: var(--black);
}
.btn-d6.type-transparent:hover {
  color: var(--white);
}
@media (min-width: 1200px) {
  .btn-d6:not(.btn-small) {
    height: 52px;
    padding-left: 37px;
    padding-right: 37px;
  }
}

.btn-d6-v2 {
  padding: 6px;
  background: rgba(216, 216, 216, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(255, 255, 255, 0.1019607843), 0px 0px 2px 0px rgba(0, 0, 0, 0.0784313725) inset;
  border-radius: 12px;
  color: var(--white);
}
.btn-d6-v2 .b-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-top: 11px;
  padding-bottom: 13px;
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 10px;
  background: linear-gradient(0deg, #1D78EF, #1D78EF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #1B50B2 inset, 0px 1.5px 0px 0px rgba(255, 255, 255, 0.3215686275) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 12.52px 10.02px 0px rgba(27, 80, 178, 0.1333333333), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
}
.btn-d6-v2.style-white {
  background: rgba(223, 223, 223, 0.8196078431);
  color: var(--primary);
}
.btn-d6-v2.style-white .b-wrap {
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(29, 120, 239, 0.06) 0%, rgba(29, 120, 239, 0) 100%);
  box-shadow: 0px -3px 0px 0px #CCCCCC inset, 0px 1.5px 0px 0px rgba(226, 226, 226, 0.3215686275) inset, 0px 2.77px 2.21px 0px rgba(221, 221, 221, 0.1215686275), 0px 6.65px 5.32px 0px rgba(221, 221, 221, 0.1294117647), 0px 12.52px 10.02px 0px rgba(221, 221, 221, 0.1333333333), 0px 3px 3px 0px rgba(221, 221, 221, 0.1411764706), 0px 2.77px 2.21px 0px rgba(221, 221, 221, 0.1215686275);
}
.btn-d6-v2.st-2 {
  background: rgba(21, 21, 21, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(255, 255, 255, 0.1019607843), 0px 0px 2px 0px rgba(255, 255, 255, 0.0784313725) inset;
}
.btn-d6-v2.st-2 .b-wrap {
  background: linear-gradient(0deg, #333333, #333333), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #222222 inset, 0px 1px 0px 0px rgba(34, 34, 34, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(34, 34, 34, 0.1215686275), 0px 6.65px 5.32px 0px rgba(34, 34, 34, 0.1294117647), 0px 3px 3px 0px rgba(34, 34, 34, 0.1411764706), 0px 2.77px 2.21px 0px rgba(34, 34, 34, 0.1215686275);
}
.btn-d6-v2.st-3 {
  background: rgba(54, 54, 54, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(255, 255, 255, 0.0588235294), 0px 0px 2px 0px rgba(255, 255, 255, 0.0588235294) inset;
}
.btn-d6-v2:hover .b-text {
  animation: scaleUp 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .btn-d6-v2.style-large .b-wrap {
    padding-top: 17px;
    padding-bottom: 19px;
  }
}

.btn-d8 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 30px;
  background-color: var(--black);
  color: var(--white);
  overflow: hidden;
}
.btn-d8 span {
  position: relative;
  z-index: 1;
}
.btn-d8 .icon {
  position: relative;
  z-index: 1;
  font-size: 20px;
}
.btn-d8::before {
  position: absolute;
  content: "";
  inset: 1px;
  background: linear-gradient(177.2deg, #000000 23.75%, #222222 110.19%);
  border: 1px solid rgba(255, 255, 255, 0.1607843137);
  border-radius: 12px;
}
.btn-d8::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(48px);
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.btn-d8.style-primary {
  background-color: var(--primary);
  box-shadow: 0px 2.77px 2.21px 0px rgba(250, 79, 68, 0.1215686275), 0px 6.65px 5.32px 0px rgba(250, 79, 68, 0.1294117647), 0px 12.52px 10.02px 0px rgba(250, 79, 68, 0.1333333333), 0px 22.34px 17.87px 0px rgba(250, 79, 68, 0.1411764706), 0px 41.78px 33.42px 0px rgba(250, 79, 68, 0.1490196078), 0px 3px 3px 0px rgba(72, 11, 7, 0.1411764706), 0px 2.77px 2.21px 0px rgba(72, 11, 7, 0.1215686275);
}
.btn-d8.style-primary::before {
  background: radial-gradient(40.76% 105% at 50.24% 110.83%, #FC6F65 0%, #FE3528 80.19%);
  border: 1px solid rgba(255, 255, 255, 0.1921568627);
}
.btn-d8.style-primary::after {
  width: 48px;
  height: 72px;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(48px);
  bottom: -96px;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.dot-square {
  width: 6px;
  height: 6px;
  display: block;
  background-color: var(--primary);
}

.ic-plus {
  height: 16px;
  width: 16px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ic-plus.type-black::after, .ic-plus.type-black::before {
  background-color: var(--bg-9);
}
.ic-plus::after, .ic-plus::before {
  content: "";
  position: absolute;
  background-color: var(--white);
}
.ic-plus::before {
  width: 2px;
  height: 100%;
}
.ic-plus::after {
  width: 100%;
  height: 2px;
}
.ic-plus.style-small {
  height: 9px;
  width: 9px;
}
.ic-plus.style-small::before {
  width: 1px;
}
.ic-plus.style-small::after {
  height: 1px;
}
.ic-plus.style-medium {
  height: 12px;
  width: 12px;
}

.section-cta {
  position: relative;
  text-align: center;
}
.section-cta .sect-item {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  overflow: hidden;
}
.section-cta .sect-item img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.section-cta .galaxy-line {
  position: absolute;
  left: 0;
  bottom: -32%;
  right: 0;
  height: 750px;
  z-index: 0;
  transform: rotate(16.07deg);
}
.section-cta .title {
  margin-bottom: 28px;
}
.section-cta .sub-title {
  margin-bottom: 60px;
}
@media (max-width: 1439px) {
  .section-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 1199px) {
  .section-cta .title {
    margin-bottom: 16px;
  }
  .section-cta .sub-title {
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .section-cta {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.line-section {
  position: absolute;
  inset: 0;
  max-width: 1369px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  z-index: 9;
  pointer-events: none;
}
.line-section::before, .line-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  height: 100px;
  animation: lineRun 120s linear infinite;
  z-index: 0;
  opacity: 0.5;
}
.line-section::after {
  left: -2px;
}
.line-section::before {
  right: -2px;
}
.line-section span::before, .line-section span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  height: 100px;
  animation: lineRun 120s linear infinite;
  z-index: 0;
  opacity: 0.5;
  animation-delay: 2s;
  transform: translateY(-100px);
}
.line-section span::after {
  left: -2px;
}
.line-section span::before {
  right: -2px;
}
@media (max-width: 1439px) {
  .line-section {
    width: calc(100% - 12px);
  }
}

.br-line-page {
  max-width: 1378px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 51;
}
.br-line-page::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  background-color: var(--line-2);
}
.br-line-page.pst-2 {
  top: 60px;
}
@media (max-width: 1439px) {
  .br-line-page {
    width: calc(100% - 4px);
  }
  .br-line-page.pst-2 {
    top: 40px;
  }
}
@media (max-width: 991px) {
  .br-line-page.pst-2 {
    top: 30px;
  }
}

.hero-banner {
  padding-top: 49px;
  background-color: var(--bg);
  overflow: hidden;
}
.hero-banner .galaxy-line {
  height: 900px;
  position: absolute;
  z-index: 2;
  bottom: -60%;
  left: 0;
  right: 0;
  transform: rotate(25.58deg);
}
.hero-banner .hero-content {
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.hero-banner .hero-content-wrap {
  position: relative;
  padding-bottom: 286px;
}
.hero-banner .hero-title {
  margin-left: -6px;
  margin-right: -8px;
  text-align: center;
  padding-bottom: 28px;
}
.hero-banner .sub-title {
  margin-bottom: 208px;
}
.hero-banner .img-item {
  z-index: 2;
}
.hero-banner .img-item-2 {
  pointer-events: none;
}
.hero-banner .img-item-3 {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(50px);
  display: flex;
}
.hero-banner .img-item-3 img {
  width: 100%;
  object-fit: cover;
}
.hero-banner .sub-title-2 .desc {
  max-width: 302px;
}
.hero-banner.style-2 {
  position: relative;
  overflow: visible;
}
.hero-banner.style-2 .img-item-2 {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  bottom: 31%;
}
.hero-banner.style-2 .img-item-2 .galaxy {
  transform: rotate(27deg);
}
.hero-banner .about-content {
  text-align: center;
  padding-top: 200px;
  padding-bottom: 232px;
  position: relative;
}
.hero-banner .about-content .sect-label {
  margin-bottom: 40px;
}
@media (max-width: 1439px) {
  .hero-banner .about-content {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  .hero-banner .img-item {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
  }
}
@media (min-width: 1200px) {
  .hero-banner .sub-title-2 .desc span {
    display: inline-flex;
    width: 33px;
  }
}
@media (max-width: 1439px) {
  .hero-banner.style-2 .img-item-2 {
    bottom: 33%;
    height: 700px;
  }
}
@media (max-width: 991px) {
  .hero-banner .sub-title {
    margin-bottom: 30px;
  }
  .hero-banner .img-item {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  .hero-banner .hero-content-wrap {
    padding-bottom: 152px;
  }
  .hero-banner .galaxy-line {
    bottom: -35%;
    left: -5%;
  }
}
@media (max-width: 767px) {
  .hero-banner .hero-content-wrap {
    padding-bottom: 60px;
  }
}
@media (max-width: 425px) {
  .hero-banner .img-item {
    padding-bottom: 20px;
  }
  .hero-banner .img-item img {
    max-width: 200px;
  }
}

.galaxy-line {
  pointer-events: none;
}

.sect-label {
  color: var(--text-3);
}

.word-wrapper,
.char-wrapper {
  display: inline-block;
}

.item-glasses-grid {
  position: absolute;
}

.section-head {
  margin-bottom: 50px;
}
.section-head .sect-label {
  margin-bottom: 32px;
}
.section-head.has-desc .sect-title {
  margin-bottom: 48px;
}

.section-head-2 .sect-sub_title {
  margin-bottom: 14px;
}
.section-head-2 .sect-title {
  margin-bottom: 12px;
}
.section-head-2 .sect-desc {
  margin-bottom: 24px;
}
.section-head-2 .sect-desc {
  color: #494949;
}
@media (min-width: 1200px) {
  .section-head-2 .sect-sub_title {
    margin-bottom: 28px;
  }
  .section-head-2 .sect-title {
    margin-bottom: 20px;
  }
  .section-head-2 .sect-desc {
    margin-bottom: 48px;
  }
}

.section-head-3 {
  padding-bottom: 80px;
}
@media (max-width: 1199px) {
  .section-head-3 {
    padding-bottom: 60px;
  }
}

.section-intergration {
  position: relative;
}
.section-intergration .inf-text-wrap {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  z-index: 0;
}
.section-intergration .section-head {
  margin-bottom: 30px;
}
.section-intergration .sect-content {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.section-intergration .list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-intergration .list a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding-left: 20px;
  padding-right: 40px;
  border-radius: 8px;
  background-color: var(--bg-7);
  opacity: 0.3;
}
.section-intergration .list a:hover {
  opacity: 1;
}
@media (min-width: 992px) {
  .section-intergration {
    padding-bottom: 70px;
  }
  .section-intergration .section-head {
    margin-bottom: 12px;
  }
}
@media (min-width: 1200px) {
  .section-intergration .list.left {
    padding-left: 109px;
  }
  .section-intergration .list.right {
    padding-right: 110px;
    margin-top: -68px;
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .section-intergration .img-item {
    padding-top: 40px;
  }
  .section-intergration .img-item img {
    max-width: 200px;
  }
}

.text-infiniteSlide {
  gap: 30px;
}

.section-benefit {
  position: relative;
}
.section-benefit .section-head {
  margin-bottom: 30px;
}
.section-benefit .section-content {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 30px;
}
.section-benefit .col-left,
.section-benefit .col-right {
  width: 100%;
}
@media (min-width: 992px) {
  .section-benefit .section-content {
    justify-content: space-between;
    gap: 30px;
    flex-wrap: nowrap;
  }
  .section-benefit .col-left {
    width: 50.9375%;
  }
  .section-benefit .col-right {
    width: 49.0625%;
  }
}
@media (min-width: 1200px) {
  .section-benefit .section-head {
    margin-bottom: 70px;
  }
}
@media (min-width: 1440px) {
  .section-benefit .col-right {
    width: calc(49.0625% - 110px);
  }
}

.section-brand {
  position: relative;
}
.section-brand .sect-label {
  margin-bottom: 30px;
}
.section-brand .section-content {
  margin-bottom: 50px;
}
@media (min-width: 992px) {
  .section-brand .sect-label {
    margin-bottom: 50px;
  }
}
@media (min-width: 1200px) {
  .section-brand .section-content {
    margin-bottom: 70px;
  }
}
@media (min-width: 1440px) {
  .section-brand .sect-label {
    margin-bottom: 80px;
  }
}

.inf-slide-brand {
  max-width: 1208px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.inf-slide-brand::after, .inf-slide-brand::before {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.inf-slide-brand::before {
  width: 39%;
  height: 35px;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #0C0C0C 100%);
}
.inf-slide-brand::after {
  width: 39%;
  height: 35px;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #0C0C0C 100%);
  transform: rotate(-180deg);
}
.inf-slide-brand .infiniteSlide {
  gap: 30px;
  align-items: center;
}
.inf-slide-brand .img-brand img {
  height: 35px;
}
@media (min-width: 1200px) {
  .inf-slide-brand .infiniteSlide {
    gap: 60px;
  }
}

.section-brand-2 .inf-slide-brand-2 {
  padding-top: 11px;
  padding-bottom: 12px;
}
.section-brand-2 .inf-slide-brand-2 .img-brand {
  margin-left: 6px;
  margin-right: 6px;
}
.section-brand-2 .inf-slide-brand-2 .img-brand img {
  aspect-ratio: 2.5789473684;
}

.section-market {
  position: relative;
}
.section-market .title {
  margin-bottom: 50px;
}
.section-market .market-wrap {
  max-width: 675px;
  width: 100%;
}
@media (min-width: 1600px) {
  .section-market .title {
    margin: 0px -5px;
  }
}
@media (min-width: 1200px) {
  .section-market .market-wrap {
    margin-top: -20px;
  }
  .section-market .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
  }
}

.section-market-2 {
  position: relative;
}
.section-market-2 .img-item-1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.section-market-2 .img-item-1 .galaxy-line {
  transform: scale(1.3) rotate(25deg);
}
.section-market-2 .market-wrap {
  max-width: 675px;
  width: 100%;
  margin: 0 auto 80px auto;
}

.section-process {
  position: relative;
  height: 100vh;
}
.section-process .section-head {
  margin-bottom: 50px;
}
.section-process .section-head .sect-label {
  margin-bottom: 28px;
}
.section-process .img-item-1 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
}
.section-process .img-item-1 img {
  width: 100%;
  object-fit: cover;
}
.section-process .img-item-2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.section-process .img-item-2 .galaxy-line {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (min-width: 768px) {
  .section-process .section-head {
    margin-bottom: -108px;
  }
}
@media (max-width: 1599px) {
  .section-process .img-item-2 .galaxy-line {
    width: 1000px;
  }
}
@media (max-width: 1199px) {
  .section-process .img-item-2 .galaxy-line {
    width: 800px;
  }
}
@media (max-width: 991px) {
  .section-process .img-item-2 .galaxy-line {
    top: 45%;
    left: 8%;
  }
}

.section-statics {
  position: relative;
}
.section-statics .tab-img-static {
  margin-bottom: 50px;
}
.section-statics .img-static {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.section-statics .img-static img {
  border-radius: 12px;
}
@media (min-width: 1200px) {
  .section-statics .section-head {
    margin-bottom: 100px;
  }
}
@media (min-width: 992px) {
  .section-statics .img-static {
    max-width: 543px;
  }
}

.section-testimonial {
  position: relative;
}
.section-testimonial .img-item-1 {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
}
.section-testimonial .col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 40px;
}
.section-testimonial .section-head .sect-title {
  margin-bottom: 36px;
}
@media (min-width: 1440px) {
  .section-testimonial {
    padding-bottom: 208px;
  }
}

.rate-list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rate-list li {
  display: flex;
}
.rate-list li img {
  height: 20px;
}

.wg-base-rate {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background-color: var(--bg-11);
  border-radius: 50px;
  padding: 12px 29px 12px 19px;
}
.wg-base-rate .head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-pricing,
.section-faq {
  position: relative;
}
@media (min-width: 1200px) {
  .section-pricing .section-head,
  .section-faq .section-head {
    margin-bottom: 80px;
  }
}

.section-faq .bg-img-item {
  position: absolute;
  pointer-events: none;
}
.section-faq .bg-img-item.item-1 {
  top: 0;
  left: 0;
}
.section-faq .bg-img-item.item-2 {
  right: 0;
  bottom: 0;
}

.section-pricing .img-item-1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.section-pricing .img-item-1 .galaxy-line {
  transform: translateY(50px) scale(1.2) rotate(25deg);
}

.section-blog {
  position: relative;
}
.section-blog .section-head_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.section-blog .col-right .article-blog:not(:last-child) {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .section-blog .section-head {
    margin-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .section-blog .col-left .article-blog {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 24px;
  }
}
@media (max-width: 575px) {
  .section-blog .section-head_wrap {
    margin-bottom: 50px;
  }
  .section-blog .section-head_wrap .section-head {
    margin-bottom: 0;
  }
}

.section-feature {
  /*-- min, between, max --*/
}
.section-feature .col-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.section-feature .image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
}
.section-feature .image-bg img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.section-feature .col-right {
  background-color: var(--bg-10);
  position: relative;
  padding: 28px 16px;
}
.section-feature .br-line-page {
  position: unset;
  margin-bottom: 60px;
}
.section-feature .wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-feature .title {
  color: var(--text-14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.section-feature .desc {
  margin-bottom: 60px;
  max-width: 391px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .section-feature .feature-list {
    position: relative;
    min-height: 220px;
  }
  .section-feature .feature-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
  }
  .section-feature .image-set {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-feature .image-set .image {
    position: absolute;
    padding-right: 15px;
    padding-left: 15px;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-feature .image-set .image.pst-v2 {
    bottom: 0;
    align-items: flex-end;
  }
  .section-feature .tf-grid-layout {
    height: 100vh;
  }
  .section-feature .br-line-page {
    margin-bottom: 80px;
  }
  .section-feature .desc {
    margin-bottom: 100px;
  }
}
@media (min-width: 992px) {
  .section-feature .wrap {
    height: calc(100% - 92px);
  }
}
@media (min-width: 1200px) {
  .section-feature .wrap {
    height: calc(100% - 152px);
  }
  .section-feature .br-line-page {
    margin-bottom: 140px;
  }
  .section-feature .section-head {
    margin-bottom: 64px;
  }
  .section-feature .desc {
    margin-bottom: 206px;
  }
  .section-feature .col-right {
    padding: 36px 36px 48px 36px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-feature .wrap {
    height: 100%;
  }
  .section-feature .feature-list {
    min-height: unset;
  }
  .section-feature .tf-grid-layout {
    grid-template-rows: 50% 50%;
  }
  .section-feature .tf-grid-layout .col-left {
    overflow: hidden;
  }
  .section-feature .br-line-page,
  .section-feature .desc {
    margin-bottom: 0;
  }
  .section-feature .image-set {
    inset: 10px;
  }
  .section-feature .image-set .image {
    inset: 10px;
  }
  .section-feature .image-set .image img {
    height: 100%;
    object-fit: contain;
  }
  .section-feature .image-set .image.pst-v2 {
    inset: unset;
    top: 5%;
    align-items: flex-end;
  }
}
@media (max-width: 575px) {
  .section-feature .image-set .image img {
    height: 100%;
    object-fit: contain;
  }
}

.section-problem,
.section-pricing-table {
  position: relative;
}
@media (min-width: 1200px) {
  .section-problem .section-head,
  .section-pricing-table .section-head {
    margin-bottom: 80px;
  }
}

.section-career {
  position: relative;
}
.section-career .section-head {
  margin-bottom: 48px;
}
.section-career .img-item-1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 0;
  padding-top: 16%;
}
.section-career .img-item-1 img {
  width: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .section-career .list-tab-btn {
    margin-bottom: 80px;
  }
}

.section-team {
  position: relative;
}
@media (min-width: 1200px) {
  .section-team .section-head {
    margin-bottom: 96px;
  }
}

.section-contact {
  position: relative;
}
.section-contact .img-item-1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.section-contact .img-item-1 .galaxy-line {
  transform: scale(1.3) rotate(25deg);
}

.contact-content {
  max-width: 846px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 16px;
  background-color: var(--bg-9);
  backdrop-filter: blur(25px);
  border-radius: 24px;
}
.contact-content .title {
  margin-bottom: 24px;
}
.contact-content .sub-title {
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .contact-content {
    padding: 40px;
  }
}

.section-hero_slider {
  position: relative;
  overflow: hidden;
}
.section-hero_slider .img-item-abs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -46px;
  z-index: 1;
}
@media (max-width: 1599px) {
  .section-hero_slider .img-item-abs {
    bottom: -36px;
  }
  .section-hero_slider .img-item-abs img {
    object-fit: cover;
    height: 71px;
    width: 100%;
  }
}

.section-explore .section-head-2 {
  margin-bottom: 30px;
}
.section-explore .card-product {
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .section-explore .col-right {
    padding-top: 96px;
  }
}
@media (min-width: 1440px) {
  .section-explore {
    padding-bottom: 140px;
  }
}

.section-page-title {
  position: relative;
  padding-top: 218px;
  padding-bottom: 269px;
}
.section-page-title .page-title_content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-page-title .title-page {
  margin-bottom: 28px;
}
.section-page-title .img-item-abs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7%;
  z-index: 1;
}
@media (max-width: 1439px) {
  .section-page-title {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media (max-width: 1599px) {
  .section-page-title .img-item-abs {
    bottom: -36px;
  }
  .section-page-title .img-item-abs img {
    object-fit: cover;
    height: 71px;
    width: 100%;
  }
}

.section-page-title-2 {
  padding-top: 60px;
}
@media (min-width: 1200px) {
  .section-page-title-2 .title {
    padding-bottom: 20px;
  }
}

.section-page-title-3 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.section-page-title-3 .title-page {
  text-align: center;
}
.section-page-title-3 .title-page span {
  font-weight: 275;
}

.breadcrumbs-page {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 17px;
  color: var(--white);
}
.breadcrumbs-page a {
  color: var(--white);
}

.page-title-shop-detail {
  margin-bottom: 64px;
}
.page-title-shop-detail .content {
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (max-width: 1199px) {
  .page-title-shop-detail {
    margin-bottom: 0;
  }
  .page-title-shop-detail .content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.s-title.only-title {
  margin-bottom: 80px;
}
@media (max-width: 1199px) {
  .s-title.only-title {
    margin-bottom: 50px;
  }
}

.section-intro-about .intro_title {
  margin-bottom: 32px;
}
.section-intro-about .intro_sub-title {
  max-width: 930px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 52px;
}
@media (min-width: 1200px) {
  .section-intro-about {
    padding-bottom: 108px;
  }
  .section-intro-about .intro-header {
    margin-top: -3px;
  }
}

.section-history {
  background-color: var(--bg-19);
  position: relative;
  overflow: hidden;
}
.section-history .img-item {
  position: absolute;
  left: -13px;
  right: -12px;
}
.section-history .img-item img {
  width: 100%;
}
.section-history .img-item.item-1 {
  top: 0;
  transform: translateY(-46%);
}
.section-history .img-item.item-2 {
  bottom: 0;
  transform: translateY(58%);
}
.section-history .his_tag {
  margin-bottom: 20px;
}
.section-history .his_title {
  margin-bottom: 30px;
}
.section-history .his_image {
  position: relative;
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-right: 30px;
  padding-left: 30px;
}
.section-history .his_image .text {
  position: absolute;
  z-index: 3;
  top: 12%;
  right: 19%;
  transform: rotate(5deg);
}
.section-history .img-abs {
  position: absolute;
  top: 5%;
  left: 6%;
  z-index: 2;
  transform: rotate(-8deg);
}
.section-history .img-main {
  transform: rotate(5deg);
}
@media (min-width: 992px) {
  .section-history .his_image {
    padding-top: 150px;
    padding-right: 24px;
    padding-left: 90px;
    padding-bottom: 50px;
  }
}
@media (min-width: 1200px) {
  .section-history .his_tag {
    margin-bottom: 24px;
  }
  .section-history .his_title {
    margin-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .section-history .img-abs {
    right: 69%;
  }
}
@media (max-width: 767px) {
  .section-history .img-abs {
    right: 55%;
    left: 5px;
  }
}

.section-testimonial-v2.has-line-bot {
  border-bottom: 1px solid var(--line-11);
}
.section-testimonial-v2 .s-title {
  margin-bottom: 50px;
}
@media (min-width: 1200px) {
  .section-testimonial-v2 .swiper-tesimonial .group-btn-action {
    margin-top: 50px;
  }
}

.section-gallery .wrap-image {
  margin-bottom: 30px;
  width: 100%;
  aspect-ratio: 0.9194444444;
  position: relative;
}
.section-gallery .wrap-image .text {
  position: absolute;
  top: 10%;
  right: 8%;
  transform: rotate(12deg);
  z-index: 5;
}
.section-gallery .img-abs {
  position: absolute;
}
.section-gallery .img-abs.item-1 {
  z-index: 4;
  bottom: 26px;
  left: 33px;
  right: 57%;
}
.section-gallery .img-abs.item-2 {
  z-index: 3;
  bottom: 5px;
  right: 0;
  left: 51%;
}
.section-gallery .img-abs.item-3 {
  z-index: 2;
  top: 14%;
  right: 24%;
  left: 39%;
}
.section-gallery .img-abs.item-4 {
  z-index: 1;
  top: 0;
  left: 0;
  right: 51%;
}
.section-gallery .gallery_tag {
  margin-bottom: 28px;
}
.section-gallery .gallery_title {
  margin-bottom: 20px;
}
.section-gallery .gallery_desc {
  margin-bottom: 48px;
}
@media (max-width: 1199px) {
  .section-gallery .gallery_desc {
    margin-bottom: 30px;
  }
  .section-gallery .wrap-image {
    height: 600px;
  }
}
@media (max-width: 991px) {
  .section-gallery .wrap-image {
    height: 500px;
  }
}
@media (max-width: 767px) {
  .section-gallery .wrap-image {
    aspect-ratio: 0.95875;
    height: unset;
  }
}

.section-box-icon {
  position: relative;
  overflow: hidden;
}
.section-box-icon .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.section-box-icon .bg-img img {
  width: 100%;
  height: 100%;
}
.section-box-icon .sw-dot {
  margin-top: 30px;
}
.section-box-icon .img-item {
  position: absolute;
  left: -13px;
  right: -12px;
  top: 0;
  transform: translateY(-40%);
}
.section-box-icon .img-item img {
  width: 100%;
}

.s-box-header .s_tag {
  margin-bottom: 28px;
}
.s-box-header .s_title {
  margin-bottom: 20px;
}
.s-box-header .s_desc {
  margin-bottom: 48px;
}
.s-box-header.type-2 {
  margin-bottom: 50px;
}
@media (min-width: 1200px) {
  .s-box-header.type-2 {
    margin-bottom: 72px;
  }
}
@media (max-width: 1199px) {
  .s-box-header .s_desc {
    margin-bottom: 30px;
  }
}

.section-lookbook {
  position: relative;
  overflow: hidden;
}
.section-lookbook .img-item {
  position: absolute;
  z-index: 1;
}
.section-lookbook .img-item img {
  width: 100%;
}
.section-lookbook .img-item.item-1 {
  top: 0;
  transform: translateY(-50%);
}
.section-lookbook .img-item.item-2 {
  bottom: 0;
  transform: translateY(42%);
  left: -12px;
  right: -13px;
}
.section-lookbook .content-lookbook {
  position: relative;
  z-index: 2;
}
.section-lookbook .s-box-header {
  margin-bottom: 40px;
}
.section-lookbook .image-lookbook {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.section-lookbook .image-lookbook img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-lookbook .lookbook-item {
  position: absolute;
  z-index: 5;
}
.section-lookbook .lookbook-item.position1 {
  top: 30%;
  right: 33%;
}
.section-lookbook .lookbook-item.position2 {
  top: 71%;
  left: 30%;
}
.section-lookbook .lookbook-item.position3 {
  top: 65%;
  left: 60%;
}
@media (max-width: 767px) {
  .section-lookbook .lookbook-item {
    display: none;
  }
}

.banner-let .s-box-header {
  margin-bottom: 40px;
}
.banner-let .s_title {
  margin-bottom: 32px;
}
.banner-let .s_title .text-orther {
  margin-bottom: 20px;
}
.banner-let .image {
  position: relative;
}
.banner-let .image img {
  width: 100%;
  max-height: 800px;
  object-fit: cover;
  object-position: top;
}
.banner-let .image::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 71.73%, #000000 94.48%);
  inset: 0;
}
.banner-let .wrap {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .banner-let .s_title {
    position: relative;
  }
  .banner-let .s_title .text-orther {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    margin-bottom: 0;
  }
  .banner-let .s_title .super-title span {
    margin-top: -20px;
    display: block;
  }
}
@media (min-width: 1200px) {
  .banner-let .s-box-header {
    margin-bottom: 64px;
    margin-top: 32px;
  }
}

.section-category {
  padding-top: 118px;
  padding-bottom: 189px;
  background-color: var(--black);
  overflow: hidden;
  position: relative;
}
.section-category .s_tag {
  margin-bottom: 32px;
}
.section-category .cate-list {
  display: grid;
  gap: 12px;
  place-items: center;
  margin-bottom: 30px;
}
.section-category .cate-list li {
  display: flex;
}
.section-category .cate-item a {
  color: var(--text-16);
}
.section-category .cate-item a:hover {
  color: var(--white);
}
.section-category .img-abs {
  position: absolute;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.section-category .img-abs.item-1, .section-category .img-abs.item-3 {
  transform: rotate(15deg);
}
.section-category .img-abs.item-2, .section-category .img-abs.item-4 {
  transform: rotate(-15deg);
}
.section-category .img-abs.item-1 {
  left: 9px;
  top: 15%;
}
.section-category .img-abs.item-2 {
  left: 7%;
  top: 46%;
}
.section-category .img-abs.item-3 {
  top: 11%;
  right: 9%;
}
.section-category .img-abs.item-4 {
  top: 40%;
  right: 3%;
}
@media (min-width: 1200px) {
  .section-category .cate-list {
    margin-bottom: 48px;
  }
}
@media (max-width: 1439px) {
  .section-category {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 1199px) {
  .section-category .img-abs {
    display: none;
  }
}
@media (max-width: 991px) {
  .section-category {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.box-image-summer {
  aspect-ratio: 1.7386804657;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0px 60px;
}
.box-image-summer .item-tape {
  position: absolute;
  z-index: 2;
}
.box-image-summer .item-tape.tape-1 {
  right: 86%;
  left: 7%;
  top: -3%;
  transform: rotate(-128.26deg);
}
.box-image-summer .item-tape.tape-2 {
  left: 86%;
  right: 7%;
  bottom: 0;
  transform: rotate(-136.66deg);
}
.box-image-summer .image-summer {
  position: relative;
  max-width: 1160px;
  margin: 54px auto 55px;
  transform: rotate(-1.5deg);
}
@media (min-width: 1440px) {
  .box-image-summer .item-tape.tape-1 {
    max-width: 83px;
  }
}
@media (max-width: 1439px) {
  .box-image-summer .item-tape {
    max-width: 70px;
  }
  .box-image-summer .item-tape.tape-1 {
    left: 6%;
    top: 1%;
  }
  .box-image-summer .item-tape.tape-2 {
    right: 7%;
  }
}
@media (max-width: 767px) {
  .box-image-summer {
    padding: 0px 30px;
  }
  .box-image-summer .image-summer {
    margin: 15px 0px;
  }
}

.section-summer {
  background-color: var(--bg-18);
  position: relative;
}
.section-summer .img-item {
  position: absolute;
}
.section-summer .img-item.item-1 {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-58%);
}
.section-summer .img-item.item-1 img {
  width: 100%;
}
.section-summer .img-item.item-2 {
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(61%);
}
.section-summer .img-item.item-2 img {
  width: 100%;
}
.section-summer .s-box-header {
  position: relative;
  margin-bottom: 12px;
}
.section-summer .text-orther {
  margin-bottom: 20px;
}
.section-summer .summer-countdown {
  margin-bottom: 20px;
}
@media (min-width: 1200px) {
  .section-summer {
    padding-bottom: 164px;
  }
  .section-summer .summer-countdown {
    margin-bottom: 69px;
  }
  .section-summer .text-orther {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
  }
}

.section-contact-2 .contact-info-wrap .title,
.section-contact-2 .contact-social-wrap .title {
  margin-bottom: 24px;
}
.section-contact-2 .contact-info_list {
  display: grid;
  gap: 12px;
}
.section-contact-2 .contact-info-wrap {
  margin-bottom: 30px;
}
.section-contact-2 .content-contact .title {
  margin-bottom: 24px;
}
.section-contact-2 .content-contact .desc {
  margin-bottom: 32px;
}
.section-contact-2 .form-contact {
  margin-bottom: 40px;
}
@media (min-width: 1200px) {
  .section-contact-2 .contact-info-wrap {
    margin-bottom: 60px;
  }
  .section-contact-2 .content-contact .title {
    margin-bottom: 32px;
  }
  .section-contact-2 .content-contact .desc {
    margin-bottom: 64px;
  }
  .section-contact-2 .contact-info-wrap .title,
  .section-contact-2 .contact-social-wrap .title {
    margin-bottom: 34px;
  }
  .section-contact-2 .contact-info_list {
    gap: 24px;
  }
}

.section-map {
  position: relative;
}
.section-map .infor-store-wrap {
  background-color: var(--white);
  padding: 20px 16px;
  pointer-events: all;
}
.section-map .infor-store-wrap .title {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .section-map .content-infor-store {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .section-map .infor-store-wrap {
    margin: 24px 24px 24px 0px;
  }
}
@media (min-width: 1200px) {
  .section-map .infor-store-wrap {
    padding: 48px;
  }
  .section-map .infor-store-wrap .title {
    margin-bottom: 46px;
  }
}
@media (max-width: 991px) {
  .section-map .wg-map {
    display: flex;
    margin-bottom: 30px;
  }
  .section-map .wg-map iframe {
    height: 400px;
  }
}

.s-header {
  margin-bottom: 80px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.s-header .tag-dot {
  margin-bottom: 32px;
}
.s-header.has-line-top {
  border-top: 1px solid var(--line-11);
}
.s-header.has-desc .s_title {
  margin-bottom: 40px;
}
.s-header.type-2 > * {
  width: 100%;
}
@media (min-width: 992px) {
  .s-header.type-2 > * {
    width: calc(50% - 6px);
  }
}
@media (max-width: 1199px) {
  .s-header {
    margin-bottom: 60px;
  }
  .s-header .tag-dot {
    margin-bottom: 16px;
  }
}
@media (max-width: 991px) {
  .s-header {
    margin-bottom: 40px;
  }
}

.s-header-2 {
  margin-bottom: 64px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .s-header-2 {
    margin-bottom: 40px;
  }
}

.s-header-3 {
  padding-bottom: 64px;
}
.s-header-3 .title span {
  font-weight: 275;
}
@media (max-width: 991px) {
  .s-header-3 {
    padding-bottom: 40px;
  }
}

.tag-dot {
  position: relative;
}
.tag-dot .text {
  padding-left: 16px;
  font-family: "Inter Tight", sans-serif;
}
.tag-dot::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gray-90);
}
.tag-dot.style-white::before {
  background-color: var(--white);
}

.s-feature-blog .list-tab-btn {
  gap: 12px;
}
.s-feature-blog .tf-grid-layout {
  column-gap: 12px;
}
@media (min-width: 1200px) {
  .s-feature-blog .tf-grid-layout {
    row-gap: 48px;
  }
}
@media (max-width: 767px) {
  .s-feature-blog .s-header {
    display: block;
  }
  .s-feature-blog .s-header .col-left {
    margin-bottom: 30px;
  }
  .s-feature-blog .list-tab-btn {
    justify-content: start;
  }
}

.s-let-connect {
  position: relative;
}
.s-let-connect .bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.s-let-connect .let-connect-wrap {
  max-width: 1416px;
  width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.s-let-connect .list {
  display: grid;
  gap: 15px;
  max-width: 321px;
  margin-bottom: 30px;
}
.s-let-connect .list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.s-let-connect .list li .icon {
  font-size: 24px;
}
.s-let-connect .box-our-team {
  margin-bottom: 40px;
  gap: 19px;
}
.s-let-connect .box-our-team .avt-item {
  max-width: 48px;
}
@media (min-width: 1200px) {
  .s-let-connect .col-wrap-left {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

.s-blog-single .entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background-color: var(--white);
  gap: 12px 8px;
  flex-wrap: wrap;
}
.s-blog-single .meta_author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.s-blog-single .author__image {
  border-radius: 50%;
  overflow: hidden;
}
.s-blog-single .meta_date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-70);
}
.s-blog-single .meta_date .icon {
  font-size: 16px;
}
.s-blog-single .entry-image {
  border-radius: 24px;
  padding: 8px;
  background-color: var(--white);
}
.s-blog-single .entry-image .image {
  border-radius: 18px;
  overflow: hidden;
}
.s-blog-single .entry-image .image img {
  min-height: 250px;
  width: 100%;
  object-fit: cover;
}
.s-blog-single .entry__title {
  margin-bottom: 20px;
}
.s-blog-single .entry-content {
  display: grid;
  gap: 24px;
}
.s-blog-single .box-list .list_title {
  margin-bottom: 16px;
}
.s-blog-single .box-list .list {
  display: grid;
  gap: 10px;
}
.s-blog-single .box-list .item {
  display: flex;
  position: relative;
}
.s-blog-single .box-list .dot {
  width: 5px;
  height: 5px;
  background-color: var(--gray-90);
  border-radius: 50%;
  flex-shrink: 0;
  position: absolute;
  top: 14px;
  left: 11px;
}
.s-blog-single .box-list .item_text {
  padding-left: 28px;
}
.s-blog-single .entry-image,
.s-blog-single .entry-content {
  margin-bottom: 40px;
}
.s-blog-single .tf-social-icon-2 {
  margin-bottom: 30px;
}
@media (min-width: 1200px) {
  .s-blog-single .entry-meta {
    padding-left: 24px;
    padding-right: 24px;
  }
  .s-blog-single .entry-image,
  .s-blog-single .entry-content {
    margin-bottom: 80px;
  }
  .s-blog-single .entry-content {
    gap: 48px;
  }
  .s-blog-single .tf-social-icon-2 .social-link {
    width: 48px;
    height: 48px;
  }
  .s-blog-single .tf-social-icon-2 .social-link .icon {
    font-size: 20px;
  }
}

.s-our-service .tf-grid-layout {
  gap: 8px;
}

.s-our-process .image {
  border-radius: 24px;
  overflow: hidden;
}
.s-our-process .image img {
  min-height: 350px;
  width: 100%;
  object-fit: cover;
}

.s-work-grid .tf-grid-layout {
  column-gap: 12px;
}
@media (min-width: 1200px) {
  .s-work-grid .tf-grid-layout {
    row-gap: 48px;
  }
}

.s-overview .tag-dot {
  position: absolute;
  top: 6px;
  left: 0;
}
.s-overview .text-color-change-2 {
  margin-bottom: 40px;
}
.s-overview .text-color-change-2 span {
  padding-left: 357px;
}
.s-overview .infor-list {
  display: grid;
  gap: 28px;
}
.s-overview .infor-list .item {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line-11);
  display: flex;
  justify-content: space-between;
}
.s-overview .infor-list .label-title {
  color: var(--text-5);
}
.s-overview .infor-list .label-text {
  color: var(--gray-90);
}
@media (min-width: 1200px) {
  .s-overview .text-color-change-2 {
    margin-bottom: 80px;
  }
  .s-overview .tag-dot {
    position: absolute;
    top: 11px;
    left: 3px;
  }
}
@media (max-width: 767px) {
  .s-overview .text-color-change-2 span {
    padding-left: 150px;
  }
}

.s-case .title {
  margin-bottom: 24px;
}
.s-case .image-2 {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
}
.s-case .image-2 img {
  width: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .s-case .title {
    margin-bottom: 40px;
  }
}

.image-sect img {
  min-height: 300px;
  width: 100%;
  object-fit: cover;
}

.s-about-intro .text-color-change-2 {
  margin-bottom: 32px;
}
.s-about-intro .text-color-change-2 span {
  padding-left: 50px;
}
.s-about-intro .box-social {
  display: flex;
  justify-content: space-between;
  padding-top: 19px;
  border-top: 1px solid var(--line-11);
  flex-wrap: wrap;
  gap: 15px;
}
.s-about-intro .box-social .left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.s-about-intro .box-social .left .icon {
  font-size: 42px;
}
.s-about-intro .box-social .br-line {
  width: 1px;
  height: 30px;
  background-color: var(--gray-50);
}
.s-about-intro .tf-social-icon-2 {
  gap: 10px;
}
@media (min-width: 1200px) {
  .s-about-intro .text-color-change-2 {
    margin-bottom: 32px;
  }
  .s-about-intro .text-color-change-2 span {
    padding-left: 100px;
  }
  .s-about-intro .social-link {
    width: 52px;
    height: 52px;
  }
  .s-about-intro .social-link .icon {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .s-about-intro .box-counter-v01 {
    margin-bottom: 30px;
    text-align: center;
  }
  .s-about-intro .box-counter-v01 .wg-counter {
    text-align: center;
  }
}

.s-br-image {
  padding-left: 12px;
  padding-right: 12px;
}
.s-br-image .videp-wrap {
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  position: relative;
}
.s-br-image .videp-wrap video {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.6;
  max-height: 900px;
  min-height: 350px;
}
.s-br-image .videp-wrap::after {
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.s-br-image .btn-view-video {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: unset;
}
.s-br-image .btn-view-video::after {
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: 0;
  border: 1px dashed var(--white);
  animation: spin-reverse 30s infinite linear;
}
.s-br-image .box-text {
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 2;
}
@media (min-width: 1200px) {
  .s-br-image .box-text {
    bottom: 80px;
    left: 48px;
    right: 48px;
  }
}
@media (max-width: 1439px) {
  .s-br-image .btn-view-video {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 991px) {
  .s-br-image .box-text {
    bottom: 15px;
  }
}

.s-evolution .s-header .title {
  margin-bottom: 32px;
}

.s-brand .brand-list {
  gap: 24px 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 1200px) {
  .s-brand .brand-list {
    gap: 46px 80px;
  }
}
@media (max-width: 991px) {
  .s-brand .s-header {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .s-brand .brand-list {
    gap: 24px;
  }
}

.s-team .tf-grid-layout {
  column-gap: 12px;
}
@media (min-width: 1200px) {
  .s-team .tf-grid-layout {
    row-gap: 40px;
  }
}

.s-testimonial .s-content {
  max-width: 1416px;
  margin: 0 auto;
  border-radius: 24px;
}
.s-testimonial .img_list {
  padding: 12px;
  border-radius: 24px;
  background-color: var(--white);
  display: flex;
  gap: 12px;
}
.s-testimonial .img_list .img__item {
  border-radius: 24px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.s-testimonial .img_list .img__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 200px;
}
.s-testimonial .swiper-tesimonial {
  height: 100%;
}
.s-testimonial .swiper-tesimonial .swiper-wrapper {
  cursor: ew-resize !important;
}
.s-testimonial .swiper-tesimonial .testimonial-v03 {
  height: 100%;
}
.s-testimonial .img-left {
  margin-bottom: 12px;
}
@media (min-width: 992px) {
  .s-testimonial .s-content {
    display: flex;
    gap: 12px;
  }
  .s-testimonial .img-left {
    width: 35%;
  }
  .s-testimonial .tes-right {
    width: 65%;
  }
  .s-testimonial .img_list {
    display: grid;
  }
  .s-testimonial .img_list .img__item {
    height: 190px;
  }
  .s-testimonial .img_list .img__item.active {
    height: 347px;
  }
}
@media (min-width: 1440px) {
  .s-testimonial .img-left {
    max-width: 479px;
    width: 100%;
  }
  .s-testimonial .tes-right {
    max-width: 923px;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .s-testimonial .img_list .img__item {
    opacity: 0.5;
    aspect-ratio: 1;
    width: 100%;
  }
  .s-testimonial .img_list .img__item.active {
    opacity: 1;
  }
  .s-testimonial .img_list .img__item img {
    min-height: auto;
  }
}

.s-hero-slide {
  /*-- min, between, max --*/
}
.s-hero-slide .container-wrap {
  padding-top: 20px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}
.s-hero-slide .bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.s-hero-slide .hero-title {
  font-size: clamp(64px, 28vw, 308px);
  line-height: clamp(64px, 28vw, 308px);
  color: var(--white);
  letter-spacing: -0.04em;
  font-weight: 600;
  text-align: start;
}
.s-hero-slide .hero-title span:not(.text-r) {
  align-items: start;
  gap: 20px;
}
.s-hero-slide .hero-title .text-r {
  font-size: 80px;
}
.s-hero-slide .wrap-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 100px;
}
.s-hero-slide .wrap-top .wrap-top_left {
  position: relative;
}
.s-hero-slide .wrap-top .img-item {
  position: absolute;
  left: 101%;
  top: 33%;
  aspect-ratio: 1;
  width: clamp(30px, 25vw, 52px);
}
.s-hero-slide .cate-list {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 5%;
  left: 23.6%;
}
.s-hero-slide .cate-list .br-dot {
  width: 8px;
  height: 8px;
  background-color: var(--line-13);
}
.s-hero-slide .scroll-down {
  display: flex;
  align-items: center;
  gap: 8px;
  writing-mode: sideways-lr;
  text-orientation: mixed;
}
.s-hero-slide .scroll-down .progress-bar {
  width: 1px;
  height: 88px;
  background-color: var(--line-8);
  position: relative;
}
.s-hero-slide .scroll-down .progress-line {
  position: absolute;
  top: 0;
  width: 1px;
  background-color: var(--white);
}
.s-hero-slide .scroll-down .text {
  color: rgba(255, 255, 255, 0.6);
}
.s-hero-slide .group-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.s-hero-slide .wrap-bottom {
  position: relative;
  z-index: 2;
}
.s-hero-slide .wrap-bottom_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.s-hero-slide .text-color-change span {
  padding-left: 54px;
}
@media (min-width: 768px) {
  .s-hero-slide .wrap-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .s-hero-slide .tf-swiper {
    max-width: 590px;
    margin: 0;
  }
  .s-hero-slide .wrap-bottom_left {
    margin-top: 5px;
    margin-bottom: 5px;
    max-width: 435px;
  }
  .s-hero-slide .cate-list {
    top: 13%;
  }
}
@media (min-width: 1200px) {
  .s-hero-slide .wrap-top {
    margin-bottom: 202px;
  }
  .s-hero-slide .wrap-bottom {
    padding-left: 48px;
  }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .s-hero-slide .wrap-bottom {
    margin-right: -15px;
  }
}
@media (max-width: 767px) {
  .s-hero-slide .wrap-top {
    margin-bottom: 80px;
  }
}

.s-why-choose .text-color-change-2 {
  margin-bottom: 60px;
}
.s-why-choose .s-img {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 30px;
}
.s-why-choose .s-img img {
  width: 100%;
  object-fit: cover;
  object-position: top;
}
.s-why-choose .desc-wrap {
  width: 100%;
}
.s-why-choose .desc {
  margin-bottom: 32px;
}
.s-why-choose .card-project {
  margin-bottom: 12px;
}
@media (min-width: 576px) {
  .s-why-choose .tag-dot {
    position: absolute;
    top: 6px;
    left: 0;
  }
  .s-why-choose .text-color-change-2 span {
    padding-left: 244px;
  }
  .s-why-choose .card-project {
    height: 100%;
  }
  .s-why-choose .card-project.first {
    height: unset;
  }
}
@media (min-width: 768px) {
  .s-why-choose .desc-wrap {
    max-width: 322px;
    width: 100%;
    margin-left: 111px;
  }
}
@media (min-width: 992px) {
  .s-why-choose .card-project {
    height: 100%;
  }
  .s-why-choose .card-project.first {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .s-why-choose .wrap-tag-text {
    margin-top: -11px;
  }
  .s-why-choose .tag-dot {
    top: 12px;
  }
  .s-why-choose .desc {
    margin-bottom: 48px;
  }
}
@media (min-width: 1440px) {
  .s-why-choose .text-color-change-2 {
    margin-bottom: 121px;
  }
}
@media (max-width: 767px) {
  .s-why-choose .s-img img {
    max-height: 350px;
  }
  .s-why-choose .text-color-change-2 {
    margin-bottom: 30px;
  }
}

.s-showcase .wg-work {
  top: 12px;
}
@media (min-width: 992px) {
  .s-showcase .tf-grid-layout {
    row-gap: 40px;
  }
}

.s-our-member .slide-member-wrap {
  overflow: hidden;
}
.s-our-member .slide-member-wrap .slider-testimonial {
  margin-bottom: 60px;
}
.s-our-member .slide-member-wrap .title {
  margin-bottom: 24px;
}
.s-our-member .member-thumbs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.s-our-member .image-list {
  display: flex;
  gap: 16px;
}
.s-our-member .image-list .image-item {
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}
.s-our-member .image-list .image-item:not(.active) {
  opacity: 0.5;
}

.s-case-study .s-content {
  display: grid;
  grid-template-columns: 1fr 654px 1fr;
  gap: 12px;
}
.s-case-study .item-grid-1 {
  grid-column: 1;
}
.s-case-study .item-grid-2 {
  grid-column: 2;
}
.s-case-study .item-grid-3 {
  grid-column: 3;
}
@media (min-width: 992px) {
  .s-case-study .tf-grid-layout {
    height: 100%;
  }
}

.s-process .s-header {
  max-width: 432px;
  width: 100%;
}
@media (min-width: 992px) {
  .s-process .content-wrap {
    display: flex;
    align-items: start;
    gap: 12px;
  }
}
@media (min-width: 1200px) {
  .s-process .s-header {
    max-width: 543px;
  }
}

.s-pricing .tf-tab-btn {
  height: 36px;
  padding-right: 24px;
  padding-left: 24px;
}
.s-pricing .pricing-v02 {
  margin-bottom: 30px;
}

.main-content {
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
  border-radius: 0px 0px 40px 40px;
  overflow: hidden;
}
.main-content.full-radius {
  margin-top: -40px;
  border-radius: 40px;
}

.s-page-title-blog {
  position: relative;
}
.s-page-title-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.4) 100%);
}
.s-page-title-blog .content {
  padding-top: 524px;
  padding-bottom: 160px;
}
.s-page-title-blog .tag-badget_list {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.s-page-title-blog .tag-badget_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: var(--white-20);
}
.s-page-title-blog .title {
  margin-bottom: 30px;
}
@media (max-width: 1439px) {
  .s-page-title-blog .content {
    padding-top: 200px;
    padding-bottom: 120px;
  }
}
@media (max-width: 991px) {
  .s-page-title-blog .content {
    padding-top: 160px;
  }
}

.has-bg-linear {
  position: relative;
}
.has-bg-linear::after {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  max-height: 1268px;
  pointer-events: none;
  background: linear-gradient(180deg, #C3BFB5 0%, #F0EEE8 16.76%);
}

.has-bg-linear-2 {
  position: relative;
}
.has-bg-linear-2::after {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #E5E2DA 12.29%, #F0EEE8 40.06%);
}

@media (min-width: 992px) {
  .s-contact-v2 .wg-talk {
    height: 100%;
  }
}
@media (min-width: 1440px) {
  .s-contact-v2 {
    padding-top: 180px;
  }
}
@media (max-width: 991px) {
  .s-contact-v2 {
    padding-bottom: 0;
  }
}

.s-pricing-v2 .title {
  margin-bottom: 24px;
}
.s-pricing-v2 .sub-title,
.s-pricing-v2 .title-section {
  margin-bottom: 40px;
}
.s-pricing-v2 .tf-tab-btn {
  height: 40px;
  gap: 6px;
}
.s-pricing-v2 .wg-pricing-v2 {
  margin-bottom: 30px;
}

.s-table-pricing .title {
  margin-bottom: 64px;
}
@media (max-width: 1199px) {
  .s-table-pricing .title {
    margin-bottom: 30px;
  }
}

.business-title-section {
  padding-bottom: 40px;
}
.business-title-section .name-section {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.business-title-section.has-desc .title-section {
  margin-bottom: 32px;
}
@media (min-width: 1200px) {
  .business-title-section {
    padding-bottom: 64px;
  }
  .business-title-section.has-desc .title-section {
    margin-bottom: 40px;
  }
}

.section-hero-service {
  background: linear-gradient(180deg, #C3BFB5 0%, #F0EEE8 24.22%);
}

.section-business-service .wg-service-v2:not(:last-child) {
  margin-bottom: 24px;
}

.tf-list {
  display: flex;
  gap: 16px;
}
.tf-list.vertical {
  display: grid;
}

.section-business-faq .col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 40px;
}
.section-business-faq .col-left .ask-question {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
}
.section-business-faq .text-still {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-business-faq .text-still .icon {
  display: flex;
}
@media (min-width: 992px) {
  .section-business-faq .col-left {
    height: 100%;
    margin-bottom: 0;
  }
}

.section-business-hero-about {
  position: relative;
}
.section-business-hero-about .image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.section-business-hero-about .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-business-hero-about .image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.4) 100%);
}
.section-business-hero-about .wrap-content {
  padding-top: 505px;
  padding-bottom: 240px;
}
@media (max-width: 1199px) {
  .section-business-hero-about .wrap-content {
    padding-top: 300px;
    padding-bottom: 180px;
  }
}
@media (max-width: 991px) {
  .section-business-hero-about .wrap-content {
    padding-top: 220px;
    padding-bottom: 140px;
  }
}
@media (max-width: 575px) {
  .section-business-hero-about .wrap-content {
    padding-top: 180px;
    padding-bottom: 100px;
  }
}
@media (max-width: 991px) {
  .section-business-hero-about {
    height: calc(100vh - 30px);
  }
  .section-business-hero-about .wrap-content {
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.section-business-about {
  position: relative;
}
.section-business-about .content-wrap {
  position: relative;
  z-index: 2;
}
.section-business-about .img-icon {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.section-business-about .business-title-section {
  padding-bottom: 46px;
}
.section-business-about .title-wrapper {
  position: relative;
}
.section-business-about .title-wrapper .title-section {
  top: 0;
  left: 0;
  width: 100%;
}
.section-business-about .title-wrapper .title-1 {
  z-index: 1;
  position: absolute;
}
.section-business-about .title-wrapper .title-2 {
  z-index: 2;
}
@media (max-width: 767px) {
  .section-business-about .img-icon {
    top: 0%;
    right: 15px;
    left: 15px;
    transform: unset;
  }
}
@media (max-width: 575px) {
  .section-business-about .img-icon {
    top: 5%;
  }
}
@media (max-width: 425px) {
  .section-business-about .img-icon {
    top: 12%;
  }
}

.section-business-ceo {
  position: relative;
  border-radius: 40px 40px 0px 0px;
  overflow: hidden;
  padding-bottom: 103px;
  margin-bottom: -40px;
}
.section-business-ceo .business-video {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.section-business-ceo .overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}
.section-business-ceo .business-title-section {
  padding-bottom: 148px;
}
.section-business-ceo .card-ceo {
  max-width: 256px;
  margin-left: auto;
}
@media (min-width: 992px) {
  .section-business-ceo .title-section {
    padding-right: 10px;
  }
}

.section-business-why {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  z-index: 1;
}
.section-business-why .business-title-section {
  padding-bottom: 45px;
}
.section-business-why .overlay-item {
  position: absolute;
  width: 772px;
  height: 460px;
  background: rgba(233, 246, 220, 0.6);
  filter: blur(620px);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.section-business-why .image {
  width: 100%;
}
.section-business-why .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-business-team .tf-grid-layout {
  gap: 24px;
}

.section-business-banner-hero .sw-dot-pagination {
  position: absolute;
  bottom: 20px;
  left: 15px;
  right: 15px;
  margin: 0;
  z-index: 2;
}

.section-business-service-2 {
  border-radius: 40px 40px 0px 0px;
  overflow: hidden;
}
.section-business-service-2 .wrap {
  position: relative;
}
.section-business-service-2 .tab-content {
  z-index: 1;
}
@media (min-width: 992px) {
  .section-business-service-2 .list-tab-service {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
  }
}
@media (max-width: 991px) {
  .section-business-service-2 .list-tab-service {
    margin-bottom: 30px;
    overflow: auto;
  }
  .section-business-service-2 .list-tab-service .tf-btn-tab {
    border-color: var(--gray-200);
    color: var(--primary);
  }
  .section-business-service-2 .list-tab-service .tf-btn-tab.active, .section-business-service-2 .list-tab-service .tf-btn-tab:hover {
    background-color: var(--gray-200);
  }
}

.section-business-tesimonial {
  position: relative;
}
.section-business-tesimonial .img-item-bg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  z-index: 0;
}
.section-business-tesimonial .img-item-bg img {
  object-fit: cover;
  object-position: top;
}
.section-business-tesimonial .item-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.section-business-tesimonial .item-bg .eclip {
  width: 772px;
  height: 460px;
  background: #E9F6DC;
  filter: blur(150px);
}
.section-business-tesimonial .circle-container {
  position: relative;
}
.section-business-tesimonial .circle-container.swiper-max-1200 {
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 1200px) {
  .section-business-tesimonial {
    padding-top: 376px;
    padding-bottom: 376px;
  }
  .section-business-tesimonial .circle-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-business-tesimonial .img-item-bg {
    padding-top: 52px;
  }
  .section-business-tesimonial .testimonial-v04 {
    max-width: 416px;
  }
  .section-business-tesimonial .inner-element {
    position: absolute;
    width: auto;
    height: auto;
  }
}

.section-cosmetic-hero-shop {
  padding-top: 141px;
  margin: 12px;
  margin-bottom: 0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}
.section-cosmetic-hero-shop .hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-cosmetic-hero-shop .hero-image .img-thumbs {
  position: absolute;
  inset: 0;
}
.section-cosmetic-hero-shop .hero-image .img-thumbs img {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
}
.section-cosmetic-hero-shop .hero-image .img-thumbs.active img {
  opacity: 1;
}
.section-cosmetic-hero-shop .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-cosmetic-hero-shop .hero-title span {
  font-weight: 275;
}
.section-cosmetic-hero-shop .col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  height: 100%;
}
.section-cosmetic-hero-shop .swiper-hero-main-thumb {
  margin-bottom: 40px;
}
.section-cosmetic-hero-shop .sw-line-vertical {
  margin-top: 12px;
}
.section-cosmetic-hero-shop.style-home {
  padding-bottom: 52px;
}
.section-cosmetic-hero-shop.style-home .title-slide span {
  font-weight: 275;
  margin-bottom: 4px;
  display: block;
}
.section-cosmetic-hero-shop.style-home .swiper-hero-main-thumb {
  margin-bottom: 22px;
}
.section-cosmetic-hero-shop.style-home .environment-list {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.section-cosmetic-hero-shop.style-home .environment-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--white-20);
  backdrop-filter: blur(24px);
  color: var(--white);
  font-size: 26px;
  background: var(--white-16);
}
@media (min-width: 576px) {
  .section-cosmetic-hero-shop .swiper-hero-main-thumb {
    height: 100%;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .section-cosmetic-hero-shop {
    padding-top: 141px;
    padding-bottom: 80px;
  }
  .section-cosmetic-hero-shop.style-home .col-left {
    gap: 41px;
  }
  .section-cosmetic-hero-shop.style-home .swiper-hero-thumb {
    margin-top: 22px;
  }
  .section-cosmetic-hero-shop.type-2 {
    padding-top: 139px;
  }
}
@media (max-width: 575px) {
  .section-cosmetic-hero-shop.style-home .swiper-hero-thumb {
    margin-top: 30px;
  }
  .section-cosmetic-hero-shop.style-home .environment-list {
    margin-bottom: 20px;
  }
}

@media (min-width: 1440px) {
  .section-cosmetic-product-detail {
    padding-top: 86px;
  }
  .section-cosmetic-product-detail .tf-product-media-wrap {
    margin-right: -20px;
  }
  .section-cosmetic-product-detail .tf-product-info-wrap {
    max-width: 555px;
  }
}

.banner-image-compare {
  border-radius: 28px;
  overflow: hidden;
}
.banner-image-compare .icv__label {
  border-radius: 6px;
  background-color: var(--white);
  color: var(--primary);
  padding: 12px 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  bottom: unset;
  top: 24px;
}
.banner-image-compare .icv__label.icv__label-before {
  left: 24px;
}
.banner-image-compare .icv__label.icv__label-after {
  right: 24px;
}
.banner-image-compare .icv__theme-wrapper {
  display: none;
}
.banner-image-compare .icv__circle {
  backdrop-filter: unset !important;
  background-color: var(--white);
}
.banner-image-compare .icv__circle::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 1.5px solid var(--black) !important;
  border-right: 1.5px solid var(--black) !important;
}
@media (min-width: 1200px) {
  .banner-image-compare .icv__label {
    top: 48px;
  }
  .banner-image-compare .icv__label.icv__label-before {
    left: 48px;
  }
  .banner-image-compare .icv__label.icv__label-after {
    right: 48px;
  }
  .banner-image-compare .icv__circle {
    width: 52px;
    height: 52px;
  }
  .banner-image-compare .icv__control {
    width: 52px !important;
  }
  .banner-image-compare .icv__control-line {
    width: 6px !important;
  }
}
@media (max-width: 767px) {
  .banner-image-compare .icv__label {
    display: none;
  }
  .banner-image-compare .img-comp {
    aspect-ratio: 1.0666666667;
    object-fit: cover;
  }
}

.section-cosmetic-befor-after .banner-image-compare {
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .section-cosmetic-befor-after .banner-image-compare {
    margin-bottom: 40px;
  }
}

.section-business-customer-review {
  /*-- min, between, max --*/
}
.section-business-customer-review .box-customer-review {
  margin-bottom: 37px;
  gap: 30px 0px;
}
.section-business-customer-review .box-customer-review .left,
.section-business-customer-review .box-customer-review .right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-business-customer-review .box-customer-review .btn-wrap {
  padding-left: 27px;
  padding-right: 27px;
}
.section-business-customer-review .review-based {
  display: grid;
  gap: 14px;
}
.section-business-customer-review .review-based .based_head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-business-customer-review .review-progress-list {
  display: grid;
  gap: 8px;
}
.section-business-customer-review .rate-progress-star {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-business-customer-review .rate-progress-star .rate-wrap {
  margin-right: 30px;
}
.section-business-customer-review .rate-progress-star .progress {
  max-width: 190px;
  width: 100%;
  margin-right: 21px;
  border-radius: 0;
  background-color: var(--gray-20);
  border-radius: 1212px;
}
.section-business-customer-review .rate-progress-star .progress .progress-bar {
  background-color: var(--primary);
}
.section-business-customer-review .sort-by {
  padding-top: 40px;
  padding-bottom: 19px;
  border-top: 1px solid var(--black-10);
  border-bottom: 1px solid var(--black-10);
  display: flex;
  margin-bottom: 40px;
}
.section-business-customer-review .select-sort-comment {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.section-business-customer-review .select-sort-comment select {
  padding-left: 5px;
  padding-right: 30px;
}
.section-business-customer-review .select-sort-comment .icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.section-business-customer-review .customer-review-list .wg-customer-review:not(:last-child) {
  padding-bottom: 23px;
  border-bottom: 1px solid var(--black-10);
}
@media (min-width: 1200px) {
  .section-business-customer-review .box-customer-review {
    padding-right: 22px;
  }
  .section-business-customer-review .box-customer-review .midle {
    padding: 14px;
    border-right: 1px solid var(--gray-20);
    border-left: 1px solid var(--gray-20);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-business-customer-review .box-customer-review .midle {
    order: 2;
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .section-business-customer-review .box-customer-review .review-based {
    text-align: center;
  }
}

.section-cosmetic-lookbook .s-header-3 {
  padding-bottom: 40px;
}
.section-cosmetic-lookbook .col-left {
  padding: 30px 20px;
  background: linear-gradient(180deg, #FFE6E6 0%, #FFECD3 100%);
  border-radius: 28px;
  overflow: hidden;
}
.section-cosmetic-lookbook .col-right {
  margin-bottom: 30px;
}
.section-cosmetic-lookbook .tf-btn-swiper-main {
  display: flex;
  align-items: center;
  gap: 20px;
}
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-prev-swiper,
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-next-swiper {
  font-size: 24px;
  color: var(--primary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-prev-swiper:hover,
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-next-swiper:hover {
  color: var(--secondary);
}
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-prev-swiper.swiper-button-disabled,
.section-cosmetic-lookbook .tf-btn-swiper-main .nav-next-swiper.swiper-button-disabled {
  opacity: 0.6;
}
.section-cosmetic-lookbook .banner-image-lookbook .image-lookbook {
  width: 100%;
}
.section-cosmetic-lookbook .banner-image-lookbook img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .section-cosmetic-lookbook .col-left,
  .section-cosmetic-lookbook .col-right {
    height: 100%;
  }
  .section-cosmetic-lookbook .banner-image-lookbook {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .section-cosmetic-lookbook .col-left {
    padding: 22.5px 55px 23.5px 55px;
  }
  .section-cosmetic-lookbook .col-right {
    margin-bottom: 0;
  }
  .section-cosmetic-lookbook .sw-line-vertical {
    margin-top: 20px;
  }
}
@media (max-width: 575px) {
  .section-cosmetic-lookbook .tf-btn-swiper-main {
    gap: 8px;
  }
  .section-cosmetic-lookbook .tf-btn-swiper-main .nav-prev-swiper,
  .section-cosmetic-lookbook .tf-btn-swiper-main .nav-next-swiper {
    font-size: 16px;
  }
  .section-cosmetic-lookbook .col-right {
    margin-bottom: 30px;
  }
  .section-cosmetic-lookbook .col-left {
    padding: 20px 15px;
  }
}

.section-cosmetic-beautiful .s-header-3 {
  padding-bottom: 112px;
}
.section-cosmetic-beautiful .ic-head {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.2);
  font-size: 32px;
  color: var(--black);
  border-radius: 50%;
  margin: 0 auto 28px;
}
.section-cosmetic-beautiful .wg-icon-2 {
  margin-bottom: 30px;
}
.section-cosmetic-beautiful .wrap {
  position: relative;
}
.section-cosmetic-beautiful .img-item {
  position: absolute;
}
.section-cosmetic-beautiful .img-item.item-1 {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.section-cosmetic-beautiful .img-item.item-2 {
  filter: blur(16px);
  left: 28%;
  top: 25%;
  z-index: 1;
  animation: sway1 5s ease-in-out infinite;
  transform-origin: top center;
}
.section-cosmetic-beautiful .img-item.item-3 {
  top: 5%;
  right: 10%;
  animation: sway2 6s ease-in-out infinite;
  transform-origin: top center;
}
.section-cosmetic-beautiful .img-item.item-4 {
  bottom: 5%;
  left: 10%;
}
@media (min-width: 576px) {
  .section-cosmetic-beautiful .wg-icon-2 {
    margin-bottom: 0;
  }
  .section-cosmetic-beautiful .wg-icon-2.s1 {
    margin-top: 136px;
  }
}
@media (min-width: 1200px) {
  .section-cosmetic-beautiful .row-s2 {
    margin-top: 191px;
  }
}

.section-cosmetic-testimonial {
  position: relative;
}
.section-cosmetic-testimonial .text-item {
  font-size: clamp(40px, 12vw, 224px);
  line-height: clamp(40px, 12.5vw, 228px);
  color: #FFF5E9;
  text-align: center;
  margin-bottom: 30px;
  padding: 0px 15px;
  letter-spacing: -0.05em;
}
.section-cosmetic-testimonial .testimonial-v05 {
  margin-bottom: 15px;
}
@media (min-width: 576px) {
  .section-cosmetic-testimonial .testimonial-v05 {
    margin-bottom: 0;
  }
  .section-cosmetic-testimonial .testimonial-v05.s1 {
    margin-top: 28px;
  }
  .section-cosmetic-testimonial .testimonial-v05.s2, .section-cosmetic-testimonial .testimonial-v05.s3, .section-cosmetic-testimonial .testimonial-v05.s4, .section-cosmetic-testimonial .testimonial-v05.s6 {
    margin-top: 48px;
  }
  .section-cosmetic-testimonial .testimonial-v05.s5 {
    margin-top: 68px;
  }
  .section-cosmetic-testimonial .testimonial-v05.s6 {
    margin-bottom: 28px;
  }
}
.section-cosmetic-testimonial .text-item {
  position: sticky;
  inset: 20% 15px 0px 15px;
  z-index: -1;
  margin-bottom: 0;
}
.section-cosmetic-faq .cosmetic-faq {
  max-width: 908px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.cosmetic-gallery-grid {
  gap: 15px;
  /*-- min, between, max --*/
}
.cosmetic-gallery-grid .gallery-ins {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
  border: 1px solid var(--gray-20);
  border-radius: 20px;
  padding: 20px 15px;
  min-height: 200px;
}
.cosmetic-gallery-grid .gallery-ins .title span {
  font-weight: 275;
}
.cosmetic-gallery-grid .gallery-ins .action {
  padding-left: 23px;
  padding-right: 23px;
}
@media (min-width: 1200px) {
  .cosmetic-gallery-grid {
    gap: 20px;
  }
  .cosmetic-gallery-grid .gallery-ins {
    gap: 56px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .cosmetic-gallery-grid .gallery-ins {
    grid-column: 1/-1;
  }
}

.section-cosmetic-text-image .box-text-image-wrap {
  margin-bottom: 40px;
}
.section-cosmetic-text-image .action {
  padding-left: 24px;
  padding-right: 24px;
}

.section-comestic-tab-product .s-header-2 {
  align-items: center;
}
.section-comestic-tab-product .tf-grid-layout {
  gap: 20px;
}
@media (max-width: 991px) {
  .section-comestic-tab-product .tf-grid-layout {
    gap: 15px;
  }
}

.section-cosmetic-restock {
  position: relative;
  padding-bottom: 138px;
}
.section-cosmetic-restock .img-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-cosmetic-restock .s-header-3 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px 16px;
  flex-wrap: wrap;
}
.section-cosmetic-restock .col-left {
  margin-bottom: 30px;
}
.section-cosmetic-restock .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.section-cosmetic-restock .tag-list a {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1212px;
  border: 1px solid var(--gray-30);
  padding-left: 19px;
  padding-right: 19px;
  color: var(--gray-60);
}
.section-cosmetic-restock .tag-list a:hover {
  background-color: var(--gray-30);
}
.section-cosmetic-restock .swiper-product-wrap .group-nav {
  top: 35%;
}
@media (min-width: 768px) {
  .section-cosmetic-restock .s-header-3 {
    padding-bottom: 328px;
  }
}
@media (max-width: 767px) {
  .section-cosmetic-restock {
    padding-bottom: 0;
  }
  .section-cosmetic-restock .img-item {
    filter: blur(40px);
  }
  .section-cosmetic-restock .img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.section-related {
  position: relative;
}
.section-related .bg-img-clip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 11%;
}
.section-related .bg-img-clip span {
  display: block;
  width: 1162px;
  height: 330px;
  background: #FF7535;
  opacity: 0.7;
  filter: blur(115px);
}
@media (min-width: 1440px) {
  .section-related {
    padding-bottom: 146px;
  }
  .section-related.type-2 {
    padding-top: 115px;
    padding-bottom: 125px;
  }
  .section-related.type-2 .s-title {
    margin-bottom: 84px;
  }
}

@media (min-width: 1440px) {
  .section-camping-shop {
    padding-bottom: 148px;
  }
}

.has-line-bt {
  position: relative;
}
.has-line-bt::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: var(--gray-200);
  max-width: 1296px;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.section-blog-grid .wd-pagination {
  margin-top: 20px;
}
.section-blog-grid .pagination-list {
  gap: 10px;
}

.section-cosmetic-shop {
  position: relative;
}
.section-cosmetic-shop .filter-group-check .list-item:not(:last-child) {
  margin-bottom: 10px;
}
.section-cosmetic-shop::after {
  content: "";
  position: absolute;
  max-width: 1310px;
  width: 100%;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--black-10);
}
@media (min-width: 1200px) {
  .section-cosmetic-shop .sidebar-filter {
    max-width: 265px;
    margin-left: auto;
    padding-top: 30px;
  }
}

@media (min-width: 1200px) {
  .section-cosmetic-hero-about {
    padding-top: 63px;
  }
  .section-cosmetic-hero-about .s-header-3 {
    padding-bottom: 88px;
  }
}

.section-cosmetic-info .box-text-image-wrap {
  gap: 8px 11px;
}
@media (max-width: 991px) {
  .section-cosmetic-info .box-text-image-wrap {
    gap: 0px 6px;
  }
}

.brand-video {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  padding: 0px 1px;
}
.brand-video video {
  max-height: 810px;
  min-height: 300px;
}

.line-wrapper {
  display: block;
  overflow: hidden;
}

.word-wrapper,
.char-wrapper {
  display: inline-block;
}

.odometer-value {
  display: flex !important;
}

.simulator-iphone {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transform: rotate(8deg);
  overflow: hidden;
}
.simulator-iphone .screen-list {
  position: absolute;
  inset: 14px;
  overflow: hidden;
  border-radius: 40px;
}
.simulator-iphone .screen-list .screen {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.simulator-iphone .screen-list .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .simulator-iphone {
    max-width: 230px;
  }
  .simulator-iphone .screen-list {
    inset: 10px;
    border-radius: 34px;
  }
}
@media (max-width: 575px) {
  .simulator-iphone {
    max-width: 180px;
  }
  .simulator-iphone .screen-list {
    border-radius: 20px;
  }
}

.pag-process {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
}
.pag-process .pag-item {
  width: 2px;
  height: 53px;
  background-color: var(--primary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.pag-process .pag-item:not(.active) {
  opacity: 0.2;
}
@media (max-width: 767px) {
  .pag-process {
    gap: 8px;
  }
  .pag-process .pag-item {
    height: 40px;
  }
}

.main-process {
  position: relative;
  z-index: 2;
  margin-top: -115px;
}
.main-process .content .number-order {
  margin-bottom: 28px;
}
.main-process .content .title {
  margin-bottom: 8px;
}
.main-process .g-number-order,
.main-process .g-title,
.main-process .g-desc {
  position: relative;
  overflow: hidden;
}
.main-process .g-number-order > *,
.main-process .g-title > *,
.main-process .g-desc > * {
  position: absolute;
  left: 0;
  top: 0;
}
.main-process .g-number-order > *:first-child,
.main-process .g-title > *:first-child,
.main-process .g-desc > *:first-child {
  position: relative;
}

.section-process {
  /*-- min, between, max --*/
}
@media (min-width: 576px) and (max-width: 1199px) {
  .section-process .main-process {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .section-process .main-process {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    bottom: 15px;
    margin-top: 0;
  }
  .section-process .main-process .container,
  .section-process .main-process .row {
    height: 100%;
  }
}

.section-camping-shop-cart .heading {
  margin-bottom: 64px;
}
.section-camping-shop-cart .heading .title {
  margin-bottom: 28px;
}
.section-camping-shop-cart .heading .text {
  margin-bottom: 16px;
}
.section-camping-shop-cart .line-prg {
  height: 4px;
  background-color: var(--black-10);
  display: block;
  max-width: 434px;
  margin: 0 auto;
  position: relative;
}
.section-camping-shop-cart .line-prg .line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--primary);
  width: var(--w, 0);
  animation: grow 3s forwards;
}
.section-camping-shop-cart .box-order-summary {
  max-width: 458px;
  margin-left: auto;
}
.section-camping-shop-cart .box-order-summary .checkbox-wrap {
  margin-bottom: 24px;
}
.section-camping-shop-cart .box-order-summary .total-order {
  margin-bottom: 16px;
}
.section-camping-shop-cart .box-order-summary .text-tax {
  margin-bottom: 28px;
}
.section-camping-shop-cart .box-order-summary {
  margin-top: 64px;
}
.section-camping-shop-cart.type-2 .box-spend {
  max-width: 464px;
  margin: 0 auto;
  padding: 19px;
  border: 1px solid var(--gray-20);
  border-radius: 12px;
}
.section-camping-shop-cart.type-2 .box-spend .text {
  margin-bottom: 12px;
}
.section-camping-shop-cart.type-2 .box-spend .line-prg {
  border-radius: 4px;
}
.section-camping-shop-cart.type-2 .box-spend .line-prg .line {
  border-radius: 4px;
}
@media (min-width: 1200px) {
  .section-camping-shop-cart.type-2 .box-order-summary .action-checkout {
    height: 48px;
  }
}

.section-checkout {
  position: relative;
  padding: 64px 0px;
}
.section-checkout .container-wrapper {
  display: flex;
  justify-content: center;
}
.section-checkout .col-left {
  width: 58.6111111111%;
}
.section-checkout .col-left .tf-checkout {
  max-width: 682px;
  margin-left: auto;
  margin-right: 114px;
}
.section-checkout .col-right {
  width: 41.3888888889%;
  background-color: var(--white);
}
.section-checkout.type-2 fieldset input {
  border-radius: 8px;
}
.section-checkout.type-2 fieldset input:not(:focus) {
  border-color: var(--black-20);
}
.section-checkout.type-2 .tf-select select {
  border-radius: 8px;
}
.section-checkout.type-2 .tf-select select:not(:focus) {
  border-color: var(--black-20);
}
.section-checkout.type-2 .payment-body {
  border-radius: 12px;
}
.section-checkout.type-2 .payment-body .payment-head {
  border-radius: 12px 12px 0px 0px;
  border-color: var(--primary);
  background: rgba(162, 123, 104, 0.1019607843);
}
.section-checkout.type-2 .order-item .img-prd .image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1607843137);
  border: 0;
}
.section-checkout.type-2 .order-item .img-prd .number-count {
  border-radius: 4px;
}
.section-checkout.type-2 .order-item .name {
  margin-bottom: 4px;
}
.section-checkout.type-2 .action-submit {
  border-radius: 8px;
}
.section-checkout.type-2 .last-total .text-usd {
  margin-bottom: 2px;
}
.section-checkout.type-2 .enter-your-ship {
  border-radius: 12px;
}
@media (min-width: 1200px) {
  .section-checkout.type-2 .action-payment {
    border-radius: 12px;
    height: 60px;
  }
}
@media (min-width: 768px) {
  .section-checkout .tf-checkout {
    max-width: 682px;
  }
  .section-checkout .content-right {
    max-width: 500px;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .section-checkout .tf-checkout-cart-main {
    margin-bottom: 60px;
  }
}

.sect-title-d6 {
  text-align: center;
  margin-bottom: 80px;
}
.sect-title-d6 .s-mini-title {
  margin-bottom: 8px;
  border-radius: 1212px;
  background: linear-gradient(180deg, #EEEEEE 30.33%, #F5F5F5 85%);
  padding: 8px 10px;
  display: inline-flex;
}
.sect-title-d6 .s-mini-title span {
  padding: 5px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1212px;
  background: var(--white);
  border: 0.5px solid var(--black-12);
}
.sect-title-d6 .s-title {
  margin-bottom: 12px;
}
.sect-title-d6.dark .s-mini-title {
  background: linear-gradient(180deg, rgba(21, 21, 21, 0) 19.91%, #151515 100%);
  box-shadow: 0px 3px 4px 0px rgba(221, 221, 221, 0.0588235294) inset, 0px 0.5px 1px 0px rgba(221, 221, 221, 0.0392156863) inset;
}
.sect-title-d6.dark .s-mini-title span {
  background: var(--white-3);
  border-color: var(--white-4);
}
@media (max-width: 991px) {
  .sect-title-d6 {
    margin-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .sect-title-d6 {
    margin-bottom: 40px;
  }
}

.section-d2-log .title {
  margin-bottom: 28px;
}
.section-d2-log .desc {
  margin-bottom: 70px;
}
@media (max-width: 1199px) {
  .section-d2-log .title {
    margin-bottom: 20px;
  }
  .section-d2-log .desc {
    margin-bottom: 40px;
  }
}

.section-d5-log .title {
  margin-bottom: 20px;
}
.section-d5-log .desc {
  margin-bottom: 40px;
}
@media (min-width: 1200px) {
  .section-d5-log {
    padding-top: 64px;
  }
  .section-d5-log .desc {
    margin-bottom: 80px;
  }
}

.section-pricing-d6 .after-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.section-pricing-d6 .after-credit .icon {
  font-size: 20px;
}
.section-pricing-d6 .list-tab-btn-2 {
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .section-pricing-d6 .wg-plan-d6:not(.style-2) {
    margin-bottom: 30px;
  }
}

.section-intro-about-d6 {
  background: #F3F3F3;
}
.section-intro-about-d6 .about-img-list {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
}
.section-intro-about-d6 .about-img-list li {
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--white);
  width: 44px;
}
.section-intro-about-d6 .about-img-list li:not(:last-child) {
  margin-right: -12px;
}
.section-intro-about-d6 .image-rate {
  display: grid;
  place-items: center;
}
.section-intro-about-d6 .image-rate .text-rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-intro-about-d6 .sect-title-d6 .s-desc {
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .section-intro-about-d6 .sect-title-d6 {
    margin-bottom: 92px;
  }
  .section-intro-about-d6 .sect-title-d6 .s-desc {
    margin-bottom: 32px;
  }
}

.infiniteSlide-about-d6 {
  margin-bottom: 24px;
}
.infiniteSlide-about-d6 .infiniteSlide-slide {
  margin-left: 10px;
  margin-right: 10px;
}
.infiniteSlide-about-d6 .image-intro {
  border-radius: 16px;
  overflow: hidden;
}

.tesimonial-wrap-d6 .col-left {
  background: var(--white);
  padding: 62px 54px 54px;
  border-radius: 16px;
  border: 1px solid var(--gray-10);
  position: relative;
  overflow: hidden;
}
.tesimonial-wrap-d6 .col-left .ic-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.tesimonial-wrap-d6 .col-left .bg-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tesimonial-wrap-d6 .col-left .group-btn-d6 {
  position: relative;
  z-index: 1;
}
.tesimonial-wrap-d6 .sw-thumb {
  margin-bottom: 75px;
}
.tesimonial-wrap-d6 .col-right {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
}
.tesimonial-wrap-d6 .col-right .bg-item {
  position: absolute;
  inset: 0;
}
.tesimonial-wrap-d6 .col-right .bg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tesimonial-wrap-d6 .col-right .sw-main-thumb,
.tesimonial-wrap-d6 .col-right .testimonial-image-d6 {
  height: 100%;
}
@media (min-width: 768px) {
  .tesimonial-wrap-d6 .col-left,
  .tesimonial-wrap-d6 .col-right {
    height: 100%;
    margin-bottom: 0;
  }
}
@media (max-width: 1199px) {
  .tesimonial-wrap-d6 .sw-thumb {
    margin-bottom: 40px;
  }
  .tesimonial-wrap-d6 .col-left {
    padding: 30px;
  }
}
@media (max-width: 575px) {
  .tesimonial-wrap-d6 .col-left {
    padding: 20px 15px;
  }
  .tesimonial-wrap-d6 .sw-thumb {
    margin-bottom: 20px;
  }
}

.process-main-d6 {
  position: relative;
}
.process-main-d6 .line-prc-d6 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  display: block;
  background: linear-gradient(90deg, rgba(245, 245, 245, 0.12) 0.08%, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.12) 95.03%, rgba(245, 245, 245, 0.12) 100%);
}
.process-main-d6 .line-prc-d6 .line-prc_scroll {
  position: absolute;
  width: 1px;
  top: 0;
  height: 0;
  background: var(--primary);
  display: block;
}
.process-main-d6 .wg-process-d6:not(:last-child) {
  margin-bottom: 120px;
}
@media (max-width: 1199px) {
  .process-main-d6 .wg-process-d6:not(:last-child) {
    margin-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .process-main-d6 .line-prc-d6 {
    left: 9%;
  }
  .process-main-d6 .wg-process-d6:not(:last-child) {
    margin-bottom: 40px;
  }
}

.section-intro-feature-d6 {
  position: relative;
  overflow: hidden;
}
.section-intro-feature-d6 .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
}
.section-intro-feature-d6 .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-intro-feature-d6 .bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 55.09%, #F5F5F5 92.03%);
  z-index: 2;
  pointer-events: none;
}
.section-intro-feature-d6 .group-img {
  position: absolute;
  right: -28%;
  bottom: 0%;
  left: 49%;
  display: flex;
  aspect-ratio: 1.5131396957;
  max-width: 1094px;
  width: 100%;
  z-index: 0;
}
.section-intro-feature-d6 .group-img .img-feature {
  position: absolute;
}
.section-intro-feature-d6 .group-img .img-feature:nth-child(1) {
  bottom: 0;
  left: 0;
}
.section-intro-feature-d6 .group-img .img-feature:nth-child(2) {
  top: 0;
  right: 0;
  margin-left: 60px;
}
.section-intro-feature-d6 .img-feature {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--white-30);
}
.section-intro-feature-d6 .img-feature img {
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.section-intro-feature-d6 .img-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(37px);
  background: var(--white-12);
  z-index: 0;
  border-radius: 16px;
}
.section-intro-feature-d6 .img-feature:nth-child(1) {
  z-index: 2;
}
.section-intro-feature-d6 .img-feature:nth-child(2) {
  z-index: 3;
}
.section-intro-feature-d6 .content {
  padding-top: 256px;
  padding-bottom: 172px;
  position: relative;
  z-index: 3;
  max-width: 500px;
}
.section-intro-feature-d6 .intro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(29, 120, 239, 0.2);
  background: var(--white);
  border-radius: 1212px;
  padding: 3px 7px 3px 11px;
  margin-bottom: 16px;
}
.section-intro-feature-d6 .intro-title {
  margin-bottom: 12px;
}
.section-intro-feature-d6 .intro-desc {
  margin-bottom: 40px;
}
.section-intro-feature-d6 .action-btn {
  margin-bottom: 16px;
}
.section-intro-feature-d6 .bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.section-intro-feature-d6 .bottom .rate-wrap {
  gap: 2px;
  color: #EAB308;
}
.section-intro-feature-d6 .bottom .br-line {
  background: var(--gray-20);
}
@media (max-width: 991px) {
  .section-intro-feature-d6 .content {
    padding-top: 200px;
    padding-bottom: 120px;
  }
}
@media (max-width: 767px) {
  .section-intro-feature-d6 .content {
    padding-top: 160px;
    padding-bottom: 100px;
  }
}
@media (max-width: 575px) {
  .section-intro-feature-d6 .content {
    padding-top: 120px;
    padding-bottom: 80px;
  }
}

.section-hero-home-d6 .s-wrap-head {
  padding-bottom: 170px;
  position: relative;
  overflow: hidden;
  margin-bottom: -170px;
}
.section-hero-home-d6 .s-wrap-head .bg-item {
  position: absolute;
  inset: 0;
}
.section-hero-home-d6 .s-wrap-head .bg-item.item-1 {
  background-image: url("/demo-fimoor/images/item/patern.png");
  background-repeat: repeat;
  background-size: cover;
  animation: bgMoveTopRight 20s linear infinite;
  z-index: 0;
}
.section-hero-home-d6 .s-wrap-head .bg-item.item-2 {
  background-image: url("/demo-fimoor/images/item/light-flare.png");
  background-repeat: repeat;
  background-size: cover;
  animation: bgMoveTopRight 10s linear infinite;
  z-index: 0;
}
.section-hero-home-d6 .box-title {
  max-width: 596px;
  margin: 0 auto;
  text-align: center;
}
.section-hero-home-d6 .infiniteSlide-brand-d6 {
  margin-bottom: 20px;
}
.section-hero-home-d6 .intro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: 1212px;
  padding: 4px 6px;
  margin-bottom: 12px;
}
.section-hero-home-d6 .intro-title {
  margin-bottom: 8px;
}
.section-hero-home-d6 .intro-desc {
  margin-bottom: 40px;
}
.section-hero-home-d6 .form-ai-d6 {
  max-width: 426px;
  margin: 0 auto;
  margin-bottom: 20px;
}
@media (min-width: 1200px) {
  .section-hero-home-d6 .btn-action-link .b-wrap {
    padding-left: 37.5px;
    padding-right: 37.5px;
  }
}

.section-feature-d6 .wg-feature-d6 {
  margin-bottom: 20px;
}

.wrapper-d6 {
  margin-bottom: -52px;
  border-radius: 40px 40px 0px 0px;
  padding-bottom: 52px;
}
@media (max-width: 767px) {
  .wrapper-d6 {
    border-radius: 20px 20px 0px 0px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.slider_effect_fade .swiper-slide.swiper-slide-active .fade-item {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.slider_effect_fade .swiper-slide.swiper-slide-active .scale-item {
  transform: scale(1);
}
.slider_effect_fade .swiper-slide.swiper-slide-active .width-item {
  width: 100%;
}
.slider_effect_fade .fade-item {
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider_effect_fade .fade-item.fade-box {
  transition-delay: 0.4s;
  transform: translateY(0px);
}
.slider_effect_fade .fade-item.fade-item-1 {
  transition-delay: 0.5s;
}
.slider_effect_fade .fade-item.fade-item-2 {
  transition-delay: 0.6s;
}
.slider_effect_fade .fade-item.fade-item-3 {
  transition-delay: 0.7s;
}
.slider_effect_fade .fade-item.fade-item-4 {
  transition-delay: 0.8s;
}
.slider_effect_fade .scale-item {
  transform: scale(1.2);
  transition: all 0.5s linear;
}
.slider_effect_fade .scale-item.scale-item-1 {
  transition-delay: 0.3s;
}
.slider_effect_fade .width-item {
  width: 1%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider_effect_fade .width-item.width-item-3 {
  transition-delay: 0.7s;
}

.sw-dot-default.render-number {
  display: flex;
  gap: 8px;
}
.sw-dot-default.render-number .pag-bullet-number {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 8px;
  color: var(--text-5);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  margin: 0;
}
.sw-dot-default.render-number .pag-bullet-number:hover, .sw-dot-default.render-number .pag-bullet-number.swiper-pagination-bullet-active {
  background-color: var(--primary);
  color: var(--white);
}
@media (max-width: 991px) {
  .sw-dot-default.render-number .pag-bullet-number {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.sw-style-line {
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}
.sw-style-line .swiper-pagination-bullet {
  margin: 0 !important;
  background-color: var(--primary);
  height: 53px;
  width: 2px;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sw-style-line .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-action-group {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.swiper-action-group .tf-sw-pagination {
  width: auto;
}
@media (min-width: 1200px) {
  .swiper-action-group {
    gap: 48px;
    margin-top: 64px;
  }
}

.swiper-action-group-2 {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (min-width: 1200px) {
  .swiper-action-group-2 {
    gap: 40px;
  }
}

.tf-sw-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--bg-2);
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.tf-sw-btn.style-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--bg-6);
}
.tf-sw-btn.style-circle:hover {
  background-color: var(--primary);
  color: var(--white);
}
.tf-sw-btn.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 991px) {
  .tf-sw-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.swiper-progress {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: -20px;
  margin-bottom: -20px;
}
.swiper-progress .slider-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 30px;
  gap: 16px;
}
.swiper-progress .box-text {
  max-width: 300px;
}
.swiper-progress .box-text .slider-number_order {
  margin-bottom: 28px;
}
.swiper-progress .box-text .title {
  margin-bottom: 8px;
}
.swiper-progress .tf-sw-pagination {
  position: absolute;
  left: 0;
  top: 57%;
  transform: translateY(-50%);
  bottom: unset;
  width: auto;
  display: inline-flex;
}
@media (min-width: 576px) {
  .swiper-progress .image {
    transform: rotate(8deg);
  }
}
@media (max-width: 575px) {
  .swiper-progress .slider-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    padding: 0;
  }
  .swiper-progress .slider-content .image {
    padding-left: 15px;
  }
}

.swiper-testimonial_wrap {
  padding-bottom: 36px;
  margin-bottom: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-testimonial_wrap .swiper-testimonial {
  border-radius: 12px;
}
@media (min-width: 576px) {
  .swiper-testimonial_wrap .swiper-testimonial {
    max-width: 435px;
    width: 100%;
    margin: 0px 26px;
  }
}

.slide-show_wrap {
  position: relative;
}
.slide-show_wrap .show__container {
  position: absolute;
  left: 0;
  right: 0;
  top: 57px;
  bottom: 56px;
}
.slide-show_wrap .title_slider {
  margin-bottom: 30px;
}
.slide-show_wrap .show__content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  .slide-show_wrap .show__content .head {
    margin-bottom: 30px;
    flex: 1;
  }
  .slide-show_wrap .show__container {
    top: 100px;
  }
}
@media (min-width: 1200px) {
  .slide-show_wrap .title_slider {
    margin-bottom: 56px;
  }
  .slide-show_wrap .show__container {
    margin-bottom: 29px;
    top: 144px;
  }
}
@media (max-width: 575px) {
  .slide-show_wrap .show__content {
    justify-content: center;
  }
}

.show__image img {
  width: 100%;
  object-fit: cover;
  min-height: 500px;
  max-height: 960px;
  aspect-ratio: 1.5789473684;
}
@media (min-width: 1200px) {
  .show__image img {
    min-height: 700px;
  }
}

.sw-progress-default {
  position: relative;
  height: 3px !important;
  background-color: var(--line-11);
}
.sw-progress-default .swiper-pagination-progressbar-fill {
  background-color: var(--primary);
}

.btn-sw-nav {
  height: 46px;
  width: 46px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  border: 1px solid var(--line-10);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-sw-nav:hover,
.btn-sw-nav .swiper-active {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}
.btn-sw-nav.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .btn-sw-nav {
    height: 40px;
    width: 40px;
  }
}

.group-btn-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-btn-action .sw-dot {
  width: max-content;
}
.group-btn-action.type-2 {
  gap: 12px;
}

.sw-dot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sw-dot .swiper-pagination-bullet {
  background-color: var(--black);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-dot .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: translate(-50%, -50%);
}

.nav-next-swiper.swiper-button-disabled,
.nav-prev-swiper.swiper-button-disabled {
  pointer-events: none;
}

.swiper-tesimonial .group-btn-action {
  margin-top: 24px;
}
@media (min-width: 1200px) {
  .swiper-tesimonial .group-btn-action {
    margin-top: 40px;
  }
}

.sw-line-vertical {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  height: 4px;
}
.sw-line-vertical .swiper-pagination-bullet {
  width: 100%;
  height: 3px;
  background-color: var(--white);
  border-radius: 0;
  margin: 0 !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}
.sw-line-vertical .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--primary);
  height: 4px;
}
.sw-line-vertical.style-2 .swiper-pagination-bullet {
  border-radius: 4px;
}

.swiper-look_book .tf-btn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  font-size: 20px;
}
.swiper-look_book .tf-btn-nav.nav-prev-swiper {
  left: 16px;
}
.swiper-look_book .tf-btn-nav.nav-next-swiper {
  right: 16px;
}
.swiper-look_book .tf-btn-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
.swiper-look_book .tf-btn-nav.swiper-button-disabled {
  opacity: 0.3;
}
@media (min-width: 1200px) {
  .swiper-look_book {
    margin-top: -74px;
  }
}
@media (max-width: 767px) {
  .swiper-look_book .tf-btn-nav.nav-prev-swiper {
    left: 0px;
  }
  .swiper-look_book .tf-btn-nav.nav-next-swiper {
    right: 0px;
  }
}

.swiper-project .tf-sw-pagination {
  background-color: var(--line-8);
  z-index: 2;
  height: 2px;
}
.swiper-project .tf-sw-pagination .swiper-pagination-progressbar-fill {
  background-color: var(--white);
}
.swiper-project .sld-img {
  border-radius: 24px;
  overflow: hidden;
  display: flex;
}
.swiper-project .sld-img img {
  width: 100%;
  object-fit: cover;
}
.swiper-project .group-btn-pag {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 48px;
}
.swiper-project .swiper-wrapper {
  height: auto;
}

.swiper-process {
  border-radius: 24px;
}
.swiper-process .group-btn {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}
.swiper-process .group-btn .tf-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid var(--line-10);
}
.swiper-process .group-btn .tf-btn-icon .icon {
  font-size: 18px;
}
.swiper-process .group-btn .tf-btn-icon:hover {
  color: var(--white);
  border-color: var(--gray-90);
  background-color: var(--gray-90);
}
.swiper-process .swiper-slide-active .process_line {
  background-color: var(--gray-90);
}
@media (min-width: 1200px) {
  .swiper-process .group-btn {
    margin-top: 40px;
  }
}

.sw-dot-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.sw-dot-pagination .swiper-pagination-bullet {
  background: #D9D9D9;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  margin-right: 7px;
  position: relative;
  opacity: 1;
}
.sw-dot-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--black);
}
.sw-dot-pagination .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 7px);
  height: calc(100% + 7px);
}
.sw-dot-pagination.style-white .swiper-pagination-bullet {
  background: var(--gray-700);
}
.sw-dot-pagination.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--white);
}
@media (min-width: 1200px) {
  .sw-dot-pagination {
    margin-top: 40px;
  }
}

.swiper-blog .wrap-pag {
  background-color: var(--white);
  z-index: 2;
  border-radius: 30px;
  height: 36px;
  padding-left: 17px;
  padding-right: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-blog .wrap-pag .sw-dot-pagination {
  justify-content: center;
  align-items: center;
  margin: 0;
  gap: 14px;
}
.swiper-blog .wrap-pag .swiper-pagination-bullet {
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 576px) {
  .swiper-blog .wrap-pag {
    position: absolute;
    padding-left: 24px;
    padding-right: 24px;
    right: 32px;
    bottom: 56px;
  }
}
@media (min-width: 1200px) {
  .swiper-blog .article-blog-v04 .blog-content {
    bottom: 52px;
  }
  .swiper-blog .article-blog-v04 .entry-date {
    margin-bottom: 24px;
  }
}

.slider-business-wrap {
  position: relative;
  padding-top: 196px;
  padding-bottom: 120px;
}
.slider-business-wrap .business-image {
  position: absolute;
  inset: 0;
}
.slider-business-wrap .business-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-business-wrap .business-image::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3019607843);
  z-index: 1;
}
.slider-business-wrap .busines-content {
  position: relative;
  z-index: 1;
}
.slider-business-wrap .title-slider {
  letter-spacing: -0.06em;
  padding-bottom: 64px;
}
.slider-business-wrap .title-slider span {
  font-style: italic;
  font-weight: normal;
  letter-spacing: 0;
}
.slider-business-wrap .business_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.slider-business-wrap .business_tag {
  border-radius: 12px;
  backdrop-filter: blur(36px);
  background: rgba(255, 255, 255, 0.0784313725);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  padding-left: 20px;
  padding-right: 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-business-wrap .business_tag:hover {
  background-color: var(--primary);
}
.slider-business-wrap .heading {
  margin-bottom: 120px;
}
@media (max-width: 991px) {
  .slider-business-wrap {
    padding-top: 120px;
    padding-bottom: 80px;
  }
  .slider-business-wrap .title-slider {
    padding-bottom: 30px;
  }
  .slider-business-wrap .heading {
    margin-bottom: 60px;
  }
}

.swiper-fade .swiper-slide {
  opacity: 0 !important;
}
.swiper-fade .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}

.swiper-lookbook {
  max-width: 424px;
  width: 100%;
  margin: 0 auto;
}
.swiper-lookbook .card-product-v02 .card-product_wrapper {
  aspect-ratio: 1.156626506;
}

.swiper-best .swiper-wrapper {
  align-items: center;
}
.swiper-best .swiper-slide {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 424px;
}
.swiper-best .swiper-slide .card-best-product .product-content {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.swiper-best .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.74);
}
.swiper-best .swiper-slide:not(.swiper-slide-active) .card-best-product .product-content {
  opacity: 0;
  visibility: hidden;
}
.swiper-best .swiper-slide:not(.swiper-slide-active) .card-best-product .product-image-preview video {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1199px) {
  .swiper-best .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.9);
  }
}
@media (max-width: 575px) {
  .swiper-best .swiper-slide {
    width: 280px;
  }
  .swiper-best .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.95);
  }
}

.swiper-product-wrap {
  position: relative;
}
.swiper-product-wrap .group-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 18px;
  left: 18px;
  top: 50%;
  z-index: 2;
  pointer-events: none;
}
.swiper-product-wrap .group-nav .nav-action {
  display: flex;
  font-size: 28px;
  color: var(--primary);
  pointer-events: all;
}
.swiper-product-wrap .group-nav .nav-action.swiper-button-disabled {
  opacity: 0.3;
}

.swiper-pagination-lock {
  margin: 0 !important;
}

.swiper-max-1200 .swiper-slide {
  height: auto;
}
.swiper-max-1200 .swiper-slide > * {
  height: 100%;
}

@media (min-width: 1200px) {
  .swiper-ticket {
    padding-bottom: 20px;
    padding-right: 20px;
    margin-bottom: -20px;
    margin-right: -20px;
  }
}

.sw-dot-d6 {
  margin-top: 20px;
  justify-content: center;
}

.group-btn-d6 {
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  background: rgba(238, 238, 238, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(216, 216, 216, 0.1019607843), 0px 0px 2.5px 0px rgba(0, 0, 0, 0.1215686275) inset;
  border-radius: 12px;
}
.group-btn-d6 .btn-nav-d6 {
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-40);
  position: relative;
  border-radius: 10px;
}
.group-btn-d6 .btn-nav-d6::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #1D78EF, #1D78EF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -2px 0px 0px #1B50B2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 12.52px 10.02px 0px rgba(27, 80, 178, 0.1333333333), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
  border-radius: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}
.group-btn-d6 .btn-nav-d6 .icon {
  position: relative;
  z-index: 1;
}
.group-btn-d6 .btn-nav-d6:hover {
  color: var(--white);
}
.group-btn-d6 .btn-nav-d6:hover::after {
  opacity: 1;
  visibility: visible;
}
.group-btn-d6 .btn-nav-d6.swiper-button-disabled {
  opacity: 0.4;
}
@media (max-width: 767px) {
  .group-btn-d6 {
    padding: 3px;
    gap: 8px;
  }
  .group-btn-d6 .btn-nav-d6 {
    font-size: 16px;
    width: 36px;
    height: 36px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.card-Team_V01 {
  border-radius: 12px;
  padding: 16px 16px 28px 16px;
  background-color: var(--white);
  display: grid;
}
.card-Team_V01 .card_avatar {
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;
}
.card-Team_V01 .info__team {
  color: var(--text-10);
  margin-bottom: 8px;
}
.card-Team_V01 .info__duty {
  color: var(--text-5);
  margin-bottom: 28px;
}

.card-team_v02 {
  padding: 12px 12px 24px 12px;
  background-color: var(--bg-22);
  border-radius: 24px;
}
.card-team_v02 .card_avatar {
  margin-bottom: 20px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.card-team_v02 .card_avatar .image {
  position: relative;
  z-index: 1;
  display: flex;
}
.card-team_v02 .card_avatar .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 0.9737704918;
}
.card-team_v02 .card_avatar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(180.78deg, rgba(1, 1, 1, 0) 0.67%, rgba(1, 1, 1, 0.6) 96.14%);
  backdrop-filter: blur(1px);
  z-index: 2;
  border-radius: 0px 24px 24px 0px;
  pointer-events: none;
}
.card-team_v02 .box-infor {
  position: absolute;
  bottom: 20px;
  left: 15px;
  right: 12px;
  z-index: 3;
  pointer-events: none;
}
.card-team_v02 .box-infor .info__duty {
  margin-bottom: 10px;
  text-align: center;
}
.card-team_v02 .tf-social-icon-2 {
  justify-content: center;
}
.card-team_v02 .tf-social-icon-2 a {
  width: 32px;
  height: 32px;
  pointer-events: all;
}
.card-team_v02 .tf-social-icon-2 a .icon {
  font-size: 12px;
}
.card-team_v02 .card_info {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  padding-left: 16px;
  padding-right: 16px;
}
.card-team_v02 .info__hastag {
  margin-bottom: 4px;
}
.card-team_v02 .info__name {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: clamp(24px, 2.5vw, 34px);
}
@media (min-width: 1200px) {
  .card-team_v02.style-2 {
    padding-bottom: 32px;
  }
  .card-team_v02.style-2 .tf-social-icon-2 {
    gap: 8px;
  }
  .card-team_v02.style-2 .tf-social-icon-2 a {
    width: 40px;
    height: 40px;
  }
}

.card-team_v03 {
  padding: 24px;
  background-color: var(--white);
  border-radius: 12px;
  display: grid;
  gap: 24px;
}
.card-team_v03 .team-image {
  border-radius: 8px;
  overflow: hidden;
}
.card-team_v03 .team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 0.8761904762;
}
.card-team_v03 .team-infor {
  display: grid;
  gap: 10px;
}
.card-team_v03 .infor_name {
  font-weight: 500;
}

.card-project {
  border-radius: 24px;
  padding: 20px 15px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-project .wg-counter {
  margin-bottom: 20px;
}
.card-project .top {
  margin-bottom: 16px;
}
.card-project .image {
  margin-bottom: 24px;
}
.card-project .image img {
  width: 100%;
  object-fit: cover;
}
.card-project .name {
  margin-bottom: 4px;
}
.card-project .bot {
  display: flex;
  justify-content: space-between;
}
.card-project.first .top {
  margin-bottom: -30px;
  position: relative;
  z-index: 2;
}
.card-project.first .image {
  margin-bottom: 40px;
}
.card-project.first .image {
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 1200px) {
  .card-project {
    padding: 32px;
  }
  .card-project.first .image {
    margin-top: -100px;
    margin-left: -32px;
    margin-right: -32px;
  }
}

.card-panel {
  border-radius: 24px;
  padding: 20px 15px;
  background-color: var(--white);
}
@media (min-width: 1200px) {
  .card-panel {
    padding: 24px;
  }
}

.panel-funding {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel-funding .funding_progress {
  width: 167px;
  height: 167px;
  position: relative;
  padding: 7px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.panel-funding .funding_title {
  margin-bottom: 10px;
}
.panel-funding .in-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 6px solid #E6E6E6;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.panel-funding .in-progress .wg-counter {
  margin-bottom: 8px;
}
.panel-funding .border-circle-dashed {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--line-13);
  pointer-events: none;
}

.panel-hero {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.panel-hero .tag-dot .text {
  padding-left: 10px;
}
.panel-hero .tag-dot::before {
  width: 6px;
  height: 6px;
}
.panel-hero .hero_content {
  inset: 30px 20px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel-hero .hero_content .tag-dot {
  margin-bottom: 30px;
}
.panel-hero .hero__title {
  text-align: end;
}
.panel-hero .image {
  position: relative;
  height: 100%;
}
.panel-hero .image img {
  width: 100%;
  object-fit: cover;
}
.panel-hero .image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.01%, #000000 86.57%);
}
@media (min-width: 992px) {
  .panel-hero {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .panel-hero .hero_content {
    inset: 40px 40px 28px 40px;
  }
}
@media (max-width: 991px) {
  .panel-hero .image img {
    max-height: 500px;
  }
}

.panel-clients {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel-clients .clients_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.panel-clients .rate-wrap i {
  color: #FFA719;
}
.panel-clients .img-stack-list {
  margin-bottom: 20px;
}

.panel-project {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel-project .prject_title {
  margin-bottom: 6px;
}
.panel-project .project_image {
  margin-bottom: -3px;
  margin-right: 4px;
}
.panel-project .project_image img {
  width: 100%;
  object-fit: cover;
}

.panel-book .book_avaiable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.panel-book .book_avaiable .br-dot {
  background-color: #20E988;
  position: relative;
}
.panel-book .book_avaiable .br-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #20E988;
  animation: rippleFade 1.8s ease-out infinite;
}
.panel-book .book_info {
  margin-bottom: 30px;
  display: grid;
  place-items: center;
}
.panel-book .book_info .info__title {
  margin-bottom: 16px;
}
.panel-book .book_info .info__image {
  margin-bottom: 16px;
  border-radius: 50%;
  overflow: hidden;
  max-width: 82px;
}
.panel-book .book_info .info__image img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel-book .book_info .info__name {
  margin-bottom: 4px;
}
@media (min-width: 1200px) {
  .panel-book {
    padding: 24px 40px;
  }
  .panel-book .book_btn {
    height: 56px;
  }
  .panel-book .book_info {
    margin-bottom: 44px;
  }
  .panel-book .book_avaiable {
    margin-bottom: 44px;
  }
}

.card-process .process_content {
  position: relative;
  margin-bottom: 21px;
}
.card-process .image {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.card-process .image::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 55%;
  left: 0;
  right: 0;
  background: linear-gradient(180.78deg, rgba(1, 1, 1, 0) 0.67%, rgba(1, 1, 1, 0.6) 96.14%);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.card-process .image img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.1741472172;
}
.card-process .content {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.card-process .content .info {
  display: grid;
  gap: 18px;
  text-align: end;
}
.card-process .process_line {
  width: 100%;
  height: 3px;
  background-color: var(--line-11);
  border-radius: 1000px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (min-width: 992px) {
  .card-process .content .info {
    gap: 24px;
  }
}
@media (min-width: 1200px) {
  .card-process .content {
    left: 40px;
    right: 40px;
    bottom: 28px;
  }
}

.card-ceo {
  padding: 8px;
  background: var(--black-20);
  backdrop-filter: blur(44px);
  border-radius: 12px;
  display: grid;
}
.card-ceo .ceo-image {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.card-ceo .ceo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1.5;
}
.card-ceo .ceo-info {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.card-ceo .ceo-info .infor_name {
  margin-bottom: 8px;
}
.card-ceo .ceo-info .action {
  border-color: var(--white-30);
  color: var(--white);
}
.card-ceo .ceo-info .action:hover {
  background-color: var(--primary);
}
@media (min-width: 1200px) {
  .card-ceo .ceo-info {
    padding: 16px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.testimonialV01 {
  padding: 30px 20px;
  background-color: var(--white-60);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  backdrop-filter: blur(10px);
}
.testimonialV01 .tes_text {
  flex: 1;
}
.testimonialV01 .tes_author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonialV01 .author__info .name {
  margin-bottom: 4px;
}
.testimonialV01 .author__avatar {
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .testimonialV01 {
    padding: 48px 32px;
    min-height: 509px;
  }
}

.testimonial-v02 {
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
}
.testimonial-v02 .tes_brand {
  max-width: 166.75px;
}

.testimonial-v03 {
  padding: 30px 20px;
  border-radius: 24px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}
.testimonial-v03 .tes-icon {
  margin-bottom: 40p20;
}
.testimonial-v03 .tes-title {
  margin-bottom: 20px;
}
.testimonial-v03 .tes-desc {
  margin-bottom: 30px;
}
.testimonial-v03 .author_name {
  margin-bottom: 4px;
}
.testimonial-v03 .bottom {
  display: grid;
  gap: 31px;
  width: 100%;
}
.testimonial-v03 .bottom > .br-line {
  border: 0px;
  border-bottom: 2px dashed #DDDDDD;
  height: 2px;
}
.testimonial-v03 .tes-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.testimonial-v03 .tes-rate .rate_left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-v03 .tes-rate .rate-wrap {
  color: #FFA719;
  gap: 4px;
}
.testimonial-v03 .tes-rate .rate-wrap i {
  font-size: 20px;
}
.testimonial-v03 .tes-rate .rate_right {
  display: flex;
  align-items: center;
  gap: 11px;
}
.testimonial-v03 .tes-rate .rate_right > .br-line {
  width: 1px;
  height: 30px;
  background-color: var(--gray-50);
}
.testimonial-v03 .tes-rate .rate_right .icon {
  font-size: 44px;
  color: var(--gray-60);
}
.testimonial-v03 .tes-rate .icon-global {
  font-size: 44px;
}
@media (min-width: 1200px) {
  .testimonial-v03 {
    padding: 48px;
  }
}
@media (max-width: 767px) {
  .testimonial-v03 {
    padding: 20px 15px;
  }
  .testimonial-v03 .tes-icon {
    max-width: 45px;
    margin-bottom: 32px;
  }
  .testimonial-v03 .tes-title {
    margin-bottom: 16px;
  }
  .testimonial-v03 .tes-desc {
    margin-bottom: 24px;
  }
  .testimonial-v03 .bottom {
    gap: 24px;
  }
}
@media (max-width: 425px) {
  .testimonial-v03 .tes-rate {
    justify-content: center;
  }
}

.testimonial-v04 {
  padding: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3019607843);
  display: flex;
  align-items: start;
  gap: 24px;
  backdrop-filter: blur(44px);
}
.testimonial-v04 .tes-image {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-v04 .tes_text {
  margin-bottom: 24px;
}
.testimonial-v04 .tes_infor {
  padding-top: 15px;
  border-top: 1px solid var(--gray-200);
  display: grid;
  gap: 10px;
}
.testimonial-v04.style-2 {
  background: rgba(255, 255, 255, 0.2);
}
.testimonial-v04.style-2 .tes-image {
  padding: 8px;
  border: 1px solid var(--white-20);
  position: relative;
  max-width: 80px;
}
.testimonial-v04.style-2 .tes-image img {
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.testimonial-v04.style-2 .tes-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  border-radius: 50%;
}
@media (max-width: 575px) {
  .testimonial-v04 {
    padding: 20px 15px;
    gap: 15px;
  }
}

.testimonial-v05 {
  background-color: var(--bg-10);
  border-radius: 16px;
  padding: 28px 20px 20px;
}
.testimonial-v05 .rate-wrap {
  gap: 4px;
  margin-bottom: 12px;
}
.testimonial-v05 .rate-wrap i {
  color: var(--black);
  font-size: 18px;
}
.testimonial-v05 .tes-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-v05 .author_image {
  border-radius: 8px;
  overflow: hidden;
  max-width: 48px;
}
.testimonial-v05 .info__name {
  margin-bottom: 2px;
}
.testimonial-v05 .tes-text {
  margin-bottom: 90px;
}
@media (max-width: 991px) {
  .testimonial-v05 .tes-text {
    margin-bottom: 40px;
  }
}

.testimonial-v06 {
  padding: 20px;
  background: var(--white);
  box-shadow: 0px 1.4px 3.74px 0px rgba(0, 0, 0, 0.1019607843), 0px 2.8px 6.54px 0px rgba(0, 0, 0, 0.0509803922), 0px 14.49px 8.88px 0px rgba(0, 0, 0, 0.0509803922), 0px 25.7px 10.28px 0px rgba(0, 0, 0, 0.0117647059), 0px 40.66px 11.22px 0px rgba(0, 0, 0, 0), 0px 0.93px 0px 0px #DADADA;
  border-radius: 16px;
  display: grid;
}
.testimonial-v06 .rate-wrap {
  gap: 2px;
  margin-bottom: 4px;
}
.testimonial-v06 .rate-wrap i {
  font-size: 12px;
  color: #FFDA18;
}
.testimonial-v06 .tes-title {
  margin-bottom: 20px;
}
.testimonial-v06 .tes-text {
  margin-bottom: 16px;
}
.testimonial-v06 .tes-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.testimonial-v06 .tes-author .ic-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gray-20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonal-d6 .tes-ic {
  margin-bottom: 75px;
}
.testimonal-d6 .tes-text {
  margin-bottom: 28px;
}
@media (max-width: 1199px) {
  .testimonal-d6 .tes-ic {
    margin-bottom: 40px;
  }
  .testimonal-d6 .tes-text {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .testimonal-d6 .tes-ic {
    margin-bottom: 20px;
  }
  .testimonal-d6 .tes-text {
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) {
  .testimonial-image-d6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .testimonial-image-d6 {
    display: flex;
    justify-content: center;
  }
}

.testimonial-d6-v2 {
  padding: 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-10);
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.testimonial-d6-v2 .test-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.testimonial-d6-v2 .bg-img {
  position: absolute;
  inset: 0;
  background-image: url("/demo-fimoor/images/item/texture-dot.png");
  background-repeat: repeat;
  background-size: cover;
  animation: bgMoveTopRight 12s linear infinite;
  z-index: 0;
}
.testimonial-d6-v2 .tes-content {
  position: relative;
  z-index: 1;
}
.testimonial-d6-v2 .tes_author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-d6-v2 .tes_author .br-line {
  width: 20px;
}
.testimonial-d6-v2 .tes_text {
  margin-bottom: 36px;
}
@media (max-width: 1199px) {
  .testimonial-d6-v2 {
    padding: 20px;
  }
  .testimonial-d6-v2 .tes_text {
    margin-bottom: 16px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.wg-pricing {
  margin-bottom: 30px;
}
.wg-pricing .plan-content {
  background-color: var(--bg-9);
  backdrop-filter: blur(50px);
  padding: 20px 16px;
  border-radius: 12px;
  display: grid;
}
.wg-pricing .plan-title {
  padding-left: 18px;
  position: relative;
  color: var(--text-2);
}
.wg-pricing .plan-title::before {
  content: "";
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  top: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--primary);
}
.wg-pricing .plan-features {
  display: grid;
  gap: 12px;
}
.wg-pricing .plan-features .item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-11);
}
.wg-pricing .plan-features .item .icon {
  font-size: 18px;
  color: var(--primary);
}
.wg-pricing .feature-grid {
  align-items: start;
  gap: 20px;
}
.wg-pricing .plan-title {
  margin-bottom: 24px;
}
.wg-pricing .plan-price {
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.wg-pricing .plan-price .price-person {
  display: block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-pricing .plan-price .price-person.annual {
  inset: 0;
  position: absolute;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
}
.wg-pricing .plan-price.active-annual .price-person {
  transform: translateY(-100%);
}
.wg-pricing .plan-price.active-annual .price-person.annual {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.wg-pricing .plan-description,
.wg-pricing .br-line {
  margin-bottom: 36px;
}
.wg-pricing .feature-grid {
  margin-bottom: 80px;
}
.wg-pricing .billing {
  padding: 15px 16px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.wg-pricing .billing-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wg-pricing .billing-toggle .label-text {
  color: var(--text-2);
}
.wg-pricing.style-2 {
  background-color: var(--bg-14);
  border-radius: 12px;
}
.wg-pricing.style-2 .plan-content {
  background-color: var(--bg-13);
}
@media (min-width: 1200px) {
  .wg-pricing .action {
    height: 60px;
  }
  .wg-pricing .action .icon {
    width: 60px;
    font-size: 14px;
  }
  .wg-pricing .plan-content {
    padding: 32px;
  }
  .wg-pricing .feature-grid {
    margin-bottom: 133px;
  }
}
@media (max-width: 1199px) {
  .wg-pricing .feature-grid {
    gap: 12px;
  }
  .wg-pricing.style-2 {
    backdrop-filter: blur(12px);
  }
}

.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch input:checked + .slider {
  background-color: var(--primary);
}
.toggle-switch input:checked + .slider::before {
  transform: translateX(16px);
}
.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 9999px;
}
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.billing-discount {
  background-color: var(--bg-8);
  border-radius: 400px;
  color: var(--primary);
  line-height: 26px;
  padding-left: 12px;
  padding-right: 12px;
}

.market__select {
  font-size: 14px;
  line-height: 10px;
  padding: 10px 34px 10px 12px;
  border-radius: 100px;
  background-color: var(--bg-8);
  color: var(--primary);
}

.market-select {
  position: relative;
  display: inline-flex;
}
.market-select::after {
  content: "\e911";
  font-family: "icomoon";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--primary);
  pointer-events: none;
}

.market-wrap {
  background-color: var(--bg-9);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  backdrop-filter: blur(15px);
  margin: 0px auto;
}
.market-wrap .market_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.market-wrap .market_head .title-asset {
  display: flex;
  align-items: end;
  gap: 8px;
}
.market-wrap > *:not(:last-child) {
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 1200px) {
  .market-wrap .market_head {
    height: 86px;
    padding: 0px 28px;
  }
}

.market_item {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.market_item .coin-info {
  display: flex;
  gap: 12px;
  align-items: center;
}
.market_item .info_logo {
  width: 32px;
}
.market_item .info_detail__head,
.market_item .info_detail__bot {
  display: flex;
  align-items: center;
  gap: 4px;
}
.market_item .info_detail__head .br-line,
.market_item .info_detail__bot .br-line {
  width: 1px;
  height: 12px;
  background-color: var(--text-9);
}
.market_item .info_detail__head .long-name,
.market_item .info_detail__head .short-name,
.market_item .info_detail__bot .long-name,
.market_item .info_detail__bot .short-name {
  color: var(--white);
  font-weight: 500;
}
.market_item .info_detail__head .type-money,
.market_item .info_detail__bot .type-money {
  color: var(--text-9);
}
.market_item .coin-volatility {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}
.market_item .coin_change {
  display: flex;
  align-items: center;
  gap: 4px;
}
.market_item .coin_change.increase {
  color: var(--primary);
}
.market_item .coin_change.decrease {
  color: var(--down-color);
}
.market_item .coin_change.decrease .icon {
  transform: rotate(180deg);
}
.market_item .coin_change.decrease .icon path {
  fill: var(--down-color);
}
@media (min-width: 1200px) {
  .market_item {
    height: 89px;
    padding: 0px 28px;
  }
}

.issue-container {
  position: relative;
}
.issue-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(94.9% 673.97% at 0% 44.24%, #0C0C0C 5.05%, rgba(0, 0, 0, 0) 25.34%, rgba(0, 0, 0, 0) 74.96%, #0C0C0C 95.24%);
  z-index: 3;
  pointer-events: none;
}
.issue-container .inf-slide-issue {
  position: relative;
  z-index: 2;
}
.issue-container .inf-slide-issue:not(:last-child) {
  margin-bottom: 24px;
}

.inf-slide-issue .issue {
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0px 4px 12px 0px rgba(26, 41, 61, 0.0705882353);
  background-color: var(--bg-5);
  border-radius: 6px;
  padding: 6px 10px;
}
.inf-slide-issue .issue.style-none-value .icon {
  opacity: 0;
}
.inf-slide-issue .issue.style-none-value .issue_sub {
  width: 180px;
}
.inf-slide-issue .issue .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--line);
  border-radius: 4px;
}

.career-list {
  border: 1px solid var(--line-2);
  background-color: var(--bg-9);
  border-radius: 20px;
  backdrop-filter: blur(24px);
}
.career-list .wg-career:not(:last-child) {
  border-bottom: 1px solid var(--line-2);
}

.wg-career {
  padding: 30px 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px 16px;
}
.wg-career .info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.wg-career .info-list li {
  display: grid;
  gap: 4px;
}
.wg-career .title {
  margin-bottom: 24px;
}
.wg-career .action .icon {
  width: 48px;
}
.wg-career .action .text {
  padding-right: 24px;
}
@media (min-width: 992px) {
  .wg-career {
    padding: 32px;
  }
}
@media (min-width: 1200px) {
  .wg-career {
    padding: 48px 64px;
    padding-bottom: 47px;
  }
  .wg-career .info-list {
    gap: 128px;
  }
  .wg-career .info-list li:first-child {
    min-width: 162px;
  }
  .wg-career .title {
    margin-bottom: 40px;
  }
}

.team-grid {
  gap: 24px;
}

.pricing-table-container {
  padding: 30px 16px;
  background-color: var(--bg-9);
  border-radius: 16px;
  overflow-x: auto;
}
@media (min-width: 992px) {
  .pricing-table-container {
    padding: 40px;
  }
}

.pricing-table td,
.pricing-table th {
  padding: 0px;
}
.pricing-table th,
.pricing-table td {
  min-width: 290px;
}
.pricing-table th:not(:first-child),
.pricing-table td:not(:first-child) {
  width: 455px;
}
.pricing-table tr th {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.pricing-table .feature-header td {
  padding-top: 24px;
  padding-bottom: 16px;
}
.pricing-table .feature-header.fisrt-header td {
  padding-top: 64px;
}
.pricing-table .feature_name {
  font-weight: 500;
}
.pricing-table .feature-row td {
  padding-top: 24px;
  padding-bottom: 20px;
}
.pricing-table .feature-row td:first-child {
  padding-top: 20px;
}
.pricing-table .feature-row:not(.last-of-group) td {
  border-bottom: 1px solid var(--line);
  padding-bottom: 19px;
}
.pricing-table .feature-row.last-of-group td {
  padding-bottom: 56px;
}
.pricing-table .feature-row.last td {
  border: 0;
  padding-bottom: 45px;
}
.pricing-table .feature-action td:nth-child(2) .tf-btn {
  margin-right: 24px;
}
.pricing-table .feature-action td:nth-child(3) .tf-btn {
  margin-left: 24px;
}
.pricing-table .billing {
  flex-direction: column;
  gap: 16px;
}
.pricing-table .table_head {
  text-align: center;
}
.pricing-table .plan-title {
  margin-bottom: 12px;
}
.pricing-table .billing-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ic-circle_check {
  border-radius: 50%;
  background-color: var(--text-5);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-circle_check.check {
  background-color: var(--primary);
}
.ic-circle_check .icon {
  font-size: 14px;
  color: var(--white);
}

.countdownV01 .countdown__timer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.countdownV01 .countdown__custom--css {
  width: 1px;
  height: 12px;
  background-color: var(--white);
  display: block;
}
.countdownV01 .countdown__item:last-child {
  display: inline-flex;
  min-width: 28px;
}

.rate-wrap {
  display: inline-flex;
  gap: 6px;
}
.rate-wrap li {
  display: flex;
}
.rate-wrap i {
  font-size: 16px;
}
.rate-wrap.style-2 {
  gap: 0;
}
.rate-wrap.style-2 i {
  color: var(--yellow);
}

.tf-box-icon {
  flex-direction: column;
  text-align: center;
}
.tf-box-icon .icon {
  font-size: 39px;
  margin-bottom: 32px;
}
.tf-box-icon .title {
  margin-bottom: 12px;
}
.tf-box-icon .sub {
  color: var(--line-3);
}
@media (max-width: 991px) {
  .tf-box-icon .icon {
    margin-bottom: 20px;
  }
}

.box-icon-grid {
  gap: 30px 20px;
}

.summer-countdown {
  font-family: "Covered By Your Grace", cursive;
  font-family: Covered By Your Grace;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 72px);
  line-height: clamp(40px, 8vw, 120px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--line);
  text-align: center;
  display: flex;
  justify-content: center;
}
.summer-countdown .js-countdown {
  padding: 20px 40px;
  background-image: url("./../../demo-camping/images/item/bg-cd.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.summer-countdown .countdown__item:last-child {
  min-width: clamp(45px, 6vw, 100px);
  display: inline-flex;
}
@media (min-width: 1200px) {
  .summer-countdown .js-countdown {
    padding: 0px 115px;
  }
}

.wg-map {
  width: 100%;
}
.wg-map iframe {
  height: 680px;
  width: 100%;
}

.box-our-team {
  padding: 20px 16px;
  background-color: var(--bg-22);
  border-radius: 24px;
  display: grid;
  gap: 20px;
  max-width: 433px;
  width: 100%;
}
.box-our-team .box-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.box-our-team .avt-list {
  display: flex;
  align-items: center;
}
.box-our-team .avt-item {
  border-radius: 50%;
  border: 1px solid var(--line-13);
}
.box-our-team .avt-item:not(:first-child) {
  margin-left: -14px;
}
.box-our-team .avt-item img {
  border-radius: 50%;
}
.box-our-team .tag-dot::before {
  background-color: var(--success);
}
@media (min-width: 1200px) {
  .box-our-team {
    padding: 28px;
  }
}

.wg-service {
  background-color: var(--white);
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  padding: 20px 15px;
  gap: 16px;
}
.wg-service .image-left {
  border-radius: 24px;
  overflow: hidden;
  max-width: 438px;
}
.wg-service .image-left img {
  width: 100%;
  object-fit: cover;
}
.wg-service .content-left .icon-top {
  font-size: 52px;
  color: var(--gray-80);
  margin-bottom: 24px;
}
.wg-service .name {
  margin-bottom: 20px;
}
.wg-service .name a {
  color: var(--text-19);
}
.wg-service .list-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}
.wg-service .list-step .br-dot {
  width: 5px;
  height: 5px;
  background-color: var(--line-11);
}
.wg-service .list-step .step {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-90);
  padding: 10px 12px;
  border-radius: 100px;
  border: 1px solid var(--line-11);
}
.wg-service .list-step .step:hover {
  background-color: var(--line-11);
}
.wg-service .desc {
  max-width: 474px;
  color: rgba(0, 0, 0, 0.6980392157);
}
.wg-service.style-2 {
  background-color: #111111;
}
.wg-service.style-2 .icon-top {
  color: var(--white);
}
.wg-service.style-2 .name a {
  color: var(--white);
}
.wg-service.style-2 .step {
  border: 1px solid #282828;
  color: rgba(255, 255, 255, 0.6);
}
.wg-service.style-2 .step:hover {
  background-color: #282828;
}
.wg-service.style-2 .desc {
  color: var(--gray-30);
}
@media (min-width: 992px) {
  .wg-service {
    padding: 30px;
  }
}
@media (min-width: 1200px) {
  .wg-service {
    padding: 52px;
  }
}
@media (max-width: 991px) {
  .wg-service .icon-top {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .wg-service {
    flex-wrap: wrap;
    gap: 40px;
  }
  .wg-service > * {
    width: 100%;
  }
  .wg-service .image-left {
    max-width: unset;
  }
  .wg-service .list-step {
    margin-bottom: 24px;
  }
  .wg-service .icon {
    max-width: 40px;
    aspect-ratio: 1;
  }
}

.wg-service-v2 {
  gap: 24px;
}
.wg-service-v2 .image-service,
.wg-service-v2 .content-service {
  border-radius: 24px;
  overflow: hidden;
}
.wg-service-v2 .image-service img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
}
.wg-service-v2 .content-service {
  background-color: var(--white);
  padding: 100px 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 24px;
  position: relative;
}
.wg-service-v2 .content-service > :not(.icon-large) {
  position: relative;
  z-index: 1;
}
.wg-service-v2 .icon-large {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 0;
}
.wg-service-v2 .icon-large .icon {
  background: linear-gradient(180deg, #D8EBC5 0%, rgba(216, 235, 197, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: clamp(150px, 16vw, 220px);
}
.wg-service-v2 .benefit-list {
  display: grid;
}
.wg-service-v2 .benefit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-700);
}
.wg-service-v2 .benefit-list .br-dot {
  width: 5px;
  height: 5px;
  background-color: var(--gray-700);
  flex-shrink: 0;
}
.wg-service-v2.style-2 .image-service img {
  aspect-ratio: 1.3503184713;
}
.wg-service-v2.style-2 .content-service {
  height: auto;
  gap: 24px;
  flex: 1;
}
.wg-service-v2.style-2 .left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .wg-service-v2 .content-service {
    height: 100%;
  }
  .wg-service-v2 .image-service {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .wg-service-v2 .content-service {
    padding: 30px 20px;
  }
  .wg-service-v2 .icon-large {
    top: 64px;
  }
  .wg-service-v2 .benefit-list li {
    padding-left: 10px;
  }
}
@media (min-width: 1200px) {
  .wg-service-v2 .content-service {
    padding: 48px;
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .wg-service-v2.type-2 .image-service {
    order: -1;
  }
}

.process-list {
  display: grid;
}
.process-list .item {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 0px;
  border-top: 1px solid var(--line-7);
}
.process-list .title {
  margin-bottom: 20px;
}
.process-list .desc {
  color: var(--text-9);
}
.process-list .number-order {
  color: var(--gray-60);
  flex-shrink: 0;
}
.process-list.style-2 .item {
  flex-wrap: wrap;
  gap: 20px;
}
.process-list.style-2 .number-order {
  min-width: 95px;
}
.process-list.style-2 .title {
  margin-bottom: 24px;
}
.process-list.style-2 .desc {
  color: var(--text-5);
}
@media (min-width: 1200px) {
  .process-list .item {
    padding: 31px 0px 32px;
  }
  .process-list.style-2 .item {
    padding-bottom: 40px;
  }
  .process-list.style-2 .item:last-child {
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .process-list .item {
    flex-wrap: wrap-reverse;
  }
}

.wg-work .image {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.wg-work .image img {
  aspect-ratio: 1.5174013921;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wg-work .date {
  color: var(--gray-50);
}
.wg-work .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: var(--white);
  border-radius: 16px;
  flex-wrap: wrap;
}
.wg-work .name {
  display: flex;
  gap: 8px;
}
.wg-work.style-large .image {
  border-radius: 24px;
  position: relative;
}
.wg-work.style-large .action {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  backdrop-filter: blur(21.5999984741px);
  background: rgba(255, 255, 255, 0.0509803922);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-work.style-large .action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed #FFFFFF;
  animation: rotate 60s infinite linear;
}
.wg-work.style-large:hover .action {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 992px) {
  .wg-work.style-large .image {
    aspect-ratio: 1.7765814266;
  }
  .wg-work.style-large .content {
    padding: 24px;
  }
}
@media (min-width: 1200px) {
  .wg-work.style-large .action {
    right: 30px;
    width: 150px;
    height: 150px;
  }
  .wg-work .content {
    padding: 17.5px 24px;
  }
}

.box-counter-v01 .wg-counter {
  text-align: start;
  margin-bottom: 4px;
}
.box-counter-v01 .sub {
  color: var(--black-60);
}

.main-mouse-hover {
  position: relative;
  overflow: hidden;
}
.main-mouse-hover .tf-mouse.mode-2 {
  opacity: 0;
}

.box-context {
  padding: 20px;
  background-color: var(--white);
  border-radius: 24px;
  opacity: 0.4;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.box-context .content {
  max-width: 614px;
  width: 100%;
}
.box-context .head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.box-context .text {
  max-width: 428px;
  width: 100%;
}
.box-context.active {
  opacity: 1;
}
@media (min-width: 1200px) {
  .box-context {
    padding: 40px;
  }
}
@media (max-width: 575px) {
  .box-context {
    flex-wrap: wrap;
  }
}

.wg-context .image-left {
  margin-bottom: 30px;
}
.wg-context .image-left .image {
  border-radius: 24px;
  overflow: hidden;
}
.wg-context .image-left .image img {
  max-height: 400px;
  width: 100%;
  object-fit: cover;
}
.wg-context .context-wrap {
  max-width: 908px;
  width: 100%;
  display: flex;
  position: relative;
}
.wg-context .context-list {
  width: 100%;
  display: grid;
  gap: 12px;
  padding-left: 16px;
}
.wg-context .progress-bar {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 0;
  height: calc(100% - 28px - 28px);
  width: 2px;
  background-color: var(--line-11);
  border-radius: 1.5px;
}
.wg-context .progress-bar .progress-line {
  position: absolute;
  border-radius: 1.5px;
  top: 0;
  left: 0;
  width: 2px;
  background-color: var(--black);
  z-index: 2;
}
@media (min-width: 768px) {
  .wg-context {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  .wg-context .context-list {
    padding-left: 32px;
  }
  .wg-context .image-left .image {
    max-width: 320px;
  }
}

.img-stack-list {
  display: flex;
}
.img-stack-list .img-stack-item {
  border-radius: 50%;
  border: 1px solid var(--line-13);
}
.img-stack-list .img-stack-item:not(:first-child) {
  margin-left: -14px;
}
.img-stack-list .img-stack-item img {
  border-radius: 50%;
}

.pricing-v02 {
  padding: 20px 15px;
  background-color: var(--gray-90);
  border-radius: 24px;
  display: grid;
  gap: 32px;
}
.pricing-v02 .plan-type {
  padding-left: 12px;
  padding-right: 12px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  border: 1px solid var(--gray-70);
  border-radius: 24px;
  margin-bottom: 20px;
}
.pricing-v02 .head {
  margin-bottom: 30px;
}
.pricing-v02 .benefit-list {
  display: grid;
  gap: 24px;
}
.pricing-v02 .benefit-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gray-10);
}
.pricing-v02 .benefit-list .ic-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-70);
}
.pricing-v02 .benefit-list .ic-wrap .icon {
  font-size: 12px;
}
.pricing-v02 > .br-line {
  border-top: 0;
}
.pricing-v02 .plan-price {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.pricing-v02 .btn-wrap {
  width: 100%;
  justify-content: space-between;
}
.pricing-v02.style-2 {
  background-color: var(--gray-80);
}
.pricing-v02.style-2 .benefit-wrap {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}
@media (min-width: 1200px) {
  .pricing-v02 {
    padding: 40px;
  }
  .pricing-v02 .head {
    margin-bottom: 40px;
  }
  .pricing-v02 .btn-wrap {
    height: 68px;
    padding-left: 24px;
  }
  .pricing-v02 .btn-wrap .icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

.indicator-main {
  position: relative;
}

.indicator-item {
  position: relative;
  z-index: 1;
}

.indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 8px;
  background: var(--light-beige);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.tag-badge {
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  background-color: var(--light-green);
  border-radius: 4px;
}
.tag-badge .br-dot {
  background-color: var(--primary);
}
.tag-badge.style-2 {
  border-radius: 12px;
  padding: 10px 20px;
}

.wg-talk {
  padding: 60px 15px;
  background-color: var(--light-beige);
  border-radius: 24px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
}
.wg-talk .title {
  margin-bottom: 24px;
}
.wg-talk .box-help {
  display: grid;
  gap: 16px;
}
.wg-talk .box-help .br-line {
  background-color: var(--gray-100);
}
.wg-talk .help-list {
  display: grid;
  gap: 28px;
}
.wg-talk .help-list li {
  display: flex;
  gap: 16px;
}
.wg-talk .help-list .info {
  display: grid;
  gap: 10px;
}
.wg-talk .box-contact-list {
  gap: 16px;
  width: 100%;
}
.wg-talk .box-contact-item {
  padding: 32px;
  background-color: var(--beige);
  border-radius: 16px;
}
.wg-talk .box-contact-item .ic-wrap {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--light-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.wg-talk .box-contact-item .ic-wrap .icon {
  font-size: 24px;
  color: var(--black);
}
.wg-talk .box-contact-item .action {
  margin-bottom: 12px;
}
@media (min-width: 992px) {
  .wg-talk {
    padding: 30px 24px;
  }
}
@media (min-width: 1440px) {
  .wg-talk {
    padding: 80px;
    gap: 80px;
  }
}

.badge-sale {
  border-radius: 4px;
  background-color: var(--primary);
  padding: 6px;
  color: var(--light-beige);
}

.wg-pricing-v2 {
  border-radius: 24px;
  background-color: var(--light-beige);
  padding: 8px;
}
.wg-pricing-v2 .plan-note {
  padding: 40px 32px;
  display: grid;
  gap: 16px;
  background-color: var(--beige);
  border-radius: 16px;
}
.wg-pricing-v2 .plan-content {
  padding: 48px 32px 40px;
  display: grid;
}
.wg-pricing-v2 .plan-content .plan_price {
  display: flex;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
}
.wg-pricing-v2 .plan-content .action {
  margin-bottom: 32px;
}
.wg-pricing-v2 .plan-content > .br-line {
  background-color: var(--gray-100);
  margin-bottom: 32px;
}
.wg-pricing-v2 .plan-content .plan_desc {
  margin-bottom: 24px;
}
.wg-pricing-v2 .plan_benefit {
  display: grid;
  gap: 12px;
}
.wg-pricing-v2 .plan_benefit li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gray-700);
}
.wg-pricing-v2 .plan_benefit .ic-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
  border-radius: 4px;
}
.wg-pricing-v2 .plan_benefit .icon {
  font-size: 12px;
  color: var(--black);
}
.wg-pricing-v2.style-2 {
  background-color: var(--primary);
}
.wg-pricing-v2.style-2 .plan-note {
  background-color: var(--bg-25);
}
.wg-pricing-v2.style-2 .plan-content > .br-line {
  background-color: #1D7363;
}
.wg-pricing-v2.style-2 .plan_desc {
  color: var(--light-green);
}
.wg-pricing-v2.style-2 .plan_benefit li {
  color: rgba(255, 253, 247, 0.8980392157);
}
.wg-pricing-v2.style-2 .plan_benefit .ic-wrap {
  background-color: #1D7363;
}
.wg-pricing-v2.style-2 .plan_benefit .ic-wrap .icon {
  color: var(--light-beige);
}
@media (max-width: 991px) {
  .wg-pricing-v2 .plan-content {
    padding: 30px 7px;
  }
  .wg-pricing-v2 .plan-note {
    padding: 20px 15px;
  }
}

.table-pricing {
  overflow: auto;
  display: grid;
  gap: 16px;
  white-space: nowrap;
}
.table-pricing .table-head,
.table-pricing .table-body,
.table-pricing .table-foot {
  border-radius: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 40px;
  padding-right: 40px;
}
.table-pricing .table-head {
  padding-top: 28px;
  padding-bottom: 28px;
}
.table-pricing .table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.table-pricing .table-body {
  background-color: var(--light-beige);
}
.table-pricing .table-body .table-row {
  padding-top: 20px;
  padding-bottom: 20px;
}
.table-pricing .table-body .table-row.heading {
  padding-top: 0;
  padding-bottom: 16px;
}
.table-pricing .table-body .table-row:not(:first-child):not(:last-child) {
  padding-bottom: 19px;
  border-bottom: 1px solid var(--gray-100);
}
.table-pricing .table-cell:not(:first-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.table-pricing .col-title {
  color: #4B5563;
}
.table-pricing .table-head {
  background-color: var(--primary);
  color: var(--light-beige);
  text-align: center;
}
.table-pricing .table-cell_title {
  color: var(--gray-90);
  font-weight: 500;
}
.table-pricing .table-foot {
  margin-top: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
.table-pricing .table-foot .action {
  max-width: 240px;
  width: 100%;
}
@media (max-width: 1199px) {
  .table-pricing .table-cell:first-child {
    min-width: 210px;
  }
  .table-pricing .table-cell:not(:first-child) {
    min-width: 120px;
  }
  .table-pricing .table-foot .table-cell {
    margin-left: 6px;
    margin-right: 6px;
  }
}

.ic-check-square {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
  border-radius: 4px;
}
.ic-check-square .icon {
  font-size: 12px;
  color: var(--black);
}
.ic-check-square.ic-2 {
  background-color: var(--gray-20);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.ic-check-square.ic-2 .icon {
  color: var(--gray-90);
  font-size: 14px;
}

.infiniteSlide-partner_wrap .img-partner {
  border-radius: 12px;
  overflow: hidden;
  margin-left: 12px;
  margin-right: 12px;
}

.wg-about {
  padding: 48px 40px;
  background: linear-gradient(180deg, rgba(0, 89, 73, 0.1) 0%, rgba(0, 89, 73, 0) 100%);
  backdrop-filter: blur(24px);
  border-radius: 24px;
  display: grid;
  place-items: center;
  text-align: center;
}
.wg-about .top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.wg-about .top .br-dot {
  background-color: var(--primary);
}
.wg-about .wg-counter {
  margin-bottom: 48px;
}
.wg-about .desc {
  max-width: 260px;
}
.wg-about.s2 {
  margin-top: 80px;
}
.wg-about.s3 {
  margin-top: 160px;
}
@media (max-width: 1199px) {
  .wg-about {
    padding: 30px 20px;
  }
  .wg-about .wg-counter {
    margin-bottom: 30px;
  }
  .wg-about.s2 {
    margin-top: 40px;
  }
  .wg-about.s3 {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .wg-about.s3 {
    margin-top: 40px;
  }
}

.stack-element-main .element:last-child {
  position: relative;
  z-index: 11;
}

.wg-graphic {
  position: relative;
  background: rgba(0, 62, 50, 0.3019607843);
  border-radius: 12px;
  padding: 20px 15px;
  border-radius: 12px;
  overflow: hidden;
}
.wg-graphic .image {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  margin-bottom: 30px;
}
.wg-graphic .image .your-save {
  position: absolute;
  top: 17px;
  left: 15px;
  right: 15px;
  text-align: center;
}
.wg-graphic .image .your-save .text-caption {
  margin-bottom: 4px;
}
.wg-graphic .image .wg-counter {
  justify-content: center;
}
.wg-graphic .img-bg {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  width: 100%;
}
.wg-graphic .img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wg-graphic.style-2 .author-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.wg-graphic.style-2 .author-list .item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  background: linear-gradient(270deg, rgba(233, 246, 220, 0.06) 0%, rgba(233, 246, 220, 0.3) 100%);
  border-radius: 12px;
  max-width: 280px;
  width: 100%;
}
.wg-graphic.style-2 .author-list .item:nth-child(2) {
  align-self: flex-end;
}
.wg-graphic.style-2 .author-list .author_image {
  display: flex;
  align-items: end;
}
.wg-graphic.style-2 .author-list .author_image img {
  border-radius: 8px;
}
.wg-graphic.style-2 .author-list .yoe {
  font-weight: 500;
  font-size: 9px;
  line-height: 6px;
  text-align: center;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(135deg, #E9F6DC 50%, rgba(233, 246, 220, 0.7) 100%);
  color: var(--primary);
  margin-left: -16px;
  position: relative;
  z-index: 1;
}
.wg-graphic.style-2 .author-list .info__name {
  margin-bottom: 8px;
}
@media (min-width: 992px) {
  .wg-graphic {
    padding: 24px 24px 34px;
  }
  .wg-graphic.style-2 .author-list {
    margin-bottom: 46px;
  }
}
@media (min-width: 1200px) {
  .wg-graphic.style-2 {
    padding: 40px 48px 34px;
  }
}

.infiniteSlide-text-cosmetic {
  padding-top: 40px;
  padding-bottom: 40px;
}
.infiniteSlide-text-cosmetic > * {
  margin-left: 24px;
  margin-right: 24px;
}
.infiniteSlide-text-cosmetic .br-dot {
  background-color: var(--gray-20);
}
@media (max-width: 991px) {
  .infiniteSlide-text-cosmetic {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .infiniteSlide-text-cosmetic > * {
    margin-left: 12px;
    margin-right: 12px;
  }
}

.wg-customer-review {
  padding-bottom: 24px;
  padding-top: 24px;
}
.wg-customer-review .customer-head {
  padding: 0px 11px 32px;
}
.wg-customer-review .review_rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wg-customer-review .review_author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wg-customer-review .author__image {
  border-radius: 50%;
  overflow: hidden;
}
.wg-customer-review .customer_title {
  margin-bottom: 20px;
}
.wg-customer-review .customer_text {
  margin-bottom: 32px;
}
.wg-customer-review .customer_image_list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wg-customer-review .customer_image {
  border-radius: 10px;
  overflow: hidden;
  max-width: 80px;
}
.wg-customer-review .customer_image img {
  aspect-ratio: 0.7142857143;
}

.box-text-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 48px;
}
.box-text-image-wrap .break {
  flex-basis: 100%;
  height: 0;
}
.box-text-image-wrap .one-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
.box-text-image-wrap .image {
  border-radius: 1212px;
  overflow: hidden;
  display: flex;
}
@media (max-width: 767px) {
  .box-text-image-wrap {
    margin-bottom: 30px;
  }
  .box-text-image-wrap .break {
    display: none;
  }
}

.wg-icon {
  display: grid;
  gap: 20px;
}
.wg-icon .ic-wrap {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--bg-10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-size: 50px;
}
.wg-icon .text {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.wg-icon .icon-ametic {
  font-size: 24px;
}
@media (max-width: 767px) {
  .wg-icon .ic-wrap {
    font-size: 40px;
  }
  .wg-icon .icon-ametic {
    font-size: 18px;
  }
}

.wg-icon-2 {
  background-color: var(--white);
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 56px 15px 40px;
}
.wg-icon-2 .ic-wrap {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(162, 123, 104, 0.2);
  border-radius: 50%;
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 40px;
}
.wg-icon-2 .ic-wrap .icon {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.wg-icon-2 .title {
  margin-bottom: 24px;
}
.wg-icon-2:hover .icon {
  transform: scale(1.2);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.box-image_image {
  display: inline-flex;
  width: 100%;
}
.box-image_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-image_content {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.box-image-v01 {
  position: relative;
  display: flex;
  margin-bottom: 30px;
}
.box-image-v01 .box-image_image {
  border-radius: 28px;
  overflow: hidden;
}
.box-image-v01 .box-image_image img {
  min-height: 300px;
}
.box-image-v01 .box-image_content {
  inset: 20px 15px;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.box-image-v01 .title span {
  font-weight: 275;
}
.box-image-v01 .action {
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1200px) {
  .box-image-v01 .box-image_content {
    inset: 40px 15px;
  }
}

.banner-image-lookbook .lookbook-item {
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner-image-lookbook:has(.lookbook-item:hover) .lookbook-item:not(:hover) {
  opacity: 0.5;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 20px;
}
.gallery-item .box-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-size: 16px;
}
.gallery-item .box-icon .icon {
  margin-bottom: 0;
}
.gallery-item .box-icon:hover {
  background-color: var(--black);
  color: var(--white);
}
@media (min-width: 992px) {
  .gallery-item .box-icon {
    opacity: 0;
    visibility: hidden;
  }
  .gallery-item:hover .box-icon {
    opacity: 1;
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .gallery-item .box-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.picture-frame {
  position: relative;
}
.picture-frame .frame {
  position: relative;
  z-index: 1;
}
.picture-frame .picture {
  position: absolute;
  overflow: hidden;
  z-index: 0;
}
.picture-frame .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.picture-frame.pf-1 {
  max-width: 290px;
}
.picture-frame.pf-1 .picture {
  inset: 12px 12px 13px 6px;
}
.picture-frame.pf-2 {
  max-width: 182px;
}
.picture-frame.pf-2 .picture {
  inset: 13px 5px 36px;
}
.picture-frame.pf-3 {
  max-width: 216px;
}
.picture-frame.pf-3 .picture {
  inset: 16px 8px 40px;
}
.picture-frame.pf-4 {
  max-width: 278px;
}
.picture-frame.pf-4 .picture {
  inset: 12px 12px 7px 12px;
}
.picture-frame.pf-5 {
  max-width: 253px;
}
.picture-frame.pf-5 .picture {
  inset: 6px;
}
.picture-frame.pf-6 {
  max-width: 496px;
}
.picture-frame.pf-6 .picture {
  inset: 11px;
}
.picture-frame.pf-7 {
  max-width: 256px;
}
.picture-frame.pf-7 .picture {
  inset: 2% 2% 3%;
}
.picture-frame.pf-8 {
  max-width: 321px;
}
.picture-frame.pf-8 .picture {
  inset: 3% 2% 11% 2.5%;
}
.picture-frame.pf-9 {
  max-width: 247px;
}
.picture-frame.pf-9 .picture {
  inset: 2% 2% 2.5% 2%;
}
.picture-frame.pf-10 {
  max-width: 321px;
}
.picture-frame.pf-10 .picture {
  inset: 4% 0px 8%;
}
.picture-frame.pf-large-1 {
  max-width: 1143px;
}
.picture-frame.pf-large-1 .picture {
  inset: 3% 1.5% 4% 1.5%;
}

.table-shop-cart thead th {
  padding-bottom: 20px;
}
.table-shop-cart td,
.table-shop-cart th {
  padding: 0;
  border-bottom: 1px solid var(--black-10);
}
.table-shop-cart td:nth-child(1),
.table-shop-cart th:nth-child(1) {
  min-width: 445px;
}
.table-shop-cart td:nth-child(2),
.table-shop-cart th:nth-child(2) {
  min-width: 227px;
  text-align: center;
}
.table-shop-cart td:nth-child(3),
.table-shop-cart th:nth-child(3) {
  min-width: 445px;
  text-align: center;
}
.table-shop-cart td:nth-child(4),
.table-shop-cart th:nth-child(4) {
  min-width: 217px;
  text-align: end;
}
.table-shop-cart tbody td {
  padding-top: 28px;
  padding-bottom: 27px;
}
.table-shop-cart .cart_product {
  display: flex;
  align-items: center;
  gap: 16px;
}
.table-shop-cart .cart_product .name {
  margin-bottom: 8px;
}
.table-shop-cart .cart_product .type {
  margin-bottom: 16px;
}
.table-shop-cart .cart_product .info-prd {
  display: grid;
}
.table-shop-cart .cart_product .img-prd img {
  aspect-ratio: 1;
  object-fit: cover;
}
.table-shop-cart .wg-quantity {
  height: 32px;
  display: inline-flex;
  min-width: 85px;
  padding-left: 8px;
  padding-right: 8px;
  border-color: var(--black-20);
}
.table-shop-cart .wg-quantity .quantity-product {
  font-size: 14px;
  width: 32px;
}
.table-shop-cart .wg-quantity .btn-quantity {
  font-size: 16px;
  color: var(--gray-60);
}
.table-shop-cart.style-2 .cart_product .img-prd {
  border-radius: 10px;
  overflow: hidden;
}
.table-shop-cart.style-2 .cart_product .img-prd img {
  aspect-ratio: 0.8;
}
.table-shop-cart.style-2 .wg-quantity {
  border-radius: 60px;
}
@media (max-width: 1439px) {
  .table-shop-cart {
    table-layout: fixed;
  }
  .table-shop-cart td:first-child,
  .table-shop-cart th:first-child {
    width: 350px;
  }
}
@media (max-width: 767px) {
  .table-shop-cart td,
  .table-shop-cart th {
    width: 150px;
    text-align: start !important;
  }
  .table-shop-cart td:first-child,
  .table-shop-cart th:first-child {
    width: 300px;
  }
  .table-shop-cart td:last-child,
  .table-shop-cart th:last-child {
    width: 100px;
  }
  .table-shop-cart td:not(:first-child):not(:last-child),
  .table-shop-cart th:not(:first-child):not(:last-child) {
    padding-left: 15px;
    padding-right: 15px;
  }
  .table-shop-cart thead th {
    padding-bottom: 15px;
  }
  .table-shop-cart tbody td {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.wg-404 {
  text-align: center;
}
.wg-404 .text-404 {
  font-size: clamp(100px, 16vw, 296px);
  line-height: clamp(60px, 13vw, 240px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.1215686275);
  margin-bottom: 64px;
}
.wg-404 .title {
  text-shadow: 0px 1.5px 0px #FFFFFF, 0px 0px 3px rgba(0, 0, 0, 0.3215686275);
  margin-bottom: 36px;
}
.wg-404 .desc {
  margin-bottom: 48px;
}
@media (max-width: 1199px) {
  .wg-404 .text-404 {
    margin-bottom: 40px;
  }
  .wg-404 .title {
    margin-bottom: 24px;
  }
  .wg-404 .desc {
    margin-bottom: 32px;
  }
}

.main-404 {
  padding-bottom: 34px;
}

.section-404 {
  height: calc(100vh - 104px - 12px - 12px - 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.section-404 .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  z-index: 0;
}
@media (max-width: 991px) {
  .section-404 {
    height: calc(100vh - 86px - 12px - 12px - 34px);
  }
}
@media (max-width: 425px) {
  .section-404 {
    height: calc(100vh - 64px - 12px - 12px - 34px);
  }
}

.wg-plan-d6 {
  padding: 12px;
  border-radius: 20px;
  box-shadow: 0px 0px 14.94px 0px rgba(0, 0, 0, 0.0588235294) inset, 0px 3px 0px 0px rgba(0, 0, 0, 0.0588235294);
}
.wg-plan-d6 .wrap {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0px 16px 12px 0px rgba(255, 255, 255, 0.1215686275), 0px 44px 32px 0px rgba(221, 221, 221, 0.1294117647), 0px 18px 18px 0px rgba(229, 229, 213, 0.1411764706), 0px 12px 12px 0px rgba(229, 229, 229, 0.1215686275), 0px -5px 0px 0px rgba(229, 229, 229, 0.8980392157) inset, 0px 3px 0px 0px rgba(229, 229, 229, 0.6) inset;
}
.wg-plan-d6 .plan-type {
  display: inline-flex;
  padding: 6px;
  box-shadow: 0px 1.5px 4px 0px rgba(0, 0, 0, 0.0784313725) inset, 0px 0.5px 1px 0px rgba(0, 0, 0, 0.0784313725) inset;
  border-radius: 1212px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #EEEEEE 30.33%, #F5F5F5 85%);
}
.wg-plan-d6 .plan-type span {
  display: block;
  background: var(--white);
  border-radius: 1212px;
  border: 0.5px solid var(--black-12);
  padding: 5px 11px;
}
.wg-plan-d6 .plan-price {
  margin-bottom: 8px;
}
.wg-plan-d6 .plan-benefit {
  display: grid;
  gap: 16px;
  margin-bottom: 64px;
}
.wg-plan-d6 .plan-benefit .benefit-title {
  margin-bottom: 8px;
}
.wg-plan-d6 .br-line {
  margin-top: 23px;
  background: var(--gray-20);
  margin-bottom: 48px;
}
.wg-plan-d6 .benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wg-plan-d6 .benefit-item .ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gray-10);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-plan-d6 .btn-action {
  margin-top: auto;
}
.wg-plan-d6.style-2 {
  background: var(--gray-10);
}
.wg-plan-d6.style-2 .plan-type {
  background: linear-gradient(0deg, #EEEEEE 30.33%, #F5F5F5 85%);
  box-shadow: unset;
}
.wg-plan-d6.style-2 .plan-type span {
  border-color: var(--black-6);
  background: var(--bg-32);
}
.wg-plan-d6.style-2 .wrap {
  background: transparent;
  box-shadow: unset;
}
.wg-plan-d6.style-2 .benefit-item .ic {
  background: var(--gray-20);
  color: var(--gray-90);
}
.wg-plan-d6.style-dark {
  background: rgba(21, 21, 21, 0.8196078431);
  box-shadow: 0px 0px 14.94px 0px rgba(255, 255, 255, 0.0784313725) inset, 0px 3px 0px 0px rgba(255, 255, 255, 0.0588235294);
}
.wg-plan-d6.style-dark .wrap {
  background: linear-gradient(0deg, #222222, #222222), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 16px 12px 0px rgba(34, 34, 34, 0.1215686275), 0px 44px 32px 0px rgba(34, 34, 34, 0.1294117647), 0px 18px 18px 0px rgba(34, 34, 34, 0.1411764706), 0px 16px 12px 0px rgba(34, 34, 34, 0.1215686275), 0px -18px 0px 0px #222222 inset, 0px 4px 0px 0px rgba(34, 34, 34, 0.3019607843) inset;
}
.wg-plan-d6.style-dark .plan-type {
  background: unset;
  mask-image: linear-gradient(180deg, #FFFFFF 15.24%, rgba(255, 255, 255, 0) 91.56%);
  border: 0.5px solid var(--white-8);
  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.1215686275) inset, 0px 0.5px 1px 0px rgba(221, 221, 221, 0.1215686275) inset;
}
.wg-plan-d6.style-dark .plan-type span {
  background: rgba(21, 21, 21, 0.0588235294);
  border: 0.5px solid rgba(255, 255, 255, 0.0784313725);
}
.wg-plan-d6.style-dark .br-line {
  background: var(--gray-70);
}
.wg-plan-d6.style-dark .benefit-item .ic {
  background: var(--white-7);
}
.wg-plan-d6.style-dark.dark-2 {
  border: 1px solid var(--gray-80);
  box-shadow: unset;
  background: unset;
}
.wg-plan-d6.style-dark.dark-2 .wrap {
  background: unset;
  box-shadow: unset;
}
.wg-plan-d6.style-dark.dark-2 .plan-type span {
  background: rgba(255, 255, 255, 0.031372549);
}
@media (min-width: 768px) {
  .wg-plan-d6 {
    height: 100%;
  }
  .wg-plan-d6 .wrap {
    height: 100%;
  }
}
@media (min-width: 1440px) {
  .wg-plan-d6 .plan-price h3 {
    line-height: 60px;
  }
}
@media (max-width: 1199px) {
  .wg-plan-d6 .plan-benefit,
  .wg-plan-d6 .br-line {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .wg-plan-d6 .wrap {
    padding: 20px 15px;
  }
}

.table-pricing-d6 .table-head .table-row {
  align-items: end;
}
.table-pricing-d6 .table-head .plan-desc {
  margin-bottom: 24px;
}
.table-pricing-d6 .table-head .plan-name {
  margin-bottom: 12px;
}
.table-pricing-d6 .table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.table-pricing-d6 .table-cell {
  min-width: 250px;
}
.table-pricing-d6 .table-plan {
  display: grid;
}
.table-pricing-d6 .table-body {
  padding-top: 24px;
  padding-bottom: 24px;
}
.table-pricing-d6 .table-body:not(:last-child) {
  margin-bottom: 8px;
}
.table-pricing-d6 .table-body .table-row:not(.heading) {
  align-items: center;
  padding-top: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line-16);
}
.table-pricing-d6 .table-body .table-row.heading {
  margin-bottom: 24px;
}
.table-pricing-d6 .table-body .table-cell:not(:first-child) {
  display: flex;
  justify-content: center;
}
@media (max-width: 1199px) {
  .table-pricing-d6 .table-row {
    gap: 12px;
  }
  .table-pricing-d6 .table-plan {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .table-pricing-d6 .table-plan .btn-action {
    margin-top: auto;
  }
  .table-pricing-d6 .table-head .plan-desc {
    margin-bottom: 12px;
  }
  .table-pricing-d6 .table-head .table-cell:not(:first-child) {
    align-self: start;
    height: 100%;
  }
}

.wg-intro {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.wg-intro .intro-img {
  position: relative;
}
.wg-intro .intro-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), linear-gradient(180deg, rgba(0, 0, 0, 0) 39.62%, rgba(0, 0, 0, 0.2) 90.03%), linear-gradient(288.44deg, rgba(0, 0, 0, 0) 34.91%, rgba(0, 0, 0, 0.2) 80.37%);
}
.wg-intro .intro-content {
  position: absolute;
  z-index: 2;
  inset: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wg-intro .intro-content .desc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wg-intro .content-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.wg-intro .list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.wg-intro .list a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-left: 12px;
  padding-right: 10px;
  color: var(--white);
  border-radius: 121px;
  background: var(--white-12);
  border: 0.5px solid rgba(255, 255, 255, 0.3019607843);
  backdrop-filter: blur(28px);
}
.wg-intro .list a:hover {
  background: var(--white);
  color: var(--black);
}
.wg-intro .list a:hover .ic-w {
  background: var(--black);
  color: var(--white);
}
.wg-intro .ic-w {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  color: var(--black);
  background: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-intro .bt-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infiniteSlide-brand-d6 {
  position: relative;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 3.79%, #FFFFFF 15.37%, #FFFFFF 84.73%, rgba(255, 255, 255, 0) 96.2%);
  mask-mode: alpha;
  mask-repeat: no-repeat;
}
.infiniteSlide-brand-d6 .infiniteSlide-slide {
  margin-left: 4px;
  margin-right: 4px;
}

.card-member-d6 {
  padding: 19px;
  border: 1px solid var(--line-16);
  border-radius: 16px;
}
.card-member-d6 .member-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.card-member-d6 .member-name {
  margin-bottom: 2px;
}

.wg-career-d6 {
  padding: 9px;
  box-shadow: 0px 3px 0px 0px rgba(51, 51, 51, 0.2509803922) inset, 0px 1px 0px 0px #000000;
  border: 1px solid rgba(34, 34, 34, 0.5019607843);
  background: var(--bg-17);
}
.wg-career-d6 .wrap {
  background: var(--bg-33);
  border: 3px solid;
  border-image-source: linear-gradient(164.27deg, #151515 -26%, #222222 88.64%);
  border-radius: 10px;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-career-d6 .career-detail {
  display: grid;
  gap: 40px;
}
.wg-career-d6 .career_name {
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-career-d6 .career_infor {
  display: flex;
  flex-wrap: wrap;
  gap: 90px;
}
.wg-career-d6 .btn-action .b-wrap {
  padding-left: 24px;
  padding-right: 24px;
  overflow: hidden;
  position: relative;
}
.wg-career-d6 .btn-action .b-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #1D78EF, #1D78EF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #1B50B2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
  z-index: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.wg-career-d6 .btn-action .b-text {
  position: relative;
  z-index: 2;
}
.wg-career-d6:hover .career_name {
  color: var(--primary);
}
@media (min-width: 1200px) {
  .wg-career-d6 .wrap {
    background: transparent;
  }
  .wg-career-d6:hover .wrap {
    background: var(--bg-33);
  }
  .wg-career-d6:hover .btn-action {
    background: rgba(34, 34, 34, 0.8196078431);
    box-shadow: 0px 1.5px 0px 0px rgba(81, 81, 81, 0.1019607843), 0px 0px 2px 0px rgba(255, 255, 255, 0.0784313725) inset;
  }
  .wg-career-d6:hover .btn-action .b-wrap::after {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 991px) {
  .wg-career-d6 .wrap {
    padding: 20px 15px;
  }
  .wg-career-d6 .career-detail {
    gap: 24px;
  }
  .wg-career-d6 .career_infor {
    gap: 20px 40px;
  }
}

.wd-why {
  position: relative;
}
.wd-why .why-content {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  display: grid;
}
.wd-why .why-content .br-line {
  background: var(--white-30);
  margin-top: 11px;
  margin-bottom: 24px;
}
.wd-why .why-image {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.wd-why .why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}
.wd-why .why-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 19.88%, rgba(0, 0, 0, 0.25) 84.79%);
  z-index: 1;
}
.wd-why .why-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-8);
  backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
  z-index: 2;
}
@media (max-width: 991px) {
  .wd-why .why-content {
    bottom: 20px;
    left: 15px;
    right: 15px;
  }
  .wd-why .why-content .br-line {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

.wg-process-d6 .prc-image {
  border-radius: 20px;
  overflow: hidden;
}
.wg-process-d6 .prc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wg-process-d6 .col-center {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.wg-process-d6 .ic-w {
  padding: 6px;
  font-size: 24px;
  border-radius: 20px;
  background: rgba(216, 216, 216, 0.8196078431);
  box-shadow: 0px 1.5px 0px 0px rgba(255, 255, 255, 0.1019607843), 0px 0px 2px 0px rgba(0, 0, 0, 0.0784313725) inset;
  display: inline-flex;
  color: var(--white);
}
.wg-process-d6 .ic-w span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(0deg, #808080, #808080), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -2px 0px 0px #777777 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 2.77px 2.21px 0px rgba(119, 119, 119, 0.1215686275), 0px 6.65px 5.32px 0px rgba(119, 119, 119, 0.1294117647), 0px 12.52px 10.02px 0px rgba(119, 119, 119, 0.1333333333), 0px 3px 3px 0px rgba(119, 119, 119, 0.1411764706), 0px 2.77px 2.21px 0px rgba(119, 119, 119, 0.1215686275);
}
.wg-process-d6 .content {
  padding-top: 40px;
}
.wg-process-d6 .prc-title {
  margin-bottom: 24px;
  color: var(--text-23);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-process-d6 .prc-desc {
  color: var(--text-23);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-process-d6.active .prc-title {
  color: var(--primary);
}
.wg-process-d6.active .prc-desc {
  color: var(--text-21);
}
.wg-process-d6.active .ic-w span {
  background: linear-gradient(0deg, #1D78EF, #1D78EF), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -2px 0px 0px #1B50B2 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275), 0px 6.65px 5.32px 0px rgba(27, 80, 178, 0.1294117647), 0px 12.52px 10.02px 0px rgba(27, 80, 178, 0.1333333333), 0px 3px 3px 0px rgba(27, 80, 178, 0.1411764706), 0px 2.77px 2.21px 0px rgba(27, 80, 178, 0.1215686275);
}
@media (max-width: 767px) {
  .wg-process-d6 .col-center,
  .wg-process-d6 .content {
    padding-top: 20px;
  }
  .wg-process-d6 .prc-title {
    margin-bottom: 12px;
  }
  .wg-process-d6 .prc-desc {
    margin-bottom: 18px;
  }
  .wg-process-d6 .prc-image img {
    max-height: 350px;
  }
}
@media (max-width: 575px) {
  .wg-process-d6 .ic-w {
    padding: 3px;
    font-size: 16px;
    border-radius: 8px;
  }
  .wg-process-d6 .ic-w span {
    width: 32px;
    height: 32px;
    border-radius: 5px;
  }
}

.wg-feature-d6 {
  padding: 39px;
  border: 1px solid var(--line-17);
  border-radius: 20px;
  position: relative;
}
.wg-feature-d6 .icon {
  font-size: 32px;
}
.wg-feature-d6 .ic-w {
  margin-bottom: 24px;
}
.wg-feature-d6 .fea-name {
  margin-bottom: 8px;
}
.wg-feature-d6 .light {
  position: absolute;
  top: 0;
  left: 38px;
  width: 36px;
  height: 6px;
  border-radius: 0px 0px 4px 4px;
  background: var(--primary);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 991px) {
  .wg-feature-d6 {
    padding: 20px;
  }
  .wg-feature-d6 .light {
    left: 18px;
  }
}

.wg-cta-d6 {
  position: relative;
  padding: 40px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.0784313725);
  border: 1px solid #DDDDDD;
}
.wg-cta-d6 .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
}
.wg-cta-d6 .group-info-img {
  display: flex;
  position: absolute;
  right: -7%;
  top: 30%;
  left: 60%;
  aspect-ratio: 0.9846153846;
}
.wg-cta-d6 .group-info-img .info-img {
  position: relative;
}
.wg-cta-d6 .group-info-img .info-img:not(:last-child) {
  margin-right: -80px;
}
.wg-cta-d6 .group-info-img .info-img.info-1 {
  transform: rotate(-8deg);
  z-index: 3;
}
.wg-cta-d6 .group-info-img .info-img.info-2 {
  margin-top: 40px;
  transform: rotate(-4deg);
  z-index: 2;
  background: rgba(255, 255, 255, 0.1215686275);
  backdrop-filter: blur(20px);
}
.wg-cta-d6 .group-info-img .info-img.info-2 img {
  opacity: 0.7;
}
.wg-cta-d6 .group-info-img .info-img.info-3 {
  margin-top: 80px;
  opacity: 0.4;
  z-index: 1;
}
.wg-cta-d6 .content {
  position: relative;
  z-index: 1;
}
.wg-cta-d6 .title {
  margin-bottom: 80px;
}
.wg-cta-d6 .btn-action {
  margin-bottom: 8px;
}
@media (min-width: 1200px) {
  .wg-cta-d6 {
    padding: 64px;
  }
  .wg-cta-d6 .btn-action {
    height: 46px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .wg-cta-d6 .title {
    margin-bottom: 114px;
  }
}
@media (max-width: 575px) {
  .wg-cta-d6 {
    padding: 30px 20px;
  }
  .wg-cta-d6 .title {
    margin-bottom: 40px;
  }
}

.wg-cta-d6-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 39px;
  border-radius: 20px;
  overflow: hidden;
  gap: 30px 20px;
  flex-wrap: wrap;
}
.wg-cta-d6-2 .bg-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
}
@media (max-width: 575px) {
  .wg-cta-d6-2 {
    padding: 30px 20px;
  }
}

.wg-problem-d6 {
  padding: 9px;
  border: 1px solid rgba(34, 34, 34, 0.5019607843);
  box-shadow: 0px 3px 0px 0px rgba(51, 51, 51, 0.2509803922) inset, 0px 1px 0px 0px #000000;
  background: var(--gray-90);
  border-radius: 16px;
}
.wg-problem-d6 .wrap {
  aspect-ratio: 1;
  position: relative;
  background: var(--gray-80);
  border-radius: 9px;
  overflow: hidden;
}
.wg-problem-d6 .abs {
  position: absolute;
  transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-problem-d6 .abs.item-2 {
  transform: translateY(100%);
  filter: blur(18px);
  opacity: 0;
  padding-left: 12px;
  padding-right: 12px;
}

@keyframes item1Anim {
  0% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  10% {
    transform: translateY(-100%);
    filter: blur(18px);
    opacity: 0;
  }
  60% {
    /* chờ 5 giây */
    transform: translateY(-100%);
    filter: blur(18px);
    opacity: 0;
  }
  70% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}
/*=== ITEM 2 HIỆN → CHỜ → ẨN ===*/
@keyframes item2Anim {
  0% {
    transform: translateY(100%);
    filter: blur(18px);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  60% {
    /* chờ 5 giây */
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  70% {
    transform: translateY(100%);
    filter: blur(18px);
    opacity: 0;
  }
  100% {
    transform: translateY(100%);
    filter: blur(18px);
    opacity: 0;
  }
}
.core-value {
  display: flex;
  gap: 20px;
  overflow: hidden;
}
.core-value .col-left {
  width: 40.7575757576%;
}
.core-value .col-right {
  position: relative;
}
.core-value .bri-image {
  border-radius: 16px;
  overflow: hidden;
}
.core-value .bri-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.core-value .bri-image-2 {
  border-radius: 12px;
  overflow: hidden;
}
.core-value .bri-image-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.core-value .box-right .wrap {
  display: flex;
  gap: 20px;
}
.core-value .box-right .wrap > * {
  width: 50%;
}
.core-value .box-right.s1 {
  z-index: 1;
}
.core-value .box-right.s2 {
  z-index: 2;
}
.core-value .box-right.s3 {
  z-index: 3;
}
.core-value .box-right.s4 {
  z-index: 4;
}
.core-value .col-left {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 20px 23px;
  position: relative;
}
.core-value .col-left::before {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  position: absolute;
  background: var(--line-16);
}
.core-value .col-left_top {
  max-width: 381px;
  margin-bottom: 48px;
}
.core-value .col-left_top .title {
  margin-bottom: 16px;
}
.core-value .col-left_bottom {
  margin-top: auto;
}
.core-value .col-left_bottom .number {
  margin-bottom: 4px;
}
.core-value .pag-line {
  display: inline-flex;
  gap: 12px;
  padding: 12px;
  border-radius: 1212px;
  background: var(--gray-10);
}
.core-value .pag-line .pag-prg_line {
  width: 8px;
  height: 8px;
  border-radius: 1212px;
  background: #D5D5D5;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.core-value .pag-line .pag-prg_line.active {
  width: 64px;
}
.core-value .pag-line .prg-run {
  width: 0%;
  border-radius: 1212px;
  background-color: var(--primary);
  position: absolute;
  inset: 0;
}
.core-value .bri-content {
  margin-top: 30px;
}
.core-value .bri-content .title {
  margin-bottom: 12px;
}
.core-value .bri-content .desc {
  margin-bottom: 16px;
}
.core-value .bri-content .number {
  margin-bottom: 4px;
}
@media (min-width: 992px) {
  .core-value .bri-content {
    display: none;
  }
  .core-value .col-right {
    width: calc(59.2424242424% - 20px);
  }
  .core-value .col-right > *:not(.box-right.s1) {
    position: absolute;
    inset: 0;
  }
}
@media (max-width: 991px) {
  .core-value .box-right:not(:last-child) {
    margin-bottom: 40px;
  }
  .core-value .wg-intro .intro-img img {
    min-height: 350px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .core-value .wg-intro .intro-content {
    inset: 20px 15px;
  }
}
@media (max-width: 575px) {
  .core-value .box-right .wrap {
    flex-direction: column;
  }
  .core-value .box-right .wrap > * {
    width: 100%;
  }
  .core-value .testimonial-d6-v2 .tes-logo {
    margin-bottom: 20px;
  }
}

.banner-image-d6 {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding-right: 15px;
  padding-left: 15px;
}
.banner-image-d6 * {
  will-change: unset;
}
.banner-image-d6::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 55.09%, #F5F5F5 90.04%);
  z-index: 1;
}
.banner-image-d6 .banner-bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.banner-image-d6 .banner-image_wrap {
  max-width: 914px;
}
.banner-image-d6 .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-image-d6 .banner-image {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--white-30);
  position: relative;
  margin-top: 74px;
  margin-bottom: 74px;
}
.banner-image-d6 .banner-image img {
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.banner-image-d6 .banner-image::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(37px);
  background: var(--white-12);
  z-index: 0;
  border-radius: 16px;
}
.banner-image-d6 .bottom-wrap {
  position: absolute;
  bottom: 40px;
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.banner-image-d6 .bottom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--gray-10);
  background: var(--white);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.0392156863);
  border-radius: 12px;
}
.banner-image-d6 .bottom .rate-wrap {
  gap: 2px;
  color: #EAB308;
}
.banner-image-d6 .bottom .br-line {
  background: var(--gray-20);
}
@media (max-width: 991px) {
  .banner-image-d6 .banner-image {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .banner-image-d6 .bottom-wrap {
    bottom: 16px;
  }
}

.wg-benefit-d6 {
  padding: 32px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.wg-benefit-d6 > * {
  position: relative;
  z-index: 1;
}
.wg-benefit-d6 .img-item {
  position: absolute;
  display: flex;
  inset: 0;
  z-index: 0;
}
.wg-benefit-d6 .img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wg-benefit-d6 .bnf-title {
  max-width: 480px;
  margin-bottom: 30px;
}
.wg-benefit-d6 .bnf-image {
  margin-bottom: 30px;
}
.wg-benefit-d6 .bnf-desc {
  margin-top: auto;
}
@media (min-width: 1200px) {
  .wg-benefit-d6 .bnf-title {
    margin-bottom: 91px;
  }
  .wg-benefit-d6 .bnf-image {
    margin-bottom: 30px;
  }
  .wg-benefit-d6 .bnf-image {
    margin-left: 53px;
    margin-bottom: 69px;
  }
}
@media (max-width: 1199px) {
  .wg-benefit-d6 .bnf-image {
    margin-top: auto;
    margin-bottom: auto;
  }
}
@media (max-width: 991px) {
  .wg-benefit-d6 {
    padding: 20px;
  }
}

.wg-benefit-d6-2 {
  border-radius: 20px;
  background: var(--bg-28);
  position: relative;
  overflow: hidden;
  padding: 20px 15px;
}
.wg-benefit-d6-2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: rgba(34, 34, 34, 0.6);
  z-index: 1;
  backdrop-filter: blur(12px);
}
.wg-benefit-d6-2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #222222 100%);
  z-index: 2;
}
.wg-benefit-d6-2 .title {
  margin-bottom: 8px;
}
.wg-benefit-d6-2 .desc {
  margin-bottom: 38px;
}
.wg-benefit-d6-2 .image {
  display: flex;
  justify-content: center;
}
.wg-benefit-d6-2.st-2::after, .wg-benefit-d6-2.st-2::before {
  display: none;
}
.wg-benefit-d6-2.st-2 .box-visit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 454px;
  margin: 0 auto;
  padding: 28px;
  background: #333333;
  border: 1px solid #444444;
  box-shadow: 0px 2px 12px 0px rgba(17, 17, 17, 0.1215686275);
  border-radius: 12px;
}
.wg-benefit-d6-2.st-2 .box-visit .number {
  display: flex;
  align-items: start;
  gap: 4px;
}
.wg-benefit-d6-2.st-2 .box-visit .number span {
  color: #00BD29;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1200px) {
  .wg-benefit-d6-2 {
    padding: 32px;
    padding-bottom: 0;
  }
  .wg-benefit-d6-2.st-2 {
    padding: 32px;
  }
}
@media (max-width: 1199px) {
  .wg-benefit-d6-2.st-2 .box-visit {
    padding: 20px 15px;
    flex-wrap: wrap;
  }
}
@media (max-width: 991px) {
  .wg-benefit-d6-2 .desc {
    margin-bottom: 20px;
  }
}

.wg-benefit-d6-3 {
  padding: 16px;
  display: flex;
  gap: 20px;
  background: var(--bg-28);
  border-radius: 20px;
  overflow: hidden;
}
.wg-benefit-d6-3 > * {
  width: 100%;
}
.wg-benefit-d6-3 .benefit-box {
  display: grid;
  gap: 16px;
}
.wg-benefit-d6-3 .benefit-box .list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.wg-benefit-d6-3 .benefit-box a {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gray-70);
  padding: 9px 15px;
  border-radius: 8px;
  color: var(--gray-30);
}
.wg-benefit-d6-3 .benefit-box a:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.wg-benefit-d6-3 .content-left {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.wg-benefit-d6-3 .benefit-title {
  margin-bottom: 12px;
}
.wg-benefit-d6-3 .btn-action {
  margin-bottom: 40px;
}
.wg-benefit-d6-3 .benefit-desc {
  margin-bottom: 32px;
}
.wg-benefit-d6-3 .content-right {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.wg-benefit-d6-3 .bg-image {
  height: 100%;
}
.wg-benefit-d6-3 .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}
.wg-benefit-d6-3 .image-item {
  position: absolute;
  z-index: 1;
}
.wg-benefit-d6-3 .image-item:not(.item-3) {
  padding: 4px;
  border: 1px solid var(--white-40);
  border-radius: 12px;
  overflow: hidden;
}
.wg-benefit-d6-3 .image-item:not(.item-3)::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(33.6842079163px);
  background-color: var(--white-12);
  border-radius: 12px;
}
.wg-benefit-d6-3 .image-item:not(.item-3) img {
  border-radius: 10px;
  opacity: 0.7;
}
.wg-benefit-d6-3 .image-item.item-1 {
  transform: rotate(-8.5deg);
  top: 5%;
  left: 5%;
}
.wg-benefit-d6-3 .image-item.item-2 {
  transform: rotate(6deg);
  bottom: 10%;
  right: -10%;
}
.wg-benefit-d6-3 .image-item.item-3 {
  transform: rotate(-2.5deg);
  bottom: 10%;
  left: 30%;
}
@media (min-width: 768px) {
  .wg-benefit-d6-3 .benefit-box {
    max-width: 324px;
  }
}
@media (min-width: 992px) {
  .wg-benefit-d6-3 .col-left {
    padding: 16px;
  }
}
@media (max-width: 767px) {
  .wg-benefit-d6-3 {
    flex-wrap: wrap-reverse;
  }
  .wg-benefit-d6-3 .btn-action {
    margin-bottom: 24px;
  }
  .wg-benefit-d6-3 .benefit-desc {
    margin-bottom: 20px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}

.noUi-vertical .noUi-origin {
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  position: absolute;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-horizontal {
  height: 18px;
}

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}

.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle:after {
  left: 17px;
}

.noUi-vertical .noUi-handle:after,
.noUi-vertical .noUi-handle:before {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
  cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

.noUi-marker {
  position: absolute;
  background: #ccc;
}

.noUi-marker-sub {
  background: #aaa;
}

.noUi-marker-large {
  background: #aaa;
}

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%, 0);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal {
  height: 4px;
}

.noUi-target {
  border: 0;
}

.noUi-base .noUi-connects {
  border-radius: 999px;
  background-color: var(--line-7);
}

.noUi-connect {
  background-color: var(--primary);
}

.noUi-horizontal .noUi-handle,
.noUi-vertical .noUi-handle {
  height: 16px;
  width: 16px;
  border-radius: 0;
  border: 2px solid var(--primary);
  background-color: var(--white);
  box-shadow: unset;
  cursor: pointer;
}
.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after,
.noUi-vertical .noUi-handle::before,
.noUi-vertical .noUi-handle::after {
  content: none;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -8px;
}

.widget-facet:not(:last-child) {
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line-7);
  margin-bottom: 43px;
}
.widget-facet .facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 52px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--black);
}
.widget-facet .facet-title .icon {
  transform: rotate(0deg);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.widget-facet .facet-title.collapsed {
  margin-bottom: 0px;
}
.widget-facet .facet-title.collapsed .icon {
  transform: rotate(180deg);
}
.widget-facet.style-2:not(:last-child) {
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.widget-facet.style-2 .facet-title:not(.collapsed) {
  margin-bottom: 30px;
}

.filter-group-check.group-category a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--text);
}
.filter-group-check .list-item {
  display: flex;
  gap: 15px;
  align-items: center;
  cursor: pointer;
}
.filter-group-check .list-item:not(:last-child) {
  margin-bottom: 16px;
}
.filter-group-check .label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  color: var(--black);
}
@media (min-width: 1200px) {
  .filter-group-check .list-item {
    gap: 16px;
  }
}

.widget-price {
  display: grid;
  gap: 16px;
}
.widget-price .price-val-range {
  padding: 0px 8px;
  margin: 6px 0px;
}
.widget-price .price-box,
.widget-price .box-value-price {
  display: flex;
  gap: 8px;
}
.widget-price .price-box {
  color: var(--primary);
  align-items: center;
}
.widget-price .price-val {
  color: var(--primary);
  position: relative;
}
.widget-price .price-val::before {
  content: attr(data-currency);
}
.widget-price.type-2 .box-value-price {
  display: grid;
  gap: 24px;
}
.widget-price.type-2 .price-box {
  gap: 12px;
}
.widget-price.type-2 .price-val {
  min-width: 115px;
  border-radius: 8px;
  border: 1px solid var(--gray-70);
  height: 36px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
}
.widget-price.type-2 .price-val::before {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid var(--gray-30);
  color: var(--gray-50);
}
.widget-price.type-2 .noUi-horizontal .noUi-handle,
.widget-price.type-2 .noUi-vertical .noUi-handle {
  width: 14px;
  height: 20px;
  border-radius: 4px;
  background-color: var(--primary);
  border: 0px;
}
.widget-price.type-2 .noUi-horizontal {
  height: 7px;
}
.widget-price.type-2 .noUi-connects {
  border-radius: 6px;
}
.widget-price.type-2 .price-val-range {
  margin: 7px 0px;
}
@media (min-width: 1200px) {
  .widget-price {
    gap: 17px;
  }
}

.tf-shop-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tf-shop-control .tf-control-sorting {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (min-width: 1200px) {
  .tf-shop-control {
    margin-bottom: 40px;
  }
}

.wrapper-shop {
  gap: 20px;
}
.wrapper-shop .wg-pagination {
  flex-direction: column;
  max-width: 549px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 44px;
}
.wrapper-shop .wg-pagination .text-count {
  margin-bottom: 13px;
}
.wrapper-shop .wg-pagination .pag-bar {
  margin-bottom: 36px;
}
@media (max-width: 575px) {
  .wrapper-shop {
    gap: 20px 12px;
  }
}

.meta-filter-shop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-filter-shop #applied-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.meta-filter-shop .filter-tag,
.meta-filter-shop .remove-all-filters {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 30px;
  color: var(--black);
  border: 1px solid var(--line);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.meta-filter-shop .filter-tag .icon,
.meta-filter-shop .remove-all-filters .icon {
  font-size: 16px;
}
.meta-filter-shop .filter-tag:hover,
.meta-filter-shop .remove-all-filters:hover {
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 575px) {
  .meta-filter-shop .filter-tag,
  .meta-filter-shop .remove-all-filters {
    gap: 6px;
    padding: 6px 12px;
  }
}
.meta-filter-shop.type-drop {
  margin-bottom: 20px;
}

.pag-bar {
  height: 3px;
  position: relative;
  background-color: var(--line-11);
}
.pag-bar span {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background-color: var(--primary);
}

.overlay-filter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.overlay-filter.show {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1200px) {
  .overlay-filter.type-drawer {
    display: none;
  }
}

.tf-btn-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding: 8px 16px;
  color: var(--black);
  margin-bottom: 30px;
}
.tf-btn-filter .icon {
  font-size: 24px;
}
.tf-btn-filter:hover {
  border-color: var(--black);
}
.tf-btn-filter.active {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}
@media (min-width: 1200px) {
  .tf-btn-filter {
    gap: 8px;
    min-width: 180px;
    padding: 15px;
  }
}

.list-order-product {
  display: grid;
  gap: 20px;
}
.list-order-product .order-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.list-order-product .info-and-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.list-order-product .info-and-price .name {
  margin-bottom: 8px;
}
.list-order-product .info-and-price .info-prd {
  display: grid;
}
.list-order-product .img-prd {
  position: relative;
}
.list-order-product .img-prd .number-count {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black);
  color: var(--white);
}
.list-order-product .img-prd .image {
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1607843137);
  border: 1px solid var(--black-20);
}
.list-order-product .img-prd .image img {
  aspect-ratio: 1;
  object-fit: cover;
}

.list-total {
  display: grid;
  gap: 16px;
}
.list-total .total-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-total .total-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}
.list-total .total-sub .dot-square {
  background-color: var(--dark-90);
  width: 4px;
  height: 4px;
}
.list-total .last-total {
  margin-top: 4px;
}
.list-total .last-total .price {
  display: flex;
  align-items: end;
  gap: 8px;
}

.box-your-order {
  display: grid;
  gap: 32px;
}
@media (max-width: 767px) {
  .box-your-order {
    gap: 28px;
  }
}

.tf-mini-cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 48px;
}
.tf-mini-cart-item:not(:last-child) {
  border-bottom: 1px solid var(--black-10);
}
.tf-mini-cart-item .tf-mini-cart-image img {
  aspect-ratio: 1;
  object-fit: cover;
}
.tf-mini-cart-item .tf-mini-cart-info {
  flex: 1;
}
.tf-mini-cart-item .tf-mini-cart-info {
  display: grid;
  padding-top: 8px;
}
.tf-mini-cart-item .prd-name {
  margin-bottom: 8px;
}
.tf-mini-cart-item .type-select {
  margin-bottom: 12px;
}
.tf-mini-cart-item .price-wrap {
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .tf-mini-cart-item .remove {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.bg-dark-blu {
  background: #233E90;
}

.bg-blue {
  background: #57c1fe;
}

.bg-blue-2 {
  background: #B8D6DA;
}

.bg-green-gray {
  background: linear-gradient(270deg, #C4C5C9 48.83%, #7B9951 49.03%);
}

.bg-red-gray {
  background: linear-gradient(270deg, #C4C5C9 48.83%, #BC2C31 49.03%);
}

.bg-blue-gray {
  background: linear-gradient(270deg, #C4C5C9 48.83%, #0E2467 49.03%);
}

.bg-orange {
  background: #FC6D28;
}

.bg-orange-2 {
  background: #F88E31;
}

.bg-light-olive-gray {
  background: #808F75;
}

.bg-green {
  background: #ABB959;
}

.bg-pink {
  background: #FFC0CB;
}

.bg-red {
  background: #EF5050;
}

.bg-yellow {
  background: #FFD02D;
}

.bg_white {
  background: #fff;
}

.bg-dark-green {
  background: #434e3b;
}

.bg-gray {
  background: #514f54;
}

.card-product-v01 {
  padding: 16px;
  padding-bottom: 14px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 575px) {
  .card-product-v01 {
    padding: 16px 12px;
  }
}
.card-product-v01 .card-product_info .product__name {
  color: var(--black);
  margin-bottom: 2px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.card-product-v01 .card-product_info .price-new {
  color: var(--black);
  font-weight: 800;
  font-family: "Barlow", sans-serif;
}

.card-product_wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.2041666667;
  z-index: 20;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card-product_wrapper .product-img {
  overflow: hidden;
  position: relative;
}
.card-product_wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition-duration: 700ms;
}
.card-product_wrapper .img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.card-product_wrapper:hover .img-hover {
  display: block;
  z-index: 1;
  opacity: 1;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.card-product_action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 21;
}

.product-color_list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.product-color_list .product-color-item {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background-color: transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3px;
}
.product-color_list .product-color-item .swatch-value {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line-9);
  display: inline-block;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.product-color_list .product-color-item img {
  visibility: hidden;
  width: 18px;
  height: 18px;
  position: absolute;
}
.product-color_list .product-color-item.active, .product-color_list .product-color-item:hover {
  border-color: var(--black);
}
.product-color_list .product-color-item.active .swatch-value::before, .product-color_list .product-color-item:hover .swatch-value::before {
  border-color: var(--text-3);
}
.product-color_list .product-color-item.active.border-color-black, .product-color_list .product-color-item:hover.border-color-black {
  border-color: #252525 !important;
}

/* -- Prduct Detail -- */
.thumbs-slider {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.thumbs-slider.style-row .tf-product-media-thumbs {
  order: 1;
}
@media (min-width: 1200px) {
  .thumbs-slider.style-row {
    flex-direction: row;
  }
  .thumbs-slider.style-row .flat-wrap-media-product {
    width: calc(100% - 111px);
  }
  .thumbs-slider.style-row .tf-product-media-thumbs {
    width: 91px;
    order: 0;
  }
  .thumbs-slider.style-row .tf-product-media-thumbs .swiper-slide {
    max-height: 112px;
  }
}

.flat-wrap-media-product {
  position: relative;
}
.flat-wrap-media-product .media-product-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.flat-wrap-media-product .media-product-tag .tag-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 14px;
  background-color: var(--white);
  border-radius: 30px;
}
.flat-wrap-media-product .tf-product-media-main {
  border: 1px solid var(--line-7);
}
.flat-wrap-media-product .tf-product-media-main .swiper-slide {
  height: auto;
}
.flat-wrap-media-product .tf-product-media-main .item {
  height: 100%;
  display: flex;
  overflow: hidden;
  aspect-ratio: 1.2041618161;
}
.flat-wrap-media-product .tf-product-media-main .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flat-wrap-media-product.ver-2 .tf-product-media-main {
  border: 0;
  border-radius: 20px;
}
.flat-wrap-media-product.ver-2 .tf-product-media-main .item {
  aspect-ratio: 0.72265625;
}

.tf-product-info-wrap {
  position: relative;
}
@media (min-width: 1440px) {
  .tf-product-info-wrap {
    max-width: 567px;
    width: 100%;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .tf-product-info-wrap {
    margin-top: 40px;
  }
}

.tf-product-media-thumbs {
  width: 100%;
  flex-shrink: 0;
}
.tf-product-media-thumbs .swiper-slide .item {
  position: relative;
  aspect-ratio: 1.2093023256;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-product-media-thumbs .swiper-slide .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-product-media-thumbs .swiper-slide .item::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid var(--line-7);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {
  border-color: var(--primary);
}
.tf-product-media-thumbs.ver-2 .swiper-slide .item {
  aspect-ratio: 0.8125;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
}
.tf-product-media-thumbs.ver-2 .swiper-slide .item::after {
  content: none;
}
.tf-product-media-thumbs.ver-2 .swiper-slide.swiper-slide-thumb-active .item {
  border-color: var(--primary);
}

.tf-product-info-list {
  display: grid;
  gap: 40px;
}
@media (max-width: 1199px) {
  .tf-product-info-list {
    gap: 30px;
  }
}

.tf-product-info_heading .product-info__name {
  margin-bottom: 16px;
}
.tf-product-info_heading .product-info__rate {
  margin-bottom: 20px;
}

.product-info__name {
  font-weight: 800;
  color: var(--black);
}

.product-info__rate {
  display: flex;
  align-items: center;
  gap: 16px;
}

.product-info__price {
  font-size: 24px;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.tf-product-info_desc .product-info__view {
  margin-bottom: 12px;
}

.product-info__view {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-info__view .icon {
  font-size: 28px;
  color: var(--black);
}
.product-info__view .count-view {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tf-product-info_variant .product-info__only,
.tf-product-info_variant .product-info__quantity {
  margin-bottom: 20px;
}
.tf-product-info_variant .btn_buy {
  margin-bottom: 24px;
}
.tf-product-info_variant .variant-picker-label {
  margin-bottom: 15px;
}
.tf-product-info_variant .variant-picker-values {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-product-info_variant .unit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 1px solid var(--black-10);
  padding-left: 20px;
  padding-right: 20px;
  color: var(--black);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 40px;
  cursor: pointer;
}
.tf-product-info_variant .unit-btn:hover {
  color: var(--primary);
}
.tf-product-info_variant .unit-btn.active {
  background-color: var(--primary);
  color: var(--white);
}
@media (max-width: 767px) {
  .tf-product-info_variant .product-info__quantity {
    margin-bottom: 10px;
  }
  .tf-product-info_variant .unit-btn {
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.product-info__quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .product-info__quantity {
    gap: 20px;
  }
}

.wg-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid var(--text-10);
  height: 48px;
  min-width: 151px;
}
.wg-quantity .quantity-product {
  padding: 0;
  background-color: transparent;
  border: 0;
  width: 50px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  line-height: 26px;
  color: var(--black);
  pointer-events: none;
}
.wg-quantity .btn-quantity {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-quantity .btn-quantity:hover {
  color: var(--primary);
}
.wg-quantity.style-2 {
  border-radius: 60px;
  border-color: var(--black-10);
  min-width: 137px;
  height: 46px;
}
.wg-quantity.style-2 .quantity-product {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.wg-quantity.style-2 .btn-quantity {
  font-size: 16px;
}
.wg-quantity.style-3 {
  height: 32px;
  display: inline-flex;
  min-width: 85px;
  padding-left: 8px;
  padding-right: 8px;
  border-color: var(--black-20);
}
.wg-quantity.style-3 .quantity-product {
  font-size: 14px;
  width: 32px;
}
.wg-quantity.style-3 .btn-quantity {
  font-size: 16px;
  color: var(--gray-60);
}
@media (min-width: 1200px) {
  .wg-quantity {
    height: 56px;
  }
}

.product-info__extra-link {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 8px 0px;
}
.product-info__extra-link .extra-link_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--black);
  white-space: nowrap;
}
.product-info__extra-link .extra-link_icon .icon {
  font-size: 20px;
}
@media (min-width: 768px) {
  .product-info__extra-link .extra-link_icon {
    flex: 1;
  }
}

.product-info__method {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-18);
}
.product-info__method .method-payment-list {
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
}
@media (min-width: 1200px) {
  .product-info__method {
    padding: 32px;
  }
}

.product-info__delivery {
  display: grid;
  gap: 16px;
}
.product-info__delivery li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-info__delivery li .icon {
  font-size: 28px;
}

.product-info__additional {
  display: grid;
  gap: 4px;
}
.product-info__additional .additional {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--black);
}

.tf-product-info_more .product-info__method {
  margin-bottom: 28px;
}
.tf-product-info_more .product-info__delivery {
  margin-bottom: 30px;
}
.tf-product-info_more .br-line {
  margin-bottom: 30px;
}
@media (min-width: 1200px) {
  .tf-product-info_more .product-info__delivery {
    margin-bottom: 40px;
  }
  .tf-product-info_more .br-line {
    margin-bottom: 40px;
  }
}

.card-product-v02 {
  padding: 20px;
  padding-bottom: 32px;
  background-color: #F5F5F5;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-product-v02 .product-badge-list {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.card-product-v02 .product-badge {
  padding: 0px 12.5px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #A27B68;
  border-radius: 6px;
  color: var(--white);
}
.card-product-v02 .product-badge.sale {
  background-color: var(--secondary);
}
.card-product-v02 .product-badge.small {
  height: 26px;
  padding: 0px 13.5px;
}
.card-product-v02 .card-product_wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  aspect-ratio: 0;
}
.card-product-v02 .product-img {
  width: 100%;
}
.card-product-v02 .product-img img {
  aspect-ratio: 1.156626506;
  max-height: 332px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-product-v02 .product__cate {
  color: var(--text-9);
  margin-bottom: 4px;
}
.card-product-v02 .product__name {
  margin-bottom: 16px;
}
.card-product-v02 .card-product_info {
  display: flex;
  align-items: end;
}
.card-product-v02 .card-product_info .info-left {
  flex: 1;
}
.card-product-v02 .btn-add-shop {
  flex-shrink: 0;
}
.card-product-v02.type-2 {
  padding: 18px;
  padding-bottom: 24px;
  gap: 6px;
}
.card-product-v02.type-2 .card-product_wrapper {
  aspect-ratio: 1.1939655172;
}
.card-product-v02.type-2 .product__name {
  margin-bottom: 12px;
}
.card-product-v02.type-2 .btn-add-shop {
  font-size: 28px;
}
.card-product-v02.type-2 .product-badge {
  height: 26px;
}
@media (min-width: 1200px) {
  .card-product-v02 .btn-add-shop {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .card-product-v02 {
    padding: 20px 15px;
  }
  .card-product-v02 .btn-add-shop {
    font-size: 24px;
  }
  .card-product-v02 .product-badge-list {
    gap: 8px;
  }
  .card-product-v02 .product-badge {
    padding: 0px 5px;
    height: 28px;
    font-size: 14px;
  }
}

.price-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tf-product-info-list.ver-2 .tf-product-info_heading > .br-line {
  background-color: var(--black-10);
  display: flex;
  margin-bottom: 32px;
}
.tf-product-info-list.ver-2 .product-info__category {
  margin-bottom: 12px;
}
.tf-product-info-list.ver-2 .product-info__rate {
  gap: 8px;
}
.tf-product-info-list.ver-2 .product-info__price {
  margin-bottom: 20px;
}
.tf-product-info-list.ver-2 .product-info__desc {
  margin-bottom: 35px;
}
.tf-product-info-list.ver-2 .rate-wrap {
  gap: 0;
}
.tf-product-info-list.ver-2 .rate-wrap i {
  font-size: 14px;
  color: var(--yellow);
}
.tf-product-info-list.ver-2 .variant-picker-item {
  margin-bottom: 23px;
}
.tf-product-info-list.ver-2 .product-info__only {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--success);
}
.tf-product-info-list.ver-2 .product-info__only .ic-wrap {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--success);
  color: var(--white);
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-product-info-list.ver-2 .product-info__quantity {
  margin-bottom: 16px;
}
.tf-product-info-list.ver-2 .btn_buy {
  margin-bottom: 20px;
}
.tf-product-info-list.ver-2 .btn_more_log {
  margin-bottom: 32px;
}
.tf-product-info-list.ver-2 .product-info__pickup {
  display: flex;
  align-items: start;
  gap: 14px;
  margin-bottom: 32px;
}
.tf-product-info-list.ver-2 .product-info__pickup .address-avaiable {
  margin-bottom: 4px;
}
.tf-product-info-list.ver-2 .product-info__pickup .address-ready {
  margin-bottom: 12px;
}
.tf-product-info-list.ver-2 .br-line.line-2 {
  margin-bottom: 40px;
}
.tf-product-info-list.ver-2 .tf-social-icon-2 {
  gap: 8px;
}
.tf-product-info-list.ver-2 .tf-social-icon-2 .social-link {
  width: 36px;
  height: 36px;
}
.tf-product-info-list.ver-2 .tf-social-icon-2 .social-link .icon {
  font-size: 14px;
}
@media (min-width: 1200px) {
  .tf-product-info-list.ver-2 .tf-social-icon-2 {
    margin-top: 24px;
  }
}

.card-best-product .product-image-preview {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  position: relative;
}
.card-best-product .product-image-preview img,
.card-best-product .product-image-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 0.7066666667;
}
.card-best-product .product-image-preview video {
  position: absolute;
  inset: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card-best-product .product-content {
  border-radius: 20px;
  padding: 15px;
  border: 1px solid var(--gray-30);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.card-best-product .left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.card-best-product .product_image {
  border-radius: 10px;
  overflow: hidden;
  max-width: 91px;
}
.card-best-product .product_image img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-best-product .action {
  flex-shrink: 0;
  border-color: var(--gray-30);
  color: var(--black);
}
.card-best-product .action:hover {
  background-color: var(--gray-30);
}
.card-best-product .info__cate {
  margin-bottom: 4px;
}
.card-best-product .info__name {
  margin-bottom: 16px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .card-best-product .action {
    height: 46px;
    width: 46px;
  }
  .card-best-product .action .icon {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border: 0;
  padding: 0;
  padding-right: 16px;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  outline: none;
  position: relative;
  transition: all linear 0.2s;
  user-select: none;
  white-space: nowrap;
  width: max-content;
  border-radius: 0;
  color: var(--main);
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: var(--line);
}

.nice-select:after {
  border-bottom: 1.7px solid var(--main);
  border-right: 1.7px solid var(--main);
  content: "";
  height: 8px;
  width: 8px;
  margin-top: -6px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
}

.nice-select.open .list {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  width: 100%;
  -moz-transform: scale(1) translateY(0);
  -o-transform: scale(1) translateY(0);
}

.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}

.nice-select.disabled:after {
  border-color: #cccccc;
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  left: auto;
  right: 0;
}

.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}

.nice-select.small:after {
  height: 4px;
  width: 4px;
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}

.nice-select .list {
  background-color: var(--white);
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
  width: 100%;
  font-size: 14px;
  max-height: 155px;
  overflow: auto;
}

.nice-select .list.style {
  max-height: unset;
}

.nice-select .list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .list::-webkit-scrollbar-thumb {
  background-color: #a7a7a7;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .list::-webkit-scrollbar {
  width: 6px;
  height: 4px;
  background-color: #f5f5f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .option {
  cursor: pointer;
  font-weight: 500;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  font-size: 16px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: var(--main);
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: var(--white);
  color: var(--primary);
}

.nice-select .option.selected {
  font-weight: 600;
}

.nice-select .option.disabled {
  color: var(--main);
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

.tf-dropdown-select.style-default {
  width: unset !important;
  display: flex;
}
.tf-dropdown-select.style-default > select {
  display: none !important;
}
.tf-dropdown-select.style-default > .dropdown-toggle {
  padding: 9px 0px 9px 20px;
  padding-right: 40px;
  background-color: var(--line-3) !important;
  border: 0;
  border-radius: 0;
  outline: none !important;
  color: var(--black);
}
.tf-dropdown-select.style-default > .dropdown-toggle::after {
  content: "\e911";
  font-family: "icomoon";
  position: absolute;
  border: 0;
  right: 20px;
  font-size: 12px;
  line-height: 1;
  color: var(--black);
  margin-left: 0px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
}
.tf-dropdown-select.style-default .filter-option-inner-inner {
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  gap: 8px;
}
.tf-dropdown-select.style-default .filter-option-inner-inner img {
  height: 24px;
  width: 24px;
}
.tf-dropdown-select.style-default > .dropdown-menu {
  overflow: unset !important;
  margin-top: 17px !important;
  margin-bottom: 17px !important;
  padding: 10px 16px;
  border-radius: 0;
  border: 0;
  background-color: var(--white);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
.tf-dropdown-select.style-default > .dropdown-menu a {
  padding: 5px 0;
}
.tf-dropdown-select.style-default > .dropdown-menu a .text {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}
.tf-dropdown-select.style-default > .dropdown-menu a .text img {
  width: 20px;
  height: 20px;
}
.tf-dropdown-select.style-default > .dropdown-menu a:hover, .tf-dropdown-select.style-default > .dropdown-menu a:active, .tf-dropdown-select.style-default > .dropdown-menu a.active {
  color: var(--primary) !important;
  background-color: unset !important;
}
.tf-dropdown-select.style-default > .dropdown-menu::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--white);
  top: 0;
  left: 50%;
  z-index: 2;
}
.tf-dropdown-select.style-default > .dropdown-menu[data-popper-placement=top-start]::after {
  display: none;
}
.tf-dropdown-select.style-default > .dropdown-menu[data-popper-placement=top-start]::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  transform: translate(-50%, 50%) rotate(45deg);
  background-color: var(--white);
  bottom: 0%;
  left: 50%;
  z-index: 2;
}
.tf-dropdown-select.style-default .dropdown-menu > .inner {
  overflow-y: hidden !important;
  display: flex;
  align-items: center;
}
.tf-dropdown-select.style-2 > .dropdown-toggle {
  background-color: transparent !important;
  border: 1px solid var(--black-10);
  border-radius: 6px;
  padding: 4.5px 26px 4.5px 11px;
}
.tf-dropdown-select.style-2 > .dropdown-toggle::after {
  right: 12px;
  font-size: 9px;
}
.tf-dropdown-select.style-2 .filter-option-inner-inner {
  line-height: 16px;
  font-weight: normal;
}
.tf-dropdown-select.color-white > .dropdown-toggle {
  color: var(--white);
}
.tf-dropdown-select.color-white > .dropdown-toggle::after {
  color: var(--white);
}
.tf-dropdown-select.color-white-2 > .dropdown-toggle {
  color: var(--text);
}
.tf-dropdown-select.color-white-2 > .dropdown-toggle::after {
  color: var(--text);
}
.tf-dropdown-select.color-white-3 > .dropdown-toggle {
  color: var(--line-4);
}
.tf-dropdown-select.color-white-3 > .dropdown-toggle::after {
  color: var(--line-4);
}

.tf-dropdown-wrap {
  display: flex;
  gap: 20px;
}

.tf-dropdown-sort {
  padding: 8px 21px;
  min-width: 125px;
  border: 1px solid var(--primary);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-dropdown-sort .icon {
  font-size: 14px;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 2px;
}
.tf-dropdown-sort .btn-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  gap: 6px;
  color: var(--primary);
}
.tf-dropdown-sort .btn-select .icon {
  font-size: 12px;
}
.tf-dropdown-sort.show .btn-select .icon {
  transform: rotate(180deg);
}
.tf-dropdown-sort .text-sort-value {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--primary);
  font-family: "Barlow", sans-serif;
}
.tf-dropdown-sort .dropdown-menu {
  min-width: 240px;
  border: 1px solid var(--line);
  padding: 10px 5px;
  border-radius: 0px;
  max-height: 68vh;
  isolation: isolate;
  overscroll-behavior-y: contain;
  overflow-y: auto;
  z-index: 99;
}
.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar {
  width: 3px;
}
.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
.tf-dropdown-sort .select-item {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--black);
  padding: 0 15px;
  line-height: 30px;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-dropdown-sort .select-item:hover, .tf-dropdown-sort .select-item.active {
  background-color: #ebebeb;
}
@media (min-width: 1200px) {
  .tf-dropdown-sort.style-2 {
    min-width: 241px;
    border-color: var(--black-10);
    border-radius: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .tf-dropdown-sort.style-2 .text-sort-value {
    color: var(--black);
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
  }
  .tf-dropdown-sort.style-2 .text-value-item {
    font-size: 14px;
    line-height: 20px;
  }
}

.tf-select-category {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--black);
}

.dropdown-filter .dropdown-toggle {
  min-width: 91px;
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.dropdown-filter .dropdown-toggle::after {
  display: none;
}
.dropdown-filter .dropdown-toggle.show .icon {
  transform: rotate(180deg);
}
.dropdown-filter .dropdown-toggle:hover {
  border-color: var(--dark);
}
.dropdown-filter .icon {
  font-size: 12px;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-top: 2px;
}
.dropdown-filter .text-value {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}
.dropdown-filter .dropdown-menu {
  margin-top: -2px !important;
  min-width: 238px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 10px;
  max-height: 68vh;
  isolation: isolate;
  overscroll-behavior-y: contain;
  overflow-y: auto;
  z-index: 99;
  box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.1);
}
.dropdown-filter .dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.dropdown-filter .dropdown-menu::-webkit-scrollbar-track {
  background-color: var(--line);
}
.dropdown-filter .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
.dropdown-filter .dropdown-menu.drop-menu-brand {
  max-height: 180px;
}
.dropdown-filter .filter-color-box,
.dropdown-filter .filter-size-box {
  gap: 8px;
}
@media (min-width: 1200px) {
  .dropdown-filter .dropdown-toggle {
    padding: 15px 31px;
  }
  .dropdown-filter .dropdown-menu {
    min-width: 300px;
    padding: 25px 15px;
  }
}

.select-category .dropdown_product_cat {
  display: none;
}
.select-category .close-option {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.select-category .close-option:hover {
  color: var(--primary);
}
.select-category .select-options {
  overflow-y: auto;
  display: none;
  position: absolute;
  top: -3px;
  right: -3px;
  left: -3px;
  z-index: 999;
  margin: 0;
  padding: 20px;
  list-style: none;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  min-width: 200px;
}
.select-category .select-options li {
  display: inline-block;
  width: 32.88%;
  color: var(--gray);
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  padding: 8px 10px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-category .select-options li:hover {
  color: var(--primary);
}
.select-category .header-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ededed;
  margin-bottom: 8px;
  color: var(--black);
}

.tf-select-custom {
  display: block;
  cursor: pointer;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
  position: relative;
}
.tf-select-custom::after {
  content: "\e916";
  position: absolute;
  font-family: "icomoon";
  font-size: 16px;
  font-weight: normal;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-zoom-main {
  position: sticky;
  z-index: 50;
}
.tf-zoom-main .drift-zoom-pane {
  top: 0;
  left: 0;
  height: 520px;
  max-width: 520px;
  width: 100%;
  background: #fff;
  -webkit-transform: translate3d(0, 0, 0);
  box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);
  z-index: 3;
}

.drift-bounding-box.drift-open {
  background: rgba(255, 255, 255, 0.2509803922);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  z-index: 5000;
}

.drift-zoom-pane {
  z-index: 5000;
}

.pswp__bg {
  background: var(--white);
}

.pswp__icn {
  fill: rgb(34, 34, 34);
  color: var(--white);
}
.pswp__icn .pswp__icn-shadow {
  stroke: var(--white);
  stroke-width: 1px;
  fill: none;
}

.pswp__counter {
  color: #222;
  text-shadow: 1px 1px 3px #ffffff;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-pin-btn {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
}
.tf-pin-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3215686275);
  backdrop-filter: blur(32px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-pin-btn span::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid 1px rgba(255, 255, 255, 0.2392156863);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-pin-btn span::before {
  animation: ripple-line 2s linear infinite;
}
.tf-pin-btn span::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--white);
}
.tf-pin-btn.style-2 span {
  width: 20px;
  height: 20px;
}
.tf-pin-btn.style-2 span::after {
  width: 12px;
  height: 12px;
}
@media (min-width: 1200px) {
  .tf-pin-btn span {
    width: 32px;
    height: 32px;
  }
  .tf-pin-btn span::after {
    width: 20px;
    height: 20px;
  }
}

.banner-image-lookbook {
  position: relative;
  display: flex;
}
.banner-image-lookbook .image-lookbook {
  border-radius: 28px;
  overflow: hidden;
}
.banner-image-lookbook .image-lookbook img {
  min-height: 350px;
}
.banner-image-lookbook .lookbook-item {
  position: absolute;
}
.banner-image-lookbook .lookbook-item.position1 {
  top: 30%;
  left: 30%;
}
.banner-image-lookbook .lookbook-item.position2 {
  top: 80%;
  left: 50%;
}
.banner-image-lookbook .lookbook-item.position3 {
  top: 50%;
  left: 50%;
}
.banner-image-lookbook .lookbook-item:hover .loobook-product-wrap {
  bottom: 42px;
  opacity: 1;
  visibility: visible;
}
.banner-image-lookbook .loobook-product-wrap {
  position: absolute;
  bottom: 50px;
  min-width: max-content;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product {
  background-color: var(--white);
  padding: 12px;
  border-radius: 4px;
  display: flex;
  gap: 12px;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product .img-style {
  width: 108px;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product .img-style img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product .info {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product .btn-lookbook {
  font-size: 14px;
  line-height: 22px;
}
.banner-image-lookbook .loobook-product-wrap .loobook-product .btn-lookbook::after, .banner-image-lookbook .loobook-product-wrap .loobook-product .btn-lookbook::before {
  height: 1px;
}
@media (max-width: 767px) {
  .banner-image-lookbook .loobook-product-wrap .loobook-product {
    width: 124px;
    flex-direction: column;
  }
  .banner-image-lookbook .loobook-product-wrap .loobook-product .img-style {
    width: 100px;
    height: 100px;
  }
  .banner-image-lookbook .loobook-product-wrap .loobook-product .text-title,
  .banner-image-lookbook .loobook-product-wrap .loobook-product .text-button {
    font-size: 14px;
    line-height: 20px;
  }
  .banner-image-lookbook .loobook-product-wrap .loobook-product .info {
    margin-bottom: 5px;
  }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.ic-accordion-custom {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s linear;
}
.ic-accordion-custom::after, .ic-accordion-custom::before {
  content: "";
  position: absolute;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.ic-accordion-custom::before {
  height: 100%;
  width: 2px;
}
.ic-accordion-custom::after {
  height: 2px;
  width: 100%;
}

.accordion-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 0;
  margin-bottom: 24px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-action .icon::before {
  transform: rotate(90deg);
}
.accordion-action .icon::after {
  transform: rotate(180deg);
}
.accordion-action.collapsed {
  margin-bottom: 0px;
  padding-bottom: 32px;
}
.accordion-action.collapsed .icon::before {
  transform: rotate(0deg);
}
.accordion-action.collapsed .icon::after {
  transform: rotate(0deg);
}
@media (max-width: 991px) {
  .accordion-action {
    padding-top: 20px;
  }
  .accordion-action.collapsed {
    padding-bottom: 20px;
  }
}

.faq-accordion_item-2 {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.faq-accordion_item-2.active {
  border-color: var(--primary);
}
.faq-accordion_item-2:not(:last-child) {
  margin-bottom: 36px;
}
.faq-accordion_item-2 .accordion-action {
  color: var(--primary);
  padding-top: 0;
  margin-bottom: 24px;
}
.faq-accordion_item-2 .accordion-action.collapsed {
  color: var(--color-2);
  padding-bottom: 0;
  margin-bottom: 0;
}
.faq-accordion_item-2 .accordion-action.collapsed .ic-accordion-custom::after, .faq-accordion_item-2 .accordion-action.collapsed .ic-accordion-custom::before {
  background-color: var(--color-2);
}
.faq-accordion_item-2 .accordion-action .ic-accordion-custom::after, .faq-accordion_item-2 .accordion-action .ic-accordion-custom::before {
  background-color: var(--primary);
}
.faq-accordion_item-2 .accordion-action .text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq-accordion_item-2 .faq-desc {
  color: var(--white-2);
  max-width: 472px;
  width: 100%;
}
@media (max-width: 1199px) {
  .faq-accordion_item-2 {
    padding-bottom: 20px;
  }
  .faq-accordion_item-2:not(:last-child) {
    margin-bottom: 20px;
  }
  .faq-accordion_item-2 .accordion-action {
    margin-bottom: 18px;
  }
  .faq-accordion_item-2 .accordion-action .text {
    gap: 8px;
  }
}

.store-accordion_item .accordion-action {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--black);
}
.store-accordion_item .ic-accordion-custom {
  width: 14px;
  height: 14px;
}
.store-accordion_item .ic-accordion-custom::after, .store-accordion_item .ic-accordion-custom::before {
  background-color: var(--black);
}
.store-accordion_item .info-store-content .address {
  margin-bottom: 4px;
}
.store-accordion_item .info-store-content .phone {
  margin-bottom: 8px;
}

.store-accordion-list {
  display: grid;
}
.store-accordion-list .store-accordion_item:not(:last-child) {
  padding-bottom: 19px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-7);
}

.static-accordion {
  --size--7rem: clamp(4rem, 3.142rem + 4.29vw, 7rem);
}
.static-accordion .image {
  border-radius: 12px;
  overflow: hidden;
}
.static-accordion .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.static-accordion .item {
  padding-top: 40px;
  padding-bottom: 40px;
  opacity: 0.3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.static-accordion .item.is-active {
  opacity: 1;
}
.static-accordion .item:first-child {
  padding-top: 0;
}
.static-accordion .item:last-child {
  padding-bottom: 0;
}
@media (max-width: 991px) {
  .static-accordion {
    padding: 0;
  }
  .static-accordion .item {
    padding: 0;
    display: flex;
    gap: 30px;
    align-items: center;
  }
  .static-accordion .item > * {
    width: 50%;
  }
  .static-accordion .item:not(:last-child) {
    margin-bottom: 40px;
  }
}
@media (max-width: 575px) {
  .static-accordion .item {
    flex-direction: column;
    gap: 20px;
    opacity: 1;
  }
  .static-accordion .item > * {
    width: 100%;
  }
  .static-accordion .item .image img {
    aspect-ratio: 1.3333333333;
  }
}

.static-accordion_item {
  padding-bottom: 31px;
  border-bottom: 1px solid var(--line-5);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.static-accordion_item .static-label {
  margin-bottom: 16px;
}
.static-accordion_item .wg-counter {
  margin-bottom: 16px;
}
@media (max-width: 991px) {
  .static-accordion_item {
    padding-bottom: 24px;
  }
}

.img-static-list {
  height: 100%;
  position: sticky;
  display: flex;
  align-items: center;
  top: 15px;
  width: 100%;
}
.img-static-list .img-static {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.img-static-list .img-static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-static-list .img-static.is-active {
  opacity: 1;
}

.accordion-title .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-title:not(.collapsed) .icon {
  transform: rotate(180deg);
}

.faq-accordion {
  display: grid;
  gap: 16px;
}

.faq-accordion_item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 8px;
}
.faq-accordion_item .accordion-title {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.faq-accordion_item .accordion-title .text {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.faq-accordion_item .accordion-title:not(.collapsed) {
  padding-bottom: 28px;
  color: var(--primary);
}
.faq-accordion_item .accordion-title:not(.collapsed) .text {
  color: var(--primary);
}
.faq-accordion_item .accordion-title:not(.collapsed) .icon {
  transform: rotate(180deg);
}
.faq-accordion_item .faq-desc {
  padding: 24px;
  padding-top: 0;
}
.faq-accordion_item.active {
  background-color: var(--bg-15);
}

.benefit-accordion {
  display: grid;
  gap: 8px;
}

.benefit-accordion_item {
  border-radius: 8px;
  background-color: var(--bg-2);
}
.benefit-accordion_item .accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 24px;
  border: 1px solid var(--line-2);
  background-color: var(--bg-5);
  border-radius: 8px;
  color: var(--white);
}
.benefit-accordion_item .accordion-title .text {
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.benefit-accordion_item .accordion-title .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.benefit-accordion_item .accordion-title .ic.type-stroke svg path {
  stroke: var(--white);
}
.benefit-accordion_item .accordion-title .ic.type-fill svg path {
  fill: var(--white);
}
.benefit-accordion_item .accordion-title .text {
  display: flex;
  align-items: center;
  gap: 16px;
}
.benefit-accordion_item .accordion-title:not(.collapsed) {
  color: var(--primary);
}
.benefit-accordion_item .accordion-title:not(.collapsed) .text {
  color: var(--primary);
}
.benefit-accordion_item .accordion-title:not(.collapsed) .icon {
  transform: rotate(180deg);
}
.benefit-accordion_item .accordion-title:not(.collapsed) .ic.type-stroke svg path {
  stroke: var(--primary);
}
.benefit-accordion_item .accordion-title:not(.collapsed) .ic.type-fill svg path {
  fill: var(--primary);
}
.benefit-accordion_item .benefit-desc {
  padding: 24px;
  padding-bottom: 34px;
}
@media (max-width: 1199px) {
  .benefit-accordion_item .accordion-title,
  .benefit-accordion_item .benefit-desc {
    padding: 20px 16px;
  }
}

.achivement-accordion_item {
  border-top: 1px solid var(--bg-14);
}
.achivement-accordion_item .accordion-action {
  gap: 12px;
  justify-content: unset;
  display: grid;
  grid-template-columns: 432px 1fr auto;
}
.achivement-accordion_item .accordion-action .name_achive {
  grid-column: 1;
}
.achivement-accordion_item .accordion-action .title_achive {
  grid-column: 2;
}
.achivement-accordion_item .accordion-action .date_achive {
  grid-column: 3;
}
.achivement-accordion_item .accordion-content {
  padding-bottom: 32px;
}
.achivement-accordion_item .accordion-content .text {
  margin-bottom: 20px;
}
.achivement-accordion_item .tf-btn-stroke {
  border-color: var(--text-19);
  color: var(--gray-30);
}
.achivement-accordion_item .tf-btn-stroke:hover {
  background-color: var(--text-19);
}
.achivement-accordion_item .group-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 576px) {
  .achivement-accordion_item .accordion-action .date_achive {
    min-width: 105px;
  }
}
@media (min-width: 768px) {
  .achivement-accordion_item .accordion-action .name_achive {
    padding-left: 20px;
  }
  .achivement-accordion_item .accordion-action .date_achive {
    padding-right: 20px;
  }
  .achivement-accordion_item .accordion-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1200px) {
  .achivement-accordion_item .accordion-action {
    padding-top: 40px;
  }
  .achivement-accordion_item .accordion-action.collapsed {
    padding-bottom: 39px;
  }
  .achivement-accordion_item .accordion-action:not(.collapsed) {
    margin-bottom: 23px;
  }
  .achivement-accordion_item .accordion-content {
    padding-bottom: 40px;
  }
}
@media (min-width: 1440px) {
  .achivement-accordion_item .accordion-content {
    max-width: 432px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 1439px) {
  .achivement-accordion_item .accordion-action {
    grid-template-columns: 1fr 2fr auto;
  }
}
@media (max-width: 767px) {
  .achivement-accordion_item .accordion-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .achivement-accordion_item .accordion-action .name_achive {
    width: 100%;
  }
}

.achivement-accordion_item-2 {
  background-color: var(--white);
  border-radius: 24px;
}
.achivement-accordion_item-2 .accordion-action {
  padding: 20px 15px;
  gap: 12px;
  margin-bottom: 0px;
}
.achivement-accordion_item-2 .accordion-action .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 15px;
}
.achivement-accordion_item-2 .ic-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.achivement-accordion_item-2 .ic-wrap .icon::after, .achivement-accordion_item-2 .ic-wrap .icon::before {
  background-color: var(--gray-90);
}
.achivement-accordion_item-2 .accordion-content {
  display: flex;
  gap: 20px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 20px;
}
.achivement-accordion_item-2 .content-right .text {
  margin-bottom: 28px;
}
.achivement-accordion_item-2 .group-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.achivement-accordion_item-2 .image-left {
  border-radius: 12px;
  overflow: hidden;
  max-width: 395px;
}
.achivement-accordion_item-2 .image-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1.6527196653;
}
@media (min-width: 1200px) {
  .achivement-accordion_item-2 .accordion-action {
    padding-top: 48px;
    padding-left: 52px;
    padding-right: 40px;
    padding-bottom: 48px;
  }
  .achivement-accordion_item-2 .accordion-action .name_achive {
    min-width: 158px;
  }
  .achivement-accordion_item-2 .ic-wrap {
    width: 48px;
    height: 48px;
  }
  .achivement-accordion_item-2 .accordion-content {
    gap: 49px;
    padding-bottom: 48px;
    max-width: 876px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .achivement-accordion_item-2 .accordion-content > * {
    width: 50%;
  }
}
@media (max-width: 575px) {
  .achivement-accordion_item-2 .accordion-action {
    flex-wrap: wrap;
  }
  .achivement-accordion_item-2 .accordion-content {
    flex-wrap: wrap;
  }
  .achivement-accordion_item-2 .accordion-content > * {
    width: 100%;
  }
}

.faq-accordion_item-3 {
  background-color: var(--white);
  border-radius: 16px;
  position: relative;
  padding-right: 52px;
}
.faq-accordion_item-3 .ic-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-10);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.faq-accordion_item-3 .ic-wrap .icon::after, .faq-accordion_item-3 .ic-wrap .icon::before {
  background-color: var(--gray-90);
}
.faq-accordion_item-3 .accordion-action {
  padding: 20px 15px;
  margin-bottom: 0;
}
.faq-accordion_item-3 .faq-desc {
  padding: 20px 15px;
  padding-top: 0;
}
@media (min-width: 992px) {
  .faq-accordion_item-3 .accordion-action {
    padding: 20px 24px;
  }
  .faq-accordion_item-3 .accordion-action.collapsed {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .faq-accordion_item-3 .faq-desc {
    padding: 20px 24px;
    padding-top: 0;
  }
}
@media (min-width: 1200px) {
  .faq-accordion_item-3 .ic-wrap {
    width: 48px;
    height: 48px;
    right: 24px;
  }
}

.faq-accordion_item-4 {
  border-radius: 12px;
  background-color: var(--light-beige);
  padding-left: 40px;
  padding-right: 40px;
}
.faq-accordion_item-4 .ic-accordion-custom::after, .faq-accordion_item-4 .ic-accordion-custom::before {
  background-color: var(--black);
}
.faq-accordion_item-4 .accordion-action {
  color: var(--primary);
  padding-bottom: 23px;
  border-bottom: 1px solid var(--gray-100);
}
.faq-accordion_item-4 .accordion-action.collapsed {
  color: var(--black);
  padding-bottom: 31px;
  border-color: transparent;
}
.faq-accordion_item-4 .accordion-content {
  padding-bottom: 32px;
}
@media (max-width: 991px) {
  .faq-accordion_item-4 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faq-accordion_item-4 .accordion-action {
    padding-bottom: 19px;
    gap: 8px;
  }
  .faq-accordion_item-4 .accordion-action .icon {
    flex-shrink: 0;
  }
  .faq-accordion_item-4 .accordion-action:not(.collapsed) {
    margin-bottom: 20px;
  }
  .faq-accordion_item-4 .accordion-action.collapsed {
    padding-bottom: 20px;
  }
  .faq-accordion_item-4 .accordion-content {
    padding-bottom: 20px;
  }
}

.business-faq-accordion {
  display: grid;
  gap: 12px;
}

.product-accordion {
  border-bottom: 1px solid var(--gray-20);
}
.product-accordion .accordion-title:not(.collapsed) .icon {
  transform: rotate(90deg);
}
.product-accordion .accordion-title {
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 13px;
}
.product-accordion .accordion-title .icon {
  font-size: 14px;
}
.product-accordion .accordion-title .name-wrap {
  display: flex;
  gap: 16px;
  flex: 1;
}
.product-accordion .accordion-body {
  padding-bottom: 14px;
}

.faq-accordion_item-5 {
  border: 1px solid var(--gray-20);
  border-radius: 12px;
}
.faq-accordion_item-5 .ic-accordion-custom::after, .faq-accordion_item-5 .ic-accordion-custom::before {
  background-color: var(--gray-50);
}
.faq-accordion_item-5 .accordion-action {
  padding: 19px 19px 19px;
  margin-bottom: 0;
  color: var(--gray-60);
  gap: 12px;
}
.faq-accordion_item-5 .accordion-action:not(.collapsed) {
  color: var(--primary);
}
.faq-accordion_item-5 .accordion-content {
  padding: 1px 19px 19px;
  max-width: 757px;
}

.faq-accordion_item-6 {
  background: var(--white);
  box-shadow: 0px 1.4px 3.74px 0px rgba(0, 0, 0, 0.1019607843), 0px 2.8px 6.54px 0px rgba(0, 0, 0, 0.0509803922), 0px 14.49px 8.88px 0px rgba(0, 0, 0, 0.0509803922), 0px 25.7px 10.28px 0px rgba(0, 0, 0, 0.0117647059), 0px 40.66px 11.22px 0px rgba(0, 0, 0, 0), 0px 0.93px 0px 0px #DADADA;
  border-radius: 16px;
}
.faq-accordion_item-6 .accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.faq-accordion_item-6 .accordion-title:not(.collapsed) {
  color: var(--primary);
}
.faq-accordion_item-6 .accordion-content {
  padding: 12px 20px 20px;
  position: relative;
}
.faq-accordion_item-6 .accordion-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 20%, rgba(0, 0, 0, 0.06) 80%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

.faq-accordion_item-d6 {
  border: 1px solid var(--line-16);
  border-radius: 12px;
  padding-left: 40px;
  padding-right: 40px;
}
.faq-accordion_item-d6 .accordion-action {
  color: var(--primary);
  padding-top: 27px;
}
.faq-accordion_item-d6 .accordion-action.collapsed {
  padding-bottom: 27px;
  color: var(--gray-50);
}
.faq-accordion_item-d6 .accordion-action:not(.collapsed) {
  margin-bottom: 20px;
}
.faq-accordion_item-d6 .accordion-action:not(.collapsed) .ic-wrap .icon::after, .faq-accordion_item-d6 .accordion-action:not(.collapsed) .ic-wrap .icon::before {
  background-color: var(--primary);
}
.faq-accordion_item-d6 .ic-wrap .icon {
  width: 14px;
  height: 14px;
}
.faq-accordion_item-d6 .ic-wrap .icon::after, .faq-accordion_item-d6 .ic-wrap .icon::before {
  background-color: #121416;
}
.faq-accordion_item-d6 .faq-desc {
  padding-bottom: 27px;
}
@media (max-width: 991px) {
  .faq-accordion_item-d6 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .faq-accordion_item-d6 .accordion-action {
    padding-top: 20px;
  }
  .faq-accordion_item-d6 .accordion-action.collapsed {
    padding-bottom: 20px;
  }
  .faq-accordion_item-d6 .faq-desc {
    padding-bottom: 20px;
  }
}

.faq-d6 {
  display: grid;
  gap: 12px;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.preloader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preload-text {
  font-size: 48px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  gap: 4px;
  font-family: "Poppins", sans-serif;
}
@media (max-width: 575px) {
  .preload-text {
    font-size: 36px;
  }
}

.letter {
  opacity: 0;
  transform: translateX(100%);
  animation: letterIn 0.3s ease forwards;
}

@keyframes letterIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.letter-out {
  animation: letterOut 0.3s ease forwards;
}

@keyframes letterOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
  }
}
.preloader-hidden {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* ------------ Footer ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-footer {
  position: relative;
  padding-top: 130px;
  padding-bottom: 60px;
}
.tf-footer .br-line-page {
  top: 60px;
}
.tf-footer .footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tf-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 106px;
}
@media (max-width: 1439px) {
  .tf-footer .footer-nav {
    margin-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .tf-footer .footer-nav {
    margin-bottom: 30px;
  }
}
.tf-footer .footer-inner {
  margin-bottom: 136px;
}
@media (max-width: 1439px) {
  .tf-footer .footer-inner {
    margin-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .tf-footer .footer-inner {
    margin-bottom: 30px;
  }
}

.tf-footer-2 {
  background-color: var(--bg-17);
  /*-- min, between, max --*/
}
.tf-footer-2 .footer-left {
  margin-bottom: 40px;
}
.tf-footer-2 .logo-site {
  margin-bottom: 32px;
}
.tf-footer-2 .footer-inner {
  padding-top: 160px;
  padding-bottom: 128px;
}
.tf-footer-2 .footer-heading {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 28px;
}
.tf-footer-2 .footer-menu-list li {
  display: flex;
}
.tf-footer-2 .footer-menu-list li:not(:last-child) a {
  margin-bottom: 12px;
}
.tf-footer-2 .footer-menu-list a {
  text-decoration: underline;
  color: var(--text-9);
}
.tf-footer-2 .footer-right {
  display: flex;
  align-items: start;
  gap: 20px;
}
.tf-footer-2 .footer-inner-wrap {
  min-width: 208px;
}
.tf-footer-2 .footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tf-footer-2 .footer-social a {
  font-size: 24px;
  display: flex;
}
.tf-footer-2 .footer-right .sub-title {
  margin-bottom: 12px;
}
.tf-footer-2 .footer-right .form-sub {
  margin-bottom: 20px;
}
.tf-footer-2 .footer-bottom--wrap {
  display: flex;
}
.tf-footer-2 .tf-cur-bar {
  display: flex;
}
.tf-footer-2 .footer-bottom-wrap {
  border-top: 1px solid var(--text-5);
  padding-top: 31px;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tf-footer-2 .footer-bottom_left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media (min-width: 1200px) {
  .tf-footer-2 .footer-bottom_left {
    gap: 39px;
  }
  .tf-footer-2 .footer-right {
    max-width: 799px;
    width: 100%;
    margin-left: auto;
  }
}
@media (max-width: 1439px) {
  .tf-footer-2 .footer-inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .tf-footer-2 .footer-inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .tf-footer-2 .footer-right {
    flex-wrap: wrap;
  }
  .tf-footer-2 .footer-right > * {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .tf-footer-2 .footer-right {
    gap: 0;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .tf-footer-2 .footer-inner-wrap {
    flex: 1;
  }
}

@media (max-width: 575px) {
  .footer-heading-mobile {
    display: block;
    position: relative;
    padding-right: 20px;
    line-height: 24px;
  }
  .footer-heading-mobile::after {
    position: absolute;
    content: "";
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 2px;
    background-color: var(--white);
    transition: 0.25s ease-in-out;
  }
  .footer-heading-mobile::before {
    position: absolute;
    content: "";
    right: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 14px;
    background-color: var(--white);
    transition: 0.25s ease-in-out;
  }
  .footer-col-block:not(:last-child) .tf-collapse-content {
    margin-bottom: 30px;
  }
  .footer-col-block:last-child .tf-collapse-content {
    margin-top: 20px;
  }
  .footer-col-block:last-child .footer-heading {
    margin-bottom: 0px;
  }
  .footer-col-block.open .footer-heading-mobile::before {
    opacity: 0;
  }
  .footer-col-block.open .footer-heading-mobile::after {
    transform: translate(0%, -50%) rotate(180deg);
  }
  .footer-col-block .tf-collapse-content {
    display: none;
  }
}
.method-payment-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/*-- Footer Agency --*/
.tf-footer-3 .footer-title {
  margin-bottom: 24px;
}
.tf-footer-3 .footer-inner {
  position: relative;
}
.tf-footer-3 .footer-inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1320px;
  width: 100%;
  height: 1px;
  background-color: var(--line-11);
}
.tf-footer-3 .footer-inner_right .image {
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
}
.tf-footer-3 .footer-inner_right .tag-dot .text {
  padding-left: 13px;
}
.tf-footer-3 .footer-inner_right .tag-dot::before {
  width: 5px;
  height: 5px;
}
.tf-footer-3 .footer-inner_right .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.tf-footer-3 .footer-inner_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 30px;
}
.tf-footer-3 .form-sub {
  margin-bottom: 20px;
  max-width: 321px;
  width: 100%;
}
.tf-footer-3 .footer-bottom {
  padding-top: 24px;
  padding-bottom: 60px;
}
.tf-footer-3 .footer-menu-list {
  display: grid;
  gap: 8px;
}
.tf-footer-3 .footer-menu-list a {
  font-weight: 500;
}
.tf-footer-3 .footer-heading {
  margin-bottom: 16px;
}
.tf-footer-3 .footer-logo_hero {
  margin-bottom: 48px;
}
.tf-footer-3 .footer-logo_hero .wrap {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tf-footer-3 .text-nocopy {
  margin-bottom: 30px;
}
.tf-footer-3 .btn-go_top {
  border: 1px solid var(--line-11);
  color: var(--gray-90);
  flex-shrink: 0;
}
.tf-footer-3 .btn-go_top .icon {
  font-size: 20px;
}
.tf-footer-3 .btn-go_top:hover {
  background-color: var(--line-11);
}
@media (min-width: 1200px) {
  .tf-footer-3 .btn-go_top {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 1440px) {
  .tf-footer-3 .footer-inner {
    padding-bottom: 116px;
  }
  .tf-footer-3 .footer-logo_hero {
    margin-bottom: 80px;
  }
}

.tf-footer-4 {
  position: relative;
  padding-bottom: 48px;
}
.tf-footer-4 .footer-cta .title {
  margin-bottom: 24px;
}
.tf-footer-4 .footer-cta .sub-title {
  margin-bottom: 40px;
}
.tf-footer-4 .img-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tf-footer-4 .img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.tf-footer-4 .footer-inner-wrap {
  border-radius: 24px;
}
.tf-footer-4 .footer-inner {
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 24px;
  background-color: var(--bg-20);
  backdrop-filter: blur(62px);
}
.tf-footer-4 .footer-link-wrap {
  gap: 24px;
  margin-bottom: 40px;
}
.tf-footer-4 .col-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 40px;
}
.tf-footer-4 .col-left .logo-site {
  margin-bottom: 24px;
}
.tf-footer-4 .col-left .desc {
  margin-bottom: 24px;
}
.tf-footer-4 .col-right {
  width: 100%;
}
.tf-footer-4 .col-right .no-copy {
  padding-top: 31px;
  border-top: 1px solid var(--line-15);
}
.tf-footer-4 .footer-col-block .footer-heading {
  margin-bottom: 24px;
}
.tf-footer-4 .footer-col-block .footer-menu-list {
  display: grid;
  gap: 24px;
}
.tf-footer-4 .footer-col-block .footer-menu-list a {
  font-family: "Inter", sans-serif;
}
@media (min-width: 992px) {
  .tf-footer-4 .footer-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (min-width: 1200px) {
  .tf-footer-4 .footer-link-wrap {
    margin-bottom: 64px;
  }
  .tf-footer-4 .col-left {
    max-width: 416px;
  }
  .tf-footer-4 .col-right {
    max-width: 636px;
  }
  .tf-footer-4 .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 24px;
  }
  .tf-footer-4 .footer-cta {
    padding-bottom: 208px;
  }
  .tf-footer-4 .tf-social-icon-2 .social-link {
    width: 48px;
    height: 48px;
  }
  .tf-footer-4 .tf-social-icon-2 .social-link .icon {
    font-size: 20px;
  }
}
@media (max-width: 1439px) {
  .tf-footer-4 .footer-cta {
    padding-top: 100px;
  }
}
@media (max-width: 575px) {
  .tf-footer-4 .footer-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.tf-footer-5 {
  padding: 0px 12px 12px;
}
.tf-footer-5 .tf-footer-wrap {
  padding-top: 92px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFE6E6 0%, #FFECD3 100%);
}
.tf-footer-5 .text-sub-foot {
  margin-bottom: 20px;
}
.tf-footer-5 .footer-col-block .footer-heading {
  margin-bottom: 24px;
}
.tf-footer-5 .footer-col-block .footer-menu-list {
  display: grid;
  gap: 24px;
}
.tf-footer-5 .footer-col-block .footer-menu-list li {
  display: flex;
}
.tf-footer-5 .footer-bottom {
  padding-top: 31px;
  padding-bottom: 31px;
}
.tf-footer-5 .footer-inner {
  margin-bottom: 58px;
}
.tf-footer-5 .footer-midle {
  margin-bottom: 32px;
}
.tf-footer-5 .footer-bottom_cont {
  display: flex;
  align-items: center;
  gap: 20px 12px;
}
.tf-footer-5 .footer-bottom_cont .ft-bottom-right {
  display: flex;
  justify-content: end;
}
.tf-footer-5 .paymend-method-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tf-footer-5 .paymend-method-list li {
  display: flex;
}
.tf-footer-5 .line-foot {
  background-color: var(--black-10);
  display: flex;
}
.tf-footer-5 .form-sub-3 {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .tf-footer-5 .ft-bottom-left,
  .tf-footer-5 .ft-bottom-right {
    flex: 1;
  }
}
@media (min-width: 1200px) {
  .tf-footer-5 .text-sub-foot {
    margin-bottom: 36px;
  }
  .tf-footer-5 .footer-col-block .footer-heading {
    margin-bottom: 36px;
  }
}
@media (max-width: 1199px) {
  .tf-footer-5 .footer-inner {
    margin-bottom: 32px;
  }
  .tf-footer-5 .footer-bottom_cont {
    flex-wrap: wrap;
  }
}
@media (max-width: 991px) {
  .tf-footer-5 .footer-bottom_cont {
    justify-content: space-between;
  }
}
@media (max-width: 575px) {
  .tf-footer-5 .footer-heading-mobile::after, .tf-footer-5 .footer-heading-mobile::before {
    background-color: var(--text);
  }
  .tf-footer-5 .footer-col-block .footer-heading {
    margin-bottom: 18px;
  }
  .tf-footer-5 .footer-col-block .footer-menu-list {
    margin-bottom: 30px;
    gap: 12px;
  }
  .tf-footer-5 .footer-col-block .footer-menu-list a {
    font-size: 16px;
  }
}

.tf-footer-d6 {
  padding-top: 60px;
  padding-bottom: 10px;
  background: linear-gradient(0deg, #151515, #151515), linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0.6) 55.68%);
  border-radius: 20px 20px 0px 0px;
  position: relative;
}
.tf-footer-d6 .bg-img {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.tf-footer-d6 .logo-site {
  margin-bottom: 20px;
}
.tf-footer-d6 .ft-desc {
  margin-bottom: 30px;
}
.tf-footer-d6 .form-sub-4 {
  margin-bottom: 8px;
}
.tf-footer-d6 .footer-heading {
  color: var(--white);
  font-weight: 500;
  margin-bottom: 24px;
}
.tf-footer-d6 .footer-menu-list {
  display: grid;
  gap: 16px;
}
.tf-footer-d6 .footer-bottom {
  padding-top: 18px;
  padding-bottom: 28px;
  position: relative;
}
.tf-footer-d6 .footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  height: 1px;
  background-color: var(--white-16);
}
.tf-footer-d6 .social-text-link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.tf-footer-d6 .ft-bt-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tf-footer-d6 .ft-nocopy {
  margin-bottom: 12px;
}
@media (min-width: 992px) {
  .tf-footer-d6 {
    padding-top: 80px;
  }
}
@media (min-width: 1200px) {
  .tf-footer-d6 {
    border-radius: 40px 40px 0px 0px;
  }
  .tf-footer-d6 .ft-desc {
    margin-bottom: 76px;
  }
  .tf-footer-d6 .footer-inner {
    padding-bottom: 96px;
  }
  .tf-footer-d6 .social-text-link {
    gap: 48px;
  }
}
@media (min-width: 1440px) {
  .tf-footer-d6 {
    padding-top: 136px;
  }
}
@media (max-width: 767px) {
  .tf-footer-d6 .footer-col-block {
    margin-top: 30px;
  }
}

/* ------------ Landing ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-header-landing {
  padding-top: 24px;
  padding-bottom: 18px;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  position: sticky;
  z-index: 99;
  margin-bottom: -104px;
}
.tf-header-landing.header-fixed {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  background-color: var(--surface);
  padding-top: 10px;
  padding-bottom: 10px;
}
.tf-header-landing .box-nav-menu {
  justify-content: center;
  gap: 30px;
}
.tf-header-landing .box-nav-menu .item-link {
  color: var(--black);
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  line-height: 62px;
}
.tf-header-landing .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
@media (min-width: 1200px) {
  .tf-header-landing .box-nav-menu {
    gap: 60px;
  }
}
@media (max-width: 991px) {
  .tf-header-landing {
    padding-top: 15px;
    padding-bottom: 9px;
    margin-bottom: -86px;
  }
}
@media (max-width: 425px) {
  .tf-header-landing {
    margin-bottom: -64px;
  }
}

.header-landing-fixed-block {
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  height: 104px;
  z-index: 0;
}
@media (max-width: 991px) {
  .header-landing-fixed-block {
    height: 86px;
  }
}
@media (max-width: 425px) {
  .header-landing-fixed-block {
    height: 64px;
  }
}

.tf-break-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.tf-break-wrap .dot-square {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--bg-26);
  box-shadow: 0px 0.17px 0.14px 0px rgba(0, 0, 0, 0.0196078431), 0px 0.42px 0.33px 0px rgba(0, 0, 0, 0.0274509804), 0px 0.78px 0.63px 0px rgba(0, 0, 0, 0.0352941176), 0px 1.4px 1.12px 0px rgba(0, 0, 0, 0.0431372549), 0px 2.61px 2.09px 0px rgba(0, 0, 0, 0.0509803922), 0px 6.25px 5px 0px rgba(0, 0, 0, 0.0509803922), 0px 0.19px 0.19px 0px rgba(0, 0, 0, 0.0392156863), 0px 0.17px 0.14px 0px rgba(0, 0, 0, 0.0196078431), 0px -0.19px 0px 0px #DDDDDD inset, 0px 0.06px 0px 0px #FFFFFF inset;
  position: relative;
  z-index: 2;
}
.tf-break-wrap .line {
  border: 1.5px solid rgba(0, 0, 0, 0.0588235294);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}
.tf-break-wrap .line span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  height: 2px;
  display: block;
}
.tf-break-wrap .line span::after {
  content: "";
  height: 1.5px;
  position: absolute;
  left: calc(0% - 100px);
  width: 100px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(to left, var(--primary) 0%, transparent 100%);
  animation: moveLeftToRight2 12s linear infinite;
  animation-delay: var(--delay, 0s);
}
.tf-break-wrap .wrap {
  max-width: 1396px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-break-line {
  position: relative;
}

.line_page {
  position: absolute;
  inset: 0px 5px;
  max-width: 1386px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  pointer-events: none;
}
.line_page::after, .line_page::before {
  content: "";
  position: absolute;
  box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(0, 0, 0, 0.0588235294);
}
.line_page::after {
  top: 0;
  left: 0;
  bottom: 0;
}
.line_page::before {
  top: 0;
  right: 0;
  bottom: 0;
}
.line_page span {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 50px;
  width: 1.5px;
  background: linear-gradient(to top, var(--primary) 0%, transparent 100%);
  animation-delay: var(--delay, 0s);
}

.land-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background-color: var(--bg-10);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  border-radius: 12px;
  gap: 32px;
}
.land-tag .icon {
  font-size: 20px;
}
.land-tag .ic-wrap {
  display: flex;
}
.land-tag .ic-wrap.left .icon {
  position: relative;
  animation: moveRight 3s linear infinite;
}
.land-tag .ic-wrap.right .icon {
  position: relative;
  animation: moveLeft 3s linear infinite;
}
@media (max-width: 991px) {
  .land-tag {
    gap: 24px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .land-tag .icon {
    font-size: 16px;
  }
}

.landing-intro {
  margin-bottom: 56px;
}
.landing-intro .group-btn {
  display: inline-flex;
  justify-content: center;
  gap: 20px;
}
.landing-intro .land-tag {
  margin-bottom: 28px;
}
.landing-intro .title {
  margin-bottom: 36px;
}
.landing-intro .desc {
  margin-bottom: 48px;
}
.landing-intro .content {
  position: relative;
}
.landing-intro .content .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: -1;
}
.landing-intro .content .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .landing-intro .content {
    padding-top: 110px;
    padding-bottom: 96px;
  }
  .landing-intro .group-btn .action {
    min-width: 223px;
  }
  .landing-intro .group-btn .action * {
    width: 100%;
  }
}

.web-safari-emulator {
  border-radius: 20px;
  border-bottom: 1px solid #DDDDDD;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  background-color: var(--white);
  overflow: hidden;
}
.web-safari-emulator .tool-bar {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.web-safari-emulator .tool-left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}
.web-safari-emulator .tool-center {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.web-safari-emulator .tool-right {
  flex: 1;
}
.web-safari-emulator .web-btn-control {
  display: flex;
  gap: 8px;
}
.web-safari-emulator .web-btn-control .br-dot {
  width: 12px;
  height: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.1215686275);
}
.web-safari-emulator .web-btn-control .br-dot.red {
  background-color: #F96057;
}
.web-safari-emulator .web-btn-control .br-dot.yellow {
  background-color: #F8CE52;
}
.web-safari-emulator .web-btn-control .br-dot.green {
  background-color: #5FCF65;
}
.web-safari-emulator .web-direc {
  display: flex;
  align-items: center;
  gap: 6px;
}
.web-safari-emulator .web-direc .box-direc-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.web-safari-emulator .web-nav-control {
  display: flex;
  align-items: center;
  gap: 4px;
}
.web-safari-emulator .box-search {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 590px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--gray-10);
  height: 28px;
  position: relative;
  padding-right: 28px;
  padding-left: 12px;
}
.web-safari-emulator .box-search .main-search {
  display: flex;
  align-items: center;
  gap: 6px;
}
.web-safari-emulator .box-search .reload {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
}
.web-safari-emulator .ip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.01em;
}
.web-safari-emulator .all-demo {
  position: relative;
}
.web-safari-emulator .all-demo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15px;
  background: linear-gradient(180deg, #DDDDDD 0%, rgba(221, 221, 221, 0) 30%);
}
@media (min-width: 1200px) {
  .web-safari-emulator .tool-bar {
    padding: 10px 24px;
  }
}
@media (max-width: 767px) {
  .web-safari-emulator .tool-bar {
    flex-wrap: wrap;
  }
  .web-safari-emulator .tool-center {
    order: 2;
  }
  .web-safari-emulator .web-nav-control {
    justify-content: flex-end;
  }
}
@media (max-width: 425px) {
  .web-safari-emulator .ip {
    width: 200px;
  }
}

.card-demo {
  padding: 27px;
  border-radius: 16px;
  border: 1px solid var(--gray-20);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  text-align: center;
  display: grid;
}
.card-demo .demo-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 48px;
}
.card-demo .demo-image img {
  aspect-ratio: 1.4009433962;
}
.card-demo .demo_name {
  margin-bottom: 12px;
}
.card-demo.coming {
  background: var(--bg-27);
  box-shadow: 5px 9px 8px -3px rgba(177, 177, 177, 0.6980392157) inset, -5px -12px 8px -3px rgba(249, 249, 249, 0.6) inset, 5px -12px 8px -3px rgba(249, 249, 249, 0.6) inset, -20px 17px 15px -20px #DDDDDD inset, 23px 17px 15px -20px #DDDDDD inset;
  align-items: center;
}
.card-demo.coming .text {
  text-shadow: 0px 1.5px 0px #FFFFFF, 0px 0px 3px rgba(0, 0, 0, 0.3215686275);
}
@media (min-width: 1200px) {
  .card-demo .demo_desc {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media (max-width: 991px) {
  .card-demo {
    padding: 20px 15px;
  }
  .card-demo .demo-image {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .card-demo.coming {
    aspect-ratio: 1.5;
  }
}

.figma-colect {
  position: relative;
}
.figma-colect::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15px;
  background: linear-gradient(180deg, #DDDDDD 0%, rgba(221, 221, 221, 0) 30%);
}
.figma-colect::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-20);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}
.figma-colect .tf-grid-layout {
  max-width: 1216px;
  width: 100%;
  margin: 0 auto;
  gap: 16px;
}
.figma-colect .btn-see-demo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}
.figma-colect:hover::before {
  opacity: 1;
  visibility: visible;
}
.figma-colect:hover .btn-see-demo {
  opacity: 1;
  visibility: visible;
}

.btn-see-demo {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 1px solid var(--white-40);
  background: var(--white-30);
  backdrop-filter: blur(35px);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-see-demo .icon {
  font-size: 40px;
}

@media (min-width: 1200px) {
  .section-figma-colect {
    padding-bottom: 110px;
  }
}

.landing-heading {
  text-align: center;
  margin-bottom: 80px;
}
.landing-heading .land-tag {
  margin-bottom: 24px;
}
.landing-heading .title {
  margin-bottom: 16px;
  text-shadow: 0px 1.5px 0px #FFFFFF, 0px 0px 3px rgba(0, 0, 0, 0.3215686275);
}
@media (max-width: 1199px) {
  .landing-heading {
    margin-bottom: 60px;
  }
}

.wg-landing-feature {
  padding: 28px;
  border-radius: 12px;
  background-color: var(--white);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  /*-- min, between, max --*/
}
.wg-landing-feature .ic {
  margin-bottom: 36px;
}
.wg-landing-feature .br-line {
  margin-top: 11.5px;
  margin-bottom: 11.5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 16%, rgba(0, 0, 0, 0.06) 84%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}
@media (min-width: 576px) and (max-width: 991px) {
  .wg-landing-feature .feature-title {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
  }
  .wg-landing-feature .feature-desc {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

.wg-plugin {
  display: grid;
  place-items: center;
}
.wg-plugin .plugin-logo {
  aspect-ratio: 1;
  margin-bottom: 24px;
  max-width: 112px;
  width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  border-radius: 12px;
}
.wg-plugin .logo {
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -ms-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
  transition: all 0.9s ease;
}
.wg-plugin .plugin-name {
  margin-bottom: 8px;
}
.wg-plugin .plugin-sub {
  padding: 0px 22px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-27);
  border-radius: 1212px;
  box-shadow: 0px 1.5px 0px 0px #FFFFFF, inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3215686275);
}
.wg-plugin:hover .logo {
  transform: rotateY(360deg);
}
@media (max-width: 767px) {
  .wg-plugin .plugin-sub {
    padding: 0px 12px;
  }
}

.section-plugin .tf-grid-layout {
  gap: 32px 15px;
}
@media (min-width: 1200px) {
  .section-plugin .tf-grid-layout {
    gap: 52px 20px;
  }
}

.main-demo-list {
  background: var(--white);
  border: 1px solid var(--gray-20);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  border-radius: 0px 0px 16px 16px;
}
.main-demo-list .wd-full {
  margin-top: 50px;
}
@media (max-width: 1199px) {
  .main-demo-list .wd-full {
    margin-top: 30px;
  }
}

.landing-option-list {
  /*-- min, between, max --*/
}
.landing-option-list .wg-option {
  position: relative;
  padding-top: 36px;
}
.landing-option-list .wg-option .ic {
  margin-bottom: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.landing-option-list .wg-option .option-title {
  margin-bottom: 8px;
}
.landing-option-list .wg-option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border: 1.5px solid var(--primary);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.landing-option-list .wg-option:not(:last-child) {
  padding-bottom: 32px;
}
.landing-option-list .wg-option:not(.active) .ic {
  filter: grayscale(100%);
  opacity: 0.6;
}
.landing-option-list .wg-option:not(.active)::after {
  border-color: rgba(0, 0, 0, 0.0588235294);
}
@media (min-width: 992px) {
  .landing-option-list {
    max-width: 447px;
  }
}
@media (max-width: 991px) {
  .landing-option-list .wg-option {
    padding-top: 20px;
  }
  .landing-option-list .wg-option:not(:last-child) {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .landing-option-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .landing-option-list .wg-option:last-child {
    display: none;
  }
}

.section-methodology .landing-heading {
  margin-bottom: 60px;
}
.section-methodology .group-image {
  display: flex;
  align-items: end;
  padding: 60px 56px 0px 62px;
  background: var(--white);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  border-radius: 20px;
  aspect-ratio: 1.3958333333;
  position: relative;
  overflow: hidden;
}
.section-methodology .group-image::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  z-index: 6;
  -webkit-mask-image: radial-gradient(59.9% 59.9% at 50% 50%, #FFFFFF 50.17%, rgba(255, 255, 255, 0) 100%);
  mask-image: radial-gradient(59.9% 59.9% at 50% 50%, rgba(255, 255, 255, 0) 50.17%, #FFFFFF 100%);
  background: var(--white);
}
.section-methodology .group-image .image {
  border: 1px solid #DDDDDD;
  box-shadow: 0px 0px 27.37px 0px rgba(0, 0, 0, 0.1215686275);
  border-radius: 8px;
  overflow: hidden;
}
.section-methodology .group-image .image-item {
  position: absolute;
  bottom: 0;
  left: 62px;
}
.section-methodology .group-image .image-item:nth-child(1) {
  z-index: 4;
  right: 37%;
}
.section-methodology .group-image .image-item:nth-child(2) {
  z-index: 3;
  margin-left: 64px;
  right: 27.1%;
}
.section-methodology .group-image .image-item:nth-child(3) {
  z-index: 2;
  margin-left: 128px;
  right: 17.68%;
}
.section-methodology .group-image .image-item:nth-child(4) {
  z-index: 1;
  margin-left: 192px;
  right: 8.13%;
}
.section-methodology .col-right {
  padding-top: 60px;
}
@media (min-width: 1200px) {
  .section-methodology .group-image {
    margin-right: -20px;
  }
  .section-methodology .col-right {
    padding-top: 80px;
    margin-left: -20px;
  }
}
@media (max-width: 1199px) {
  .section-methodology .group-image .image img {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .section-methodology .landing-heading {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .section-methodology .group-image {
    padding: 30px 15px 0px;
  }
  .section-methodology .group-image .image-item {
    left: 15px;
  }
  .section-methodology .group-image .image-item:nth-child(2) {
    margin-left: 40px;
  }
  .section-methodology .group-image .image-item:nth-child(3) {
    margin-left: 80px;
  }
  .section-methodology .group-image .image-item:nth-child(4) {
    margin-left: 120px;
  }
}

.section-feature-landing .wg-landing-feature {
  margin-bottom: 32px;
  display: grid;
}
.section-feature-landing .action {
  width: 100%;
}
.section-feature-landing .action .wrap-text {
  width: 100%;
  padding-left: 7px;
  padding-right: 8px;
}
.section-feature-landing .content-wrap {
  position: relative;
}
.section-feature-landing .link-break-line {
  width: 67px;
  border: 1.5px solid rgba(0, 0, 0, 0.0588235294);
  height: 100%;
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 1px 0px 0px 0px rgba(255, 255, 255, 0.6);
  border-radius: 0px 20px 20px 0px;
  border-left: 0;
  position: relative;
  overflow: hidden;
}
.section-feature-landing .link-break-line.right {
  transform: rotate(180deg);
}
.section-feature-landing .link-break-line .item {
  position: absolute;
  left: 0;
  right: 0;
  margin-right: -1px;
  width: 100%;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-delay: 1.3s;
}
.section-feature-landing .link-break-line .item.bottom {
  background: radial-gradient(circle at bottom right, var(--primary) 0%, transparent 90%);
  animation-name: lineRunBottom;
}
.section-feature-landing .link-break-line .item.top {
  background: radial-gradient(circle at top right, var(--primary) 0%, transparent 90%);
  animation-name: lineRunTop;
}
.section-feature-landing .link-break-line::after {
  content: "";
  position: absolute;
  inset: 0 1px 1.5px 0px;
  background: var(--surface-3);
  border-radius: 0px 20px 20px 0px;
}
.section-feature-landing .side-line-wrap {
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.section-feature-landing .link-break-center {
  border: 1.5px solid rgba(0, 0, 0, 0.0588235294);
  width: 100%;
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
.section-feature-landing .link-break-center::after, .section-feature-landing .link-break-center::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #E5E5E5;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.0784313725) inset, -0.5px -0.5px 1px 0px #FFFFFF inset;
  z-index: 2;
}
.section-feature-landing .link-break-center::after {
  right: 60px;
}
.section-feature-landing .link-break-center::before {
  left: 60px;
}
.section-feature-landing .simu-electric {
  position: absolute;
  height: 1.5px;
  width: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.section-feature-landing .simu-electric.left {
  background: linear-gradient(to right, var(--orange) 0%, transparent 100%);
  animation-name: left50To0;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.section-feature-landing .simu-electric.right {
  background: linear-gradient(to left, var(--orange) 0%, transparent 100%);
  animation-name: right50To0;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.section-feature-landing .side-line-main {
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  bottom: 15%;
  z-index: -1;
}
.section-feature-landing .side-line-main div:not(.link-break-center) {
  height: 100%;
}

.section-demo {
  padding-top: 40px;
  padding-bottom: 48px;
}
.section-demo .s-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  padding: 16px;
  gap: 20px;
  border-radius: 16px 16px 0px 0px;
}
.section-demo .s-desc .tag {
  padding: 4px 8px;
  background-color: var(--white);
  color: var(--primary);
  border-radius: 8px;
}

.section-landing-explore {
  padding-top: 46px;
  padding-bottom: 40px;
}
.section-landing-explore .s-wrap {
  overflow: hidden;
  border-radius: 20px;
  background: #272727;
  box-shadow: inset 0px -3px 0px 0px #080808, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
}
.section-landing-explore .box-step {
  position: relative;
}
.section-landing-explore .box-step::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 1320px;
  margin: 0 auto;
  border: 1.5px solid rgba(0, 0, 0, 0.1607843137);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.0784313725);
}
.section-landing-explore .box-step .tf-grid-layout {
  gap: 32px 20px;
}
.section-landing-explore .box-step .wg-step {
  position: relative;
}
.section-landing-explore .box-step .wg-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.1607843137);
  box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.0784313725);
}
@media (max-width: 575px) {
  .section-landing-explore .box-step {
    padding-top: 0;
  }
}

.box-explore {
  position: relative;
}
.box-explore .title {
  margin-bottom: 40px;
}
.box-explore .bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: radial-gradient(47.28% 47.28% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(49, 49, 49, 0.3) 44.87%, rgba(102, 102, 102, 0) 100%);
  -webkit-mask-image: radial-gradient(47.28% 47.28% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(49, 49, 49, 0.3) 44.87%, rgba(102, 102, 102, 0) 100%);
}
.box-explore .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .box-explore {
    padding-top: 234px;
    padding-bottom: 234px;
  }
}

.wg-step .ic {
  margin-bottom: 24px;
}

.wg-feature {
  text-align: center;
  background: var(--bg-28);
  box-shadow: 0px 2.77px 2.21px 0px rgba(23, 23, 23, 0.1215686275), 0px 6.65px 5.32px 0px rgba(23, 23, 23, 0.1294117647), 0px 12.52px 10.02px 0px rgba(23, 23, 23, 0.1333333333), 0px 22.34px 17.87px 0px rgba(23, 23, 23, 0.1411764706), 0px 41.78px 33.42px 0px rgba(23, 23, 23, 0.1490196078), 0px 100px 80px 0px rgba(23, 23, 23, 0.1490196078), 0px 3px 3px 0px rgba(23, 23, 23, 0.1411764706), 0px 2.77px 2.21px 0px rgba(23, 23, 23, 0.1215686275), inset 0px -3px 0px 0px #171717, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1607843137);
  border-radius: 16px;
  padding-top: 40px;
  overflow: hidden;
  margin-bottom: 40px;
}
.wg-feature .feature-tag {
  background: var(--bg-28);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 196px;
  height: 48px;
  border-radius: 1212px;
  box-shadow: 0px 1.5px 0px 0px rgba(255, 255, 255, 0.0588235294), 0px 0px 3px 0px rgba(0, 0, 0, 0.3215686275) inset;
  margin-bottom: 40px;
}
.wg-feature .feature-title {
  margin-bottom: 12px;
}

.wg-element {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0px 16px;
  background: var(--white);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0.0039215686), 0px 1px 0px 0px #DADADA;
  border-radius: 8px;
  height: 44px;
}
.wg-element .icon {
  font-size: 24px;
}
.wg-element.empty {
  min-width: 120px;
}

.infiniteSlide-element .infiniteSlide-slide {
  margin-left: 8px;
  margin-right: 8px;
}
.infiniteSlide-element .infiniteslide_wrap {
  margin-bottom: -100px;
  padding-bottom: 100px;
}

.section-element .infiniteSlide-element:not(:last-child) {
  margin-bottom: 16px;
}
.section-element .infiniteSlide-element-list {
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 4%, #FFFFFF 25.27%, #FFFFFF 75.09%, rgba(255, 255, 255, 0) 96%);
  mask-mode: alpha;
  mask-repeat: no-repeat;
}

.wg-modern {
  background: var(--bg-29);
  border-radius: 20px;
  box-shadow: 0px 1.4px 3.74px 0px rgba(0, 0, 0, 0.1019607843), 0px 2.8px 6.54px 0px rgba(0, 0, 0, 0.0509803922), 0px 14.49px 8.88px 0px rgba(0, 0, 0, 0.0509803922), 0px 25.7px 10.28px 0px rgba(0, 0, 0, 0.0117647059), 0px 40.66px 11.22px 0px rgba(0, 0, 0, 0), 0px 0.93px 0px 0px #DADADA;
  overflow: hidden;
  padding: 20px 0px 0px;
}
.wg-modern .modern-content {
  padding: 30px 15px 20px;
}
.wg-modern .modern-content .name {
  margin-bottom: 12px;
}
.wg-modern .box-generate {
  display: grid;
  gap: 16px;
}
.wg-modern .box-generate .list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 320px;
}
.wg-modern .box-generate a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--gray-20);
  border-radius: 8px;
}
.wg-modern .box-generate a:hover {
  background-color: var(--gray-20);
}
.wg-modern.style-large {
  padding: 0;
}
.wg-modern.style-large .modern-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1.25;
}
.wg-modern.style-large .desc {
  margin-bottom: 16px;
}
.wg-modern.style-large .action {
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .wg-modern.style-large {
    display: flex;
  }
  .wg-modern.style-large .modern-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 28px;
  }
  .wg-modern.style-large .modern-image {
    order: 1;
  }
  .wg-modern.style-large > * {
    width: 50%;
  }
  .wg-modern.style-large .desc {
    margin-bottom: 40px;
  }
  .wg-modern.style-large .action {
    margin-bottom: 56px;
  }
}
@media (min-width: 1200px) {
  .wg-modern {
    padding: 32px 0px 0px;
  }
  .wg-modern .modern-content {
    padding: 40px 28px 32px;
  }
}
@media (max-width: 991px) {
  .wg-modern.style-large img {
    max-height: 400px;
  }
  .wg-modern .box-generate {
    gap: 12px;
  }
  .wg-modern .box-generate .list {
    gap: 8px;
  }
}

.landing-faq-accordion {
  max-width: 690px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.infiniteSlide-testimonial-list {
  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 14.89%, rgba(255, 255, 255, 0) 95%);
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 14.89%, rgba(255, 255, 255, 0) 95%);
}

.infiniteSlide-testimonial .infiniteslide_wrap {
  height: 982px !important;
}
.infiniteSlide-testimonial .infiniteSlide-slide {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
@media (max-width: 1439px) {
  .infiniteSlide-testimonial .infiniteslide_wrap {
    height: 100vh !important;
    max-height: 700px;
  }
}

.wg-ticket {
  padding: 28px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1019607843), 0px 6px 14px 0px rgba(0, 0, 0, 0.0509803922), 0px 31px 19px 0px rgba(0, 0, 0, 0.0509803922), 0px 55px 22px 0px rgba(0, 0, 0, 0.0117647059), 0px 87px 24px 0px rgba(0, 0, 0, 0), 0px 2px 0px 0px #DADADA;
  display: flex;
  gap: 35px;
}
.wg-ticket .br-line {
  margin-top: 12px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 16%, rgba(0, 0, 0, 0.06) 84%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}
.wg-ticket .desc {
  margin-bottom: 36px;
}
.wg-ticket .action {
  background: var(--black-6);
  border-color: var(--black-12);
}
.wg-ticket .content {
  display: grid;
  place-items: start;
}
@media (min-width: 1200px) {
  .wg-ticket .action .wrap-text {
    padding: 16px 20px;
  }
}
@media (max-width: 991px) {
  .wg-ticket {
    display: grid;
    gap: 16px;
    padding: 20px 15px;
  }
  .wg-ticket .desc {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .wg-ticket {
    place-items: center;
  }
  .wg-ticket .content {
    place-items: center;
  }
  .wg-ticket .desc {
    font-size: 14px;
  }
}

.section-video .wd-full {
  margin-top: 20px;
}

.tf-landing-footer {
  margin-top: 40px;
  margin-bottom: 40px;
}
.tf-landing-footer .content {
  background: var(--bg-30);
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
}
.tf-landing-footer .content > * {
  position: relative;
  z-index: 1;
}
.tf-landing-footer .content .title {
  margin-bottom: 16px;
}
.tf-landing-footer .content .desc {
  margin-bottom: 40px;
}
.tf-landing-footer .bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: radial-gradient(47.28% 47.28% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(49, 49, 49, 0.3) 44.87%, rgba(102, 102, 102, 0) 100%);
  -webkit-mask-image: radial-gradient(47.28% 47.28% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(49, 49, 49, 0.3) 44.87%, rgba(102, 102, 102, 0) 100%);
}
.tf-landing-footer .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .tf-landing-footer .content {
    padding: 154px 15px;
  }
}

.infiniteSlide-demo .infiniteSlide-slide {
  margin-top: 8px;
  margin-bottom: 8px;
}
.infiniteSlide-demo .infiniteslide_wrap {
  height: 751px !important;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: -20px;
  margin-left: -20px;
}

/* ------------ Member ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.tf-header-d7 .header-inner {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--black-12);
  background: rgba(255, 255, 255, 0.0392156863);
  backdrop-filter: blur(20px);
}
.tf-header-d7 .logo-site {
  padding: 24px 72px;
  border-right: 1px solid rgba(0, 0, 0, 0.1215686275);
}
@media (max-width: 767px) {
  .tf-header-d7 .logo-site {
    padding: 12px 30px;
  }
}
.tf-header-d7 .header-right {
  padding: 24px 84px;
  border-left: 1px solid rgba(0, 0, 0, 0.1215686275);
  display: flex;
  gap: 12px;
  align-items: center;
}
@media (max-width: 767px) {
  .tf-header-d7 .header-right {
    padding: 12px 30px;
  }
}
@media (min-width: 1200px) {
  .tf-header-d7 .box-nav-menu {
    gap: 56px;
  }
}
.tf-header-d7 .menu-item:hover .item-link {
  color: var(--black);
}
.tf-header-d7 .item-link {
  display: flex;
  align-items: center;
  line-height: 70px;
  font-weight: 500;
  color: var(--black-60);
}
.tf-header-d7 .btn_link {
  display: flex;
  gap: 14px;
  font-weight: 500;
  align-items: center;
}
.tf-header-d7 .btn_link i {
  font-size: 18px;
}
.tf-header-d7.header-sticky {
  background-color: var(--bg-light);
}
.tf-header-d7.v2 {
  margin-bottom: -71px;
}
.tf-header-d7.v2 .header-inner {
  border-color: rgba(243, 234, 219, 0.1607843137);
  border-top: 1px solid rgba(243, 234, 219, 0.1607843137);
}
.tf-header-d7.v2 .header-right,
.tf-header-d7.v2 .logo-site {
  border-color: rgba(243, 234, 219, 0.1607843137);
}
.tf-header-d7.v2 .menu-item .item-link {
  color: var(--white-60);
}
.tf-header-d7.v2 .menu-item:hover .item-link {
  color: var(--white);
}
.tf-header-d7.v2.header-sticky {
  background-color: var(--bg);
}

.topbar-d7 {
  padding: 50px 0;
  position: relative;
  z-index: 2;
}
.topbar-d7 .phone {
  gap: 14px;
}
.topbar-d7 .phone i {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 0.5px solid rgba(243, 234, 219, 0.3019607843);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.topbar-d7 .dot {
  display: block;
  border-radius: 50%;
  background-color: var(--primary);
  height: 14px;
  width: 14px;
  flex-shrink: 0;
}
.topbar-d7 .title-topbar {
  margin-top: 10px;
  font-size: 190px;
  line-height: 190px;
  text-wrap: nowrap;
}
@media (max-width: 1439px) {
  .topbar-d7 .title-topbar {
    font-size: 140px;
    line-height: 140px;
  }
}
@media (max-width: 991px) {
  .topbar-d7 .title-topbar {
    font-size: 108px;
    line-height: 108px;
  }
}
@media (max-width: 767px) {
  .topbar-d7 .title-topbar {
    font-size: 82px;
    line-height: 82px;
  }
}
@media (max-width: 575px) {
  .topbar-d7 .title-topbar {
    font-size: 52px;
    line-height: 60px;
  }
}
.topbar-d7 .moving-text {
  padding-top: 50px;
}
.topbar-d7 .moving-text span {
  margin-right: 46px;
}

.bg-container {
  background-color: var(--bg-light);
  position: relative;
  z-index: 2;
}
.bg-container .bg-shape {
  mix-blend-mode: soft-light;
  inset: 0;
  z-index: -1;
}
.bg-container .bg-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 980px;
}

.page-title-d7 {
  position: relative;
  z-index: 2;
}
@media (max-width: 575px) {
  .page-title-d7 .title-heading {
    margin-bottom: 12px !important;
  }
}

.heading-section-d7_v01 .meta {
  padding: 44px 0 43px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.3019607843);
}
@media (max-width: 767px) {
  .heading-section-d7_v01 .meta {
    padding: 24px 0;
  }
}
.heading-section-d7_v01 .heading {
  padding-top: 80px;
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .heading-section-d7_v01 .heading {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (min-width: 768px) {
  .heading-section-d7_v01 .heading p {
    padding-bottom: 15px;
  }
}

@media (min-width: 992px) {
  .section-page-title-d7 .left .article-blog-d7 {
    max-width: 723px;
  }
}
.section-page-title-d7 .row {
  row-gap: 40px;
}
.section-page-title-d7 .wrap-blog .article-blog-d7 {
  border-bottom: 1px solid var(--black-12);
}
.section-page-title-d7 .wrap-blog .article-blog-d7:first-child {
  border-top: 1px solid var(--black-12);
}

.article-blog-d7 .time {
  gap: 7px;
  display: flex;
}
.article-blog-d7 .time i {
  font-size: 11px;
}
.article-blog-d7 .wrap-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: max-content;
}
.article-blog-d7 .btn_link {
  padding: 20px 32px;
  display: flex;
  gap: 8px;
  border-radius: 100px;
  border: 1px solid rgba(221, 211, 194, 0.3019607843);
  color: var(--white);
  backdrop-filter: blur(24px);
  font-size: 26px;
  line-height: 22px;
  align-items: center;
  transform: scale(1.1);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
}
.article-blog-d7 .btn_link i {
  font-size: 22px;
}
@media (max-width: 767px) {
  .article-blog-d7 .btn_link {
    padding: 12px 24px;
    font-size: 16px;
  }
  .article-blog-d7 .btn_link i {
    font-size: 14px;
  }
}
.article-blog-d7:hover .btn_link {
  transform: scale(1);
  opacity: 1;
}
.article-blog-d7.v01 {
  position: relative;
  height: 100%;
}
.article-blog-d7.v01 .img-style {
  width: 100%;
  height: 100%;
}
.article-blog-d7.v01 .img-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 288px;
}
.article-blog-d7.v01 .title {
  max-width: 283px;
}
@media (max-width: 575px) {
  .article-blog-d7.v01 .title {
    max-width: 100%;
  }
}
.article-blog-d7.v01 .blog-content {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 43px 30px 36px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.article-blog-d7.v01 .blog-content::after {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 81.29%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) -19.22%, rgb(0, 0, 0) 53.96%);
  backdrop-filter: blur(5px);
  inset: 0;
  z-index: -1;
}
@media (max-width: 575px) {
  .article-blog-d7.v01 .blog-content {
    padding: 24px 15px;
    flex-direction: column;
    align-items: start;
    gap: 12px;
  }
}
.article-blog-d7.v02 {
  padding: 23px 0 49px;
}
@media (max-width: 991px) {
  .article-blog-d7.v02 {
    padding: 24px 0;
  }
}

.pagination-list-d7 {
  gap: 24px;
}
.pagination-list-d7 a {
  border-radius: 50%;
  height: 56px;
  width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: var(--black-20);
  color: var(--white);
}
@media (max-width: 767px) {
  .pagination-list-d7 a {
    height: 42px;
    width: 42px;
    font-size: 18px;
  }
}
.pagination-list-d7 a.limit, .pagination-list-d7 a:hover {
  background-color: var(--white);
  color: var(--black-40);
}

.form-contact-d7 {
  padding: 60px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
}
@media (max-width: 767px) {
  .form-contact-d7 {
    padding: 40px 24px;
  }
}
@media (max-width: 575px) {
  .form-contact-d7 {
    padding: 40px 15px;
  }
}
.form-contact-d7 .tf-label {
  margin-bottom: 24px;
}
.form-contact-d7 .form-content {
  margin-bottom: 64px;
  gap: 24px;
}
@media (min-width: 992px) {
  .form-contact-d7 .form-content {
    gap: 48px;
  }
}
.form-contact-d7 fieldset textarea,
.form-contact-d7 fieldset input {
  font-size: 16px;
  line-height: 22px;
  color: var(--black);
  padding-bottom: 13px;
}
.form-contact-d7 fieldset textarea::placeholder,
.form-contact-d7 fieldset input::placeholder {
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color-1);
}
.form-contact-d7 textarea {
  height: 86px;
}

.service-item-d7 {
  position: relative;
}
.service-item-d7 .box {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.service-item-d7 .box .content {
  position: relative;
  padding: 32px;
}
.service-item-d7 .box .wrap-content-box {
  padding: 32px;
  position: relative;
}
.service-item-d7 .box .wrap-content-box::after {
  position: absolute;
  content: "";
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 81.29%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 24.78%, rgb(0, 0, 0) 80.96%);
  backdrop-filter: blur(5px);
  height: 205px;
  width: 100%;
  left: 0;
  bottom: 0;
}
.service-item-d7 .box .bg-box {
  position: absolute;
}
.service-item-d7 .box .heading-box {
  margin-bottom: 156px;
  position: relative;
  z-index: 2;
}
.service-item-d7 .box .number {
  margin-bottom: 32px;
  display: block;
}
.service-item-d7 .box .tf-btn {
  position: relative;
  z-index: 2;
  max-width: 276px;
  border: 1px solid var(--primary);
  height: 70px;
}
.service-item-d7.v1 .wrap-content-box {
  background-color: var(--white);
  backdrop-filter: blur(70px);
}
.service-item-d7.v1 .bg-box {
  bottom: 0;
  right: 0;
}
.service-item-d7.v1 .bg-box::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: Screen;
  background-color: var(--secondary);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.service-item-d7.v1:hover .bg-box::after {
  opacity: 1;
}
.service-item-d7.v2 .thumb-service img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 685px;
}
.service-item-d7.v2 .wrap-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-item-d7.v2 .box {
  max-width: 714px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.service-item-d7.v2 .box .content {
  position: relative;
  padding: 32px;
}
.service-item-d7.v2 .bg-box {
  position: absolute;
  inset: 0;
}
.service-item-d7.v2 .bg-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item-d7 .img-style {
  position: relative;
}
.work-item-d7 .img-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-item-d7 .tag {
  padding: 12px 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1215686275);
  backdrop-filter: blur(32px);
}
.work-item-d7 .wrap-scroll {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}
.work-item-d7 .btn-scroll {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(243, 234, 219, 0.2);
  color: var(--white);
}
.work-item-d7.v1 .number {
  margin-bottom: 90px;
}
.work-item-d7.v1 .title {
  margin-bottom: 84px;
}
.work-item-d7.v1 .tag {
  position: absolute;
  max-width: max-content;
  left: 36px;
  top: 36px;
}
.work-item-d7.v1 .img-style {
  margin-top: 80px;
}
.work-item-d7.v1 .content {
  margin-bottom: 68px;
}
.work-item-d7.v1 .item {
  padding-top: 32px;
  border-top: 1px solid rgba(243, 234, 219, 0.1607843137);
  display: flex;
}
.work-item-d7.v1 .item .sub {
  flex: 20%;
}
.work-item-d7.v1 .item p {
  flex: 24%;
}
@media (max-width: 991px) {
  .work-item-d7.v1 .item {
    padding-top: 24px;
  }
}
.work-item-d7.v1 .item:not(:last-child) {
  margin-bottom: 60px;
}
@media (max-width: 1199px) {
  .work-item-d7.v1 .item:not(:last-child) {
    margin-bottom: 40px;
  }
}
@media (max-width: 991px) {
  .work-item-d7.v1 .item:not(:last-child) {
    margin-bottom: 24px;
  }
}
.work-item-d7.v2 {
  position: relative;
}
.work-item-d7.v2 .wrap-tag {
  display: flex;
  gap: 12px;
  position: absolute;
  left: 15px;
  top: 15px;
}
@media (min-width: 992px) {
  .work-item-d7.v2 .wrap-tag {
    left: 36px;
    top: 36px;
  }
}
.work-item-d7.v2 .tag {
  padding: 12px 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1215686275);
  backdrop-filter: blur(32px);
}
.work-item-d7.v2 .content {
  background-color: var(--white);
  padding: 32px;
}

.card-about-d7 {
  padding: 80px 0;
  background-color: var(--dark);
}
@media (max-width: 767px) {
  .card-about-d7 {
    padding: 40px 0;
    position: relative;
  }
}
.card-about-d7 .heading {
  gap: 45px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .card-about-d7 .heading {
    margin-bottom: 24px;
  }
}
.card-about-d7 .sub {
  display: block;
}
@media (max-width: 991px) {
  .card-about-d7 .sub {
    margin-bottom: 20px;
  }
}
.card-about-d7 .number {
  color: rgba(221, 211, 194, 0.6980392157);
  display: flex;
  align-items: start;
}
.card-about-d7 .title {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  text-align: end;
}
.card-about-d7 .wrap {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 767px) {
  .card-about-d7 .wrap {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .card-about-d7 .wrap .img-style {
    flex: 43.6%;
  }
  .card-about-d7 .wrap .content {
    flex: 20%;
  }
}
.card-about-d7 .img-style {
  height: 100%;
}
.card-about-d7 .img-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-about-d7 .item {
  padding-top: 32px;
  border-top: 1px solid rgba(243, 234, 219, 0.1607843137);
}
@media (max-width: 991px) {
  .card-about-d7 .item {
    padding-top: 24px;
  }
}
.card-about-d7 .item .sub {
  display: block;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .card-about-d7 .item .sub {
    margin-bottom: 12px;
  }
}
.card-about-d7 .item:not(:last-child) {
  margin-bottom: 60px;
}
@media (max-width: 1199px) {
  .card-about-d7 .item:not(:last-child) {
    margin-bottom: 40px;
  }
}
@media (max-width: 991px) {
  .card-about-d7 .item:not(:last-child) {
    margin-bottom: 24px;
  }
}

.awards-item {
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1215686275);
}
.awards-item ul {
  padding-left: 30px;
  max-width: 231px;
}
.awards-item ul li {
  list-style: disc;
}
.awards-item .img-style {
  text-align: right;
}
@media (max-width: 767px) {
  .awards-item .img-style {
    margin-top: 24px;
  }
}
.awards-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  width: 35%;
}

.card-team-d7 {
  position: relative;
  background-color: #151515;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
}
.card-team-d7 .content {
  display: grid;
  gap: 12px;
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 81.29%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) -19.22%, rgb(0, 0, 0) 53.96%);
  padding: 47px 32px 32px;
  backdrop-filter: blur(5px);
  z-index: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  .card-team-d7 .content {
    padding: 30px 15px;
  }
}
.card-team-d7 .bg-team {
  position: absolute;
  background-color: var(--primary);
  opacity: 0;
  inset: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card-team-d7 .bg-team img {
  transform: scale(0.9);
  mix-blend-mode: soft-light;
  inset: 0;
  z-index: -1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-team-d7 .img-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  filter: saturate(0%);
}
@media (min-width: 992px) {
  .card-team-d7 {
    height: 399px;
  }
  .card-team-d7 .content {
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .card-team-d7:hover {
    height: 100%;
  }
  .card-team-d7:hover .content {
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
.card-team-d7:hover .img-person img {
  filter: unset;
}
.card-team-d7:hover .bg-team {
  opacity: 1;
}
.card-team-d7:hover .bg-team img {
  transform: scale(1);
}

.colect-item-d7 .img-style {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 90px;
}
@media (max-width: 767px) {
  .colect-item-d7 .img-style {
    margin-bottom: 40px;
  }
}
@media (max-width: 575px) {
  .colect-item-d7 .img-style {
    margin-bottom: 20px;
  }
}

.testimonial-item-d7 {
  position: relative;
}
.testimonial-item-d7::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: rgba(243, 234, 219, 0.1607843137);
}
.testimonial-item-d7 .content {
  padding-top: 130px;
  max-width: 435px;
}
.testimonial-item-d7 .sign {
  font-size: 74px;
  line-height: 82px;
  letter-spacing: -3%;
  text-align: right;
}
.testimonial-item-d7 ul {
  padding-left: 30px;
  margin-top: 32px;
}
.testimonial-item-d7 ul li {
  list-style: disc;
}

.process-item-d7 {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.process-item-d7::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background-color: var(--white);
  border-radius: 50%;
}
.process-item-d7 .title {
  max-width: 190px;
}

.moving-text {
  overflow: hidden;
}
.moving-text span {
  white-space: nowrap;
}

.area-cursor-custom {
  cursor: none;
  position: relative;
}
.area-cursor-custom .custom-cursor {
  position: absolute;
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.1215686275);
  border-radius: 100px;
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 99;
  opacity: 0;
  color: var(--white);
  pointer-events: none;
  transition: 250ms ease;
  transition-property: opacity, transform;
}

.wrap-hero {
  left: 0;
  right: 0;
}
.wrap-hero .topbar-d7 {
  padding-bottom: 10px;
}

.hero-banner-d7 {
  position: relative;
}
.hero-banner-d7 .img-banner {
  position: absolute;
  inset: 0;
}
.hero-banner-d7 .img-banner::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, #0d0d0d 95.92%);
}
.hero-banner-d7 .banner-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-banner-d7 .content-inner {
  position: relative;
  z-index: 1;
  padding-top: 221px;
  padding-bottom: 60px;
}
@media (max-width: 991px) {
  .hero-banner-d7 .content-inner {
    padding-top: 150px;
  }
}
.hero-banner-d7 .heading {
  margin-bottom: 47px;
}
@media (max-width: 767px) {
  .hero-banner-d7 .heading {
    margin-bottom: 24px;
  }
}
.hero-banner-d7 .btn-scroll {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(243, 234, 219, 0.2);
  color: var(--white);
  margin-bottom: 24px;
}
.hero-banner-d7 .title {
  margin-top: 170px;
}
@media (max-width: 1199px) {
  .hero-banner-d7 .title {
    margin-top: 100px;
  }
}
@media (max-width: 991px) {
  .hero-banner-d7 .title {
    margin-top: 50px;
  }
}

.hero-banner-d7-v2 {
  height: 1000px;
}
.hero-banner-d7-v2 .img-banner {
  position: absolute;
  inset: 0;
}
.hero-banner-d7-v2 .img-banner::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 56.55%);
}
.hero-banner-d7-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-slider-d7 {
  position: relative;
  z-index: 1;
  margin-top: -402px;
}
.tf-slider-d7 .swiper {
  height: 100%;
  width: 100%;
}
.tf-slider-d7 .wrap-scroll {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}
.tf-slider-d7 .btn-scroll {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(243, 234, 219, 0.2);
  color: var(--white);
}
.tf-slider-d7 .tf-showcase-slider {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tf-slider-d7 .tf-showcase-slider::after {
  content: "";
  position: absolute;
  background-color: rgba(10, 10, 10, 0.3);
  inset: 0;
}
.tf-slider-d7 .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tf-slider-d7 .wrap-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
}
.tf-slider-d7 .wrap-nav .swiper-slide {
  width: auto !important;
}
.tf-slider-d7 .wrap-nav .swiper-slide:not(.swiper-slide-thumb-active) .thumbs-pagi {
  border-color: transparent;
}
.tf-slider-d7 .thumbs-pagi {
  overflow: hidden;
  height: 97px;
  width: 97px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #ddd3c2;
}
.tf-slider-d7 .thumbs-pagi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-service-detail-d7 .list {
  display: grid;
  gap: 50px;
}
@media (min-width: 768px) {
  .section-service-detail-d7 .list {
    gap: 30px;
  }
}
.section-service-detail-d7 .item-list {
  padding-top: 60px;
  border-top: 1px solid var(--black-12);
  display: flex;
  gap: 20px;
}
@media (min-width: 768px) {
  .section-service-detail-d7 .item-list {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  .section-service-detail-d7 .item-list .number {
    width: 136px;
    flex-shrink: 0;
  }
}
.section-service-detail-d7 .item-list .number span {
  display: block;
  height: 24px;
  background-color: var(--white);
  border-radius: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  padding: 0 11px;
}
.section-service-detail-d7 .item-list .title {
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .section-service-detail-d7 .item-list .title {
    margin-bottom: 14px;
  }
}
.section-service-detail-d7 .thumb-main {
  margin-bottom: 50px;
}
.section-service-detail-d7 .wrap-content {
  display: flex;
}
@media (max-width: 575px) {
  .section-service-detail-d7 .wrap-content {
    flex-direction: column;
    gap: 40px;
  }
}
.section-service-detail-d7 .right {
  flex: 58.614%;
}
.section-service-detail-d7 .left {
  flex: 20%;
}

.section-contact-d7 .form-contact-d7 {
  max-width: 910px;
  margin-left: auto;
  margin-right: auto;
}

.section-blog-d7 .tf-grid-layout {
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .section-blog-d7 .tf-grid-layout {
    margin-bottom: 40px;
  }
}

.s-blog-single-d7 .img-thumb-main img {
  width: 100%;
  object-fit: cover;
  min-height: 350px;
}
.s-blog-single-d7 .meta {
  display: flex;
  align-items: center;
}
.s-blog-single-d7 .meta li:not(:last-child) {
  display: flex;
  gap: 37px;
  margin-right: 41px;
}
.s-blog-single-d7 .meta li:not(:last-child)::after {
  content: "";
  position: relative;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1215686275);
}
.s-blog-single-d7 .meta .time {
  gap: 7px;
}
.s-blog-single-d7 .meta .time i {
  font-size: 11px;
}
.s-blog-single-d7 .blog-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-blog-single-d7 .blog-detail ul {
  padding-left: 30px;
}
.s-blog-single-d7 .blog-detail ul li {
  list-style: disc;
}

.section-press .article-blog-d7.small {
  max-height: 207px;
}
@media (max-width: 991px) {
  .section-press .article-blog-d7.small {
    max-height: 534px;
  }
}
.section-press .article-blog-d7.small .btn_link {
  padding: 12px 24px;
  font-size: 16px;
}
.section-press .article-blog-d7.small .btn_link i {
  font-size: 14px;
}
.section-press .wrap-blog .row {
  row-gap: 12px;
}

.section-project-dettail-d7 .thumb-detail {
  margin-bottom: 50px;
  position: relative;
  z-index: 3;
}
.section-project-dettail-d7 .thumb-detail::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 59.64%, rgba(0, 0, 0, 0.8) 92.46%);
  inset: 0;
}
.section-project-dettail-d7 .thumb-detail .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 97px;
  z-index: 2;
  display: flex;
  gap: 30px;
}
@media (max-width: 1199px) {
  .section-project-dettail-d7 .thumb-detail .content {
    padding: 40px 15px;
  }
}
@media (max-width: 575px) {
  .section-project-dettail-d7 .thumb-detail .content {
    flex-direction: column;
  }
}
.section-project-dettail-d7 .thumb-detail .content::after {
  position: absolute;
  content: "";
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 81.29%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) -19.22%, rgb(0, 0, 0) 53.96%);
  backdrop-filter: blur(5px);
  height: 222px;
  width: 100%;
  left: 0;
  bottom: 0;
}
.section-project-dettail-d7 .thumb-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 478px;
}
.section-project-dettail-d7 .thumb-detail .sub {
  margin-bottom: 32px;
  display: block;
}
@media (max-width: 575px) {
  .section-project-dettail-d7 .thumb-detail .sub {
    margin-bottom: 12px;
  }
}
.section-project-dettail-d7 .thumb-detail .left,
.section-project-dettail-d7 .thumb-detail .right {
  position: relative;
  z-index: 2;
}
.section-project-dettail-d7 .thumb-detail .left > div,
.section-project-dettail-d7 .thumb-detail .right > div {
  padding-top: 32px;
  border-top: 1px solid var(--white-20);
}
.section-project-dettail-d7 .thumb-detail .left {
  flex: 20%;
}
.section-project-dettail-d7 .thumb-detail .left > div {
  max-width: 213px;
}
.section-project-dettail-d7 .thumb-detail .right {
  flex: 20%;
}
.section-project-dettail-d7 .detail .row {
  row-gap: 50px;
}
.section-project-dettail-d7 .wrap-content-paragraph {
  max-width: 545px;
}
.section-project-dettail-d7 .content-paragraph ul {
  padding-left: 30px;
}
@media (min-width: 992px) {
  .section-project-dettail-d7 .content-paragraph ul {
    padding-left: 50px;
  }
}
.section-project-dettail-d7 .content-paragraph ul li {
  list-style: disc;
}
@media (min-width: 992px) {
  .section-project-dettail-d7 .sidebar {
    max-width: 316px;
    margin-left: auto;
  }
}
.section-project-dettail-d7 .sidebar .item {
  padding: 24px 0;
  border-top: 1px solid var(--black-10);
}
.section-project-dettail-d7 .sidebar .content-item {
  display: block;
  width: 95.98px;
}
.section-project-dettail-d7 .tf-grid-layout {
  gap: 12px;
}
.section-project-dettail-d7 .wrap-group-img {
  margin-top: 50px;
}
.section-project-dettail-d7 .wrap-group-img .row {
  row-gap: 12px;
}
.section-project-dettail-d7 .wrap-group-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-gallery-d7 .infiniteSlide {
  gap: 12px;
}
@media (max-width: 767px) {
  .section-gallery-d7 .infiniteSlide img {
    max-width: 170px;
  }
}
.section-gallery-d7 .infiniteSlide-slide_1 {
  margin-top: 4px;
}
.section-gallery-d7 .infiniteSlide-slide_2 {
  margin-top: 62px;
}
.section-gallery-d7 .infiniteSlide-slide_3 {
  margin-top: 77px;
}
.section-gallery-d7 .infiniteSlide-slide_5 {
  margin-top: 34px;
}

.section-work-d7-v2 {
  background-color: #efeae0;
  position: relative;
  z-index: 2;
  padding-bottom: 50px;
}
.section-work-d7-v2 .text-item {
  z-index: -1;
  margin-bottom: 0;
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  .section-work-d7-v2 .text-item {
    margin-top: 80px;
    margin-bottom: 80px;
    position: sticky;
    inset: 20% 15px 0px 15px;
  }
}
.section-work-d7-v2 .item-1 {
  max-width: 575px;
}
.section-work-d7-v2 .item-2 {
  margin-left: auto;
  max-width: 503px;
}
.section-work-d7-v2 .item-3 {
  max-width: 538px;
}
.section-work-d7-v2 .item-4 {
  margin-left: auto;
  max-width: 627px;
}
@media (min-width: 768px) {
  .section-work-d7-v2 .work-item-d7.item-2, .section-work-d7-v2 .work-item-d7.item-4 {
    margin-top: -100px;
  }
}
@media (max-width: 767px) {
  .section-work-d7-v2 .work-item-d7 {
    max-width: 100%;
    margin-bottom: 40px;
  }
}

.section-awards-d7 .wrap-awards {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.section-awards-d7.v1 .awards-item {
  border-color: rgba(112, 112, 112, 0.1607843137);
}

.section-team-d7 .heading-section-d7_v02 {
  margin-bottom: 100px;
}
.section-team-d7 .heading-section-d7_v02 .row {
  row-gap: 24px;
}
@media (max-width: 991px) {
  .section-team-d7 .heading-section-d7_v02 {
    margin-bottom: 50px;
  }
}
.section-team-d7 .tf-grid-layout {
  gap: 12px;
}

.section-colect-d7 {
  margin-top: 50px;
  margin-bottom: 80px;
}
.section-colect-d7 .swiper-best-2 .swiper-slide:not(.swiper-slide-active) {
  transform: scale(1);
}
.section-colect-d7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-colect-d7 .content {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
}
.section-colect-d7 .swiper-slide-active .img-style {
  transform: scale(0.78);
}
.section-colect-d7 .swiper-slide-active .content {
  opacity: 1;
}

.section-location-d7 .heading-section-d7_v03 {
  margin-bottom: 120px;
}
.section-location-d7 .heading-section-d7_v03 .sub {
  display: block;
  margin-bottom: 72px;
}
@media (max-width: 767px) {
  .section-location-d7 .heading-section-d7_v03 {
    margin-bottom: 50px;
  }
  .section-location-d7 .heading-section-d7_v03 .sub {
    margin-bottom: 24px;
  }
}
.section-location-d7 .wrap-item > div {
  max-width: 175px;
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .section-location-d7 .wrap-item::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 4px;
    height: 4px;
    background-color: var(--white);
    border-radius: 50%;
  }
}
.section-location-d7 .location {
  z-index: 7;
  margin-bottom: 61px;
}
.section-location-d7 .title-location {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.02rem;
  margin-bottom: 16px;
}
.section-location-d7 .sub-location {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.02rem;
  position: absolute;
}
@media (max-width: 991px) {
  .section-location-d7 .sub-location {
    display: none;
  }
}
.section-location-d7 .item {
  position: relative;
  cursor: pointer;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(243, 234, 219, 0.1607843137);
}
.section-location-d7 .item .title {
  color: var(--white-60);
}
.section-location-d7 .item .title div,
.section-location-d7 .item .title span {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-location-d7 .item .content {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 24px;
  position: absolute;
  background-color: #efeae0;
  right: 120%;
  top: 0;
  min-width: 315px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 2;
}
@media (max-width: 575px) {
  .section-location-d7 .item .content {
    top: 100%;
    right: 0;
  }
}
.section-location-d7 .item .info {
  display: grid;
  gap: 6px;
}
.section-location-d7 .item:hover .title {
  color: var(--white);
}
.section-location-d7 .item:hover .content {
  opacity: 1;
  visibility: visible;
}
.section-location-d7 .content-inner {
  display: flex;
  gap: 136px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .section-location-d7 .content-inner {
    gap: 0;
  }
}
.section-location-d7 .content-left {
  position: relative;
  flex: 38%;
  width: 100%;
  padding-right: 27px;
  padding-bottom: 29px;
}
@media (max-width: 1024px) {
  .section-location-d7 .content-left {
    flex: 45%;
  }
}
@media (max-width: 1024px) {
  .section-location-d7 .content-left {
    flex: 20%;
  }
}
.section-location-d7 .content-left .wrap-item {
  padding: 31px 27px 111px 0px;
  margin-left: auto;
  border-width: 1px 1px 0 0px;
  border-style: solid;
  border-color: rgba(243, 234, 219, 0.3019607843);
  position: relative;
}
.section-location-d7 .content-left .wrap-item::after {
  right: -2px;
}
@media (max-width: 991px) {
  .section-location-d7 .content-left .wrap-item {
    border-width: 1px 0 0 0;
  }
}
.section-location-d7 .content-left .item .content {
  right: unset;
  left: 120%;
  top: 0;
  min-width: 315px;
}
@media (max-width: 575px) {
  .section-location-d7 .content-left .item .content {
    left: 0;
    top: 110%;
  }
}
.section-location-d7 .content-left .sub-location {
  right: 0;
  bottom: 0;
}
.section-location-d7 .content-right {
  position: relative;
  flex: 20%;
  width: 100%;
  padding-left: 16px;
  padding-bottom: 29px;
  margin-left: auto;
}
.section-location-d7 .content-right .wrap-item {
  padding: 31px 30px 51px;
  margin-left: auto;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: rgba(243, 234, 219, 0.3019607843);
  position: relative;
}
@media (max-width: 575px) {
  .section-location-d7 .content-right .wrap-item {
    padding: 31px 0 30px 15px;
  }
}
.section-location-d7 .content-right .wrap-item > div {
  margin-left: auto;
}
.section-location-d7 .content-right .wrap-item::after {
  left: -2px;
}
@media (max-width: 991px) {
  .section-location-d7 .content-right .wrap-item {
    border-width: 1px 0 0 0;
  }
}
.section-location-d7 .content-right .sub-location {
  left: 0;
  bottom: 0;
}
.section-location-d7 .bot {
  position: relative;
  z-index: 2;
}
.section-location-d7 .bot::after {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  left: 0;
  background: rgba(243, 234, 219, 0.1607843137);
}
.section-location-d7 .bot .wrap-counter {
  background-color: var(--dark);
}
.section-location-d7 .bot .wrap-counter > div {
  max-width: 666px;
  margin-left: auto;
  margin-right: auto;
}
.section-location-d7 .counter-item {
  max-width: 156px;
}

.section-about-d7-v1 {
  position: relative;
  z-index: 2;
}
.section-about-d7-v1 .bg-img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.section-about-d7-v1 .bg-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.06;
}
.section-about-d7-v1 .box-content {
  padding: 160px 0;
  max-width: 424px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-about-d7-v1 .box-content::after, .section-about-d7-v1 .box-content::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 160px;
  background-color: rgba(243, 234, 219, 0.1607843137);
}
.section-about-d7-v1 .box-content::after {
  top: 0;
}
.section-about-d7-v1 .box-content::before {
  bottom: 0;
}
.section-about-d7-v1 .box-content .img-style {
  margin-bottom: 34px;
  position: relative;
}
.section-about-d7-v1 .box-content .img-style::after {
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.section-about-d7-v1 .box-content p {
  margin-bottom: 60px;
}
.section-about-d7-v1 .wrap-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 740px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-about-d7-v1 .wrap-text span {
  display: block;
}
.section-about-d7-v1 .wrap-text span:nth-child(2) {
  text-align: end;
}
.section-about-d7-v1 .item-1,
.section-about-d7-v1 .item-2 {
  position: absolute;
}
.section-about-d7-v1 .item-1 {
  left: 0;
  top: 160px;
}
.section-about-d7-v1 .item-2 {
  right: 0;
  bottom: 369px;
}

.section-service-d7-v1 .moving-text {
  padding-top: 50px;
}
.section-service-d7-v1 .moving-text span {
  margin-right: 46px;
}
.section-service-d7-v1 .dot {
  display: block;
  border-radius: 50%;
  background-color: var(--secondary);
  height: 14px;
  width: 14px;
  flex-shrink: 0;
}
.section-service-d7-v1 .service-2 {
  margin-top: 98px;
}
.section-service-d7-v1 .service-3 {
  margin-top: 200px;
}

.section-work-d7-v1 .custom-cursor {
  display: flex;
  gap: 8px;
  padding: 20px 32px;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -2%;
}

.section-showreal .tf-mouse {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  width: 569px;
  height: 569px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: unset;
}
.section-showreal .tf-mouse::after {
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: 0;
  border: 1px dashed var(--white);
  animation: spin-reverse 30s infinite linear;
}

.section-testimonial-d7 {
  position: relative;
  z-index: 2;
}
.section-testimonial-d7 .quote {
  left: 0;
  bottom: 194px;
  z-index: -1;
}
.section-testimonial-d7 .partner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 63px 0;
  background: rgba(255, 255, 255, 0.0196078431);
  border-width: 1px, 0px, 1px, 0px;
  border-style: solid;
  border-color: rgba(243, 234, 219, 0.1607843137);
  backdrop-filter: blur(60px);
}
.section-testimonial-d7 .partner p {
  color: var(--bg-light);
}
.section-testimonial-d7 .wrap {
  gap: 100px;
}
.section-testimonial-d7 .item img {
  filter: saturate(0%) brightness(62%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-testimonial-d7 .item:hover img {
  filter: unset;
}
.section-testimonial-d7 .wrap-sw-button {
  gap: 14px;
}
.section-testimonial-d7 .sw-button {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: var(--bg-light);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-testimonial-d7 .sw-button:hover {
  background-color: var(--secondary);
  color: var(--white-60);
}
.section-testimonial-d7 .sw-button.swiper-button-disabled {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--white-60);
}
.section-testimonial-d7 .wrap-pagi {
  margin-top: 160px;
}

.section-process-d7 .heading {
  margin-bottom: 84px;
}
.section-process-d7 .wrap-process {
  position: relative;
}
.section-process-d7 .wrap-process::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: rgba(243, 234, 219, 0.1607843137);
}
.section-process-d7 .process-item-d7:not(:last-child) {
  margin-bottom: 100px;
}

.tf-footer-d7 {
  background-color: var(--white);
}
.tf-footer-d7 .footer-content {
  padding-top: 60px;
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .tf-footer-d7 .footer-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.tf-footer-d7 .footer-content .row {
  row-gap: 8px;
}
.tf-footer-d7 .wrap-footer-link {
  max-width: 489px;
  display: flex;
  gap: 15px;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .tf-footer-d7 .wrap-footer-link {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .tf-footer-d7 .wrap-footer-link {
    flex-direction: column;
    gap: 12px;
  }
}
.tf-footer-d7 .wrap-footer-link .tf-collapse-content {
  margin-bottom: 0;
}
.tf-footer-d7 .footer-heading-mobile::after, .tf-footer-d7 .footer-heading-mobile::before {
  background-color: var(--dark);
}
.tf-footer-d7 .form-sub-3 {
  max-width: 100%;
}
.tf-footer-d7 .form-sub-3 input.style-line-bt-2 {
  padding-left: 2px;
  padding-bottom: 11px;
}
.tf-footer-d7 .footer-newsletter .title {
  margin-bottom: 32px;
}
.tf-footer-d7 .footer-body .wrap {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.3019607843);
}
.tf-footer-d7 .banner-footer {
  position: relative;
  height: 500px;
}
.tf-footer-d7 .banner-footer .tf-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tf-footer-d7 .banner-footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-footer-d7 .title-footer {
  padding: 40px 0 13px;
  font-size: 190px;
  line-height: 190px;
}
@media (max-width: 1439px) {
  .tf-footer-d7 .title-footer {
    font-size: 140px;
    line-height: 140px;
  }
}
@media (max-width: 991px) {
  .tf-footer-d7 .title-footer {
    font-size: 108px;
    line-height: 108px;
  }
}
@media (max-width: 767px) {
  .tf-footer-d7 .title-footer {
    font-size: 82px;
    line-height: 82px;
  }
}
@media (max-width: 575px) {
  .tf-footer-d7 .title-footer {
    font-size: 52px;
    line-height: 60px;
  }
}

.tf-btn.style-d7-v1 {
  width: max-content;
  font-size: 24px;
  line-height: 22px;
  padding: 20px 32px;
  border: 1px solid rgba(243, 234, 219, 0.1607843137);
  backdrop-filter: blur(24px);
  background-color: rgba(255, 255, 255, 0.0392156863);
  border-radius: 100px;
  gap: 8px;
}
.tf-btn.style-d7-v1 i {
  font-size: 22px;
}

.tp-snap-slide {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
.tp-snap-slide .img-mask {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  opacity: 0.1;
}
.tp-snap-slide .img-mask .section-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.tp-snap-slide .img-mask .section-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tp-snap-slider-thumbs {
  position: absolute;
  top: 0;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tp-snap-slider-thumbs-wrapper {
  max-width: 714px;
  max-height: 502px;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .tp-snap-slider-thumbs-wrapper {
    max-height: 483px;
  }
}
.tp-snap-slider-thumbs-wrapper .thumb-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}
.tp-snap-slider-thumbs-wrapper .thumb-slide-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}
.tp-snap-slider-thumbs-wrapper .thumb-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-snap-slider-captions {
  position: absolute;
  top: 0;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
#wrapper-d8 {
  min-height: 100vh;
}
#wrapper-d8 .left-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 71px;
}
#wrapper-d8 .left-page .image {
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}
#wrapper-d8 .left-page .scroll-bar {
  flex-grow: 1;
  border-top: 1px solid var(--gray-20);
  border-right: 1px solid var(--gray-20);
}
@media (max-width: 1199px) {
  #wrapper-d8 .left-page {
    width: 50px;
  }
}

#inner-d8 {
  flex-grow: 1;
  padding-left: 71px;
}
@media (max-width: 1199px) {
  #inner-d8 {
    padding-left: 50px;
  }
}

form input.input-d8 {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--black);
  padding: 21px 30px 8px 8px;
  background-color: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--gray-20);
}
form input.input-d8::placeholder {
  color: var(--black);
}
form input.input-d8:focus {
  border-color: var(--black);
}
form.form-subscribe-mail {
  position: relative;
}
form.form-subscribe-mail .btn-submit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 20px;
}

.dot-hover-d8 {
  position: relative;
  width: 100%;
  background: var(--white);
  overflow: hidden;
  color: #5e5e5e;
}
.dot-hover-d8.type-dark {
  background: var(--gray-90);
}
.dot-hover-d8.type-dark .dot-title {
  color: var(--white) !important;
}

.dot-wrap {
  position: relative;
  z-index: 5;
}

.dots-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dot-title {
  z-index: 10;
  pointer-events: none;
  transition: transform 0.06s ease-out;
  will-change: transform;
}

.left-scroll-wrapper {
  position: fixed;
  left: 20px;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

.left-scroll-track {
  position: relative;
}
.left-scroll-track.dark-mode {
  background: var(--gray-90);
}
.left-scroll-track.dark-mode .left-scroll-line {
  background-color: var(--gray-80);
}
.left-scroll-track.dark-mode .left-scroll-knob {
  background-color: var(--gray-80);
  border-color: var(--gray-80);
}

.left-scroll-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 196px;
  background: var(--gray-20);
}

.left-scroll-knob {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 0px;
  border: 1px solid var(--gray-20);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.left-scroll-dot {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--primary);
}

.dark-section {
  background: var(--gray-90);
}

.tf-header-d8 {
  border-bottom: 1px solid var(--gray-20);
  border-left: 1px solid var(--gray-20);
  background-color: var(--white) !important;
}
.tf-header-d8 .header-inner {
  display: flex;
  justify-content: space-between;
}
.tf-header-d8 .header-left {
  padding: 24px 40px 23px 0;
  border-right: 1px solid var(--gray-20);
}
.tf-header-d8 .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tf-header-d8 .burger-menu {
  display: flex;
}
.tf-header-d8 .burger-menu .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 71px;
  font-size: 28px;
  color: var(--black);
  border-right: 1px solid var(--gray-20);
  border-left: 1px solid var(--gray-20);
  cursor: pointer;
}
.tf-header-d8 .burger-menu .box-navigation {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.tf-header-d8 .burger-menu.active .box-navigation {
  display: block;
  opacity: 1;
  visibility: visible;
}
.tf-header-d8 .box-nav-menu {
  display: flex;
  gap: 32px;
  padding: 27px 28px;
  border-right: 1px solid var(--gray-20);
}
.tf-header-d8 .box-nav-menu .item-link {
  width: max-content;
}
@media (max-width: 1199px) {
  .tf-header-d8 .header-left .text,
  .tf-header-d8 .header-contact,
  .tf-header-d8 .burger-menu {
    display: none;
  }
  .tf-header-d8 .header-left {
    padding: 13px 10px 13px 0;
  }
}

.tf-footer-d8 .footer-wrap {
  display: flex;
  flex-wrap: wrap;
}
.tf-footer-d8 .footer-inner {
  position: relative;
  width: 57.237%;
  border-top: 1px solid var(--gray-20);
  border-right: 1px solid var(--gray-20);
  padding: 112px 40px 114px;
}
.tf-footer-d8 .footer-inner .heading {
  max-width: 478px;
  margin-bottom: 112px;
}
.tf-footer-d8 .footer-inner .form-subscribe-mail {
  max-width: 321px;
  margin-bottom: 12px;
}
.tf-footer-d8 .footer-list {
  width: 42.763%;
  display: flex;
  flex-direction: column;
}
.tf-footer-d8 .footer-list a {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 20px 0 20px 40px;
  border-top: 1px solid var(--gray-20);
}
.tf-footer-d8 .footer-list a .number {
  min-width: 89px;
}
.tf-footer-d8 .footer-list a span {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-footer-d8 .footer-list a:hover {
  background-color: var(--primary);
}
.tf-footer-d8 .footer-list a:hover span {
  color: var(--white) !important;
}
.tf-footer-d8 .footer-col {
  border-top: 1px solid var(--gray-20);
  border-right: 1px solid var(--gray-20);
  padding: 40px;
}
.tf-footer-d8 .footer-title {
  border-left: 1px solid var(--primary);
  padding: 4px 0 4px 11px;
}
.tf-footer-d8 .footer-content {
  align-content: end;
  min-height: 148px;
  padding-top: 20px;
}
.tf-footer-d8 .footer-contact {
  width: 26.827%;
}
.tf-footer-d8 .footer-connect {
  width: 30.409%;
}
.tf-footer-d8 .footer-connect ul {
  display: grid;
  gap: 8px;
}
.tf-footer-d8 .footer-connect ul a:hover {
  text-decoration: underline;
}
.tf-footer-d8 .footer-others {
  width: 42.763%;
  padding-right: 72px;
  border-right: 0;
}
@media (max-width: 991px) {
  .tf-footer-d8 .footer-inner {
    padding: 45px 20px 45px;
  }
  .tf-footer-d8 .footer-list a {
    padding-left: 20px;
  }
  .tf-footer-d8 .footer-col {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .tf-footer-d8 .footer-wrap > * {
    width: 100% !important;
    border-right: 0 !important;
  }
  .tf-footer-d8 .footer-inner {
    padding: 30px 20px 30px;
  }
  .tf-footer-d8 .footer-inner .heading {
    margin-bottom: 50px;
  }
  .tf-footer-d8 .footer-list a .number {
    min-width: 50px;
  }
  .tf-footer-d8 .footer-content {
    min-height: unset;
  }
}

.page-title-d8 {
  position: relative;
  padding: 64px 0;
}
.page-title-d8::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image: url(./../../../../demo-portfolio/images/section/page-title.png);
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.2;
}
.page-title-d8 .infiniteSlide {
  display: flex;
  gap: 60px;
  align-items: center;
}
.page-title-d8 .dot {
  display: flex;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary);
}

.heading-section-d8 .sub-title {
  position: relative;
  padding: 4px 0 23px 11px;
  border-bottom: 1px solid var(--gray-20);
  margin-bottom: 8px;
}
.heading-section-d8 .sub-title::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: calc(100% - 20px);
  width: 1px;
  background-color: var(--primary);
}
.heading-section-d8 .title {
  display: flex;
  justify-content: space-between;
  padding-top: 11px;
}
.heading-section-d8.style-lg {
  position: relative;
}
.heading-section-d8.style-lg .title {
  position: relative;
  padding-top: 12px;
}
.heading-section-d8.style-lg .heading {
  padding: 36px 0 36px 0;
}
.heading-section-d8.type-dark .sub-title {
  border-bottom: 1px solid var(--gray-80);
}
.heading-section-d8.mb-80 {
  margin-bottom: 80px;
}
.heading-section-d8.mb-40 {
  margin-bottom: 40px;
}
.heading-section-d8.mb-32 {
  margin-bottom: 32px;
}

.meta-d8 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.meta-d8 .dot {
  display: flex;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--gray-50);
}

.blog-item-d8 .image {
  margin-bottom: 28px;
}
.blog-item-d8 .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.blog-item-d8 .meta-d8 {
  margin-bottom: 12px;
}
.blog-item-d8 .title {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.blog-item-d8.type-1 .image {
  margin-bottom: 20px;
}
.blog-item-d8.type-1 .title {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--gray-20);
}

.wg-pagination-d8 {
  display: flex;
  gap: 51px;
  flex-wrap: wrap;
}
.wg-pagination-d8 .btn-direc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--gray-10);
  font-size: 16px;
  color: var(--gray-90);
}
.wg-pagination-d8 .btn-direc:hover {
  color: var(--primary);
}
.wg-pagination-d8 .list-pagination {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.wg-pagination-d8 .list-pagination .pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-weight: 500;
  color: var(--gray-60);
  font-family: "Inter Tight", sans-serif !important;
}
.wg-pagination-d8 .list-pagination .pagination-item:hover, .wg-pagination-d8 .list-pagination .pagination-item.active {
  background-color: var(--primary);
  color: var(--white);
}

.section-blog-d8 {
  padding: 40px 0 96px;
}
.section-blog-d8 .grid-blog {
  margin-bottom: 52px;
}

.blog-single-d8 .top-image {
  position: relative;
}
.blog-single-d8 .top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-single-d8 .top-image .content {
  position: absolute;
  left: 40px;
  bottom: 64px;
  right: 40px;
}
.blog-single-d8 .center-content {
  display: grid;
  gap: 120px;
}
.blog-single-d8 .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
@media (max-width: 991px) {
  .blog-single-d8 .center-content {
    gap: 60px;
  }
}
@media (max-width: 767px) {
  .blog-single-d8 .top-image .content {
    left: 10px;
    bottom: 15px;
    right: 10px;
  }
}

.list-text-d8.type-dot li {
  position: relative;
  padding-left: 30px;
}
.list-text-d8.type-dot li::before {
  position: absolute;
  content: "";
  top: 12px;
  left: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--black);
}

.tf-social-d8 {
  display: flex;
  gap: 8px;
}
.tf-social-d8 .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid var(--gray-30);
  color: var(--gray-50);
  font-size: 20px;
}
.tf-social-d8 .social-link:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.section-hero-d8 {
  padding: 64px 0 40px;
}
.section-hero-d8 .hero-top {
  display: grid;
  gap: 48px;
  padding-bottom: 76px;
}
.section-hero-d8 .hero-top .wrap-btn {
  display: flex;
  gap: 32px;
  align-items: center;
}
.section-hero-d8 .infiniteSlide-partner_wrap {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-top: 1px solid var(--gray-10);
  border-bottom: 1px solid var(--gray-10);
  margin-bottom: 64px;
  background-color: var(--white);
}
.section-hero-d8 .infiniteSlide-partner_wrap .infiniteSlide {
  gap: 92px;
}
.section-hero-d8 .hero-bottom {
  display: flex;
  justify-content: space-between;
}
.section-hero-d8 .content-left {
  max-width: 399px;
}
.section-hero-d8 .content-left .global {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-20);
  margin-bottom: 19px;
}
.section-hero-d8 .content-left .global .icon {
  font-size: 44px;
}
.section-hero-d8 .content-left .global .line-col {
  background-color: var(--gray-20);
  width: 1px;
  height: 30px;
}
.section-hero-d8 .image-right {
  border: 1px solid var(--gray-20);
  border-radius: 12px;
  background-color: var(--white);
  padding: 7px;
}
.section-hero-d8 .image-right img {
  border-radius: 8px;
}

.section-about-d8 .desc {
  margin-bottom: 80px;
}
.section-about-d8 .wrap-counter {
  display: flex;
  gap: 30px 20px;
}
.section-about-d8 .wrap-counter > * {
  flex-grow: 1;
}
@media (max-width: 767px) {
  .section-about-d8 .desc {
    margin-bottom: 40px;
  }
  .section-about-d8 .wrap-counter {
    flex-direction: column;
  }
}

.counter-d8 {
  padding-left: 19px;
  border-left: 1px solid var(--gray-20);
}
.counter-d8 .odometer {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 92px;
  line-height: 92px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
}
@media (max-width: 767px) {
  .counter-d8 {
    padding-left: 0;
    border-left: 0;
  }
}

.partner-item-d8 {
  display: flex;
  position: relative;
  overflow: hidden;
}
.partner-item-d8 .img-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.partner-item-d8 .img-partner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(56%) brightness(86%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}
.partner-item-d8::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 8px;
  background-color: var(--bg-10);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}
.partner-item-d8:hover::before {
  height: 0;
}
.partner-item-d8:hover .img-partner {
  filter: unset;
}

.tags-list-d8 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags-list-d8 .tags-item {
  display: flex;
  padding: 9px 16px;
  background-color: var(--gray-10);
  border-radius: 4px;
}

.work-item-d8 .image {
  margin-bottom: 28px;
}
.work-item-d8 .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.work-item-d8 .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--gray-20);
}

.services-accordion-d8 {
  position: relative;
  padding-bottom: 39px;
  border-bottom: 1px solid var(--gray-80);
}
.services-accordion-d8 .accordion-action {
  display: flex;
  padding: 0;
  margin-bottom: 0;
}
.services-accordion-d8 .accordion-action .number {
  width: 129px;
  flex-shrink: 0;
}
.services-accordion-d8 .accordion-action .heading {
  flex-grow: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--gray-70);
}
.services-accordion-d8 .accordion-action .number {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--gray-70);
}
.services-accordion-d8 .accordion-action .right-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 27px;
  color: var(--primary);
}
.services-accordion-d8 .accordion-action:not(.collapsed) .number,
.services-accordion-d8 .accordion-action:not(.collapsed) .heading {
  color: var(--white);
}
.services-accordion-d8 .services-desc {
  padding-top: 60px;
  padding-left: 129px;
}
.services-accordion-d8 .services-desc .list-image {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 12px;
}
.services-accordion-d8 .services-desc .list-image img {
  border-radius: 4px;
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.services-accordion-d8 .services-desc .tags-list-d8 {
  max-width: 418px;
}

.list-img-d8 {
  display: flex;
}
.list-img-d8 li {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  border: 2px solid var(--white);
  border-radius: 50%;
  overflow: hidden;
}
.list-img-d8 li:not(:last-child) {
  margin-right: -10px;
}
.list-img-d8 li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choose-us-box-d8 {
  border-radius: 12px;
  background-color: #F8F8F8;
  overflow: hidden;
}
.choose-us-box-d8.p1 {
  padding: 28px 45px 28px;
}
.choose-us-box-d8.clients {
  padding: 24px 24px 20px;
}
.choose-us-box-d8.tools {
  padding: 26px 15px 26px 28px;
  display: flex;
  gap: 48px;
  align-items: center;
}
.choose-us-box-d8.tools .infiniteSlide {
  gap: 60px;
}
.choose-us-box-d8.tools .infiniteSlide-partner_wrap {
  position: relative;
  max-width: 605px;
}
.choose-us-box-d8.tools .infiniteSlide-partner_wrap::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0) 100%);
}
.choose-us-box-d8.care .dot-hover-d8 {
  background-color: #F8F8F8;
}
.choose-us-box-d8.care .inner {
  padding-bottom: 36px;
}
.choose-us-box-d8.care .content {
  padding: 28px 29px 0;
  margin-bottom: 96px;
}
.choose-us-box-d8.solutios {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 28px;
  background-image: url(./../../../../demo-portfolio/images/section/solutios.jpg);
}
.choose-us-box-d8.solutios ul li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.choose-us-box-d8.solutios ul li .icon {
  font-size: 16px;
  color: var(--primary);
}
.choose-us-box-d8.solutios ul li .text {
  color: rgba(255, 255, 255, 0.6);
}

.hover-img-d8 .hover-image img {
  max-width: 329px;
  height: 200px;
  border-radius: 8px;
}

.section-achievements-d8 .wrap {
  display: grid;
  gap: 20px;
}
.section-achievements-d8 .wrap .head {
  display: flex;
  gap: 20px;
}
.section-achievements-d8 .wrap .head > * {
  padding-bottom: 19px;
  border-bottom: 1px solid var(--gray-20);
}
.section-achievements-d8 .wrap .head > *:nth-child(1) {
  width: 25%;
}
.section-achievements-d8 .wrap .head > *:nth-child(2) {
  width: 66.66666667%;
}
.section-achievements-d8 .wrap .head > *:nth-child(3) {
  width: 8.33333333%;
}

.achievements-item-d8 {
  display: flex;
  align-items: center;
  gap: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.achievements-item-d8 .text {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-20);
  min-height: 91px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  align-content: center;
}
.achievements-item-d8 .text:nth-child(1) {
  width: 25%;
}
.achievements-item-d8 .text:nth-child(2) {
  width: 66.66666667%;
}
.achievements-item-d8 .text:nth-child(3) {
  width: 8.33333333%;
}
.achievements-item-d8:hover {
  background-color: var(--primary);
}
.achievements-item-d8:hover .text {
  padding-left: 16px;
  padding-right: 16px;
  border-color: var(--primary);
  color: var(--white) !important;
}

.section-services-d8 .wrap {
  position: relative;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset
    * Typography
    * Custom Class

    * Components
        ** Layout
        ** Header
        ** Blog
        ** Form
        ** Animation
        ** Hover
        ** Box Icon
        ** Popup
        ** Tab
        ** Go Top
        ** Button
        ** Card
        ** Section
        ** Slider
        ** Testimonial
        ** Widget
        ** Shop
        ** Product
        ** Nice Select
        ** Zoom
        ** Lookbook
        ** Accordion
        ** Footer
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable --------- */
.d10-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 12px;
  padding-left: 12px;
  width: 1336px;
  max-width: 100%;
}
.d10-container .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.d10-container .row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.d10-container-2 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 12px;
  padding-left: 12px;
  width: 914px;
  max-width: 100%;
}
.d10-container-2 .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.d10-container-2 .row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.tf-d10-header .header-inner {
  padding: 4px;
  background-color: var(--neu-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(20px);
  border-radius: 8px;
  height: 52px;
}
@media (max-width: 991px) {
  .tf-d10-header .header-inner .box-navigation {
    display: none;
  }
}
.tf-d10-header.header-sticky {
  background-color: transparent;
}
.tf-d10-header .d10-logo {
  max-width: 155px;
}
.tf-d10-header .box-nav-menu {
  gap: 60px;
}
@media (min-width: 1200px) {
  .tf-d10-header .box-nav-menu {
    gap: 0;
  }
}
.tf-d10-header .box-nav-menu .item-link {
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  color: var(--grey);
}
@media (min-width: 1200px) {
  .tf-d10-header .box-nav-menu .item-link {
    min-width: 112px;
    height: 44px;
  }
}
@media (max-width: 991px) {
  .tf-d10-header .box-navigation {
    display: none;
  }
}
@media (max-width: 575px) {
  .tf-d10-header .d10-tf-btn-cart,
  .tf-d10-header .d10-tf-btn {
    display: none;
  }
}

.d10-tf-btn {
  padding: 4px 4px 4px 16px;
  border-radius: 4px;
  background-color: var(--primary-600);
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: max-content;
}
.d10-tf-btn .text_btn {
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.d10-tf-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--white);
  border-radius: 4px;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.d10-tf-btn .icon i {
  color: var(--neu-900);
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.d10-tf-btn .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  width: 0;
  height: 0;
  background-color: var(--primary-600);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.d10-tf-btn.style-noarrow {
  padding: 12px 24px;
}
.d10-tf-btn.style-bg-white-30 {
  background-color: var(--white-30);
}
.d10-tf-btn.style-bg-white-30 .text_btn {
  color: var(--white);
}
.d10-tf-btn.style-bg-neu-900 {
  background-color: var(--neu-900);
}
.d10-tf-btn.style-bg-neu-900 .text_btn {
  color: var(--white);
}
.d10-tf-btn.style-bg-neu-900 .icon {
  background-color: var(--white);
}
.d10-tf-btn.style-bg-neu-900 .icon i {
  color: var(--neu-900);
}
.d10-tf-btn.style-bg-27 {
  background-color: var(--bg-27);
}
.d10-tf-btn.style-bg-27 .text_btn {
  color: var(--neu-900);
}
.d10-tf-btn:hover {
  background-color: var(--white);
}
.d10-tf-btn:hover .icon {
  background-color: var(--primary-600);
}
.d10-tf-btn:hover .icon i {
  color: var(--white) !important;
}
.d10-tf-btn:hover .icon::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}
.d10-tf-btn:hover::after {
  transform: scale(10);
}
.d10-tf-btn:hover .text_btn {
  color: var(--black);
}
.d10-tf-btn.hover-bg-primay-600:hover {
  background-color: var(--primary-600);
}
.d10-tf-btn.hover-bg-primay-600:hover .text_btn {
  color: var(--white);
}
.d10-tf-btn.hover-bg-primay-600:hover .icon::after {
  background-color: var(--neu-900);
}
.d10-tf-btn.hover-bg-primay-600:hover .icon i {
  color: var(--white);
}
.d10-tf-btn.style-bg-white {
  background-color: var(--white);
}
.d10-tf-btn.style-bg-white .text_btn {
  color: var(--neu-900);
}
.d10-tf-btn.style-bg-white .icon {
  background-color: var(--neu-900);
}
.d10-tf-btn.style-bg-white .icon i {
  color: var(--white);
}
.d10-tf-btn.style-bg-white:hover {
  background-color: var(--neu-900);
}
.d10-tf-btn.style-bg-white:hover .text_btn {
  color: var(--white);
}

.d10-tf-btn-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
}
.d10-tf-btn-cart i {
  color: var(--neu-900);
  font-size: 20px;
}
.d10-tf-btn-cart .text_btn {
  color: var(--neu-900);
}
.d10-tf-btn-cart .text_btn span {
  color: var(--neu-500);
}

.d10-section-page-title {
  text-align: center;
}
.d10-section-page-title .sub-title {
  max-width: 323px;
  margin-left: auto;
  margin-right: auto;
}
.d10-section-page-title .title {
  margin-bottom: 32px;
  color: var(--neu-900);
}
.d10-section-page-title .title span {
  color: var(--primary-600);
}
.d10-section-page-title .d10-tag-badget {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
.d10-section-page-title.style-2 .d10-tag-badget {
  margin-left: 0;
}
.d10-section-page-title.style-2 .page-title-content {
  text-align: left;
}

.d10-tag-badget {
  padding: 6px 16px;
  background-color: var(--d10-bg-2);
  max-width: max-content;
  border-radius: 999px;
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
  display: flex;
  align-items: center;
  gap: 10px;
}
.d10-tag-badget .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--primary-700);
  border-radius: 50%;
}
.d10-tag-badget.style-white {
  background-color: var(--white-20);
  border: var(--white-40);
  color: var(--white);
}
.d10-tag-badget.style-white .dot {
  background-color: var(--white);
}

.d10-banner-contact {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.d10-banner-contact .image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  z-index: -1;
}
.d10-banner-contact .image-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.d10-banner-contact .d10-tag-badget {
  margin-left: auto;
  margin-right: auto;
}
.d10-banner-contact .title {
  color: var(--white);
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 44px;
}
.d10-banner-contact .title span {
  color: var(--primary-400);
}

.d10-list-tab-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--neu-200);
}
.d10-list-tab-btn .tf-tab-btn {
  height: 48px;
  padding-left: 24px;
  padding-right: 24px;
  border: 0;
  color: var(--neu-600);
  position: relative;
  background-color: transparent;
}
.d10-list-tab-btn .tf-tab-btn:hover {
  color: var(--primary-600);
}
.d10-list-tab-btn .tf-tab-btn.active {
  color: var(--primary-600);
}
.d10-list-tab-btn .indicator {
  top: auto;
  bottom: 2px;
  border-radius: 0;
  height: 2px;
  background: var(--primary-600);
}

.d10-article-blog .image {
  border-radius: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.d10-article-blog .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.d10-article-blog .meta-tag {
  margin-bottom: 12px;
}
.d10-article-blog .meta-tag a {
  padding: 6px 16px;
  background-color: var(--d10-bg-1);
  color: var(--neu-900);
  backdrop-filter: blur(12px);
  border-radius: 8px;
}
.d10-article-blog .meta-tag a:hover {
  background-color: var(--primary-600);
  color: var(--white);
}
.d10-article-blog .name-blog {
  color: var(--neu-900);
}
.d10-article-blog .name-blog:hover {
  color: var(--primary-600);
}

.d10-footer .d10-logo-footer {
  max-width: 169px;
  width: 100%;
}
.d10-footer .footer-top {
  padding-top: 112px;
  padding-bottom: 82px;
}
.d10-footer .footer-top .footer-link-wrap {
  gap: 27px;
}
@media (min-width: 1440px) {
  .d10-footer .footer-top {
    padding-right: 111px;
  }
}
@media (max-width: 991px) {
  .d10-footer .footer-top {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.d10-footer .footer-top .footer-content {
  display: flex;
  justify-content: space-between;
  gap: 130px;
}
@media (min-width: 1200px) {
  .d10-footer .footer-top .footer-content {
    gap: 276.61px;
    justify-content: start;
  }
}
@media (max-width: 991px) {
  .d10-footer .footer-top .footer-content {
    gap: 30px;
    flex-direction: column;
  }
}
@media (min-width: 1440px) {
  .d10-footer .footer-sub-form {
    max-width: 310px;
  }
}
.d10-footer .footer-col-block {
  width: max-content !important;
}
.d10-footer .footer-col-block .footer-heading {
  color: var(--neu-900);
}
.d10-footer .footer-col-block .footer-menu-list {
  margin-top: 40px;
}
.d10-footer .footer-col-block .link-2 {
  color: var(--neu-600) !important;
}
.d10-footer .footer-col-block .link-2:hover {
  color: var(--primary-600) !important;
}
.d10-footer .footer-col-block .title {
  color: var(--neu-900);
}
.d10-footer .footer-col-block .text-form-sub {
  color: var(--neu-600);
}
.d10-footer .footer-bottom {
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--neu-300);
}
.d10-footer .footer-bottom .footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 992px) {
  .d10-footer .footer-bottom .footer-content .midder-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 767px) {
  .d10-footer .footer-bottom .footer-content {
    flex-wrap: wrap;
    gap: 16px;
  }
  .d10-footer .footer-bottom .footer-content .left-content {
    order: 1;
  }
  .d10-footer .footer-bottom .footer-content .right-content {
    order: 2;
  }
  .d10-footer .footer-bottom .footer-content .midder-content {
    text-align: center;
    order: 3;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .d10-footer .footer-bottom .footer-content {
    flex-direction: column;
  }
  .d10-footer .footer-bottom .footer-content .left-content {
    order: 1;
  }
  .d10-footer .footer-bottom .footer-content .right-content {
    order: 3;
  }
  .d10-footer .footer-bottom .footer-content .midder-content {
    order: 2;
  }
}
.d10-footer .footer-bottom .left-content a {
  color: var(--neu-600) !important;
}

.d10-form-sub fieldset {
  position: relative;
}
.d10-form-sub fieldset .d10-btn-submit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.d10-form-sub input {
  padding: 18px 50px 18px 16px;
  background-color: var(--neu-300) !important;
  border-color: transparent !important;
  color: var(--neu-900) !important;
  font-size: 16px !important;
  line-height: 20px !important;
}
.d10-form-sub input::placeholder {
  font-size: 16px !important;
  line-height: 20px !important;
  color: var(--d10-color-text) !important;
}

.d10-btn-submit {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-600);
  border-radius: 8px;
}
.d10-btn-submit i {
  color: var(--white);
}

.d10-btn-arrow-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--neu-600);
}
.d10-btn-arrow-top i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--neu-600);
}
.d10-btn-arrow-top .icon-arrow-bottom {
  transform: rotate(180deg);
}

.d10-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.d10-user .image {
  max-width: 40px;
  border-radius: 50%;
}
.d10-user .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.d10-user .name {
  color: var(--neu-800);
}

.d10-section-blog-post .d10-meta-blog {
  padding-top: 30px;
  padding-bottom: 10px;
  border-top: 1px solid var(--neu-200);
}
.d10-section-blog-post .text-section {
  color: var(--neu-600);
}
.d10-section-blog-post .content-section .title {
  color: var(--neu-900);
}
.d10-section-blog-post .content-section .text {
  color: var(--neu-600);
}
.d10-section-blog-post .image-post {
  max-width: 100%;
}
.d10-section-blog-post .image-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d10-section-blog-post .image-post.img-1 {
  border-radius: 24px;
}
.d10-section-blog-post .image-post.img-2 {
  border-radius: 20px;
}

.d10-wg-quote {
  background-color: var(--neu-200);
  padding: 40px;
  border-radius: 20px;
}
.d10-wg-quote .wg-quote-content {
  padding-left: 36px;
  border-left: 8px solid var(--primary-600);
  border-radius: 8px;
}
.d10-wg-quote .wg-quote-content .text-quote {
  color: var(--neu-900);
  margin-bottom: 32px;
}
.d10-wg-quote .user-quote {
  padding-top: 20px;
  border-top: 1px solid var(--neu-400);
}
.d10-wg-quote .user-quote .name {
  margin-bottom: 4px;
  color: var(--neu-900);
}
.d10-wg-quote .user-quote .sub-name {
  color: var(--neu-600);
}

.tf-social-icon-2.d10-style-primary-600 .social-link {
  color: var(--primary-600);
  border-color: var(--primary-600);
  width: 48px;
  height: 48px;
}
.tf-social-icon-2.d10-style-primary-600 .social-link i {
  font-size: 20px;
}
.tf-social-icon-2.d10-style-primary-600 .social-link:hover {
  background-color: var(--primary-600);
  color: var(--white);
}

.d10-single-meta-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}
.d10-single-meta-bottom p {
  color: var(--neu-900);
}

.d10-heading-section {
  position: relative;
}
.d10-heading-section .title {
  color: var(--neu-900);
}
.d10-heading-section .title span {
  color: var(--primary-400);
}
.d10-heading-section.style-white .title {
  color: var(--white);
}
.d10-heading-section.style-white .title span {
  color: var(--primary-600);
}
.d10-heading-section.style-white .d10-tag-badget {
  background-color: var(--white-20);
  border: var(--white-40);
  color: var(--white);
}
.d10-heading-section.style-white .d10-tag-badget .dot {
  background-color: var(--white);
}
.d10-heading-section.style-white .sub-title {
  color: var(--white-60);
}
.d10-heading-section.style-center {
  text-align: center;
}
.d10-heading-section.style-center .d10-tag-badget {
  margin-left: auto;
  margin-right: auto;
}

.d10-section-blog .d10-heading-section {
  margin-left: 12px;
  margin-right: 12px;
}
@media (min-width: 1200px) {
  .d10-section-blog .d10-heading-section {
    margin-left: 64px;
    margin-right: 64px;
  }
}
.d10-section-blog .d10-sw-blog {
  margin-left: 12px;
  margin-right: 12px;
}
@media (min-width: 1200px) {
  .d10-section-blog .d10-sw-blog {
    margin-left: 64px;
    margin-right: 0;
  }
}

.d10-page-title {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.d10-page-title .page-title-content {
  max-width: 490px;
  padding-top: 60px;
  padding-bottom: 60px;
  margin-top: auto;
  margin-bottom: auto;
}
.d10-page-title .d10-tag-badget {
  margin-bottom: 11px;
}
.d10-page-title .title {
  color: var(--neu-900);
  margin-bottom: 21px;
}
.d10-page-title .sub-title {
  color: var(--neu-600);
  margin-bottom: 48px;
}
.d10-page-title .image {
  border-radius: 16px;
}
.d10-page-title .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
@media (max-width: 991px) {
  .d10-page-title {
    flex-direction: column;
    gap: 0;
  }
  .d10-page-title .page-title-content {
    max-width: 100%;
  }
  .d10-page-title .image {
    height: 400px;
  }
  .d10-page-title .sub-title {
    margin-bottom: 21px;
  }
}

.span-img {
  position: relative;
  max-width: 187px;
  display: inline-block;
  height: 56px;
  background-color: var(--d10-bg-3);
  border-radius: 999px;
}
@media (max-width: 991px) {
  .span-img {
    display: none;
  }
}

.d10-key-item {
  position: relative;
  background-color: var(--neu-200);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 31px;
  padding-right: 31px;
  overflow: hidden;
}
.d10-key-item .img-bg-2,
.d10-key-item .img-bg {
  position: absolute;
  top: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.d10-key-item .image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d10-key-item.key-item-3 .item-content {
  position: absolute;
  bottom: 41px;
  left: 40px;
  max-width: 195px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.d10-key-item.key-item-3 .title {
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 32px;
}
.d10-key-item.key-item-3 .logo {
  position: absolute;
  top: 35px;
  right: 21px;
  max-width: 186px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (max-width: 1199px) {
  .d10-key-item.key-item-1 .image-item {
    max-width: 80%;
  }
}

.d10-seciton-key-features .seciton-key-content {
  position: relative;
  padding-top: 64px;
  display: flex;
  gap: 27px;
}
.d10-seciton-key-features .section-content {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 419px;
  width: 100%;
}
@media (max-width: 767px) {
  .d10-seciton-key-features .seciton-key-content .d10-sw-key-features {
    max-width: 50%;
  }
}
@media (max-width: 575px) {
  .d10-seciton-key-features .seciton-key-content {
    flex-direction: column;
    padding-top: 0;
  }
  .d10-seciton-key-features .seciton-key-content .section-content,
  .d10-seciton-key-features .seciton-key-content .d10-sw-key-features {
    max-width: 100%;
  }
  .d10-seciton-key-features .seciton-key-content .d10-sw-key-features {
    position: relative;
    padding-top: 30px;
  }
}

.d10-sw-key-features {
  height: 350px;
  position: unset;
}
.d10-sw-key-features .key-features-pagination {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
@media (min-width: 1200px) {
  .d10-sw-key-features {
    height: 494px;
  }
  .d10-sw-key-features .swiper-wrapper {
    align-items: center;
  }
  .d10-sw-key-features .swiper-slide {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .d10-sw-key-features .swiper-slide .d10-key-item {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 446px !important;
    height: 494px;
    margin-left: auto;
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .img-bg {
    display: none;
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .d10-key-item {
    width: 334px !important;
    height: 312px;
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .d10-key-item.key-item-3 .logo {
    top: 20px;
    right: 17px;
    max-width: 95px;
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .d10-key-item.key-item-3 .item-content {
    bottom: 32px;
    left: 27px;
    transform: translateY(85px);
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .d10-key-item.key-item-3 .title {
    font-size: 24px;
    line-height: 120%;
  }
  .d10-sw-key-features .swiper-slide:not(.swiper-slide-active) .d10-key-item.key-item-3 .d10-tf-btn {
    opacity: 0;
    visibility: hidden;
  }
}

.d10-infiniteslide {
  position: relative;
  width: 100%;
  mask-image: linear-gradient(90deg, #000000 50.34%, rgba(0, 0, 0, 0) 100%);
  mask-mode: alpha;
}
.d10-infiniteslide .item-brand {
  padding-left: 82px;
}
.d10-infiniteslide .item-brand img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .d10-infiniteslide {
    max-width: 867px;
  }
}

.d10-section-integration .section-integration-content {
  padding-top: 68px;
  padding-bottom: 12px;
  border-top: 1px solid var(--neu-300);
}
.d10-section-integration .section-integration-content .text-section {
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .d10-section-integration .section-integration-content .text-section br {
    display: none;
  }
}
@media (min-width: 1200px) {
  .d10-section-integration .section-integration-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .d10-section-integration .section-integration-content .text-section {
    margin-bottom: 0;
  }
}

.d10-section-video .financial-video {
  max-height: 487px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
}
.d10-section-video .financial-video video {
  border-radius: 24px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d10-section-video .section-video-content {
  padding-top: 40px;
  padding-bottom: 25px;
  border-top: 1px solid var(--neu-300);
  border-bottom: 1px solid var(--neu-300);
}
.d10-section-video .right-content .bottom-content p {
  display: flex;
  gap: 5px;
}
.d10-section-video .right-content .bottom-content span {
  color: var(--neu-700);
}
.d10-section-video .right-content .bottom-content .line {
  background-color: var(--neu-900);
  width: 0.5px;
  opacity: 50%;
}

.d10-tf-btn-arrow-2 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.d10-tf-btn-arrow-2 span {
  color: var(--neu-700);
}
.d10-tf-btn-arrow-2 i {
  font-size: 22px;
  color: var(--neu-700);
}

.d10-rating {
  display: flex;
  gap: 4px;
  align-items: center;
}
.d10-rating i {
  color: var(--d10-yelow);
  font-size: 20px;
}

.d10-box-benefit-item {
  position: relative;
  border-radius: 16px;
}
@media (min-width: 576px) {
  .d10-box-benefit-item {
    width: 429px;
  }
}
.d10-box-benefit-item .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.d10-box-benefit-item .img-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.d10-box-benefit-item .img-bg img {
  border-radius: 16px;
  height: 100% !important;
}
.d10-box-benefit-item .box-content {
  padding: 192px 24px 26px 24px;
  position: relative;
  z-index: 2;
}
.d10-box-benefit-item .box-content .sub-title {
  color: var(--d10-color-text);
}
.d10-box-benefit-item .box-content .title {
  color: var(--neu-900);
}
@media (max-width: 991px) {
  .d10-box-benefit-item .box-content .title br {
    display: none;
  }
}
.d10-box-benefit-item.style-2 {
  background-color: var(--neu-200);
  overflow: hidden;
}
.d10-box-benefit-item.style-2 .img-absolute {
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 100%;
  height: 100%;
}
.d10-box-benefit-item.style-2 .box-content {
  padding: 0;
}
.d10-box-benefit-item.style-2 .title {
  padding: 27px 24px 229px;
  text-align: end;
}
.d10-box-benefit-item.style-2 .big-number {
  position: absolute;
  bottom: -30px;
  right: -86px;
  font-size: 180px;
  line-height: 100%;
  text-align: end;
  color: var(--d10-color-text-big);
}
@media (min-width: 576px) {
  .d10-box-benefit-item.style-2 {
    width: 422px;
  }
}
@media (max-width: 575px) {
  .d10-box-benefit-item.style-2 .big-number {
    display: none;
  }
}

.d10-box-user-benefit {
  display: flex;
  gap: 20px;
  background-color: var(--neu-200);
  border-radius: 16px;
  padding: 24px 33px 29px 24px;
  max-width: 429px;
}
.d10-box-user-benefit .image {
  max-width: 120px;
  border-radius: 12px;
}
.d10-box-user-benefit .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}
.d10-box-user-benefit .content-box {
  max-width: calc(100% - 140px);
}
.d10-box-user-benefit .content-box .desc {
  margin-bottom: 85px;
}
.d10-box-user-benefit .content-box .name-user .name {
  color: var(--neu-900);
  margin-bottom: 4px;
}
.d10-box-user-benefit .content-box .name-user .sub-name {
  color: var(--neu-500);
}
@media (max-width: 575px) {
  .d10-box-user-benefit {
    flex-direction: column;
  }
  .d10-box-user-benefit .content-box {
    max-width: 100%;
  }
  .d10-box-user-benefit .desc {
    margin-bottom: 20px !important;
  }
}

.d10-box-chart {
  max-width: 294px;
  padding: 34px;
  background-color: var(--d10-bg-4);
  border-radius: 16px;
}
.d10-box-chart .box-content {
  background-color: var(--white);
  padding: 30px 20px 22px;
  border-radius: 16.8px;
  box-shadow: 0px 2.8px 30.8px 0px rgba(0, 0, 0, 0.3490196078);
}
.d10-box-chart .top-box {
  margin-bottom: 46px;
  display: flex;
  justify-content: space-between;
}
.d10-box-chart.style-2 {
  background-color: var(--d10-bg-5);
  max-width: 310px;
  padding-left: 46px;
  padding-right: 46px;
}
.d10-box-chart.style-2 .box-content {
  padding: 0;
}
.d10-box-chart.style-2 .box-content .img-content {
  border-radius: 16.8px;
}
.d10-box-chart.style-3 {
  padding: 50px 42px 56px 25px;
}
.d10-box-chart.style-3 .chart {
  position: relative;
}
.d10-box-chart.style-3 .chart p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18.82px;
  line-height: 25.09px;
  color: var(--white);
}
.d10-box-chart.style-3 .chart p span {
  font-size: 43.9px;
  line-height: 50.18px;
  letter-spacing: -0.78px;
  font-weight: 500;
}

.chart-time-select {
  position: relative;
  display: inline-flex;
}
.chart-time-select select {
  padding: 4px 16.5px 4px 6.55px;
  font-size: 7px;
  line-height: 100%;
  font-weight: 400;
  border: 1px solid var(--d10-line);
  color: var(--d10-color-text-3);
  border-radius: 5.73px;
}
.chart-time-select::before {
  content: "\e911";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--d10-color-text-3);
  font-family: "icomoon";
  font-size: 8px;
}

.d10-sw-benefit {
  margin-left: 12px;
  margin-right: 12px;
}
@media (min-width: 1200px) {
  .d10-sw-benefit {
    margin-left: 64px;
    margin-right: 0;
  }
}
.d10-sw-benefit .swiper-slide {
  width: auto !important;
}

@media (max-width: 767px) {
  .d10-seciton-benefit .seciton-benefit-top {
    flex-direction: column;
    align-items: start !important;
  }
}
.d10-seciton-benefit .img-slider-benefit {
  border-radius: 16px;
  overflow: hidden;
}
.d10-seciton-benefit .img-slider-benefit.img-1 {
  max-width: 422px;
}
.d10-seciton-benefit .img-slider-benefit.img-2 {
  max-width: 294px;
}
.d10-seciton-benefit .img-slider-benefit img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}

.d10-wg-customers p {
  color: var(--neu-600);
}

.d10-data-use {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 4px;
  border: 0.5px solid var(--black-20);
  border-radius: 999px;
  max-width: max-content;
}
.d10-data-use .list-img {
  display: flex;
}
.d10-data-use .image {
  max-width: 24px;
  border-radius: 50%;
  margin-right: -8px;
}
.d10-data-use .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
}
.d10-data-use .text {
  color: var(--neu-600);
}

.d10-list-additional .item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.d10-list-additional .item .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--d10-bg-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) {
  .d10-section-more-additional .mb-32 {
    margin-bottom: 15px !important;
  }
  .d10-section-more-additional br {
    display: none;
  }
}

.d10-section-app {
  position: relative;
  overflow: hidden;
}
.d10-section-app .image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.d10-section-app .image-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d10-section-app .d10-section-app-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  margin-left: 12px;
  margin-right: 12px;
}
@media (min-width: 1200px) {
  .d10-section-app .d10-section-app-content {
    margin-left: 64px;
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .d10-section-app .d10-section-app-content {
    flex-direction: column;
    align-items: start;
  }
  .d10-section-app .d10-section-app-content .infiniteSlide-app-list {
    margin-left: auto;
    margin-right: auto;
  }
  .d10-section-app .d10-section-app-content .d10-heading-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.infiniteSlide-app-list {
  position: relative;
}
.infiniteSlide-app-list .overlay-top {
  position: absolute;
  top: -43px;
  left: -64px;
  width: 139%;
  height: 151px;
  background: var(--d10-bg-4);
  filter: blur(60px);
  z-index: 2;
}
.infiniteSlide-app-list .overlay-botton {
  position: absolute;
  bottom: -133px;
  left: -64px;
  width: 139%;
  height: 151px;
  background: var(--d10-bg-4);
  filter: blur(60px);
  z-index: 2;
}

.infiniteSlide-app .infiniteSlide-slide {
  margin-top: 10px;
  margin-bottom: 10px;
}
.infiniteSlide-app .infiniteslide_wrap {
  height: 405px !important;
}
@media (min-width: 992px) {
  .infiniteSlide-app .infiniteslide_wrap {
    height: 900px !important;
  }
}

.d10-item-how .image {
  max-width: 100%;
  border-radius: 16px;
}
.d10-item-how .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.d10-item-how .item-content {
  padding-bottom: 44px;
}
.d10-item-how .item-content .sub-title {
  margin-bottom: 16px;
  color: var(--neu-900);
}
.d10-item-how .item-content .title {
  margin-bottom: 56px;
}
.d10-item-how .item-content .title a {
  color: var(--neu-900);
}
.d10-item-how .item-content .title a:hover {
  color: var(--primary-600);
}
.d10-item-how .item-content .desc {
  margin-bottom: 24px;
  color: var(--neu-600);
}
@media (min-width: 1200px) {
  .d10-item-how .item-content {
    padding-left: 40px;
  }
}
.d10-item-how.style-reverse {
  flex-direction: row-reverse !important;
}
@media (min-width: 1200px) {
  .d10-item-how.style-reverse .item-content {
    padding-left: 60px;
  }
}

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

.mt-60 {
  margin-top: 60px !important;
}

.mb-28 {
  margin-bottom: 28px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.mb-lg-76 {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .mb-lg-76 {
    margin-bottom: 76px !important;
  }
}

.mb-lg-82 {
  margin-bottom: 60px;
}
@media (min-width: 992px) {
  .mb-lg-82 {
    margin-bottom: 82px !important;
  }
}

.mb-lg-84 {
  margin-bottom: 60px;
}
@media (min-width: 992px) {
  .mb-lg-84 {
    margin-bottom: 84px !important;
  }
}

.d10-flat-spacing-1 {
  padding-top: 112px;
  padding-bottom: 112px;
}
@media (max-width: 1439px) {
  .d10-flat-spacing-1 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .d10-flat-spacing-1 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.gap-sm-27 {
  gap: 27px !important;
}

.rg-24 {
  row-gap: 24px !important;
}

/*# sourceMappingURL=styles.css.map */