@charset "UTF-8";
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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.1
    * 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.1
    * 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-instrument_sans {
    font-family: "Instrument Sans", sans-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.1
    * 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-11 {
    margin-bottom: 11px;
}

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

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

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

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

.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-2 {
    gap: 2px !important;
}

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

.row-gap-40 {
    row-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-16 {
    padding-top: 40px;
    padding-bottom: 120px;
}
@media (max-width: 1439px) {
    .flat-spacing-16 {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}
@media (max-width: 991px) {
    .flat-spacing-16 {
        padding-top: 40px;
        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;
}

.pin-container {
    position: relative;
}

.pin-item {
    transform: translateY(100%);
}

/*-- 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: 1439px) {
    .xxl-hide {
        display: none !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-mb-30 {
        margin-bottom: 30px;
    }
    .md-hide {
        display: none !important;
    }
    .md-mt-0 {
        margin-top: 0 !important;
    }
}
@media (max-width: 575px) {
    .sm-hide {
        display: none !important;
    }
}
/*------------ Component ------------ */
/* ------------ Layout ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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.1
    * 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.transparent:not(.scrolling) {
    background: transparent;
}
.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 .item-link.active {
    color: var(--primary);
}
.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;
    }
}

.cv-mb-d2 .canvas-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--black-20);
}
.cv-mb-d2 .canvas-body {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 20px;
    padding-right: 20px;
}
.cv-mb-d2 .canvas-body .mb-menu-link {
    padding-top: 10px;
    padding-bottom: 10px !important;
    line-height: 20px;
}
.cv-mb-d2 .canvas-body .mb-menu-link span {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
}
.cv-mb-d2 .canvas-body .sub-nav-menu {
    border: unset;
    margin-left: 8px;
    margin-bottom: 0 !important;
    padding-left: 12px;
    padding-top: 0;
    padding-bottom: 0;
    border-left: 1px solid var(--black-12);
}
.cv-mb-d2 .canvas-body .sub-nav-menu .sub-nav-link {
    line-height: 24px;
    font-weight: 500;
    color: var(--black);
}
.cv-mb-d2 .nav-ul-mb {
    display: grid;
    gap: 8px;
}
.cv-mb-d2 .mb-social {
    display: flex;
    align-items: center;
    gap: 24px;
}
.cv-mb-d2 .mb-social .icon {
    font-size: 28px;
}
.cv-mb-d2 .mb-social .link {
    display: flex;
    color: var(--gray-60);
}
.cv-mb-d2 .canvas-footer {
    padding: 20px;
    border-top: 1px solid var(--black-20);
}

.cv-mb-d3 {
    padding: 4px 8px 8px;
    background: #F2F2F2;
}
.cv-mb-d3 .canvas-header {
    background: var(--white);
    margin-bottom: 4px;
    border-radius: 16px;
    padding: 8px 12px;
}
.cv-mb-d3 .canvas-header .icon-close-popup {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-90);
    color: var(--white);
}
.cv-mb-d3 .canvas-body {
    border-radius: 16px 16px 0px 0px;
    padding: 20px 24px;
}
.cv-mb-d3 .mb-menu-link {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--gray-90);
}
.cv-mb-d3 .canvas-bottom {
    background: var(--white);
    border-radius: 0px 0px 16px 16px;
    box-shadow: unset;
}

.cv-mb-d4 {
    background: transparent;
    padding: 8px 6px;
}
.cv-mb-d4 .canvas-header {
    background: var(--white);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.cv-mb-d4 .canvas-header .icon-close-popup {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border-radius: 8px;
}
.cv-mb-d4 .canvas-body {
    border-radius: 12px 12px 0px 0px;
    padding: 16px 12px;
}
.cv-mb-d4 .canvas-body .nav-ul-mb {
    display: grid;
    gap: 4px;
}
.cv-mb-d4 .canvas-body .mb-menu-link {
    font-size: 18px;
    line-height: 28px;
    color: var(--primary);
    padding-top: 12px;
    padding-bottom: 11px !important;
    border-bottom: 1px solid var(--gray-200);
}
.cv-mb-d4 .canvas-body .mb-menu-link::after {
    content: "\e929";
    font-family: "icomoon";
    line-height: 1;
    font-size: 20px;
}
.cv-mb-d4 .canvas-bottom {
    background: var(--white);
    border-radius: 0px 0px 12px 12px;
    padding: 16px 12px;
    border: 0;
    box-shadow: unset;
}
.cv-mb-d4 .tf-social-icon {
    gap: 8px;
}
.cv-mb-d4 .tf-social-icon a .icon {
    font-size: 20px;
}
.cv-mb-d4 .tf-social-icon a:not(:hover) {
    border-color: var(--gray-100);
    color: var(--primary);
}

.cv-mb-d5 .canvas-header {
    padding: 16px;
    border-bottom: 1px solid var(--black-10);
}
.cv-mb-d5 .canvas-body {
    padding-left: 16px;
    padding-right: 16px;
}
.cv-mb-d5 .canvas-body .mb-menu-link {
    padding-top: 8px;
    padding-bottom: 8px !important;
    line-height: 24px;
}
.cv-mb-d5 .canvas-body .mb-menu-link span {
    font-weight: 500;
}
.cv-mb-d5 .canvas-body .sub-nav-menu {
    border: unset;
    margin-left: 8px;
    margin-bottom: 8px !important;
    padding-left: 12px;
    padding-top: 0;
    padding-bottom: 0;
    border-left: 1px solid var(--black-12);
}
.cv-mb-d5 .canvas-body .sub-nav-menu .sub-nav-link {
    font-size: 14px;
    line-height: 20px;
    color: var(--black);
}
.cv-mb-d5 .canvas-bottom {
    padding: 24px 16px;
}
.cv-mb-d5 .tf-social-icon {
    gap: 8px;
}
.cv-mb-d5 .tf-social-icon a {
    border-color: var(--gray-100);
    color: var(--gray-70);
}

.cv-mb-d6 .canvas-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--gray-20);
}
.cv-mb-d6 .canvas-header .icon-close-popup {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white) !important;
}
.cv-mb-d6 .canvas-body {
    padding: 20px;
}
.cv-mb-d6 .mb-menu-link {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: var(--gray-90);
    text-align: center;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px !important;
}
.cv-mb-d6 .mb-menu-link.active {
    color: var(--primary);
}
.cv-mb-d6 .mb-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cv-mb-d6 .mb-social a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--gray-20);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.cv-mb-d6 .mb-social a:hover {
    background: var(--gray-20);
}
.cv-mb-d6 .canvas-bottom {
    border-top: 1px solid var(--gray-20);
    box-shadow: unset;
    padding: 20px;
}
.cv-mb-d6 .canvas-bottom .tf-list {
    gap: 32px;
}

/* ------------ Blog ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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: flex;
    flex-direction: column;
}
.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;
}
.article-blog-d6.type-2 {
    padding: 19px;
}
.article-blog-d6.type-2 .blog-image img {
    aspect-ratio: 1.21875;
}
@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.1
    * 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 .text-fimoor {
    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;
    color: var(--gray-90);
}
.form-ai-d6 .text-fimoor span {
    position: relative;
    z-index: 1;
    padding-left: 11px;
    padding-right: 11px;
    color: var(--gray-9);
}
.form-ai-d6 .text-fimoor::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 5px;
    background: var(--white);
}
.form-ai-d6 .btn-action {
    border-radius: 12px;
    background: var(--primary);
    padding: 6px 8px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 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;
}
.form-ai-d6 .btn-action:hover {
    box-shadow: 0 0 6px rgba(29, 120, 239, 0.8);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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 moveTopToBot {
    0% {
        top: calc(0% - 100px);
    }
    100% {
        top: 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.1
    * 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.1
    * 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.1
    * 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.1
    * 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-50);
    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;
    }
}
@media (max-width: 575px) {
    .list-tab-btn-2.style-2 .tf-tab-btn:hover, .list-tab-btn-2.style-2 .tf-tab-btn.active {
        color: var(--gray-50);
    }
    .list-tab-btn-2.style-2 .nav-tab-item.current .tf-tab-btn {
        color: var(--white) !important;
    }
    .list-tab-btn-2.style-2:hover .tf-tab-btn:hover {
        color: var(--gray-50);
    }
}

.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: 16px;
    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;
    border-radius: 12px;
    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.1
    * 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.1
    * 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;
    }
}
@media (max-width: 575px) {
    .btn-d6::after {
        display: none;
    }
}

.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.st-4 {
    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;
}
.btn-d6-v2.st-4 .b-wrap {
    padding-left: 20px;
    padding-right: 20px;
}
.btn-d6-v2.w-100 .b-wrap {
    position: relative;
    z-index: 1;
}
.btn-d6-v2.w-100.animate-btn:hover::after {
    animation-duration: 1.3s;
}
.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-d6-v2.st-4 .b-wrap {
        padding-left: 65px;
        padding-right: 65px;
    }
}

.btn-d8 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 31px;
    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;
}

.btn-mobile-menu-d4 {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
}
.btn-mobile-menu-d4 span {
    width: 15px;
    height: 2px;
    background: var(--primary);
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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 .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;
    }
}
.section-feature {
    /*-- min, between, max --*/
}
@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 .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;
    }
}
.s-hero-slide {
    /*-- min, between, max --*/
}
@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 .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);
    }
}
.section-business-customer-review {
    /*-- min, between, max --*/
}
@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;
}
.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;
    }
}
.cosmetic-gallery-grid {
    /*-- min, between, max --*/
}
@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(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.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 (min-width: 1200px) {
    .sect-title-d6:not(.first-page) .s-mini-title {
        margin-bottom: 12px;
    }
    .sect-title-d6:not(.first-page) .s-title {
        margin-bottom: 20px;
    }
}
@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,
.section-pricing-d6 .list-tab-btn-d6-v2 {
    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;
    position: relative;
}
.section-intro-about-d6 .bg-item {
    position: absolute;
    inset: 0;
}
.section-intro-about-d6 .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-intro-about-d6 .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-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;
}
@media (max-width: 1199px) {
    .infiniteSlide-about-d6 .image-intro img {
        height: 300px;
        width: 100%;
        object-fit: cover;
    }
    .infiniteSlide-about-d6 .wg-intro .intro-img img {
        height: 300px;
        width: 100%;
        object-fit: cover;
    }
}
@media (max-width: 1199px) {
    .infiniteSlide-about-d6 .image-intro img {
        height: 260px;
    }
    .infiniteSlide-about-d6 .wg-intro .intro-img img {
        height: 260px;
    }
    .infiniteSlide-about-d6 .wg-intro .intro-content {
        inset: 20px 15px;
    }
}

.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;
    -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-intro-feature-d6 .group-img {
    position: absolute;
    right: -28%;
    bottom: 0%;
    left: 50.6%;
    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);
    -webkit-backdrop-filter: blur(37px);
    background: var(--white-12);
    z-index: 0;
    border-radius: 16px;
    -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;
}
.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 .rate-wrap i {
    font-size: 10px;
}
.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 .group-img {
        display: none;
    }
    .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-hero-home-d6 .box-title {
        padding-bottom: 84px;
    }
}

.section-feature-d6 .wg-feature-d6 {
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .section-feature-d6 .wg-feature-d6 {
        margin-bottom: 0px;
        height: 100%;
    }
}

.wrapper-d6 {
    margin-bottom: -52px;
    border-radius: 40px 40px 0px 0px;
    padding-bottom: 52px;
    position: relative;
}
.wrapper-d6 .wrapper-bg {
    display: none;
}
.wrapper-d6.has-wrap-bg > *:not(.wrapper-bg) {
    position: relative;
    z-index: 3;
}
@media (max-width: 767px) {
    .wrapper-d6 {
        border-radius: 20px 20px 0px 0px;
    }
}
@media (min-width: 576px) {
    .wrapper-d6 .wrapper-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
    }
    .wrapper-d6 .wrapper-bg.item-1 {
        background-image: url("/demo-fimoor/images/item/patern.png");
        background-repeat: repeat;
        background-size: contain;
        animation: bgMoveTopRight 20s linear infinite;
        z-index: 0;
    }
    .wrapper-d6 .wrapper-bg.item-2 {
        background-image: url("/demo-fimoor/images/item/light-flare.png");
        background-repeat: repeat;
        background-size: contain;
        z-index: 0;
    }
}

.section-why-us-d6 .list-tab-btn-d6 {
    margin-bottom: 20px;
}

.section-related-d6 .btn-action {
    margin-top: 32px;
}

.section-core-value-d6 .wd-why .why-image img {
    aspect-ratio: 2.3571428571;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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);
}
.sw-dot-pagination.style-primary .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--primary);
}
@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;
    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;
}
.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;
    z-index: 0;
}
.group-btn-d6 .btn-nav-d6 .icon {
    position: relative;
    z-index: 1;
}
.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.1
    * 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.1
    * 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: 24px;
}
@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.1
    * 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 .icon {
    transform: rotate(180deg);
}
.market_item .coin_change.decrease .icon path {
    fill: var(--down-color);
}
.market_item .coin_change.decrease {
    color: 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;
}
.picture-frame .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.picture-frame .picture {
    z-index: 0;
}
.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;
    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;
    position: relative;
}
.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);
    position: relative;
    z-index: 1;
}
.wg-plan-d6.style-dark .plan-type::before {
    content: "";
    position: absolute;
    inset: 0;
    background: unset;
    mask-image: linear-gradient(180deg, #FFFFFF 15.24%, rgba(255, 255, 255, 0) 91.56%);
    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;
    border-radius: 1212px;
    z-index: 0;
}
.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 .br-line {
    background: var(--bg-28);
}
.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 {
    margin-bottom: 40px;
    padding-bottom: 39px;
    border-bottom: 1px solid var(--gray-20);
}
.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: 16px;
}
.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;
}
@media (max-width: 991px) {
    .infiniteSlide-brand-d6 .img-brand {
        width: 100px;
        height: 40px;
    }
    .infiniteSlide-brand-d6 .img-brand img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.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);
    border-radius: 16px;
}
.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;
    overflow: hidden;
}
.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 .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wg-cta-d6 .group-info-img {
    display: flex;
    position: absolute;
    right: -7%;
    top: 26%;
    left: 61.5%;
    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: 12px;
}
@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;
}
.wg-cta-d6-2 .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 1200px) {
    .wg-cta-d6-2 .btn-action {
        padding-left: 28px;
        padding-right: 28px;
    }
}
@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: 23px 19px;
    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;
    overflow: hidden;
}
.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: 24px;
}
.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: 1200px) {
    .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: 1199px) {
    .core-value .box-right:not(:last-child) {
        margin-bottom: 40px;
    }
    .core-value .box-right .bri-image {
        width: 37%;
    }
    .core-value .box-right .br2-tes {
        width: 63%;
    }
    .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: 25px;
    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 .rate-wrap i {
    font-size: 10px;
}
.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: 74px;
    }
}
@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 .btn-action {
    padding: 8px;
}
.wg-benefit-d6-3 .btn-action .b-wrap {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.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;
        padding-right: 0;
    }
}
@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.1
    * 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.1
    * 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.1
    * 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.1
    * 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.1
    * 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.1
    * 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(--text-3);
}
.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.1
    * 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.1
    * 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);
}
.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;
    }
}
.tf-footer-2 {
    /*-- min, between, max --*/
}
@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;
    z-index: 11;
}
.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;
}
.tf-footer-d6 .ft-inner_left {
    max-width: 335px;
}
.tf-footer-d6 .action-goTop .icon {
    animation: iconBounce 2s linear 0s infinite;
}
@media (min-width: 992px) {
    .tf-footer-d6 {
        border-radius: 0;
        padding-top: 80px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
}
@media (min-width: 1200px) {
    .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;
    }
}

.tf-footer-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;
    pointer-events: none;
}

/* ------------ Landing ---------------- */
/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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);
}
.card-demo.coming-2 {
    pointer-events: none;
}
.card-demo.coming-2 .demo-image {
    position: relative;
}
.card-demo.coming-2 .demo-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--white);
    opacity: 0.7;
    z-index: 2;
}
@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;
}
.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);
}
.wg-landing-feature {
    /*-- min, between, max --*/
}
@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 .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;
    }
}
.landing-option-list {
    /*-- min, between, max --*/
}
@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%;
}
.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 .item {
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-delay: 1.3s;
}
.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.1
    * 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: 991px) {
    .tf-header-d7 .header-right {
        padding: 0 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 .btn-mobile-menu {
    background-color: transparent;
    border: unset;
}
.tf-header-d7 .btn-mobile-menu span {
    background-color: var(--secondary);
}
@media (max-width: 767px) {
    .tf-header-d7 .btn-mobile-menu {
        height: 46px;
    }
}
.tf-header-d7 .item-link.active,
.tf-header-d7 .sub-menu_link.active {
    color: var(--black);
}
.tf-header-d7.header-fixed {
    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 .btn-mobile-menu span {
    background-color: var(--primary);
}
.tf-header-d7.v2 .item-link.active {
    color: var(--white);
}
.tf-header-d7.v2 .sub-menu_link.active {
    color: var(--black);
}
.tf-header-d7.v2.header-fixed {
    background-color: var(--bg);
}

.topbar-d7 {
    padding: 50px 0 49px;
    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;
    margin-top: 39px;
}
@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;
        margin-bottom: 24px;
        margin-top: 24px;
    }
}
@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;
    }
}
.page-title-d7 .meta {
    margin-top: 23px;
}

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

.section-page-title-d7 .left .article-blog-d7 {
    max-height: 396px;
}
@media (min-width: 992px) {
    .section-page-title-d7 .left .article-blog-d7 {
        max-width: 723px;
    }
}
.section-page-title-d7 .left .article-blog-d7 .blog-content {
    padding: 43px 30px 37px 30px;
}
.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: 18px 27px;
    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;
}
.article-blog-d7 .btn_link i {
    font-size: 22px;
}
.article-blog-d7 .btn_link {
    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;
}
@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 32px 31px 30px;
    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: 27px;
}
.form-contact-d7 .form-content {
    margin-bottom: 64px;
    gap: 24px;
}
@media (min-width: 992px) {
    .form-contact-d7 .form-content {
        gap: 49px;
    }
}
.form-contact-d7 fieldset textarea,
.form-contact-d7 fieldset input {
    font-size: 16px;
    line-height: 22px;
    color: var(--black) !important;
    padding-bottom: 13px !important;
}
.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;
    overflow: hidden;
}
.service-item-d7 .box {
    width: 100%;
}
.service-item-d7 .box .content {
    position: relative;
    padding: 32px;
}
.service-item-d7 .box .wrap-content-box {
    padding: 30px 32px 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: #f0ebe2;
    -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 .box {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.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.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;
}
.service-item-d7.v1 .tf-btn {
    background-color: var(--white);
    color: var(--black);
}
.service-item-d7.v1:hover .wrap-content-box {
    background-color: var(--white);
}
.service-item-d7.v1:hover .bg-box::after {
    opacity: 1;
}
.service-item-d7.v1:hover .tf-btn {
    background-color: var(--dark);
    color: var(--white);
}
.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 .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;
}
@media (max-width: 991px) {
    .work-item-d7 .img-style {
        max-height: 750px;
    }
}
.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 .row {
    row-gap: 40px;
}
.work-item-d7.v1 .number {
    margin-bottom: 91px;
}
@media (max-width: 1199px) {
    .work-item-d7.v1 .number {
        margin-bottom: 24px;
    }
}
.work-item-d7.v1 .title {
    margin-bottom: 84px;
}
@media (max-width: 1199px) {
    .work-item-d7.v1 .title {
        margin-bottom: 45px;
    }
}
.work-item-d7.v1 .tag {
    position: absolute;
    max-width: max-content;
    left: 36px;
    top: 36px;
}
.work-item-d7.v1 .img-style {
    margin-top: 80px;
}
@media (max-width: 1199px) {
    .work-item-d7.v1 .img-style {
        margin-top: 44px;
    }
}
.work-item-d7.v1 .content {
    margin-bottom: 68px;
}
@media (max-width: 1199px) {
    .work-item-d7.v1 .content {
        margin-bottom: 42px;
    }
}
@media (max-width: 991px) {
    .work-item-d7.v1 .content {
        margin-bottom: 26px;
    }
}
.work-item-d7.v1 .item {
    padding-top: 31px;
    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: 37%;
}
@media (min-width: 1440px) {
    .work-item-d7.v1 .item p {
        padding-right: 56px;
    }
}
@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: 60px 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 (min-width: 768px) {
    .card-about-d7 .wrap .img-style {
        flex: 45.5%;
    }
    .card-about-d7 .wrap .content {
        flex: 20%;
        margin-right: -2px;
    }
}
@media (min-width: 1200px) {
    .card-about-d7 .wrap {
        padding-left: 16px;
    }
}
@media (max-width: 767px) {
    .card-about-d7 .wrap {
        flex-direction: column;
    }
}
.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: 31px;
    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: 51px;
    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;
    -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: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    padding: 47px 32px 32px;
    z-index: 2;
    bottom: -1px;
    left: 0;
    right: 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;
    backdrop-filter: blur(5px);
    overflow: hidden;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) -19.22%, rgb(0, 0, 0) 53.96%);
}
.card-team-d7 .content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 81.29%);
}
.card-team-d7 .content::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100.29%);
    z-index: -1;
}
@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, .card-team-d7.is-active {
        height: 100%;
    }
    .card-team-d7:hover .content, .card-team-d7.is-active .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, .card-team-d7.is-active .img-person img {
    filter: unset;
}
.card-team-d7:hover .bg-team, .card-team-d7.is-active .bg-team {
    opacity: 1;
}
.card-team-d7:hover .bg-team img, .card-team-d7.is-active .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;
}
@media (min-width: 992px) {
    .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;
}
@media (max-width: 991px) {
    .testimonial-item-d7 .content {
        max-width: 100%;
        padding-top: 60px;
    }
}
.testimonial-item-d7 .sign {
    font-size: 74px;
    line-height: 82px;
    text-align: right;
}
@media (max-width: 1199px) {
    .testimonial-item-d7 .sign {
        padding-right: 31px;
    }
}
.testimonial-item-d7 ul {
    padding-left: 24px;
    margin-top: 32px;
}
.testimonial-item-d7 ul li {
    list-style: disc;
}

.process-item-d7 {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.process-item-d7 .title {
    max-width: 190px;
}

.moving-text {
    overflow: hidden;
}
.moving-text span {
    white-space: nowrap;
}

.mobile-menu-d7 {
    background-color: var(--primary);
}
.mobile-menu-d7 .canvas-body {
    background-color: var(--primary);
    padding: 0;
}
.mobile-menu-d7 .nav-mb-item {
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(112, 112, 112, 0.1607843137);
}
.mobile-menu-d7 .mb-menu-link {
    padding: 0 !important;
    font-weight: 700;
}
.mobile-menu-d7 .sub-nav-menu {
    margin-top: 20px;
    border-color: rgba(112, 112, 112, 0.1607843137);
}
.mobile-menu-d7 .canvas-header {
    border-bottom: 1px solid rgba(112, 112, 112, 0.1607843137);
}
.mobile-menu-d7 .nav-ul-mb .sub-nav-link {
    color: var(--dark) !important;
}
.mobile-menu-d7 .mb-menu-link.active,
.mobile-menu-d7 .sub-nav-link.active {
    color: var(--secondary) !important;
}

.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;
}
@media (max-width: 991px) {
    .hero-banner-d7-v2 {
        height: 800px;
    }
}
.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: -383px;
}
.tf-slider-d7 .swiper {
    height: 100%;
    width: 100%;
}
.tf-slider-d7 .wrap-scroll {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px 24px;
}
@media (max-width: 575px) {
    .tf-slider-d7 .wrap-scroll {
        flex-direction: column;
    }
}
.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);
}
@media (max-width: 767px) {
    .tf-slider-d7 .btn-scroll {
        height: 48px;
        width: 48px;
    }
}
.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;
}
@media (max-width: 991px) {
    .tf-slider-d7 .wrap-nav {
        bottom: 30px;
    }
}
.tf-slider-d7 .wrap-nav .swiper {
    max-width: 242px;
    padding: 20px 0 20px 32px;
    border-top: 1px solid rgba(243, 234, 219, 0.1607843137);
}
@media (max-width: 767px) {
    .tf-slider-d7 .wrap-nav .swiper {
        padding: 20px 0 0 32px;
    }
}
.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 {
    padding-bottom: 104px;
}
@media (max-width: 1439px) {
    .section-service-detail-d7 {
        padding-bottom: 80px;
    }
}
@media (max-width: 991px) {
    .section-service-detail-d7 {
        padding-bottom: 60px;
    }
}
.section-service-detail-d7 .list {
    display: grid;
    gap: 51px;
}
@media (max-width: 767px) {
    .section-service-detail-d7 .list {
        gap: 30px;
    }
}
.section-service-detail-d7 .item-list {
    padding-top: 58px;
    border-top: 1px solid var(--black-12);
    display: flex;
    gap: 20px;
}
@media (max-width: 767px) {
    .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: 61.3%;
}
.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;
    }
}
@media (min-width: 1440px) {
    .section-blog-d7 .article-blog-d7 {
        max-height: 390px;
    }
}

.s-blog-single-d7 .page-title-d7 .row {
    row-gap: 24px;
}
.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: 24px;
}
.s-blog-single-d7 .blog-detail ul li {
    list-style: disc;
}
.s-blog-single-d7 .quote {
    padding: 32px;
    background-color: var(--white);
}
@media (max-width: 767px) {
    .s-blog-single-d7 .quote {
        padding: 24px 15px;
    }
}
.s-blog-single-d7 .quote p {
    font-style: italic;
}

.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 .article-blog-d7.v01 {
    height: unset;
}
.section-press .article-blog-d7.v01 .img-style img {
    min-height: unset;
}
.section-press .article-blog-d7.large {
    overflow: hidden;
    max-height: 390px;
}
.section-press .wrap-blog .row {
    row-gap: 12px;
}

.section-project-dettail-d7 .page-title-d7 .content-inner {
    padding-bottom: 120px;
}
@media (max-width: 1199px) {
    .section-project-dettail-d7 .page-title-d7 .content-inner {
        padding-bottom: 80px;
    }
}
@media (max-width: 991px) {
    .section-project-dettail-d7 .page-title-d7 .content-inner {
        padding-bottom: 50px;
    }
}
.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 41px;
    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: 21.6%;
}
.section-project-dettail-d7 .detail .row {
    row-gap: 50px;
}
.section-project-dettail-d7 .wrap-content-paragraph {
    max-width: 544px;
}
.section-project-dettail-d7 .content-paragraph ul {
    padding-left: 30px;
}
@media (min-width: 992px) {
    .section-project-dettail-d7 .content-paragraph ul {
        padding-left: 48px;
    }
}
.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: 22px 0 25px;
    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;
    align-items: start;
}
@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;
    }
}
.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;
    }
}

@media (min-width: 1200px) {
    .section-awards-d7 .heading-section-d7_v01 .heading {
        padding-bottom: 78px;
    }
}
.section-awards-d7 .wrap-awards {
    display: flex;
    flex-direction: column;
    gap: 47px;
}
.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 (min-width: 1200px) {
    .section-team-d7 .heading-section-d7_v02 .sub {
        padding-left: 56px;
    }
    .section-team-d7 .heading-section-d7_v02 .title {
        padding-left: 56px;
    }
}
@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: 49px;
    margin-bottom: 80px;
}
@media (max-width: 991px) {
    .section-colect-d7 {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}
.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: 90px;
    }
    .section-location-d7 .heading-section-d7_v03 .sub {
        margin-bottom: 24px;
    }
}
.section-location-d7 .wrap-item > div {
    max-width: 175px;
    display: grid;
    gap: 19px;
}
@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: 26px 24px 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: -38px;
    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.4%;
    width: 100%;
    padding-right: 27px;
    padding-bottom: 29px;
    height: max-content;
}
@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: 124%;
    top: -1px;
    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 .title-location {
    text-align: end;
}
@media (min-width: 1200px) {
    .section-location-d7 .content-right .title-location {
        margin-right: 154px;
    }
}
.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-location-d7 .counter-item .wg-counter {
    margin-bottom: 7px;
}

.section-about-d7-v1 {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-bottom: 1px solid rgba(243, 234, 219, 0.1607843137);
}
.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);
}
@media (max-width: 1199px) {
    .section-about-d7-v1 .box-content {
        padding: 80px 0;
    }
    .section-about-d7-v1 .box-content::after, .section-about-d7-v1 .box-content::before {
        height: 80px;
    }
}
@media (max-width: 991px) {
    .section-about-d7-v1 .box-content {
        padding: 60px 0;
    }
    .section-about-d7-v1 .box-content::after, .section-about-d7-v1 .box-content::before {
        height: 60px;
    }
}
.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;
    overflow: hidden;
}
.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;
}
@media (max-width: 991px) {
    .section-about-d7-v1 .box-content .img-style {
        margin-bottom: 24px;
    }
    .section-about-d7-v1 .box-content p {
        margin-bottom: 24px;
    }
}
.section-about-d7-v1 .wrap-text {
    position: absolute;
    top: 45.7%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 737px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
    font-size: 72px;
    line-height: 82px;
}
@media (max-width: 1199px) {
    .section-about-d7-v1 .wrap-text {
        font-size: 60px;
        line-height: 68px;
    }
}
@media (max-width: 991px) {
    .section-about-d7-v1 .wrap-text {
        max-width: 600px;
        font-size: 50px;
        line-height: 58px;
    }
}
@media (max-width: 767px) {
    .section-about-d7-v1 .wrap-text {
        max-width: 500px;
        font-size: 40px;
        line-height: 48px;
    }
}
.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: 6px;
    top: 160px;
}
@media (max-width: 991px) {
    .section-about-d7-v1 .item-1 {
        left: 15px;
        top: 100px;
    }
}
.section-about-d7-v1 .item-2 {
    right: 6px;
    bottom: 369px;
}
@media (max-width: 991px) {
    .section-about-d7-v1 .item-2 {
        right: 15px;
        bottom: 228px;
    }
}
@media (max-width: 767px) {
    .section-about-d7-v1 .item-2 {
        right: 15px;
        bottom: 187px;
    }
}

.section-service-d7-v1 .moving-text {
    padding-top: 80px;
    padding-bottom: 140px;
}
@media (max-width: 1199px) {
    .section-service-d7-v1 .moving-text {
        padding-bottom: 80px;
    }
}
@media (max-width: 991px) {
    .section-service-d7-v1 .moving-text {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
.section-service-d7-v1 .moving-text span {
    margin-right: 46px;
}
.section-service-d7-v1 .row {
    row-gap: 40px;
}
.section-service-d7-v1 .dot {
    display: block;
    border-radius: 50%;
    background-color: var(--secondary);
    height: 14px;
    width: 14px;
    flex-shrink: 0;
}

.section-work-d7-v1 .custom-cursor {
    display: flex;
    gap: 8px;
    padding: 20px 32px;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.02rem;
}
@media (max-width: 575px) {
    .section-work-d7-v1 .custom-cursor {
        padding: 12px 24px;
        font-size: 18px;
        line-height: 26px;
    }
}

.section-showreal .heading-section-d7_v04 {
    padding-top: 80px;
    padding-bottom: 100px;
    border-top: 1px solid rgba(112, 112, 112, 0.1607843137);
}
@media (max-width: 991px) {
    .section-showreal .heading-section-d7_v04 {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}
.section-showreal .heading-section-d7_v04 .row {
    row-gap: 12px;
}
.section-showreal .heading-section-d7_v04 .tf-btn {
    margin-top: 60px;
}
@media (max-width: 991px) {
    .section-showreal .heading-section-d7_v04 .tf-btn {
        margin-top: 24px;
    }
}
.section-showreal .heading-section-d7_v04 .title {
    margin-bottom: 24px;
}
@media (max-width: 991px) {
    .section-showreal .heading-section-d7_v04 .title {
        margin-bottom: 12px;
    }
}
.section-showreal .video-wrap {
    height: 800px;
}
.section-showreal .video-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 450px;
}
@media (max-width: 767px) {
    .section-showreal .video-wrap {
        height: 600px;
    }
}
@media (max-width: 575px) {
    .section-showreal .video-wrap {
        height: 470px;
    }
}
.section-showreal .tf-mouse {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    width: 659px;
    height: 659px;
    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 solid var(--white-30);
    animation: spin-reverse 30s infinite linear;
}
@media (max-width: 1199px) {
    .section-showreal .tf-mouse {
        width: 559px;
        height: 559px;
    }
}
@media (max-width: 991px) {
    .section-showreal .tf-mouse {
        width: 459px;
        height: 459px;
    }
}
@media (max-width: 767px) {
    .section-showreal .tf-mouse {
        width: 359px;
        height: 359px;
    }
}
@media (max-width: 575px) {
    .section-showreal .tf-mouse {
        width: 289px;
        height: 289px;
    }
}

.section-testimonial-d7 {
    position: relative;
    z-index: 2;
}
.section-testimonial-d7 .item-quote {
    left: -67px;
    bottom: 211px;
    z-index: -1;
}
.section-testimonial-d7 .partner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 61px 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);
}
@media (max-width: 767px) {
    .section-testimonial-d7 .partner {
        padding: 30px 0;
    }
}
.section-testimonial-d7 .partner .row {
    row-gap: 12px;
}
.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 .tf-tes-main {
    padding-bottom: 235px;
}
@media (max-width: 991px) {
    .section-testimonial-d7 .tf-tes-main {
        padding-bottom: 40px;
    }
}
.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;
}
@media (max-width: 991px) {
    .section-testimonial-d7 .wrap-pagi {
        margin-top: 40px;
    }
}
.section-testimonial-d7 .img-style {
    text-align: center;
}

.section-process-d7 {
    position: relative;
}
.section-process-d7 .heading {
    margin-bottom: 84px;
}
.section-process-d7 .title span {
    display: block;
    margin-bottom: 33px;
}
.section-process-d7 .wrap-process {
    margin-right: -12px;
}
@media (max-width: 1439px) {
    .section-process-d7 .wrap-process {
        margin-right: 0px;
    }
}
.section-process-d7 .row {
    position: relative;
}
@media (max-width: 575px) {
    .section-process-d7 .row::after {
        content: "";
        position: absolute;
        left: 15px;
        transform: translateX(0);
        width: 1px;
        height: 100%;
        background-color: rgba(243, 234, 219, 0.1607843137);
    }
}
.section-process-d7 .tf-break-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.section-process-d7 .tf-break-wrap .line {
    left: 50%;
    transform: translateX(-49%);
    right: unset;
    border-color: rgba(243, 234, 219, 0.1607843137);
    border-width: 1px;
    top: 0;
    bottom: 0;
    display: block;
}
@media (max-width: 575px) {
    .section-process-d7 .tf-break-wrap .line {
        left: 15px;
    }
}
.section-process-d7 .tf-break-wrap .line span {
    left: 50%;
    right: unset;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    height: unset;
    width: 2px;
}
.section-process-d7 .tf-break-wrap .line span::after {
    width: 1.5px;
    left: 50%;
    height: 100px;
    top: calc(0% - 100px);
    transform: translateX(-50%);
    background: linear-gradient(to top, var(--primary) 0%, transparent 100%);
    animation: moveTopToBot 12s linear infinite;
    animation-delay: var(--delay, 0s);
}
.section-process-d7 .process-item-d7::after {
    content: "";
    position: absolute;
    left: 49.1%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background-color: var(--white);
    border-radius: 50%;
}
@media (max-width: 1439px) {
    .section-process-d7 .process-item-d7::after {
        left: 50%;
    }
}
@media (max-width: 575px) {
    .section-process-d7 .process-item-d7 {
        padding-left: 30px;
    }
    .section-process-d7 .process-item-d7::after {
        left: 0;
        transform: translate(-50%, 0);
    }
}
.section-process-d7 .process-item-d7.center .title {
    margin-right: 28px;
}
@media (max-width: 1439px) {
    .section-process-d7 .process-item-d7.center .title {
        margin-right: 0px;
    }
}
.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: 23px;
}
.tf-footer-d7 .wrap-footer-link {
    max-width: 484px;
    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: 30px;
}
@media (max-width: 575px) {
    .tf-footer-d7 .footer-newsletter .title {
        margin-bottom: 12px;
    }
}
.tf-footer-d7 .footer-body .wrap {
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.3019607843);
}
.tf-footer-d7 .banner-footer {
    position: relative;
    height: 500px;
}
@media (max-width: 767px) {
    .tf-footer-d7 .banner-footer {
        height: 370px;
    }
}
.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;
    letter-spacing: -0.06rem;
}
.tf-btn.style-d7-v1 i {
    font-size: 22px;
}
.tf-btn.btn-w-276 {
    max-width: 276px;
}
@media (min-width: 992px) {
    .tf-btn.btn-h-70 {
        height: 70px;
    }
}

.tf-snap-slide {
    width: 100%;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    background-color: #000;
}
.tf-snap-slide .img-mask {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    opacity: 0.1;
}
.tf-snap-slide .img-mask > img {
    width: 100%;
}
.tf-snap-slide .img-mask .section-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.tf-snap-slide .img-mask .section-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

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

.tf-snap-slider-thumbs-wrapper {
    max-width: 714px;
    max-height: 500px;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
    .tf-snap-slider-thumbs-wrapper {
        max-height: 483px;
    }
}
.tf-snap-slider-thumbs-wrapper .thumb-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 12px;
}
.tf-snap-slider-thumbs-wrapper .thumb-slide-img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}
.tf-snap-slider-thumbs-wrapper .thumb-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-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.1
    * 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 input.input-d8-type1 {
    font-size: 16px;
    line-height: 20px;
    padding: 0 0 7px;
    border: 0;
    border-bottom: 1px solid var(--gray-80);
    color: var(--white);
    background-color: transparent;
    border-radius: 0;
}
form input.input-d8-type1::placeholder {
    color: var(--gray-40);
}
form textarea.textarea-d8-type1 {
    font-size: 16px;
    line-height: 20px;
    color: var(--white);
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--gray-80);
    height: 92px;
}
form textarea.textarea-d8-type1::placeholder {
    color: var(--gray-40);
}
form.form-subscribe-mail {
    position: relative;
}
form.form-subscribe-mail .btn-submit {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 20px;
}
form.form-connect-d8 .input-infor {
    margin-bottom: 48px;
}
form.form-connect-d8 .input-infor .fieldset-input:not(:last-child) {
    margin-bottom: 32px;
}
form.form-connect-d8 .input-infor label {
    margin-bottom: 20px;
}
form.form-connect-d8 .tags-list-d8 {
    margin-bottom: 60px;
}
form.form-connect-d8 button {
    width: 100%;
    justify-content: center;
    padding: 16px;
}
@media (max-width: 991px) {
    form.form-connect-d8 .input-infor {
        margin-bottom: 24px;
    }
    form.form-connect-d8 .input-infor .fieldset-input:not(:last-child) {
        margin-bottom: 16px;
    }
    form.form-connect-d8 .input-infor label {
        margin-bottom: 10px;
    }
    form.form-connect-d8 .tags-list-d8 {
        margin-bottom: 30px;
    }
}

.dot-hover-d8 {
    position: relative;
    width: 100%;
    background: var(--white);
    overflow: hidden;
}
.dot-hover-d8.type-dark {
    background: var(--gray-90);
}
.dot-hover-d8.type-dark .dot-title {
    color: var(--white) !important;
}
.dot-hover-d8 {
    color: #5e5e5e;
}

.dot-wrap {
    position: relative;
    z-index: 5;
}

.dots-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
@media (max-width: 1199px) {
    .dots-bg::before {
        position: absolute;
        inset: 0;
        content: "";
        background-image: url(./../../demo-portfolio/images/section/page-title.png);
        background-position: center;
        background-size: cover;
        opacity: 0.2;
    }
    .dots-bg canvas {
        display: none;
    }
}

.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 .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 {
    margin-left: -333px;
    opacity: 0;
    visibility: hidden;
    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;
}
.tf-header-d8 .burger-menu.active .box-navigation {
    margin-left: 0;
    opacity: 1;
    visibility: visible;
}
.tf-header-d8 .box-nav-menu {
    display: flex;
    gap: 32px;
    padding: 27px 28px 26px;
    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 112px;
}
.tf-footer-d8 .footer-inner .heading {
    max-width: 500px;
    margin-bottom: 112px;
    letter-spacing: -0.01em;
}
.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 39px;
    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 .infiniteSlide h1 {
    color: var(--black);
}
.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);
}
.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;
    gap: 12px;
}
.heading-section-d8 .title .heading {
    letter-spacing: -0.01em;
}
.heading-section-d8.style-lg {
    position: relative;
}
.heading-section-d8.style-lg .sub-title {
    margin-bottom: 11px;
}
.heading-section-d8.style-lg .title {
    position: relative;
    padding-top: 12px;
}
.heading-section-d8.style-lg .heading {
    padding: 36px 0 36px 0;
    letter-spacing: -0.02em;
}
.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;
}
@media (max-width: 767px) {
    .heading-section-d8 .title {
        flex-direction: column;
    }
    .heading-section-d8 .title .text-end {
        text-align: start !important;
    }
    .heading-section-d8.mb-80 {
        margin-bottom: 40px;
    }
    .heading-section-d8.mb-40 {
        margin-bottom: 20px;
    }
    .heading-section-d8.mb-32 {
        margin-bottom: 16px;
    }
}

.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 {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 28px;
}
.blog-item-d8 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}
.blog-item-d8 .image: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;
}
.blog-item-d8 .image:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}
.blog-item-d8 .image:hover img {
    transform: scale(1.1);
}
.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);
}
.tf-social-d8.style-1 .social-link {
    font-size: 14px;
    color: var(--white);
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(40px);
}
.tf-social-d8.style-1 .social-link:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.section-hero-d8 {
    padding: 64px 0 40px;
    min-height: calc(100vh - 72px);
}
.section-hero-d8 .hero-top {
    display: grid;
    gap: 48px;
    padding-bottom: 76px;
}
.section-hero-d8 .hero-top .wrap-btn {
    display: flex;
    gap: 20px 34px;
    align-items: center;
    flex-wrap: wrap;
}
.section-hero-d8 .hero-top .heading {
    letter-spacing: -0.047em;
}
.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: 121px;
    background-color: var(--white);
}
.section-hero-d8 .infiniteSlide-partner_wrap .infiniteSlide {
    gap: 92px;
}
.section-hero-d8 .hero-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}
.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;
}
@media (max-width: 767px) {
    .section-hero-d8 .hero-top {
        gap: 30px;
        padding-bottom: 36px;
    }
    .section-hero-d8 .hero-top .heading br {
        display: none;
    }
    .section-hero-d8 .infiniteSlide-partner_wrap {
        margin-bottom: 50px;
    }
    .section-hero-d8 .content-left {
        max-width: unset;
    }
}

.section-about-d8 .desc {
    margin-bottom: 80px;
    letter-spacing: 0.01em;
}
.section-about-d8 .wrap-counter {
    display: flex;
    gap: 30px 20px;
}
.section-about-d8 .wrap-counter > * {
    width: 100%;
}
@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: clamp(56px, 6vw, 92px);
    line-height: clamp(56px, 6vw, 92px);
    letter-spacing: -0.03em;
    color: var(--gray-90);
}
.counter-d8 .odometer-digit:not(:first-child) {
    margin-left: -6px;
}
@media (max-width: 767px) {
    .counter-d8 {
        padding-left: 0;
        border-left: 0;
    }
    .counter-d8 .odometer-digit:not(:first-child) {
        margin-left: 0px;
    }
}

.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;
}
.tags-list-d8.type-1 {
    gap: 16px;
}
.tags-list-d8.type-1 .tags-item {
    padding: 11px 23px;
    background-color: transparent;
    border-radius: 999px;
    border: 1px solid var(--gray-80);
}

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

@media (min-width: 1440px) {
    #services-accordion {
        margin-left: -20px;
    }
}

.services-accordion-d8 {
    position: relative;
    padding-bottom: 39px;
    border-bottom: 1px solid var(--gray-80);
}
.services-accordion-d8 .accordion-action {
    display: flex;
    align-items: start;
    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);
    letter-spacing: -0.01em;
}
.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;
}
@media (max-width: 767px) {
    .services-accordion-d8 .accordion-action .number {
        width: 55px;
    }
    .services-accordion-d8 .accordion-action .right-icon {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }
    .services-accordion-d8 .services-desc {
        padding-top: 32px;
        padding-left: 0;
    }
    .services-accordion-d8 .services-desc .list-image {
        position: unset;
        margin-bottom: 16px;
    }
}

.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 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;
    padding: 4px 0;
}
.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.full .image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.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);
}
@media (max-width: 991px) {
    .choose-us-box-d8:not(.full) {
        padding: 20px 13px !important;
    }
    .choose-us-box-d8.care .content {
        padding: 20px 13px 0;
        margin-bottom: 26px;
    }
}

.hover-img-d8 .hover-image img {
    max-width: 329px;
    height: 200px;
    border-radius: 8px;
}

.section-achievements-d8 .wrap {
    display: grid;
    gap: 20px;
    margin-top: -3px;
}
.section-achievements-d8 .wrap .head {
    display: flex;
    gap: 20px;
}
.section-achievements-d8 .wrap .head > * {
    padding-bottom: 14px;
    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%;
}
@media (max-width: 991px) {
    .section-achievements-d8 .wrap .head > *:nth-child(1) {
        width: 25%;
    }
    .section-achievements-d8 .wrap .head > *:nth-child(2) {
        width: 50%;
    }
    .section-achievements-d8 .wrap .head > *:nth-child(3) {
        width: 25%;
    }
}
@media (max-width: 767px) {
    .section-achievements-d8 .wrap .head {
        display: none;
    }
}

.achievements-item-d8 {
    display: flex;
    align-items: center;
    gap: 0 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: 8px 0;
    border-bottom: 1px solid var(--gray-20);
    min-height: 92px;
    -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%;
}
@media (max-width: 991px) {
    .achievements-item-d8 .text:nth-child(1) {
        width: 25%;
    }
    .achievements-item-d8 .text:nth-child(2) {
        width: 50%;
    }
    .achievements-item-d8 .text:nth-child(3) {
        width: 25%;
    }
}
.achievements-item-d8:hover {
    background-color: var(--primary);
}
.achievements-item-d8:hover .text {
    border-color: var(--primary);
    color: var(--white) !important;
}
.achievements-item-d8:hover .text:nth-child(1) {
    padding-left: 16px;
}
.achievements-item-d8:hover .text:nth-child(3) {
    padding-right: 16px;
}
@media (max-width: 767px) {
    .achievements-item-d8 {
        flex-direction: column;
        border-bottom: 1px solid var(--gray-20);
    }
    .achievements-item-d8 .text {
        width: 100% !important;
        border: 0;
        min-height: unset;
    }
    .achievements-item-d8 .text-end {
        text-align: start !important;
    }
    .achievements-item-d8:not(:last-child) {
        margin-bottom: 24px;
    }
    .achievements-item-d8:hover .text {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.tabs-d8 {
    position: relative;
}
.tabs-d8 .list-tabs.style-1 {
    position: absolute;
    display: flex;
    z-index: 5;
    bottom: 48px;
    left: 40px;
    right: 40px;
    overflow-x: auto;
}
.tabs-d8 .list-tabs.style-1 .nav-tab-item {
    flex-grow: 1;
}
.tabs-d8 .list-tabs.style-1 .tab-btn {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.3019607843);
}
.tabs-d8 .list-tabs.style-1 .tab-btn 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;
    fill-opacity: 1;
}
.tabs-d8 .list-tabs.style-1 .tab-btn:hover, .tabs-d8 .list-tabs.style-1 .tab-btn.active {
    border-color: var(--primary);
}
.tabs-d8 .list-tabs.style-1 .tab-btn:hover svg path, .tabs-d8 .list-tabs.style-1 .tab-btn.active svg path {
    fill: var(--primary);
}
.tabs-d8 .list-tabs.style-2 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tabs-d8 .list-tabs.style-2 .tab-btn {
    display: flex;
    padding: 11px 19px;
    border: 1px solid var(--gray-20);
    border-radius: 99px;
}
.tabs-d8 .list-tabs.style-2 .tab-btn:hover, .tabs-d8 .list-tabs.style-2 .tab-btn.active {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
}
.tabs-d8 .list-tabs.style-3 {
    display: flex;
    margin-bottom: 40px;
}
.tabs-d8 .list-tabs.style-3 .tab-btn {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    padding: 0 8px 19px;
    border-bottom: 1px solid var(--gray-20);
}
.tabs-d8 .list-tabs.style-3 .tab-btn:hover, .tabs-d8 .list-tabs.style-3 .tab-btn.active {
    border-color: var(--primary);
    color: var(--gray-90);
}
.tabs-d8 .tab-testimonials-content {
    position: relative;
    display: flex;
}
.tabs-d8 .tab-testimonials-content .image {
    position: relative;
    width: 100%;
    min-height: 500px;
}
.tabs-d8 .tab-testimonials-content .image::before {
    position: absolute;
    content: "";
    inset: 0;
    background: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(32px);
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 61.72%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 61.72%, black 100%);
}
.tabs-d8 .tab-testimonials-content .image::after {
    position: absolute;
    content: "";
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.tabs-d8 .tab-testimonials-content .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tabs-d8 .tab-testimonials-content .content {
    position: absolute;
    top: 80px;
    left: 40px;
    right: 40px;
    padding-left: 26px;
    border-left: 2px solid var(--white);
    max-width: 634px;
    z-index: 3;
}
.tabs-d8 .tab-testimonials-content .content .desc {
    color: var(--white);
    margin-bottom: 40px;
}
.tabs-d8 .tab-testimonials-content .content .name {
    color: var(--white);
    margin-bottom: 4px;
}
.tabs-d8 .tab-testimonials-content .content .sub {
    color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 991px) {
    .tabs-d8 .list-tabs.style-1 {
        bottom: 15px;
        right: 10px;
        left: 10px;
    }
    .tabs-d8 .list-tabs.style-1 .tab-btn {
        padding: 18px 10px 0;
    }
    .tabs-d8 .tab-testimonials-content .content {
        top: 30px;
        left: 10px;
        right: 10px;
        padding-left: 15px;
    }
}

.box-pricing-d8 {
    position: relative;
    padding: 40px;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.box-pricing-d8.type-single {
    background-color: #F8F8F8;
}
.box-pricing-d8.type-multi .image {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.box-pricing-d8.type-multi .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.box-pricing-d8.type-multi .top {
    border-color: rgba(255, 255, 255, 0.2);
}
.box-pricing-d8.type-multi .desc {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 573px;
}
.box-pricing-d8.type-multi ul.list-check li .icon {
    background-color: var(--gray-70);
    color: var(--white);
}
.box-pricing-d8 .top {
    display: flex;
    gap: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 23px;
    border-bottom: 1px solid var(--gray-20);
    margin-bottom: 20px;
}
.box-pricing-d8 .top .heading {
    letter-spacing: 0.01em;
}
.box-pricing-d8 .top .popular {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.1215686275);
    border-radius: 999px;
}
.box-pricing-d8 .text {
    margin-bottom: 40px;
    letter-spacing: 0.01em;
}
.box-pricing-d8 .desc {
    margin-bottom: 60px;
    flex-grow: 1;
}
.box-pricing-d8 .price {
    display: flex;
    align-items: end;
    margin-bottom: 24px;
}
.box-pricing-d8 .price .number {
    font-weight: 500;
    font-size: clamp(36px, 5vw, 72px);
    line-height: clamp(36px, 5vw, 72px);
    letter-spacing: -0.01em;
}
.box-pricing-d8 .price .per {
    font-size: 16px;
    line-height: 30px;
}
.box-pricing-d8 .btn-choose {
    display: flex;
    justify-content: space-between;
    padding: 16px 31px;
}
.box-pricing-d8 .btn-choose .icon {
    font-size: 28px;
}
@media (max-width: 1199px) {
    .box-pricing-d8 {
        padding: 28px 16px;
    }
}

ul.list-check {
    display: grid;
    gap: 20px;
}
ul.list-check li {
    display: flex;
    gap: 12px;
    align-items: center;
}
ul.list-check li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--gray-20);
    font-size: 10px;
    color: var(--black);
    border-radius: 50%;
}

.faq-accordion-d8 {
    padding: 24px 32px 23px 0;
    border-bottom: 1px solid var(--gray-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;
}
.faq-accordion-d8 .accordion-action {
    display: flex;
    padding: 0;
    margin-bottom: 0;
}
.faq-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-40);
}
.faq-accordion-d8 .accordion-action .number {
    width: 110px;
    -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-40);
}
.faq-accordion-d8 .accordion-action .right-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    color: var(--gray-40);
    -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-d8 .accordion-action:not(.collapsed) .number {
    color: var(--primary);
}
.faq-accordion-d8 .accordion-action:not(.collapsed) .heading {
    color: var(--gray-90);
}
.faq-accordion-d8 .accordion-action:not(.collapsed) .right-icon {
    color: var(--primary);
    transform: rotate(45deg);
    font-size: 24px;
}
.faq-accordion-d8 .faq-desc {
    padding-top: 20px;
    padding-left: 110px;
}
.faq-accordion-d8.active {
    border-color: var(--primary);
}
@media (max-width: 767px) {
    .faq-accordion-d8 {
        padding: 12px 0;
    }
    .faq-accordion-d8 .accordion-action .number {
        width: 60px;
    }
    .faq-accordion-d8 .faq-desc {
        padding-left: 60px;
    }
}

.step-wrap-d8 {
    padding: 38px 0 122px;
}
@media (max-width: 991px) {
    .step-wrap-d8 {
        padding: 30px 0 62px;
    }
}

.step-item-d8 {
    position: relative;
    padding-left: 7px;
    min-height: 614px;
    height: 100%;
}
.step-item-d8 .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    font-size: 10px;
    line-height: 12px;
    border-radius: 4px;
    background-color: var(--gray-10);
    margin-bottom: 48px;
}
.step-item-d8 .line {
    position: absolute;
    width: 1px;
    bottom: 0;
    top: 28px;
    left: 0;
    background-color: var(--gray-20);
}
@media (max-width: 991px) {
    .step-item-d8 {
        padding-left: 4px;
        min-height: unset;
    }
}
@media (max-width: 767px) {
    .step-item-d8 .number {
        margin-bottom: 16px;
    }
}

.step-box-d8 {
    display: grid;
    border-radius: 12px;
    border: 1px solid var(--gray-10);
    padding: 23px 19px 26px 19px;
    background-color: var(--white);
}
.step-box-d8 .step {
    color: var(--gray-50);
    margin-bottom: 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;
}
.step-box-d8 .image {
    width: 176px;
    height: 0px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    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;
    transition-delay: 0.5s;
}
.step-box-d8 .title {
    display: flex;
    color: var(--gray-50);
    letter-spacing: 0.01em;
    margin-bottom: 0px;
    -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;
}
.step-box-d8 .text {
    height: 0;
    color: var(--gray-60);
    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;
    transition-delay: 0.3s;
}
.step-box-d8.active {
    margin-top: 0 !important;
}
.step-box-d8.active .step {
    margin-bottom: 32px;
}
.step-box-d8.active .image {
    height: 116px;
    margin-bottom: 32px;
    opacity: 1;
    visibility: visible;
}
.step-box-d8.active .title {
    color: var(--black);
    margin-bottom: 4px;
}
.step-box-d8.active .text {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.step-box-d8.step-1 {
    margin-top: 122px;
    -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;
}
.step-box-d8.step-2 {
    margin-top: 226px;
    -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;
}
.step-box-d8.step-3 {
    margin-top: 330px;
    -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;
}
.step-box-d8.step-4 {
    margin-top: 434px;
    -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: 991px) {
    .step-box-d8 {
        padding: 15px 10px;
    }
    .step-box-d8.active .step {
        margin-bottom: 12px;
    }
    .step-box-d8.active .image {
        margin-bottom: 12px;
    }
}
@media (max-width: 767px) {
    .step-box-d8 {
        margin-top: 0 !important;
        transform: translateY(10px);
        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;
    }
    .step-box-d8 .step {
        margin-bottom: 16px;
    }
    .step-box-d8 .image {
        height: auto;
        margin-bottom: 16px;
        opacity: 1;
        visibility: visible;
    }
    .step-box-d8 .title {
        color: var(--black);
        margin-bottom: 4px;
    }
    .step-box-d8 .text {
        opacity: 1;
        visibility: visible;
        height: auto;
    }
    .step-box-d8.up {
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}

.hero__reel-wrap {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 329px;
    height: 220px;
    pointer-events: none;
    transform-origin: bottom right;
    z-index: 13;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background-color: var(--white);
    padding: 7px;
    display: flex;
}
.hero__reel-wrap .hero__reel {
    width: 100%;
}
.hero__reel-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
@media (max-width: 767px) {
    .hero__reel-wrap {
        position: unset;
        width: unset;
        height: unset;
    }
}

.scroll-area {
    height: 90vh;
}
@media (max-width: 767px) {
    .scroll-area {
        display: none;
    }
}

.team-d8-item {
    position: relative;
}
.team-d8-item .image {
    border-radius: 12px;
    overflow: hidden;
}
.team-d8-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-d8-item .content {
    position: absolute;
    bottom: 36px;
    left: 10px;
    right: 10px;
}
.team-d8-item .name {
    color: var(--white);
    margin-bottom: 4px;
}
.team-d8-item .sub {
    color: rgba(255, 255, 255, 0.8);
}
.team-d8-item .tf-social-d8 {
    margin-top: -36px;
    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;
}
.team-d8-item:hover .tf-social-d8 {
    margin-top: 16px;
    opacity: 1;
    visibility: visible;
}
@media (max-width: 991px) {
    .team-d8-item .content {
        bottom: 12px;
    }
}

.image-full-d8 {
    overflow: hidden;
}
.image-full-d8 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-over-view-d8 .desc {
    margin-bottom: 60px;
    letter-spacing: 0.01em;
}
.section-over-view-d8 .infor {
    display: grid;
    gap: 28px;
    max-width: 525px;
}
.section-over-view-d8 .infor .item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
}

.section-case-study-d8 .desc {
    margin-bottom: 28px;
    letter-spacing: 0.01em;
}
.section-case-study-d8 .text {
    margin-bottom: 120px;
    max-width: 525px;
}
@media (max-width: 1199px) {
    .section-case-study-d8 .text {
        margin-bottom: 30px;
    }
}

.section-contact-d8 .col-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    height: 100%;
}
.section-contact-d8 .center {
    max-width: 321px;
}
.section-contact-d8 .center .item .icon {
    font-size: 24px;
    color: var(--primary);
}
.section-contact-d8 .center .item:not(:last-child) {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray-20);
    margin-bottom: 16px;
}
.section-contact-d8 .box-team-d8 {
    max-width: 433px;
}
@media (max-width: 767px) {
    .section-contact-d8 .col-left {
        padding-bottom: 30px;
    }
}

.box-team-d8 {
    padding: 28px;
    background-color: #F8F8F8;
    border-radius: 24px;
}
.box-team-d8 .our-team {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-20);
    margin-bottom: 20px;
}
.box-team-d8 .list-img {
    display: flex;
    align-items: center;
}
.box-team-d8 .list-img .item {
    width: 48px;
    height: 48px;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    overflow: hidden;
}
.box-team-d8 .list-img .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-team-d8 .list-img .item:not(:last-child) {
    margin-right: -14px;
}
.box-team-d8 .avaiable {
    display: flex;
    gap: 8px;
    align-items: center;
}
.box-team-d8 .avaiable .dot {
    display: flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
}
@media (max-width: 991px) {
    .box-team-d8 {
        padding: 18px;
    }
}

.connect-box-d8 {
    padding: 44px;
    border-radius: 24px;
    background-image: url(./../../demo-portfolio/images/section/contact-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (max-width: 991px) {
    .connect-box-d8 {
        padding: 28px 18px;
    }
}

/* ---------------------------------------------------------
    * Name: Amoda - The Multipurpose HTML5 Template
    * Version: 1.0.1
    * 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 --------- */
.container-d10 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 12px;
    padding-left: 12px;
    width: 1336px;
    max-width: 100%;
}
.container-d10 .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}
.container-d10 .row > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

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

.tf-header-d10 {
    padding-top: 16px;
}
.tf-header-d10 .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;
}
@media (max-width: 991px) {
    .tf-header-d10 .header-inner .box-navigation {
        display: none;
    }
}
.tf-header-d10.header-fixed {
    background-color: transparent;
}
.tf-header-d10 .d10-logo {
    max-width: 155px;
}
.tf-header-d10 .box-nav-menu {
    gap: 60px;
}
@media (min-width: 1200px) {
    .tf-header-d10 .box-nav-menu {
        gap: 0;
    }
}
.tf-header-d10 .box-nav-menu .item-link {
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    color: var(--grey-600);
}
@media (min-width: 1200px) {
    .tf-header-d10 .box-nav-menu .item-link {
        min-width: 112px;
        height: 44px;
    }
}
.tf-header-d10 .box-nav-menu .item-link.active {
    color: var(--primary-600);
}
@media (max-width: 991px) {
    .tf-header-d10 .box-navigation {
        display: none;
    }
}
@media (max-width: 575px) {
    .tf-header-d10 .tf-btn-d10-cart,
    .tf-header-d10 .tf-btn-d10 {
        display: none;
    }
}

.btn-mobile-menu-d10 {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.btn-mobile-menu-d10 span {
    display: block;
    width: 19.5px;
    height: 2px;
    background: var(--white);
}

.cv-mb-d10 {
    padding: 6px;
}
.cv-mb-d10 .canvas-header {
    padding: 4px 4px 4px 12px;
    border-radius: 10px 10px 0 0;
    background-color: var(--neu-200);
}
.cv-mb-d10 .canvas-header .icon-close-popup {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-600);
    border-radius: 8px;
}
.cv-mb-d10 .canvas-header .icon-close-popup i {
    color: var(--white);
}
.cv-mb-d10 .canvas-body {
    background-color: var(--neu-200);
    padding: 8px 24px;
}
.cv-mb-d10 .canvas-bottom {
    background-color: var(--neu-200);
    border-radius: 0 0 10px 10px;
}
.cv-mb-d10 .mb-menu-link {
    font-size: 28px;
    line-height: 36px;
    color: var(--neu-900);
    text-align: center;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px !important;
}
.cv-mb-d10 .mb-menu-link.active {
    color: var(--primary-600);
}
.cv-mb-d10 .mb-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cv-mb-d10 .mb-social a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--neu-400);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.cv-mb-d10 .mb-social a:hover {
    background: var(--gray-20);
}
.cv-mb-d10 .canvas-bottom {
    border-top: 1px solid var(--neu-400);
    box-shadow: unset;
    padding: 20px;
}
.cv-mb-d10 .canvas-bottom .tf-list {
    gap: 32px;
}

.tf-btn-d10 {
    padding: 4px 4px 4px 16px;
    border-radius: 8px;
    background-color: var(--primary-600);
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: max-content;
}
.tf-btn-d10 .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;
}
.tf-btn-d10 .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;
}
.tf-btn-d10 .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;
}
.tf-btn-d10 .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;
}
.tf-btn-d10.style-noarrow {
    padding: 12px 24px;
}
.tf-btn-d10.style-bg-white-30 {
    background-color: var(--white-30);
}
.tf-btn-d10.style-bg-white-30 .text_btn {
    color: var(--white);
}
.tf-btn-d10.style-bg-neu-900 {
    background-color: var(--neu-900);
}
.tf-btn-d10.style-bg-neu-900 .text_btn {
    color: var(--white);
}
.tf-btn-d10.style-bg-neu-900 .icon {
    background-color: var(--white);
}
.tf-btn-d10.style-bg-neu-900 .icon i {
    color: var(--neu-900);
}
.tf-btn-d10.style-bg-27 {
    background-color: var(--bg-27);
}
.tf-btn-d10.style-bg-27 .text_btn {
    color: var(--neu-900);
}
@media (min-width: 576px) {
    .tf-btn-d10:hover {
        background-color: var(--white);
    }
    .tf-btn-d10:hover .icon {
        background-color: var(--primary-600);
    }
    .tf-btn-d10:hover .icon i {
        color: var(--white) !important;
    }
    .tf-btn-d10:hover .icon::after {
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
    }
    .tf-btn-d10:hover::after {
        transform: scale(10);
    }
    .tf-btn-d10:hover .text_btn {
        color: var(--black);
    }
}
@media (min-width: 576px) {
    .tf-btn-d10.hover-bg-primay-600:hover {
        background-color: var(--primary-600);
    }
    .tf-btn-d10.hover-bg-primay-600:hover .text_btn {
        color: var(--white);
    }
    .tf-btn-d10.hover-bg-primay-600:hover .icon::after {
        background-color: var(--neu-900);
    }
    .tf-btn-d10.hover-bg-primay-600:hover .icon i {
        color: var(--white);
    }
}
.tf-btn-d10.hover-bg-neu-900:hover {
    background-color: var(--neu-900);
}
.tf-btn-d10.hover-bg-neu-900:hover .text_btn {
    color: var(--white);
}
.tf-btn-d10.hover-bg-neu-900:hover .icon::after {
    background-color: var(--primary-600);
}
.tf-btn-d10.hover-bg-neu-900:hover .icon i {
    color: var(--white);
}
.tf-btn-d10.style-bg-white {
    background-color: var(--white);
}
.tf-btn-d10.style-bg-white .text_btn {
    color: var(--neu-900);
}
.tf-btn-d10.style-bg-white .icon {
    background-color: var(--neu-900);
}
.tf-btn-d10.style-bg-white .icon i {
    color: var(--white);
}
.tf-btn-d10.style-bg-white:hover {
    background-color: var(--neu-900);
}
.tf-btn-d10.style-bg-white:hover .text_btn {
    color: var(--white);
}
.tf-btn-d10.w-full {
    max-width: 100%;
}

.tf-btn-d10-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
}
.tf-btn-d10-cart i {
    color: var(--neu-900);
    font-size: 20px;
}
.tf-btn-d10-cart .text_btn {
    color: var(--neu-900);
}
.tf-btn-d10-cart .text_btn span {
    color: var(--neu-500);
}

.section-page-title-d10 {
    text-align: center;
}
.section-page-title-d10 .sub-title {
    max-width: 323px;
    margin-left: auto;
    margin-right: auto;
}
.section-page-title-d10 .title {
    margin-bottom: 29px;
    color: var(--neu-900);
    letter-spacing: -1px;
}
.section-page-title-d10 .title span {
    color: var(--primary-600);
}
.section-page-title-d10 .tag-badget-d10 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}
.section-page-title-d10.style-2 .tag-badget-d10 {
    margin-left: 0;
    margin-bottom: 22px;
}
.section-page-title-d10.style-2 .page-title-content {
    text-align: left;
}

.tag-badget-d10 {
    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;
}
.tag-badget-d10 .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--primary-700);
    border-radius: 50%;
}
.tag-badget-d10.style-white {
    background-color: var(--white-20);
    border: var(--white-40);
    color: var(--white);
}
.tag-badget-d10.style-white .dot {
    background-color: var(--white);
}

.banner-contact-d10 {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--d10-bg-4);
    border-radius: 16px;
    overflow: hidden;
}
.banner-contact-d10 .image-item {
    position: absolute;
}
.banner-contact-d10 .image-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.banner-contact-d10 .image-item.img-1 {
    top: 0;
    right: 0;
}
.banner-contact-d10 .image-item.img-2 {
    bottom: 0;
    left: 0;
}
.banner-contact-d10 .tag-badget-d10 {
    margin-left: auto;
    margin-right: auto;
}
.banner-contact-d10 .title {
    color: var(--white);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 44px;
    letter-spacing: -1px;
}
.banner-contact-d10 .title span {
    color: var(--primary-400);
}
@media (min-width: 992px) {
    .banner-contact-d10 {
        padding-left: 24px;
    }
}

.list-tab-btn-d10 {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--neu-200);
}
.list-tab-btn-d10 .tf-tab-btn {
    padding: 14px 24px;
    border: 0;
    color: var(--neu-600);
    position: relative;
    background-color: transparent;
}
.list-tab-btn-d10 .tf-tab-btn:hover {
    color: var(--primary-600);
}
.list-tab-btn-d10 .tf-tab-btn.active {
    color: var(--primary-600);
}
@media (max-width: 575px) {
    .list-tab-btn-d10 .tf-tab-btn {
        padding: 10px;
    }
}
.list-tab-btn-d10 .indicator {
    top: auto;
    bottom: -1px;
    border-radius: 0;
    height: 2px;
    background: var(--primary-600);
}

.article-blog-d10 .image {
    border-radius: 12px;
    margin-bottom: 20px;
    width: 100%;
}
.article-blog-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.article-blog-d10 .meta-tag {
    margin-bottom: 12px;
}
.article-blog-d10 .meta-tag a {
    padding: 6px 16px;
    background-color: var(--d10-bg-1);
    color: var(--neu-900);
    backdrop-filter: blur(12px);
    border-radius: 8px;
}
.article-blog-d10 .meta-tag a:hover {
    background-color: var(--primary-600);
    color: var(--white);
}
.article-blog-d10 .name-blog {
    color: var(--neu-900);
}
.article-blog-d10 .name-blog:hover {
    color: var(--primary-600);
}
.article-blog-d10.style-small .meta-tag {
    margin-bottom: 9px;
}
.article-blog-d10.style-small .meta-tag a {
    padding: 9px 12px;
}

.footer-d10 .d10-logo-footer {
    max-width: 169px;
    width: 100%;
}
.footer-d10 .footer-top {
    padding-top: 112px;
    padding-bottom: 82px;
}
.footer-d10 .footer-top .footer-link-wrap {
    column-gap: 20px;
    row-gap: 27px;
}
@media (min-width: 1440px) {
    .footer-d10 .footer-top {
        padding-right: 111px;
    }
}
@media (max-width: 991px) {
    .footer-d10 .footer-top {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
.footer-d10 .footer-top .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 130px;
}
@media (min-width: 1200px) {
    .footer-d10 .footer-top .footer-content {
        gap: 276.61px;
        justify-content: start;
    }
}
@media (max-width: 991px) {
    .footer-d10 .footer-top .footer-content {
        gap: 30px;
        flex-direction: column;
    }
}
@media (min-width: 1440px) {
    .footer-d10 .footer-sub-form {
        max-width: 310px;
    }
}
@media (min-width: 576px) {
    .footer-d10 .footer-col-block {
        width: max-content !important;
    }
}
.footer-d10 .footer-col-block .footer-heading {
    color: var(--neu-900);
}
.footer-d10 .footer-col-block .footer-heading.footer-heading-d10::after, .footer-d10 .footer-col-block .footer-heading.footer-heading-d10::before {
    background-color: var(--neu-900);
}
.footer-d10 .footer-col-block .footer-menu-list {
    margin-top: 12px;
}
@media (min-width: 576px) {
    .footer-d10 .footer-col-block .footer-menu-list {
        margin-top: 40px;
    }
}
.footer-d10 .footer-col-block .link-2 {
    color: var(--neu-600) !important;
}
.footer-d10 .footer-col-block .link-2:hover {
    color: var(--primary-600) !important;
}
.footer-d10 .footer-col-block .title {
    color: var(--neu-900);
}
.footer-d10 .footer-col-block .text-form-sub {
    color: var(--neu-600);
}
.footer-d10 .footer-col-block .tf-collapse-content {
    margin-bottom: 0;
}
.footer-d10 .footer-bottom {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid var(--neu-300);
}
.footer-d10 .footer-bottom .footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
@media (min-width: 992px) {
    .footer-d10 .footer-bottom .footer-content .midder-content {
        position: absolute;
        left: 51.5%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@media (max-width: 767px) {
    .footer-d10 .footer-bottom .footer-content {
        flex-wrap: wrap;
        gap: 16px;
    }
    .footer-d10 .footer-bottom .footer-content .left-content {
        order: 1;
    }
    .footer-d10 .footer-bottom .footer-content .right-content {
        order: 2;
    }
    .footer-d10 .footer-bottom .footer-content .midder-content {
        text-align: center;
        order: 3;
        width: 100%;
    }
}
@media (max-width: 575px) {
    .footer-d10 .footer-bottom .footer-content {
        flex-direction: column;
    }
    .footer-d10 .footer-bottom .footer-content .left-content {
        order: 1;
    }
    .footer-d10 .footer-bottom .footer-content .right-content {
        order: 3;
    }
    .footer-d10 .footer-bottom .footer-content .midder-content {
        order: 2;
    }
}
.footer-d10 .footer-bottom .left-content a {
    color: var(--neu-600) !important;
}

.form-sub-d10 fieldset {
    position: relative;
}
.form-sub-d10 fieldset .btn-submit-d10 {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}
.form-sub-d10 input {
    padding: 18px 50px 18px 16px !important;
    background-color: var(--neu-300) !important;
    border-color: transparent !important;
    color: var(--neu-900) !important;
    font-size: 16px !important;
    line-height: 20px !important;
}
.form-sub-d10 input::placeholder {
    font-size: 16px !important;
    line-height: 20px !important;
    color: var(--d10-color-text) !important;
}

.btn-submit-d10 {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-600);
    border-radius: 8px;
}
.btn-submit-d10 i {
    color: var(--white);
}

.btn-arrow-to-d10p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neu-600);
}
.btn-arrow-to-d10p i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--neu-600);
}
.btn-arrow-to-d10p .icon-arrow-bottom {
    transform: rotate(180deg);
}

.user-d10 {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-d10 .image {
    max-width: 40px;
    border-radius: 50%;
}
.user-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.user-d10 .name {
    color: var(--neu-800);
}

.section-blog-post-d10 .d10-meta-blog {
    padding-top: 30px;
    padding-bottom: 10px;
    border-top: 1px solid var(--neu-200);
}
.section-blog-post-d10 .text-section {
    color: var(--neu-600);
}
.section-blog-post-d10 .content-section .title {
    color: var(--neu-900);
    letter-spacing: -1px;
}
.section-blog-post-d10 .content-section .title.text-body-1 {
    letter-spacing: 0;
}
.section-blog-post-d10 .content-section .text {
    color: var(--neu-600);
}
.section-blog-post-d10 .content-section .content .text {
    margin-bottom: 3px;
}
.section-blog-post-d10 .content-section .content ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 4px;
}
.section-blog-post-d10 .content-section .content ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--neu-700);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.section-blog-post-d10 .content-section .content ul li span {
    color: var(--neu-700);
}
.section-blog-post-d10 .image-post {
    max-width: 100%;
}
.section-blog-post-d10 .image-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-blog-post-d10 .image-post.img-1 {
    border-radius: 24px;
}
.section-blog-post-d10 .image-post.img-2 {
    border-radius: 20px;
}

.wg-quote-d10 {
    background-color: var(--neu-200);
    padding: 37px 40px 40px;
    border-radius: 20px;
}
.wg-quote-d10 .wg-quote-content {
    padding-left: 29px;
    border-left: 8px solid var(--primary-600);
    border-radius: 8px;
}
.wg-quote-d10 .wg-quote-content .text-quote {
    color: var(--neu-900);
    margin-bottom: 32px;
}
.wg-quote-d10 .user-quote {
    padding-top: 20px;
    border-top: 1px solid var(--neu-400);
}
.wg-quote-d10 .user-quote .name {
    margin-bottom: 4px;
    color: var(--neu-900);
}
.wg-quote-d10 .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);
}

.single-meta-bottom-d10 {
    padding-top: 32px;
    border-top: 1px solid var(--gray-200);
}
.single-meta-bottom-d10 p {
    color: var(--neu-900);
}

.heading-section-d10 {
    position: relative;
}
.heading-section-d10 .title {
    color: var(--neu-900);
    letter-spacing: -1px;
}
.heading-section-d10 .title span {
    color: var(--primary-400);
}
.heading-section-d10 .list-btn {
    padding-right: 17px;
}
.heading-section-d10 .list-btn .nav-btn i {
    font-size: 26px;
}
.heading-section-d10 .list-btn .nav-btn.swiper-button-disabled {
    opacity: 50%;
}
@media (min-width: 992px) {
    .heading-section-d10 h5 {
        letter-spacing: -2px !important;
    }
}
.heading-section-d10.style-white .title {
    color: var(--white);
}
.heading-section-d10.style-white .title span {
    color: var(--primary-600);
}
.heading-section-d10.style-white .tag-badget-d10 {
    background-color: var(--white-20);
    border: var(--white-40);
    color: var(--white);
}
.heading-section-d10.style-white .tag-badget-d10 .dot {
    background-color: var(--white);
}
.heading-section-d10.style-white .sub-title {
    color: var(--white-60);
}
.heading-section-d10.style-center {
    text-align: center;
}
.heading-section-d10.style-center .tag-badget-d10 {
    margin-left: auto;
    margin-right: auto;
}

.section-blog-d10 .heading-section-d10 {
    margin-left: 12px;
    margin-right: 12px;
}
@media (min-width: 1200px) {
    .section-blog-d10 .heading-section-d10 {
        margin-left: 64px;
        margin-right: 64px;
    }
}
.section-blog-d10 .d10-sw-blog {
    margin-left: 12px;
    margin-right: 12px;
}
@media (min-width: 1200px) {
    .section-blog-d10 .d10-sw-blog {
        margin-left: 64px;
        margin-right: 0;
    }
}

.page-title-d10 {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.page-title-d10 .page-title-content {
    max-width: 490px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: auto;
    margin-bottom: auto;
}
.page-title-d10 .tag-badget-d10 {
    margin-bottom: 8px;
    padding-left: 11px;
    padding-right: 11px;
}
.page-title-d10 .title {
    color: var(--neu-900);
    margin-bottom: 17px;
    letter-spacing: -1px;
}
@media (min-width: 992px) {
    .page-title-d10 .title {
        line-height: 73px;
    }
}
.page-title-d10 .sub-title {
    color: var(--neu-600);
    margin-bottom: 42px;
}
.page-title-d10 .image {
    border-radius: 16px;
}
@media (min-width: 992px) {
    .page-title-d10 .image {
        max-width: 755px;
    }
}
.page-title-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
@media (max-width: 991px) {
    .page-title-d10 {
        flex-direction: column;
        gap: 0;
    }
    .page-title-d10 .page-title-content {
        max-width: 100%;
    }
    .page-title-d10 .image {
        height: 400px;
    }
    .page-title-d10 .sub-title {
        margin-bottom: 21px;
    }
}

.span-img {
    position: relative;
    max-width: 187px;
    display: inline-block;
    max-width: 187px;
    width: 100%;
    height: 56px;
    background-color: var(--d10-bg-3);
    border-radius: 999px;
}
.span-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 0;
}
@media (max-width: 991px) {
    .span-img {
        display: none;
    }
}

.key-item-d10 {
    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;
}
.key-item-d10 .img-bg-2,
.key-item-d10 .img-bg {
    position: absolute;
    top: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.key-item-d10 .img-bg-2 img,
.key-item-d10 .img-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.key-item-d10 .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.key-item-d10.key-item-2 {
    padding: 0;
}
.key-item-d10.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;
}
.key-item-d10.key-item-3 .title {
    font-size: 32px;
    line-height: 36px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 32px;
}
.key-item-d10.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) {
    .key-item-d10.key-item-1 .image-item {
        max-width: 80%;
    }
}

.seciton-key-features-d10 .seciton-key-content {
    position: relative;
    padding-top: 67px;
    display: flex;
    gap: 27px;
}
.seciton-key-features-d10 .section-content {
    margin-top: auto;
    margin-bottom: auto;
    max-width: 419px;
    width: 100%;
}
@media (max-width: 767px) {
    .seciton-key-features-d10 .seciton-key-content .section-content {
        max-width: 40%;
    }
    .seciton-key-features-d10 .seciton-key-content .sw-key-features-d10 {
        max-width: 60%;
    }
}
@media (max-width: 575px) {
    .seciton-key-features-d10 .seciton-key-content {
        flex-direction: column;
        padding-top: 0;
    }
    .seciton-key-features-d10 .seciton-key-content .section-content,
    .seciton-key-features-d10 .seciton-key-content .sw-key-features-d10 {
        max-width: 100%;
    }
    .seciton-key-features-d10 .seciton-key-content .sw-key-features-d10 {
        position: relative;
        padding-top: 30px;
    }
}

.sw-key-features-d10 {
    height: 350px;
    position: unset;
}
.sw-key-features-d10 .key-features-pagination {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
@media (min-width: 1200px) {
    .sw-key-features-d10 {
        height: 494px;
    }
    .sw-key-features-d10 .swiper-wrapper {
        align-items: center;
    }
    .sw-key-features-d10 .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;
    }
    .sw-key-features-d10 .swiper-slide .key-item-d10 {
        -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;
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .img-bg {
        display: none;
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .key-item-d10 {
        width: 334px !important;
        height: 312px;
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .key-item-d10.key-item-3 .logo {
        top: 20px;
        right: 17px;
        max-width: 95px;
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .key-item-d10.key-item-3 .item-content {
        bottom: 32px;
        left: 27px;
        transform: translateY(85px);
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .key-item-d10.key-item-3 .title {
        font-size: 24px;
        line-height: 120%;
    }
    .sw-key-features-d10 .swiper-slide:not(.swiper-slide-active) .key-item-d10.key-item-3 .tf-btn-d10 {
        opacity: 0;
        visibility: hidden;
    }
}

@media (min-width: 1200px) {
    .sw-fix-scroll .swiper-slide {
        height: auto;
    }
}
@media (max-width: 1199px) {
    .sw-fix-scroll .key-item-d10 {
        height: 100%;
    }
}

@media (min-width: 1200px) {
    .section-fix-scroll {
        height: 1815px;
    }
    .section-fix-scroll .sticky-wrap {
        position: sticky;
        top: 215px;
        display: flex;
        align-items: center;
    }
}

.infiniteslide-d10 {
    position: relative;
    width: 100%;
    mask-image: linear-gradient(90deg, #000000 50.34%, rgba(0, 0, 0, 0) 100%);
    mask-mode: alpha;
}
.infiniteslide-d10 .item-brand {
    padding-left: 82px;
}
.infiniteslide-d10 .item-brand img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media (min-width: 1200px) {
    .infiniteslide-d10 {
        max-width: 867px;
    }
}

.section-integration-d10 .section-integration-content {
    padding-top: 68px;
    padding-bottom: 12px;
    border-top: 1px solid var(--neu-300);
}
.section-integration-d10 .section-integration-content .text-section {
    margin-bottom: 24px;
}
@media (max-width: 991px) {
    .section-integration-d10 .section-integration-content .text-section br {
        display: none;
    }
}
@media (min-width: 1200px) {
    .section-integration-d10 .section-integration-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .section-integration-d10 .section-integration-content .text-section {
        margin-bottom: 0;
    }
}

.section-video-d10 .financial-video {
    max-height: 487px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 24px;
}
.section-video-d10 .financial-video video {
    border-radius: 24px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-video-d10 .section-video-content {
    padding-top: 39px;
    padding-bottom: 23px;
    border-top: 1px solid var(--neu-300);
    border-bottom: 1px solid var(--neu-300);
}
.section-video-d10 .right-content .bottom-content p {
    display: flex;
    gap: 5px;
}
.section-video-d10 .right-content .bottom-content span {
    color: var(--neu-700);
}
.section-video-d10 .right-content .bottom-content .line {
    background-color: var(--neu-900);
    width: 0.5px;
    opacity: 50%;
}
@media (min-width: 992px) {
    .section-video-d10 .right-content {
        padding-right: 158px;
        margin-top: -4px;
    }
}
.section-video-d10 .tf-btn-d10-arrow-2 span {
    letter-spacing: -0.6px;
    text-decoration: underline;
}
@media (max-width: 991px) {
    .section-video-d10.flat-spacing-d10-1 {
        padding-bottom: 0;
    }
}

.tf-btn-d10-arrow-2 {
    display: flex;
    align-items: center;
    gap: 16px;
}
.tf-btn-d10-arrow-2 span {
    color: var(--neu-700);
}
.tf-btn-d10-arrow-2 i {
    font-size: 22px;
    color: var(--neu-700);
}

.rating-d10 {
    display: flex;
    gap: 4px;
    align-items: center;
}
.rating-d10 i {
    color: var(--d10-yelow);
    font-size: 20px;
}

.box-benefit-item-d10 {
    position: relative;
    border-radius: 16px;
}
@media (min-width: 576px) {
    .box-benefit-item-d10 {
        max-width: 429px;
        width: 100%;
    }
}
.box-benefit-item-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-benefit-item-d10 .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}
.box-benefit-item-d10 .img-bg img {
    border-radius: 16px;
    height: 100% !important;
}
.box-benefit-item-d10 .box-content {
    padding: 192px 24px 26px 24px;
    position: relative;
    z-index: 2;
}
.box-benefit-item-d10 .box-content .sub-title {
    color: var(--d10-color-text);
}
.box-benefit-item-d10 .box-content .title {
    color: var(--neu-900);
}
@media (max-width: 991px) {
    .box-benefit-item-d10 .box-content .title br {
        display: none;
    }
}
.box-benefit-item-d10.style-2 {
    background-color: var(--neu-200);
    overflow: hidden;
}
.box-benefit-item-d10.style-2 .img-absolute {
    position: absolute;
    bottom: 2px;
    right: 0;
    width: 100%;
    height: 100%;
}
.box-benefit-item-d10.style-2 .img-absolute img {
    height: 100%;
}
.box-benefit-item-d10.style-2 .box-content {
    padding: 0;
}
.box-benefit-item-d10.style-2 .title {
    padding: 27px 24px 229px;
    text-align: end;
}
.box-benefit-item-d10.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) {
    .box-benefit-item-d10.style-2 {
        width: 422px;
    }
}
@media (max-width: 575px) {
    .box-benefit-item-d10.style-2 .big-number {
        display: none;
    }
}

.box-user-benefit-d10 {
    display: flex;
    gap: 20px;
    background-color: var(--neu-200);
    border-radius: 16px;
    padding: 24px 33px 29px 24px;
    max-width: 429px;
}
.box-user-benefit-d10 .image {
    max-width: 120px;
    border-radius: 12px;
}
.box-user-benefit-d10 .image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}
.box-user-benefit-d10 .content-box {
    max-width: calc(100% - 140px);
}
.box-user-benefit-d10 .content-box .desc {
    margin-bottom: 85px;
}
.box-user-benefit-d10 .content-box .name-user .name {
    color: var(--neu-900);
    margin-bottom: 4px;
}
.box-user-benefit-d10 .content-box .name-user .sub-name {
    color: var(--neu-500);
}
@media (max-width: 575px) {
    .box-user-benefit-d10 {
        flex-direction: column;
        max-width: 320px;
        padding: 15px;
    }
    .box-user-benefit-d10 .content-box {
        max-width: 100%;
    }
    .box-user-benefit-d10 .desc {
        margin-bottom: 20px !important;
    }
}

.box-chart-d10 {
    max-width: 294px;
    padding: 34px;
    background-color: var(--d10-bg-4);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.box-chart-d10 .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);
}
@media (max-width: 575px) {
    .box-chart-d10 .box-content {
        padding: 15px;
    }
}
.box-chart-d10 .top-box {
    margin-bottom: 46px;
    display: flex;
    justify-content: space-between;
}
.box-chart-d10.style-2 {
    background-color: var(--d10-bg-5);
    max-width: 310px;
    padding-left: 46px;
    padding-right: 46px;
}
.box-chart-d10.style-2 .box-content {
    padding: 0;
}
.box-chart-d10.style-2 .box-content .img-content {
    border-radius: 16.8px;
}
@media (max-width: 575px) {
    .box-chart-d10.style-2 {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.box-chart-d10.style-3 {
    padding: 50px 42px 56px 25px;
}
@media (max-width: 575px) {
    .box-chart-d10.style-3 {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.box-chart-d10.style-3 .chart {
    position: relative;
}
.box-chart-d10.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);
}
.box-chart-d10.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;
}

.sw-benefit-d10 {
    margin-left: 12px;
    margin-right: 12px;
}
@media (min-width: 1200px) {
    .sw-benefit-d10 {
        margin-left: 64px;
        margin-right: 0;
    }
}
.sw-benefit-d10 .swiper-slide {
    width: auto !important;
}

@media (max-width: 767px) {
    .seciton-benefit-d10 .seciton-benefit-top {
        flex-direction: column;
        align-items: start !important;
    }
}
@media (min-width: 1200px) {
    .seciton-benefit-d10 .seciton-benefit-top .section-content {
        padding-right: 68px;
    }
}
.seciton-benefit-d10 .img-slider-benefit {
    border-radius: 16px;
    overflow: hidden;
}
.seciton-benefit-d10 .img-slider-benefit.img-1 {
    max-width: 422px;
}
.seciton-benefit-d10 .img-slider-benefit.img-2 {
    max-width: 294px;
}
.seciton-benefit-d10 .img-slider-benefit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.seciton-benefit-d10 .benefit-infiniteSlide .infiniteSlide {
    align-items: unset !important;
}
.seciton-benefit-d10 .benefit-infiniteSlide .item-infiniteslide > div {
    height: 100%;
}

.wg-customers-d10 p {
    color: var(--neu-600);
    letter-spacing: -0.45px;
    margin-bottom: 7px;
}
@media (min-width: 992px) {
    .wg-customers-d10 {
        margin-top: -5px;
    }
}

.data-use-d10 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 4px 4px;
    border: 0.5px solid var(--black-20);
    border-radius: 999px;
}
.data-use-d10 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    margin-right: -12px;
    max-width: 24px;
}
.data-use-d10 img:nth-child(3) {
    margin-right: 0;
}
.data-use-d10 .text {
    color: var(--neu-600);
    letter-spacing: -0.6px;
}

.list-additional-d10 .item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.list-additional-d10 .item .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--d10-bg-6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-additional-d10 .item .text {
    max-width: calc(100% - 60px);
}
@media (max-width: 1199px) {
    .list-additional-d10 br {
        display: none;
    }
}

.section-more-additional-d10 .line {
    width: 100%;
    height: 1px;
    background-color: var(--neu-300);
}
.section-more-additional-d10.style-no-border-top .section-more-content {
    border-top: 0;
}
@media (max-width: 991px) {
    .section-more-additional-d10 .mb-32 {
        margin-bottom: 15px !important;
    }
    .section-more-additional-d10 br {
        display: none;
    }
}

.section-app-d10 {
    position: relative;
    overflow: hidden;
}
.section-app-d10 .image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.section-app-d10 .image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-app-d10 .section-app-d10-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 24px;
    margin-left: 12px;
    margin-right: 12px;
}
@media (min-width: 1200px) {
    .section-app-d10 .section-app-d10-content {
        margin-left: 64px;
        margin-right: 0;
    }
}
@media (min-width: 992px) {
    .section-app-d10 .section-app-d10-content .infiniteSlide-app-list {
        margin-right: -135px;
    }
}
@media (max-width: 575px) {
    .section-app-d10 .section-app-d10-content {
        flex-direction: column;
        align-items: start;
    }
    .section-app-d10 .section-app-d10-content .infiniteSlide-app-list {
        margin-left: auto;
        margin-right: auto;
    }
    .section-app-d10 .section-app-d10-content .heading-section-d10 {
        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;
    }
}

.item-how-d10 {
    display: flex;
    flex-wrap: wrap;
}
.item-how-d10 .image {
    flex: 1 1 50%;
    max-width: 644px;
    border-radius: 16px;
}
.item-how-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.item-how-d10 .item-content {
    padding-bottom: 44px;
    flex: 1 1 50%;
}
.item-how-d10 .item-content .sub-title {
    margin-bottom: 16px;
    color: var(--neu-900);
}
.item-how-d10 .item-content .title {
    margin-bottom: 56px;
}
.item-how-d10 .item-content .title a {
    color: var(--neu-900);
    letter-spacing: -1.3px;
}
.item-how-d10 .item-content .title a:hover {
    color: var(--primary-600);
}
.item-how-d10 .item-content .desc {
    margin-bottom: 24px;
    color: var(--neu-600);
}
@media (min-width: 992px) {
    .item-how-d10 .item-content {
        padding-left: 64px;
    }
}
@media (max-width: 991px) {
    .item-how-d10 .item-content .title {
        margin-bottom: 20px;
    }
    .item-how-d10 .item-content .title br {
        display: none;
    }
}
@media (max-width: 991px) {
    .item-how-d10 {
        flex-direction: column;
        gap: 24px;
    }
    .item-how-d10 .item-content,
    .item-how-d10 .image {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (min-width: 992px) {
    .item-how-d10.style-reverse {
        flex-direction: row-reverse;
    }
}
@media (min-width: 1200px) {
    .item-how-d10.style-reverse .item-content {
        padding-left: 60px;
    }
}
@media (max-width: 991px) {
    .item-how-d10 br {
        display: none;
    }
}

.testimonials-item-d10 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
@media (max-width: 575px) {
    .testimonials-item-d10 {
        padding-left: 12px;
        padding-right: 12px;
    }
}
.testimonials-item-d10 .rating-d10 {
    justify-content: center;
    margin-bottom: 32px;
    gap: 6px;
}
@media (min-width: 1200px) {
    .testimonials-item-d10 .rating-d10 {
        padding-left: 57px;
        padding-top: 4px;
    }
}
.testimonials-item-d10 .title {
    color: var(--white);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: -1px;
}
@media (min-width: 1200px) {
    .testimonials-item-d10 .title {
        padding-left: 60px;
    }
}
.testimonials-item-d10 .user-testimonial .user-content a {
    display: block;
}
.testimonials-item-d10 .user-testimonial .image {
    border-radius: 50%;
    max-width: 56px;
}
.testimonials-item-d10 .user-testimonial .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.testimonials-item-d10 .user-testimonial .name {
    color: var(--white);
    margin-bottom: 3px;
}
.testimonials-item-d10 .user-testimonial .position {
    color: var(--neu-500);
}
@media (min-width: 1200px) {
    .testimonials-item-d10 .user-testimonial {
        padding-left: 60px;
    }
}

.sw-testimonials-d10 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.sw-testimonials-d10 .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 16px;
}
.sw-testimonials-d10 .img-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.sw-testimonials-d10 .btn-swiper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.sw-testimonials-d10 .btn-swiper i {
    color: var(--white);
}
.sw-testimonials-d10 .btn-swiper.nav-prev-swiper {
    left: 12px;
}
.sw-testimonials-d10 .btn-swiper.nav-next-swiper {
    right: 12px;
}
.sw-testimonials-d10 .btn-swiper.swiper-button-disabled i {
    color: var(--neu-500);
}
@media (min-width: 1200px) {
    .sw-testimonials-d10 .btn-swiper.nav-prev-swiper {
        left: 87px;
    }
    .sw-testimonials-d10 .btn-swiper.nav-next-swiper {
        right: 87px;
    }
}
@media (max-width: 575px) {
    .sw-testimonials-d10 .btn-swiper {
        display: none;
    }
}
@media (min-width: 576px) {
    .sw-testimonials-d10 .tf-swiper {
        max-width: 80%;
    }
}
@media (min-width: 768px) {
    .sw-testimonials-d10 {
        height: 512px;
        padding-top: 0;
        padding-bottom: 0;
    }
}
.sw-testimonials-d10.style-2 {
    height: 520px;
}

.box-statistic-d10 {
    border: 1px solid var(--neu-300);
    border-radius: 16px;
}
@media (max-width: 991px) {
    .box-statistic-d10 br {
        display: none;
    }
}
.box-statistic-d10 .list-img {
    gap: 5.12px;
}
.box-statistic-d10 .image {
    border-radius: 50%;
    max-width: 42px;
}
.box-statistic-d10 .image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
}
@media (min-width: 992px) {
    .box-statistic-d10 .image.img-1 {
        max-width: 24px;
    }
}
@media (min-width: 992px) {
    .box-statistic-d10 .image.img-2 {
        max-width: 42px;
    }
}
@media (min-width: 992px) {
    .box-statistic-d10 .image.img-3 {
        max-width: 29px;
    }
}
.box-statistic-d10.box-1 {
    padding-left: 36px;
    padding-right: 20px;
    height: 106px;
}
.box-statistic-d10.box-1 p {
    letter-spacing: -0.6px;
}
.box-statistic-d10.box-2 {
    padding: 35px 32px 7px 30px;
    height: 345px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box-statistic-d10.box-2 .text {
    color: var(--neu-900);
}
.box-statistic-d10.box-2 .text-bottom-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.box-statistic-d10.box-2 .h1 {
    color: var(--neu-900);
}
.box-statistic-d10.box-2 .sub-text {
    color: var(--d10-color-text);
}
.box-statistic-d10.box-2 .right p {
    color: var(--black-30);
}
.box-statistic-d10.box-2 .text-bottom-right {
    padding-top: 16px;
    padding-right: 4px;
}
.box-statistic-d10.box-2 .text-bottom-right .sub-text {
    margin-bottom: 5px;
}
.box-statistic-d10.box-3 {
    padding: 43px 25px;
}
.box-statistic-d10.box-3 .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    background-color: var(--primary-300-30);
}
.box-statistic-d10.box-3 .dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--primary-400);
}
.box-statistic-d10.box-3 p {
    letter-spacing: -0.8px;
}
.box-statistic-d10.box-4 {
    padding: 36px 118px 12px 32px;
    max-width: 100%;
    height: 100%;
    background-color: var(--neu-200);
    border-color: var(--neu-200);
    overflow: hidden;
}
.box-statistic-d10.box-4 .text {
    margin-bottom: 66px;
}
.box-statistic-d10.box-4 .svg-arrow {
    max-width: 300px;
    margin-bottom: 12px;
    margin-left: -32px;
}
.box-statistic-d10.box-4 .svg-arrow img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.box-statistic-d10.box-4 .text-bottom-left {
    margin-top: 12px;
}
.box-statistic-d10.box-4 .text-bottom-left p {
    position: relative;
    padding-right: 32px;
}
.box-statistic-d10.box-4 .text-bottom-left .number-small {
    position: absolute;
    right: 0;
    bottom: -10px;
}
.box-statistic-d10.box-4 .text-bottom-right p {
    letter-spacing: -0.6px;
}
.box-statistic-d10.box-4 .rating-d10 i {
    font-size: 16px;
}
@media (max-width: 767px) {
    .box-statistic-d10 {
        padding: 24px 12px !important;
    }
}

.anim-svg {
    width: 301px;
}

.list-box-statistic .list-box-left,
.list-box-statistic .list-box-right {
    max-width: calc(50% - 8px);
    width: 100%;
}
@media (max-width: 575px) {
    .list-box-statistic {
        flex-direction: column;
    }
    .list-box-statistic .list-box-left,
    .list-box-statistic .list-box-right {
        max-width: 100%;
        width: 100%;
    }
    .list-box-statistic .box-statistic-d10 {
        height: auto;
    }
    .list-box-statistic .box-statistic-d10.box-1 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .list-box-statistic .box-statistic-d10.box-2 .text {
        margin-bottom: 30px;
    }
}

.page-title-d10-2 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.page-title-d10-2 .page-title-content {
    max-width: 564px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}
@media (max-width: 991px) {
    .page-title-d10-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        display: grid;
        position: relative;
        grid-template-areas: "a c" "b b";
        align-items: center;
    }
    .page-title-d10-2 .img-left {
        grid-area: a;
    }
    .page-title-d10-2 .img-right {
        grid-area: c;
        margin-left: auto;
    }
    .page-title-d10-2 .page-title-content {
        grid-area: b;
    }
}
@media (max-width: 991px) {
    .page-title-d10-2 br {
        display: none;
    }
}

.page-title-d10-3 {
    position: relative;
    overflow: hidden;
    padding-top: 112px;
}
@media (max-width: 991px) {
    .page-title-d10-3 {
        padding-top: 60px;
    }
}
.page-title-d10-3 .page-title-content {
    margin-bottom: 100px;
}
@media (max-width: 991px) {
    .page-title-d10-3 .page-title-content {
        margin-bottom: 60px;
    }
}
.page-title-d10-3 .list-image {
    gap: 17px;
}
.page-title-d10-3 .list-image .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-title-d10-3 .overlay-1 {
    background: rgba(167, 232, 71, 0.8);
    max-width: 1090px;
    width: 100%;
    height: 642px;
    filter: blur(480px);
    position: absolute;
    bottom: -446px;
    left: 0;
}
.page-title-d10-3 .overlay-2 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 96.15%);
    width: 100%;
    height: 128px;
    position: absolute;
    bottom: 0;
    left: 0;
}
@media (max-width: 991px) {
    .page-title-d10-3 br {
        display: none;
    }
}

.box-mission-d10 {
    display: flex;
    justify-content: space-between;
    padding: 28px;
    background-color: var(--neu-200);
    position: relative;
    gap: 24px;
    border-radius: 24px;
}
.box-mission-d10 .image {
    max-width: 520px;
    border-radius: 16px;
    position: relative;
}
.box-mission-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.box-mission-d10 .box-content {
    max-width: 581px;
    position: relative;
    padding-top: 66px;
    padding-bottom: 66px;
}
.box-mission-d10 .text-top {
    margin-bottom: 60px;
    color: var(--neu-900);
}
.box-mission-d10 .img-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 886px;
    height: 100%;
    width: 100%;
}
.box-mission-d10 .img-bg img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.box-mission-d10 .list-item-box .icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-600);
}
.box-mission-d10 .list-item-box .icon i {
    font-size: 16px;
    color: var(--white);
}
.box-mission-d10 .list-item-box .title {
    color: var(--neu-900);
    margin-bottom: 16px;
}
.box-mission-d10 .list-item-box .desc {
    color: var(--gray-50);
}
@media (min-width: 1200px) {
    .box-mission-d10 {
        padding-right: 87px;
    }
}
@media (max-width: 575px) {
    .box-mission-d10 {
        flex-direction: column;
        gap: 0;
        padding: 28px 12px;
    }
    .box-mission-d10 .box-content {
        padding-top: 40px;
        padding-bottom: 0;
    }
    .box-mission-d10 .text-top {
        margin-bottom: 20px;
    }
    .box-mission-d10 .mb-40 {
        margin-bottom: 15px !important;
    }
}

.team-item-d10 {
    text-align: center;
}
.team-item-d10 .image {
    margin-bottom: 20px;
    text-align: center;
    border-radius: 12px;
}
.team-item-d10 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.team-item-d10 .name {
    font-size: 28px;
    line-height: 36px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--neu-900);
}

.pricing-card-d10 {
    border: 1px solid var(--neu-300);
    padding: 34px 35px;
    border-radius: 20px;
}
.pricing-card-d10 .plan-label {
    padding: 6px 16px;
    border-radius: 999px;
    color: var(--primary-700);
    background-color: var(--d10-bg-2);
    border: 1px solid var(--primary-200);
    width: max-content;
    margin-bottom: 21px;
}
.pricing-card-d10 .title-price {
    color: var(--neu-600);
    margin-bottom: 3px;
}
.pricing-card-d10 .title-price .price {
    color: var(--neu-900);
}
.pricing-card-d10 p {
    color: var(--gray-50);
}
@media (max-width: 1199px) {
    .pricing-card-d10 p br {
        display: none;
    }
}
.pricing-card-d10 .top-card {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--neu-300);
}
.pricing-card-d10 .list-unstyled-d10 {
    margin-bottom: 40px;
}
@media (max-width: 991px) {
    .pricing-card-d10 {
        padding: 36px 12px;
    }
}
.pricing-card-d10.active {
    background: linear-gradient(195.05deg, #FFFFFF 15.98%, #C7FCC9 130.43%);
}
.pricing-card-d10.active .title-price {
    color: var(--black-50);
}
.pricing-card-d10.active p {
    color: var(--black-50);
}

.list-unstyled-d10 .unstyled-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.list-unstyled-d10 .unstyled-item:last-child {
    margin-bottom: 0;
}
.list-unstyled-d10 .unstyled-item .icon {
    width: 24px;
    height: 24px;
    background-color: var(--neu-300);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.list-unstyled-d10 .unstyled-item .icon i {
    color: #111827;
    font-size: 12px;
}
.list-unstyled-d10 .unstyled-item.style-border-primary-100 .icon {
    background-color: var(--white);
    border: 1px solid var(--primary-100);
}
.list-unstyled-d10 .unstyled-item.style-border-primary-100 .icon i {
    color: var(--primary-600);
}

.toggle-switch.style-2 {
    width: 72px;
    height: 40px;
}
.toggle-switch.style-2 input:checked + .slider::before {
    transform: translateX(32px);
}
.toggle-switch.style-2 .slider {
    background-color: var(--primary-600);
}
.toggle-switch.style-2 .slider::before {
    height: 32px;
    width: 32px;
    left: 4px;
    bottom: 4px;
    transition: 0.3s;
}

.title-switch .text-title-tab {
    color: var(--black-50);
    display: flex;
    align-items: center;
    gap: 8px;
    -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;
}
.title-switch .text-title-tab.active-label {
    color: var(--neu-900);
}

.discount-d10 {
    padding: 4px 6px;
    border-radius: 4px;
    color: #FF3A3D;
    background-color: #FFE4E5;
}

.table-pricing.demo-10 {
    gap: 24px;
}
.table-pricing.demo-10 .table-head {
    background-color: var(--primary-100);
    color: var(--primary-900);
}
.table-pricing.demo-10 .table-body {
    background-color: var(--suc-50);
}
.table-pricing.demo-10 .table-foot {
    padding-top: 24px;
    padding-bottom: 24px;
}
.table-pricing.demo-10 .table-foot .action {
    max-width: 280px;
    width: 100%;
}
.table-pricing.demo-10 .table-head,
.table-pricing.demo-10 .table-body,
.table-pricing.demo-10 .table-foot {
    padding-top: 28px;
    padding-bottom: 28px;
}
.table-pricing.demo-10 .col-title {
    padding-top: 2px;
}
.table-pricing.demo-10 .ic-check-square i {
    font-size: 18px;
}

.ic-check-square.style-border-ras-50 {
    width: 24px;
    height: 24px;
    background-color: var(--primary-100);
    border-radius: 50%;
}

.line-section {
    width: 100%;
    height: 1px;
    background-color: var(--neu-300);
}

.section-price-d10 .top-section {
    padding-right: 4px;
}

.contact-content.style-demo-10 {
    background: linear-gradient(195.05deg, #FFFFFF 15.98%, #C7FCC9 130.43%);
    border: 1px solid var(--primary-100);
    max-width: 856px;
}
.contact-content.style-demo-10 .form-content {
    gap: 24px;
    margin-bottom: 49px;
}
@media (min-width: 768px) {
    .contact-content.style-demo-10 {
        padding: 64px;
    }
    .contact-content.style-demo-10 .form-content {
        gap: 36px;
    }
    .contact-content.style-demo-10 .tf-grid-layout {
        gap: 36px;
    }
}

.form-contact.style-demo-10 .fieldset_label {
    margin-bottom: 12px !important;
}
.form-contact.style-demo-10 textarea,
.form-contact.style-demo-10 input {
    padding: 16px !important;
    background-color: var(--white) !important;
    border-color: var(--primary-100) !important;
    color: var(--neu-900) !important;
    border-radius: 8px !important;
}
.form-contact.style-demo-10 textarea::placeholder,
.form-contact.style-demo-10 input::placeholder {
    color: var(--neu-500);
}
.form-contact.style-demo-10 textarea:focus,
.form-contact.style-demo-10 input:focus {
    border-color: var(--primary-600) !important;
}
.form-contact.style-demo-10 input {
    height: 52px !important;
}
@media (min-width: 1200px) {
    .form-contact.style-demo-10 .tf-grid-layout {
        gap: 36px;
    }
}

@media (max-width: 991px) {
    .section-how-d10.flat-spacing-d10-1 {
        padding-bottom: 0;
    }
}
@media (max-width: 991px) {
    .section-how-d10 .item-how-d10:last-child .item-content {
        padding-bottom: 0;
    }
}

@media (max-width: 991px) {
    .section-statistic-d10.flat-spacing-d10-1 {
        padding-bottom: 0;
    }
}

@media (max-width: 991px) {
    .section-testimonials-d10.page-home {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .wd-pagination-d10 li:nth-child(4), .wd-pagination-d10 li:nth-child(6), .wd-pagination-d10 li:nth-child(7) {
        display: none;
    }
}

.sw-grid.sw-grid-4 .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40px;
}
.sw-grid .swiper-slide {
    width: 100%;
}
.sw-grid .swiper-slide > div {
    width: 100%;
}

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

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

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

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

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

.mb-lg-74 {
    margin-bottom: 40px;
}
@media (min-width: 992px) {
    .mb-lg-74 {
        margin-bottom: 74px !important;
    }
}

.mb-lg-76 {
    margin-bottom: 40px;
}
@media (min-width: 992px) {
    .mb-lg-76 {
        margin-bottom: 76px !important;
    }
}

.mb-lg-80 {
    margin-bottom: 60px;
}
@media (min-width: 992px) {
    .mb-lg-80 {
        margin-bottom: 80px !important;
    }
}

.mb-md-82 {
    margin-bottom: 60px;
}
@media (min-width: 768px) {
    .mb-md-82 {
        margin-bottom: 82px !important;
    }
}

.mb-lg-84 {
    margin-bottom: 60px;
}
@media (min-width: 992px) {
    .mb-lg-84 {
        margin-bottom: 84px !important;
    }
}

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

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

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

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

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

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

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

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

/*# sourceMappingURL=styles.css.map */