@import"https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Geologica:wght@100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Kumbh+Sans:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oxygen:wght@300;400;700&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=SUSE:wght@100..800&display=swap";



:root {

    --primary: #3272b9;

    --white: #ffffff;

    --black: #000000;

    --error: #C72929;

    --on-suface-container: #3272b9;

    --on-suface-variant-1: #6D7074;

    --on-suface-variant-2: #A2A3AB;

    --surface: #F3F5F5;

    --outline: #E4E4E4;

    --line-1: #FFFFFF26;

    --bg-1: #FFFFFF26;

    --bg-2: #ECF2F2;

    --bg-3: rgba(0, 0, 0, 0.15);

    --bg-4: #317C6F66;

    --bg-5: #24283E1A;

    --bg-6: #F7F7F7;

    --color-text-1: #ADF9EB;

    --color-text-2: #636666;

    --color-text-3: #858585;

    --color-text-4: #;

    --border-1: rgba(36, 40, 62, 0.2)

}



a,

abbr,

acronym,

address,

applet,

article,

aside,

audio,

b,

big,

blockquote,

body,

canvas,

caption,

center,

cite,

code,

dd,

del,

details,

dfn,

div,

dl,

dt,

em,

embed,

fieldset,

figcaption,

figure,

footer,

form,

h1,

h2,

h3,

h4,

h5,

h6,

header,

hgroup,

i,

iframe,

img,

ins,

kbd,

label,

legend,

li,

mark,

menu,

nav,

object,

ol,

output,

p,

pre,

q,

ruby,

s,

samp,

section,

small,

span,

strike,

strong,

sub,

summary,

sup,

table,

tbody,

td,

tfoot,

th,

thead,

time,

title html,

tr,

tt,

u,

ul,

var,

video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    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,

main,

menu,

nav,

section {

    display: block

}



html {

    margin-right: 0 !important;

    font-size: 62.5%;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%

}



body {

    background: var(--white)

}



body::-webkit-scrollbar {

    display: none

}



ol,

ul {

    list-style: none

}



table {

    border-collapse: collapse

}



blockquote:after,

blockquote:before,

q:after,

q:before {

    content: ""

}



blockquote,

q {

    quotes: none

}



a img {

    border: 0

}



select {

    max-width: 100%

}



body,

button,

input,

select,

textarea {

    font-family: Rethink Sans, sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    color: var(--on-suface-container);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

    overflow-y: auto

}



img {

    height: auto;

    max-width: 100%;

    vertical-align: middle;

    -ms-interpolation-mode: bicubic

}



p {

    font-weight: 400;

    font-size: 16px;

    line-height: 26px

}



b,

cite,

strong {

    font-weight: 700

}



/* blockquote,

cite,

dfn,

em,

i {

    font-style: italic

} */



abbr,

acronym {

    border-bottom: 1px dotted #e0e0e0;

    cursor: help

}



.btn-link:focus,

.btn-link:hover,

ins,

mark {

    text-decoration: none

}



sub,

sup {

    height: 0;

    line-height: 0;

    position: relative;

    vertical-align: baseline

}



small,

sub,

sup {

    font-size: 75%

}



big {

    font-size: 125%

}



address {

    font-style: italic;

    margin: 0 0 20px

}



code,

kbd,

pre,

samp,

tt,

var {

    margin: 20px 0;

    padding: 4px 12px;

    background: #f5f5f5;

    border: 1px solid #e0e0e0;

    overflow-x: auto;

    -webkit-hyphens: none;

    hyphens: none;

    border-radius: 0;

    height: auto

}



svg,

svg path {

    transition: all .3s ease

}



*,

:after,

:before,

html {

    box-sizing: border-box

}



hr {

    margin-bottom: 20px;

    /* border: 1px dashed #ccc */

}



ol,

ul {

    padding: 0

}



ul {

    list-style: disc

}



ol {

    list-style: decimal

}



li>ol,

li>ul {

    margin-bottom: 0

}



li {

    list-style: none

}



ol li,

ul li {

    padding: 0

}



dd,

dl {

    margin: 0 0 20px

}



dt {

    font-weight: 700

}



.disable,

del {

    text-decoration: line-through;

    filter: alpha(opacity=50);

    opacity: .5

}



table,

td,

th {

    border: 1px solid #343444

}



table {

    border-collapse: separate;

    border-spacing: 0;

    border-width: 1px 0 0 1px;

    margin: 0 0 30px;

    table-layout: fixed;

    width: 100%

}



caption,

td,

th {

    font-weight: 400;

    text-align: left

}



th {

    font-weight: 700

}



td,

th {

    border-width: 0 1px 1px 0

}



td,

th {

    padding: 8px 12px

}



embed,

object,

video {

    margin-bottom: 20px;

    max-width: 100%;

    vertical-align: middle

}



p>embed,

p>iframe,

p>object,

p>video {

    margin-bottom: 0

}



button,

input {

    line-height: normal

}



button,

input,

select,

textarea {

    font-size: 100%;

    line-height: inherit;

    margin: 0;

    vertical-align: baseline

}



textarea {

    overflow: auto;

    vertical-align: top

}



input[type=checkbox] {

    display: inline

}



button,

input[type=button],

input[type=reset],

input[type=submit] {

    line-height: 1;

    cursor: pointer;

    -webkit-appearance: button;

    border: 0

}



input[type=checkbox],

input[type=radio] {

    padding: 0;

    width: 20px;

    height: 20px;

    border-radius: 6px;

    background: rgba(0, 0, 0, 0);

    cursor: pointer;

    vertical-align: sub

}



input[type=search] {

    -webkit-appearance: textfield

}



input[type=search]::-webkit-search-decoration {

    -webkit-appearance: none

}



button::-moz-focus-inner,

input::-moz-focus-inner {

    border: 0;

    padding: 0

}



input:-webkit-autofill {

    -webkit-box-shadow: inset 0 0 0 1000px #f7f7f7

}



input[type=search] {

    outline: 0

}



input[type=search]::-webkit-search-cancel-button,

input[type=search]::-webkit-search-decoration,

input[type=search]::-webkit-search-results-button,

input[type=search]::-webkit-search-results-decoration {

    display: none

}



::-webkit-input-placeholder {

    color: #171412

}



::-moz-placeholder {

    color: #171412;

    opacity: 1

}



:-ms-input-placeholder {

    color: #171412

}



.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: Rethink Sans, sans-serif;

    color: var(--on-suface-container);

    margin: 0;

    text-rendering: optimizeLegibility

}



.h1,

h1 {

    font-size: 80px;

    line-height: 88px

}



.h1,

.h2,

h1,

h2 {

    font-weight: 500

}



.h2,

h2 {

    font-size: 56px;

    line-height: 68px

}



.h3,

h3 {

    font-size: 44px;

    line-height: 52px

}



.h3,

.h4,

h3,

h4 {

    font-weight: 500

}



.h4,

h4 {

    font-size: 32px;

    line-height: 40px

}



.h5,

h5 {

    font-size: 22px;

    line-height: 30px

}



.h5,

.h6,

h5,

h6 {

    font-weight: 500

}



.h6,

h6 {

    font-size: 20px;

    line-height: 28px

}



a {

    text-decoration: none;

    color: var(--on-suface-container);

    cursor: pointer

}



a,

a:focus,

a:hover {

    transition: all .3s ease

}



a:focus,

a:hover {

    outline: 0

}



.tf-container {

    margin-left: auto;

    margin-right: auto;

    padding-right: 15px;

    padding-left: 15px;

    max-width: 1320px;

    width: 100%

}



.tf-container .row {

    margin-left: -15px !important;

    margin-right: -15px !important

}



.tf-container .row>* {

    padding-left: 15px !important;

    padding-right: 15px !important

}



.tf-container.full {

    max-width: 100vw

}



.tf-container.w-1870 {

    max-width: 1870px

}



.tf-container.w-1830 {

    max-width: 1830px

}



.hidden {

    display: none

}



.block {

    display: block

}



.relative {

    position: relative

}



.absolute {

    position: absolute

}



.fixed {

    position: fixed !important

}



.position-unset {

    position: unset !important

}



.z-5 {

    z-index: 5

}



.flex {

    display: flex

}



.body-2 {

    font-weight: 400;

    font-size: 18px;

    line-height: 30px

}



.title {

    font-weight: 500;

    font-size: 18px;

    line-height: 28px

}



.caption-1 {

    font-weight: 400 !important;

    font-size: 14px !important;

    line-height: 22px !important

}



.caption-2 {

    font-weight: 400;

    font-size: 12px;

    line-height: 20px

}



.label {

    font-weight: 500 !important;

    font-size: 12px !important;

    line-height: 20px !important;

    letter-spacing: 1.2px !important

}



.position-relative {

    position: relative

}



.text-btn-uppercase {

    text-transform: uppercase

}



.text-btn {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px

}



.overflow-auto::-webkit-scrollbar {

    display: none

}



.pt-0 {

    padding-top: 0 !important

}



.g-10 {

    gap: 10px

}



.g-12 {

    gap: 12px !important

}



.g-14 {

    gap: 14px !important

}



.g-20 {

    gap: 20px !important

}



.g-24 {

    gap: 24px

}



.g-30 {

    gap: 30px !important

}



.g-40 {

    gap: 40px !important

}



.rg-20 {

    row-gap: 20px !important

}



.rg-30 {

    row-gap: 30px !important

}



.rg-40 {

    row-gap: 40px !important

}



.rg-60 {

    row-gap: 60px

}



.m-lr-40 {

    margin-left: 40px;

    margin-right: 40px

}



.pt-48 {

    padding-top: 48px !important

}



.pb-28 {

    padding-bottom: 28px !important

}



.mb-8 {

    margin-bottom: 8px !important

}



.mb-11 {

    margin-bottom: 11px !important

}



.mb-12 {

    margin-bottom: 12px !important

}



.mb-15 {

    margin-bottom: 15px !important

}



.mb-16 {

    margin-bottom: 16px !important

}



.mb-18 {

    margin-bottom: 18px !important

}



.mb-20 {

    margin-bottom: 20px !important

}



.mb-24 {

    margin-bottom: 24px !important

}



.mb-28 {

    margin-bottom: 28px !important

}



.mb-30 {

    margin-bottom: 30px !important

}



.mb-32 {

    margin-bottom: 32px !important

}



.mb-34 {

    margin-bottom: 34px !important

}



.mb-36 {

    margin-bottom: 36px !important

}



.mb-40 {

    margin-bottom: 40px !important

}



.mb-48 {

    margin-bottom: 48px !important

}



.mb-50 {

    margin-bottom: 50px !important

}



.mb-60 {

    margin-bottom: 60px !important

}



.mb-66 {

    margin-bottom: 66px !important

}



.color-white {

    color: var(--white) !important

}



.color-primary {

    color: var(--primary) !important

}



.color-text-1 {

    color: var(--color-text-1) !important

}



.color-text-3 {

    color: var(--color-text-3) !important

}



.color-text-4 {

    color: var(--color-text-4) !important

}



.bg-surface {

    background-color: var(--surface) !important

}



.color-on-suface-variant-2 {

    color: var(--on-suface-variant-2) !important

}



.color-on-suface-variant-1 {

    color: var(--on-suface-variant-1) !important

}



.color-on-suface-container {

    color: var(--on-suface-container) !important

}



.bg-on-suface-container {

    background-color: var(--on-suface-container) !important

}



.color-text-2 {

    color: var(--color-text-2) !important

}



.fw-7 {

    font-weight: 700 !important

}



.top-bar {

    background-color: var(--on-suface-container)

}



.top-bar .top-bar-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0

}



.top-bar .top-bar-inner .tf-tb-left,

.top-bar .top-bar-inner .tf-tb-right {

    display: flex;

    gap: 24px

}



.top-bar-content {

    color: var(--white);

    display: flex;

    align-items: center;

    gap: 8px

}

.tf-phone-topbar a {color: #fff}



.top-bar-content i {

    font-size: 20px

}



.tf-phone-topbar {

    padding-right: 24px;

    border-right: 1px solid var(--bg-1)

}



.tf-phone-topbar .icon {

    width: 40px;

    height: 40px;

    background-color: var(--bg-1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-phone-topbar .icon i {

    animation: ring 3s linear infinite

}



.tf-phone {

    padding-right: 24px;

    -webkit-border-end: 1px solid var(--line-1);

    border-inline-end: 1px solid var(--line-1);

    gap: 8px

}



.tf-phone,

.tf-phone .icon {

    display: flex;

    align-items: center

}



.tf-phone .icon {

    justify-content: center;

    width: 40px;

    height: 40px;

    background: var(--bg-1);

    border-radius: 50%

}



.tf-phone .icon i {

    font-size: 20px;

    animation: ring 3s linear infinite

}



.tf-phone a {

    font-weight: 500

}



.tf-phone.style-big .icon {

    width: 56px;

    height: 56px

}



.tf-phone.style-big .icon i {

    font-size: 32px

}



.tf-phone.no-border {

    padding: 0 !important;

    border-left: 0 !important;

    border-right: 0 !important

}



.tf-phone.no-border.style-2 .icon {

    border: 1px solid var(--primary);

    width: 56px;

    height: 56px

}



.tf-phone.no-border.style-2 .icon i {

    color: var(--on-suface-container);

    font-size: 32px

}



.tf-phone.no-border.style-2 .content p {

    color: var(--on-suface-variant-1)

}



.tf-phone.color-white a,

.tf-phone.color-white i {

    color: var(--white)

}



.tf-social {

    display: flex;

    gap: 4px;

    align-items: center

}



.tf-social .item a {

    width: 40px;

    height: 40px

}



.tf-social .item a,

.tf-social .item a .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-social .item a .icon i {

    font-size: 20px;

    color: var(--white);

    transition: all .3s ease

}



.tf-social .item a:hover {

    background-color: var(--white);

    border-color: var(--white)

}



.tf-social .item a:hover i {

    color: var(--on-suface-container)

}



.tf-social.style-2 .item a {

    width: 44px;

    height: 44px

}



.tf-social.style-border .item a {

    border: 1px solid

}



.tf-social.bg-1 .item a {

    background: hsla(0, 0%, 100%, .1490196078);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    border: 1px solid hsla(0, 0%, 100%, .1490196078);

    position: relative;

    overflow: hidden

}



.tf-social.bg-1 .item a:hover {

    background-color: var(--white);

    border-color: var(--white)

}



.tf-social.radius-50 .item a {

    border-radius: 50%

}



.tf-social.g-8 {

    gap: 8px

}



.tf-social.g-12 {

    gap: 12px

}



.tf-social.color-on-suface-container a i {

    color: var(--on-suface-container) !important

}



.tf-social.color-on-suface-container a:hover {

    background-color: var(--on-suface-container);

    border-color: var(--on-suface-container)

}



.tf-social.color-on-suface-container a:hover i {

    color: var(--white) !important

}



.tf-language {

    -webkit-border-start: 1px solid var(--line-1);

    border-inline-start: 1px solid var(--line-1);

    padding-left: 24px;

    cursor: pointer

}



.tf-language .text-sort-value,

.tf-language i {

    color: var(--white)

}



.tf-language i {

    font-size: 10px

}



.tf-language .dropdown-menu {

    padding: 0 !important;

    position: relative

}



.tf-language .dropdown-menu:before {

    content: "";

    position: absolute;

    top: -1px;

    left: 50%;

    width: 7px;

    height: 7px;

    background-color: var(--white);

    transform: rotate(45deg) translateX(-50%);

    z-index: -1

}



.tf-language .select-item {

    padding: 5px 10px;

    cursor: pointer;

    transition: all .3s ease;

    font-size: 12px;

    line-height: 20px

}



.tf-language .select-item:hover {

    background-color: var(--primary);

    color: var(--white)

}



.header {

    position: sticky;

    position: -webkit-sticky;

    left: 0;

    right: 0;

    z-index: 999;

    transition: all .3s ease

}



.header .header-content {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.header .header-content .header-left {

    display: flex;

    align-items: center;

    gap: 105px

}



.header .header-content .header-left.gap-66 {

    gap: 66px

}



.header .header-content .header-left.gap-120 {

    gap: 120px

}



.header .header-content .header-left.gap-48 {

    gap: 48px

}



.header .header-content .header-right {

    display: flex;

    align-items: center;

    gap: 40px

}



.header .header-content .header-right.gap-20 {

    gap: 20px

}



.header.style-1 {

    background: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.header.style-absolute {

    margin-bottom: -104px;

    width: 100%

}



.header.style-absolute.header-bg {

    background-color: var(--on-suface-container)

}



.header.style-absolute.header-bg.no-header-bg {

    background-color: rgba(0, 0, 0, 0);

    -webkit-backdrop-filter: blur(0);

    backdrop-filter: blur(0);

    box-shadow: unset

}



.header.style-absolute.header-bg.no-header-bg .header-content {

    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .0588235294) !important

}



.header.bg-color-white {

    background: var(--white);

    border-bottom: 1px solid var(--outline)

}



.header.bg-color-white .menu-item .item-link {

    color: var(--on-suface-container) !important;

    line-height: 100px

}



.header.bg-color-white .menu-item .item-link:after {

    background: var(--primary)

}



.header.bg-color-white .nav-icon i {

    color: var(--on-suface-container) !important

}



.header.bg-color-white .nav-icon svg path {

    stroke: var(--on-suface-container) !important

}



.header.bg-color-white .nav-icon .mobile-button span {

    background-color: var(--on-suface-container) !important

}



.header.bg-color-white .tf-phone {

    padding: 26px 39px;

    border-left: 1px solid var(--outline);

    border-right: 1px solid var(--outline)

}



.header.bg-color-white .tf-phone .icon {

    background-color: var(--surface)

}



.header.bg-color-white .tf-phone .icon i {

    color: var(--primary)

}



.header.bg-color-white .tf-phone .content .caption-2 {

    color: var(--on-suface-variant-1)

}



.header.no-bg {

    background: rgba(0, 0, 0, 0);

    -webkit-backdrop-filter: blur(0);

    backdrop-filter: blur(0);

    margin-bottom: -94px !important

}



.header.no-bg .nav-cart .number {

    color: var(--on-suface-container);

    background-color: var(--white)

}



.header.no-bg .item-link {

    line-height: 94px !important

}



.header.style-border-bottom {

    border-bottom: 1px solid var(--bg-1)

}



.header.style-border-bottom .header-content {

    padding-left: 25px;

    padding-right: 25px

}



.header.style-border-bottom .tf-phone {

    padding-right: 39px

}



.header.style-border-bottom .tf-phone .icon {

    background-color: var(--bg-1);

    border-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.header.style-border-bottom .tf-phone .content a,

.header.style-border-bottom .tf-phone .content p,

.header.style-border-bottom .tf-phone .icon i {

    color: var(--white)

}



.header.style-border-radius {

    margin-bottom: -116px !important

}



.header.style-border-radius .item-link {

    line-height: 96px !important

}



.header.style-border-radius .header-content {

    background-color: var(--white);

    padding: 0 40px;

    border-radius: 999px

}



.header.style-border-radius .header-content .menu-item .item-link {

    color: var(--on-suface-container) !important

}



.header.style-border-radius .header-content .menu-item .item-link:after {

    background: var(--on-suface-container)

}



.header.style-border-radius .header-content .number {

    background-color: var(--on-suface-container);

    color: var(--white)

}



.header.style-border-radius .header-content .nav-icon i {

    color: var(--on-suface-container) !important

}



.header.style-border-radius .header-content .nav-icon svg path {

    stroke: var(--on-suface-container) !important

}



.header.style-border-radius .header-content .mobile-button span {

    background-color: var(--on-suface-container)

}



.header.style-border-radius .header-content .tf-phone {

    padding-right: 40px;

    border-right: 1px solid var(--outline)

}



.header.style-border-radius .header-content .tf-phone .icon {

    background-color: var(--surface)

}



.header.style-border-radius .header-content .tf-phone .icon i {

    color: var(--primary)

}



.header.style-border-radius .header-content .tf-phone .content .caption-2 {

    color: var(--on-suface-variant-1)

}



.header.style-2 .header-top {

    padding: 16px 0;

    background-color: var(--on-suface-container)

}



.header.style-2 .header-top .header-right {

    gap: 24px

}



.header.style-2 .header-top .header-right .tf-language {

    -webkit-border-end: 1px solid var(--line-1);

    border-inline-end: 1px solid var(--line-1);

    padding-right: 27px;

    cursor: pointer

}



.header.style-2 .header-top .header-right .tf-social a {

    border-color: var(--line-1)

}



.header.style-2 .header-left {

    gap: 53px

}



.header.style-2 .header-right .tf-social {

    margin-left: auto

}



.header.style-2 .w-300 {

    max-width: 300px;

    width: 100%

}



.header.style-2 .tf-language {

    -webkit-border-start: 0;

    border-inline-start: 0;

    padding-left: 0

}



.header.style-2 .tf-phone {

    padding: 15px 38px;

    border-left: 1px solid var(--outline);

    border-right: 1px solid var(--outline)

}



.header.style-2 .tf-phone .icon {

    background-color: var(--surface)

}



.header.style-2 .tf-phone .icon i {

    color: var(--primary)

}



.header.style-2 .tf-phone .content .caption-2 {

    color: var(--on-suface-variant-1)

}



.header.style-2 .header-bottom {

    transition: all .3s ease

}



.header.style-2 .header-bottom .item-link {

    line-height: 76px

}



.header.style-2 .header-bottom .nav-icon i {

    color: var(--on-suface-container)

}



.header.style-2 .header-bottom .nav-icon svg path {

    stroke: var(--on-suface-container) !important

}



.header.style-2 .header-bottom .logo-mobile {

    display: none

}



.header.style-2 .header-bottom.bg-color-white {

    background-color: var(--white)

}



.header.style-2 .header-bottom.bg-color-white .item-link {

    color: var(--on-suface-container)

}



.header.style-2 .header-bottom.bg-color-white .item-link:after {

    background: var(--on-suface-container)

}



.header.style-2 .header-bottom.bg-color-white .mobile-button span {

    background-color: var(--on-suface-container)

}



.header.style-2 .header-bottom.bg-1 {

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    transition: all .3s ease;

    margin-bottom: -70px

}



.header.style-2 .header-bottom.bg-1 .item-link,

.header.style-2 .header-bottom.bg-1 .nav-icon i {

    color: var(--white)

}



.header.style-2 .header-bottom.bg-1 .nav-icon svg path {

    stroke: var(--white) !important

}



.header.style-2 .header-bottom.bg-1 .tf-phone .icon {

    background-color: var(--bg-1)

}



.header.style-2 .header-bottom.bg-1 .tf-phone .content .caption-2,

.header.style-2 .header-bottom.bg-1 .tf-phone .content a,

.header.style-2 .header-bottom.bg-1 .tf-phone .icon i {

    color: var(--white)

}



.header.style-2.header-bg .header-bottom.bg-1 {

    background-color: var(--on-suface-container)

}



.header.style-2.header-bg .header-bottom.bg-color-white {

    box-shadow: 0 10px 20px rgba(0, 0, 0, .1)

}



.header.h-8 .tf-btn {

    padding: 15px 28px !important

}



.menu-primary-menu {

    display: flex;

    align-items: center;

    gap: 25px

}



.menu-primary-menu .menu-item {

    cursor: pointer

}



.menu-primary-menu .menu-item:not(.menu-item-has-children) {

    padding-right: 0

}



.menu-primary-menu .menu-item.menu-item-has-children {

    padding-right: 20px

}



.menu-primary-menu .menu-item.menu-item-has-children .item-link:before {

    content: "";

    position: absolute;

    top: 58%;

    right: -19px;

    font-size: 6px;

    line-height: 6px;

    font-family: icomoon;

    transform: translateY(-50%);

    transition: all .3s ease

}



.menu-primary-menu .menu-item .item-link {

    position: relative

}



.menu-primary-menu .menu-item .item-link:after {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 2px;

    background: var(--bg-1);

    transition: all .3s ease

}



.menu-primary-menu .menu-item .item-link {

    color: var(--white);

    line-height: 104px;

    font-weight: 500;

    font-size: 18px

}



.menu-primary-menu .menu-item:hover .sub-menu,

.menu-primary-menu .menu-item:hover .sub-menu-2,

.menu-primary-menu .menu-item:hover .sub-menu-home {

    opacity: 1;

    visibility: visible;

    top: 100%;

    pointer-events: all

}



.menu-primary-menu .menu-item:hover .item-link:before {

    transform: translateY(-50%) rotate(180deg)

}



.menu-primary-menu .menu-item:hover .item-link:after {

    width: 100%;

    left: 0;

    right: auto

}



.sub-menu-home {

    position: absolute;

    width: 100%;

    height: calc(100vh - 150px);

    left: 0;

    top: 110%;

    opacity: 0;

    visibility: hidden;

    background-color: var(--on-suface-container);

    z-index: 1000;

    transition: all .3s ease;

    pointer-events: none;

    overflow: auto

}



.sub-menu-home ul {

    padding: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 20px

}



.sub-menu-home .item {

    padding: 20px;

    text-align: center;

    background-color: var(--bg-1);

    flex: 1 1 auto;

    max-width: calc(25% - 20px);

    width: 100%;

    border: 1px solid var(--bg-1);

    transition: all .3s ease

}



.sub-menu-home .item .image {

    margin-bottom: 20px;

    position: relative

}



.sub-menu-home .item .image .img-home {

    position: relative;

    height: 100%;

    display: block

}



.sub-menu-home .item .image .img-home img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.sub-menu-home .item .image .img-home:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0;

    background: linear-gradient(180deg, rgba(36, 40, 61, 0), rgb(36, 40, 61));

    transition: all .3s ease

}



.sub-menu-home .item .image .list-btn {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 5px

}



.sub-menu-home .item .image .list-btn .page-btn {

    opacity: 0;

    visibility: hidden;

    white-space: nowrap

}



.sub-menu-home .item .image:hover .img-home:before {

    height: 100%

}



.sub-menu-home .item .image:hover .list-btn .page-btn {

    opacity: 1;

    visibility: visible;

    transform: translateY(0)

}



.sub-menu-home .item .name-home {

    color: var(--white);

    position: relative;

    width: max-content;

    margin-left: auto;

    margin-right: auto

}



.sub-menu-home .item .name-home:after {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 2px;

    background: var(--bg-1);

    transition: all .3s ease

}



.sub-menu-home .item .name-home:hover:after {

    width: 100%;

    left: 0;

    right: auto

}



.sub-menu-home .item:hover {

    border-color: var(--outline)

}



.sub-menu {

    position: absolute;

    background-color: var(--on-suface-container);

    min-width: 220px;

    left: -25px;

    top: 110%;

    opacity: 0;

    visibility: hidden;

    z-index: 9999;

    transition: all .3s ease;

    pointer-events: none;

    padding: 24px

}



.sub-menu .sub-menu-item {

    padding: 6px 0

}



.sub-menu .sub-menu-item a {

    display: inline-block;

    color: var(--on-suface-variant-2);

    position: relative;

    font-weight: 500

}



.sub-menu .sub-menu-item a:after {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 2px;

    background: var(--bg-1);

    transition: all .3s ease

}



.sub-menu .sub-menu-item:first-child {

    padding-top: 0

}



.sub-menu .sub-menu-item:last-child {

    padding-bottom: 0

}



.sub-menu .sub-menu-item:hover a {

    color: var(--white)

}



.sub-menu .sub-menu-item:hover a:after {

    width: 100%;

    left: 0;

    right: auto

}



.style-ltr {

    direction: rtl

}



.style-ltr .top-bar .tf-phone {

    padding-left: 24px;

    padding-right: 0

}



.style-ltr .top-bar .tf-language {

    padding-left: 0;

    padding-right: 24px

}



.nav-icon {

    gap: 20px

}



.nav-icon,

.nav-search a {

    display: flex;

    align-items: center

}



.nav-search a {

    justify-content: center

}



.nav-search a i {

    color: var(--white);

    font-size: 24px

}



.nav-cart {

    position: relative

}



.nav-cart .number {

    position: absolute;

    color: var(--white);

    width: 16px;

    height: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--on-suface-container);

    top: -4px;

    right: -4px;

    border-radius: 50%

}



.mobile-button {

    display: none

}



.mobile-button a {

    display: block;

    width: 24px;

    height: 18px;

    position: relative;

    cursor: pointer

}



.mobile-button span {

    position: absolute;

    display: block;

    width: 24px;

    height: 2px;

    background-color: var(--white)

}



.mobile-button span:first-child {

    top: 0

}



.mobile-button span:nth-child(2) {

    top: 50%;

    transform: translateY(-50%)

}



.mobile-button span:last-child {

    bottom: 0

}



.mobile-nav-wrap {

    max-width: 300px

}



.mobile-nav-wrap .inner-mobile-nav {

    padding: 20px;

    width: 100%;

    height: 100%;

    background-color: var(--white);

    z-index: 999999;

    overflow-y: auto;

    transition: all .4s ease

}



.mobile-nav-wrap .inner-mobile-nav .mobile-nav-close {

    background-color: rgba(0, 0, 0, 0);

    border-radius: 50%;

    cursor: pointer

}



.mobile-nav-wrap .inner-mobile-nav .mobile-nav-close svg {

    width: 15px;

    height: 15px

}



.mobile-nav-wrap .inner-mobile-nav .top-header-mobi {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.mobile-nav-wrap .inner-mobile-nav a {

    color: var(--on-suface-container)

}



.mobile-nav-wrap .mobile-nav-right {

    display: flex;

    align-items: center;

    gap: 16px

}



.mobile-nav-wrap .socials-mobile .date {

    display: flex;

    gap: 8px;

    align-items: center;

    padding-bottom: 10px

}



.mobile-nav-wrap .socials-mobile .socials-icon {

    display: flex;

    align-items: center

}



.mobile-nav-wrap .socials-mobile .socials-icon .socials-item {

    width: 40px;

    height: 40px;

    border: 1px solid var(--Line);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease

}



.mobile-nav-wrap .socials-mobile .socials-icon .socials-item a {

    display: flex;

    align-items: center;

    justify-content: center

}



.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:first-child,

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(2),

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(3),

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(4) {

    border-right: 0

}



.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:hover {

    background-color: var(--On-Surface);

    border-color: var(--On-Surface)

}



.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:hover i {

    color: var(--White)

}



#menu-mobile {

    display: flex;

    flex-direction: column;

    padding: 30px 0

}



#menu-mobile>li {

    position: relative;

    border-bottom: 1px solid var(--outline);

    cursor: pointer

}



#menu-mobile>li a {

    padding: 10px 0

}



#menu-mobile>li .sub-menu-mobile {

    border-radius: 8px;

    text-align: start;

    transition: all .2s ease;

    margin-bottom: 15px

}



#menu-mobile>li .sub-menu-mobile .sub-menu-mobile2 a {

    padding-left: 30px !important;

    padding-right: 30px !important

}



#menu-mobile>li .sub-menu-mobile.show {

    transform: translate(0);

    opacity: 1;

    visibility: visible

}



#menu-mobile>li .sub-menu-mobile li {

    cursor: pointer

}



#menu-mobile>li .sub-menu-mobile li a {

    padding: 5px 20px

}



#menu-mobile>li .sub-menu-mobile li:last-child {

    border: none

}



#menu-mobile li a {

    font-size: 16px;

    line-height: 22px;

    font-weight: 500;

    width: 100%;

    display: inline-block

}



#menu-mobile li.menu-item-has-children-mobile>a {

    position: relative

}



#menu-mobile li.menu-item-has-children-mobile>a:after {

    content: "";

    font-family: icomoon;

    font-weight: 300;

    position: absolute;

    font-size: 7px;

    right: 0;

    top: 33%;

    line-height: 16px;

    transition: all .5s ease

}



#menu-mobile li.menu-item-has-children-mobile>a.collapsed:after {

    transform: rotate(0deg)

}



#menu-mobile li.menu-item-has-children-mobile>a:not(.collapsed):after {

    transform: rotate(180deg)

}



#menu-mobile li.menu-item-has-children-mobile2>a {

    position: relative

}



#menu-mobile li.menu-item-has-children-mobile2>a:after {

    content: "";

    position: absolute;

    font-family: icomoon;

    font-weight: 300;

    font-size: 7px;

    right: 0;

    top: 25%;

    transition: all .5s ease

}



#menu-mobile li.menu-item-has-children-mobile2>a.collapsed:after {

    transform: rotate(0deg)

}



#menu-mobile li.menu-item-has-children-mobile2>a:not(.collapsed):after {

    transform: rotate(180deg)

}



.content-contact-moblile {

    margin-bottom: 10px

}



.content-contact-moblile a i {

    font-size: 20px

}



.tf-social-header-mobile .style-border .item a {

    border-color: var(--outline)

}



.contact-mobile .title-contact-mobile {

    margin-bottom: 15px

}



.current-item .item-link-2:after,

.current-menu-item .item-link:after {

    width: 100% !important;

    left: 0 !important;

    right: auto !important

}



.current-item-home {

    border-color: var(--outline) !important

}



.current-item-home .name-home a:after {

    width: 100% !important;

    left: 0 !important;

    right: auto !important

}



.current-menu-mobile-item>a {

    color: var(--primary) !important

}



.header.style-fix {

    top: 0

}



.header.style-2.is-fixed {

    top: 0;

    border-bottom: 1px solid var(--outline)

}



.header.style-2.is-fixed .header-bottom.bg-1 {

    background-color: var(--on-suface-container)

}



.header.style-1.is-fixed {

    top: 0;

    background: var(--on-suface-container)

}



.header.style-1.is-fixed.style-border-radius {

    background-color: rgba(0, 0, 0, 0)

}



.header.style-1.is-fixed.bg-color-white {

    background-color: var(--white)

}



.navigation .current-menu a:after {

    width: 100% !important;

    left: 0 !important;

    right: auto !important

}



/*.footer {

    background-color: var(--on-suface-container)

}*/



.footer .footer-top {

    display: flex;

    gap: 30px 40px

}



.footer .footer-left {

    padding-right: 30px;

    border-right: 1px solid var(--bg-1);

    max-width: 421px

}



.footer .footer-center,

.footer .footer-left {

    padding-top: 80px;

    padding-bottom: 80px;

    width: 100%

}



.footer .footer-center {

    display: flex;

    gap: 0 47px;

    padding-left: 19px;

    max-width: 368px

}



.footer .footer-right {

    padding-top: 80px;

    padding-bottom: 80px;

    width: 100%;

    padding-left: 30px;

    border-left: 1px solid var(--bg-1)

}



.footer.style-2 {

    position: relative

}



.footer.style-2 .logo-footer {

    padding-bottom: 32px

}



.footer.style-2 .footer-left {

    padding-right: 0;

    border-right: 0;

    padding-top: 80px;

    padding-bottom: 73px

}



.footer.style-2 .footer-left .text {

    padding-bottom: 32px

}



.footer.style-2 .footer-top {

    position: relative

}



.footer.style-2 .footer-right {

    padding-left: 0;

    border-left: 0;

    padding-top: 80px;

    padding-bottom: 73px

}



.footer.style-2 .footer-center {

    max-width: 100%;

    padding-top: 0;

    padding-bottom: 0;

    padding-left: 0;

    gap: 0 15px

}



.footer.style-2 .footer-center .footer-content {

    flex-grow: 1;

    flex-shrink: 1;

    flex-basis: calc(33.33% - 32px)

}



.footer.style-2 .footer-center .footer-content.quick-links ul {

    max-width: 119px;

    width: 100%

}



.footer.style-2 .footer-center .footer-content .title-mobile {

    color: var(--on-suface-variant-2)

}



.footer.style-2 .footer-center .footer-content .support-item-footer a {

    color: var(--surface)

}



.footer.style-2 .footer-subscribe {

    display: flex;

    gap: 45px;

    margin-bottom: 40px;

    padding-bottom: 40px;

    border-bottom: 1px solid var(--bg-1)

}



.footer.style-2 .footer-subscribe .footer-subscribe-content {

    max-width: calc(100% - 290px);

    width: 100%

}



.footer.style-2 .footer-subscribe fieldset {

    margin-bottom: 7px

}



.footer.style-2 .footer-contact .support-item-footer {

    padding-bottom: 4px

}



.footer.style-2 .image {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



.footer.style-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.footer.style-2.bg-color-white {

    background-color: var(--white)

}



.footer.style-2.bg-color-white .text {

    color: var(--on-suface-variant-1)

}



.footer.style-2.bg-color-white .title-footer {

    color: var(--on-suface-container)

}



.footer.style-2.bg-color-white .title-mobile,

.footer.style-2.bg-color-white .title-mobile:before {

    color: var(--on-suface-variant-1) !important

}



.footer.style-2.bg-color-white .tf-social .item a {

    border-color: var(--outline)

}



.footer.style-2.bg-color-white fieldset input[type=text] {

    border: 1px solid var(--outline);

    background-color: var(--surface);

    color: var(--on-suface-container)

}



.footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter {

    background-color: var(--on-suface-container)

}



.footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter i {

    color: var(--white)

}



.footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter:hover {

    background-color: var(--primary)

}



.footer.style-2.bg-color-white .support-item-footer a {

    color: var(--on-suface-container) !important

}



.footer.style-2.bg-color-white .support-item-footer a:before {

    background: var(--on-suface-container)

}



.footer.style-2.bg-color-white .support-item-footer span {

    color: var(--on-suface-container) !important

}



.footer.style-2.bg-color-white .footer-bottom {

    border-color: var(--outline)

}



.footer.h-6 .footer-left {

    padding-top: 65px;

    padding-bottom: 65px;

    max-width: 416px

}



.footer.h-6 .footer-center {

    padding-top: 65px;

    padding-bottom: 65px;

    padding-left: 14px;

    gap: 0 57px

}



.footer.h-6 .footer-right {

    padding-top: 65px;

    padding-bottom: 65px;

    padding-left: 35px

}



.footer-left .logo-footer,

.footer-left .text {

    padding-bottom: 20px

}



.footer-left .text {

    color: var(--on-suface-variant-2)

}



.footer-left .contact-footer .contact-top {

    padding-bottom: 12px

}



.footer-left .contact-footer .contact-bottom {

    display: flex;

    gap: 12px 40px;

    flex-wrap: wrap

}



.contact-footer-content p {

    color: var(--on-suface-variant-2)

}



.contact-footer-content a {

    color: var(--white)

}



.footer-content .label {

    color: var(--white);

    margin-bottom: 16px

}



.footer-content .support-item-footer {

    padding-bottom: 12px

}



.footer-content .support-item-footer a {

    color: var(--on-suface-variant-2);

    position: relative

}



.footer-content .support-item-footer a:before {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 1px;

    background: var(--white);

    transition: all .3s ease

}



.footer-content .support-item-footer span,

.footer-content .support-item-footer:hover a {

    color: var(--white)

}



.footer-content .support-item-footer:hover a:before {

    width: 100%;

    left: 0;

    right: auto

}



.footer-subscribe {

    padding-bottom: 21px

}



.footer-subscribe .label {

    color: var(--white);

    padding-bottom: 12px

}



.footer-subscribe fieldset {

    position: relative;

    margin-bottom: 12px

}



.footer-subscribe fieldset input[type=text] {

    width: 100%;

    border: 1px solid var(--bg-1);

    border-radius: 4px;

    padding: 14px 16px;

    font-size: 14px;

    line-height: 22px;

    border-radius: 999px;

    background-color: rgba(0, 0, 0, 0);

    color: var(--white)

}



.footer-subscribe fieldset input[type=text]::placeholder {

    color: var(--on-suface-variant-2);

    font-size: 14px;

    line-height: 22px

}



.footer-subscribe .tf-btn-newsletter {

    position: absolute;

    top: 50%;

    right: 8px;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    background-color: var(--white);

    border-radius: 50%

}



.footer-subscribe .tf-btn-newsletter i {

    font-size: 20px;

    color: var(--on-suface-container)

}



.footer-subscribe .tf-btn-newsletter:hover {

    background-color: var(--primary)

}



.footer-subscribe .tf-btn-newsletter:hover i {

    color: var(--white)

}



.footer-subscribe .text {

    color: var(--on-suface-variant-2)

}



.footer-subscribe.style-bg-white fieldset input[type=email],

.footer-subscribe.style-bg-white fieldset input[type=text] {

    border: 1px solid var(--white);

    border-radius: 999px;

    background-color: var(--white);

    color: var(--on-suface-container)

}



.footer-subscribe.style-bg-white .tf-btn-newsletter {

    background-color: var(--on-suface-container)

}



.footer-subscribe.style-bg-white .tf-btn-newsletter i {

    color: var(--white)

}



.footer-subscribe.style-bg-white .tf-btn-newsletter:hover {

    background-color: var(--primary)

}



.footer-subscribe.style-bg-white .text {

    color: var(--white)

}



.footer-social .title-footer {

    color: var(--white);

    margin-bottom: 12px

}



.footer-social .tf-social .item a {

    border-color: var(--bg-1)

}



.footer-bottom {

    border-top: 1px solid var(--bg-1)

}



.footer-bottom .footer-bottom-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 0;

    flex-wrap: wrap

}



.footer-bottom .footer-bottom-inner .text {

    color: var(--on-suface-variant-2)

}



.footer-bottom .footer-bottom-inner .right ul {

    display: flex;

    flex-wrap: wrap

}



.footer-bottom .footer-bottom-inner .right ul li {

    padding-right: 11px;

    border-right: 1px solid var(--on-suface-variant-2);

    margin-right: 13px

}



.footer-bottom .footer-bottom-inner .right ul li:last-child {

    padding-right: 0;

    border-right: 0;

    margin-right: 0

}



.footer-bottom .footer-bottom-inner .right a {

    color: var(--on-suface-variant-2)

}



.wg-tab {

    overflow: auto

}



.wg-tab::-webkit-scrollbar {

    display: none

}



.wg-tab ul {

    width: max-content;

    min-width: 366px;

    display: flex;

    gap: 40.5px;

    border-bottom: 1px solid var(--outline);

    margin-bottom: 40px

}



.wg-tab ul li a {

    display: inline-block;

    color: var(--on-suface-container);

    padding-bottom: 8px;

    position: relative

}



.wg-tab ul li a:before {

    content: "";

    position: absolute;

    left: auto;

    right: 0;

    height: 2px;

    width: 0;

    bottom: 0;

    background-color: var(--primary);

    transition: all .3s ease

}



.wg-tab ul li a.active:before,

.wg-tab ul li:hover a:before {

    left: 0;

    right: auto;

    width: 100%

}



.wg-tab.style-small ul {

    gap: 31.5px;

    margin-bottom: 20px

}



.wg-tab.style-small ul li a {

    padding-bottom: 6px

}



.wg-tab .min-w-366 {

    min-width: 366px

}



.wg-tab .min-w-757 {

    min-width: 757px

}



.wg-tab .min-w-1131 {

    min-width: 1131px

}



.wg-tab.style-2 ul {

    width: 100%;

    min-width: 1290px;

    gap: 0;

    border-bottom: 0;

    margin-bottom: 0

}



.wg-tab.style-2 ul li {

    max-width: 25%;

    width: 100%

}



.wg-tab.style-2 ul li a {

    display: inline-block;

    color: var(--on-suface-container);

    padding: 16px 0;

    position: relative;

    background-color: var(--surface);

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-right: 2px solid var(--outline)

}



.wg-tab.style-2 ul li a:before {

    display: none

}



.wg-tab.style-2 ul li a.active {

    color: var(--white);

    background-color: var(--on-suface-container);

    border-color: var(--on-suface-container)

}



.wg-tab.style-2 ul li:last-child a {

    border-right: 0

}



.wg-tab.style-2 ul li:hover a {

    color: var(--white);

    background-color: var(--on-suface-container)

}



.wg-tab.style-3 ul {

    flex-direction: column;

    gap: 0;

    border-bottom: 0;

    min-width: 410px

}



.wg-tab.style-3 ul li a {

    display: inline-block;

    color: var(--on-suface-variant-2);

    position: relative;

    width: 100%;

    padding: 33px 0 30px;

    border-bottom: 1px solid var(--outline)

}



.wg-tab.style-3 ul li a:before {

    display: none

}



.wg-tab.style-3 ul li a:after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    color: var(--on-suface-variant-2);

    font-family: icomoon;

    transform: translateY(-50%);

    transition: all .3s ease

}



.wg-tab.style-3 ul li a.active {

    color: var(--on-suface-container);

    border-color: var(--on-suface-container)

}



.wg-tab.style-3 ul li a.active:after {

    color: var(--primary)

}



.wg-tab.style-3 ul li:hover a {

    color: var(--on-suface-container);

    border-color: var(--on-suface-container)

}



.wg-tab.style-3 ul li:hover a:after {

    color: var(--primary)

}



.wg-tab.no-border ul {

    border-bottom: 0

}



.flat-animate-tab {

    overflow: hidden

}



.flat-animate-tab.style-row {

    display: flex;

    background-color: var(--white);

    padding: 40px;

    gap: 40px

}



.flat-animate-tab.style-row .tab-content {

    max-width: calc(100% - 450px)

}



.flat-animate-tab.style-row .tab-content .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tab-content {

    position: relative

}



.tab-content .tab-pane {

    display: block;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    position: absolute;

    z-index: 1;

    top: 0;

    left: 0;

    right: 0;

    transform: translateY(30px);

    transition-timing-function: ease-in;

    transition-duration: .2s

}



.tab-content .tab-pane.active {

    pointer-events: auto;

    opacity: 1;

    visibility: visible;

    position: relative;

    z-index: 2;

    transform: none;

    transition-timing-function: ease-out;

    transition-duration: .3s;

    transition-delay: .3s

}



.tab-content p {

    color: var(--on-suface-variant-1)

}



.wrap-switch-tabs-content .tabs-title {

    display: flex;

    align-items: center;

    gap: 20px;

    justify-content: center

}



.wrap-switch-tabs-content .tabs-title .tab-title-text {

    color: var(--on-suface-variant-2);

    transition: all .3s ease

}



.wrap-switch-tabs-content .tabs-title .tab-title-text.is-active {

    color: var(--on-suface-container)

}



.wrap-switch-tabs-content .tabs-content-switch {

    position: relative

}



.wrap-switch-tabs-content .tabs-content-switch .tab-item {

    position: absolute;

    left: 0;

    bottom: 0;

    right: 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(40px);

    transition: all .5s ease

}



.wrap-switch-tabs-content .tabs-content-switch .tab-item.is-active {

    position: relative;

    opacity: 1;

    visibility: visible;

    transform: none;

    z-index: 2;

    transition: all .5s ease

}



.widget-tabs-product-review ul {

    margin-bottom: 0;

    margin-left: auto;

    margin-right: auto;

    min-width: unset

}



.widget-tabs-product-review ul li a:before {

    background-color: var(--on-suface-container)

}



.tf-btn {

    position: relative;

    overflow: hidden;

    display: block;

    width: max-content

}



.tf-btn span {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    position: relative;

    z-index: 2;

    transition: all .3s ease

}



.tf-btn:before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 0;

    height: 100%;

    background-color: var(--primary);

    z-index: 1;

    transition: all .3s ease

}



.tf-btn:hover span {

    color: var(--white)

}



.tf-btn:hover:before {

    left: 0;

    width: 100%

}



.tf-btn.bg-on-suface-container {

    background-color: var(--on-suface-container);

    color: var(--white)

}



.tf-btn.bg-on-suface-container:before {

    height: 100%;

    background-color: var(--primary)

}



.tf-btn.bg-on-suface-container:hover span {

    color: var(--white)

}



.tf-btn.bg-white {

    background-color: var(--white) !important;

    color: var(--on-suface-container)

}



.tf-btn.bg-white:before {

    height: 100%;

    background-color: var(--on-suface-container)

}



.tf-btn.bg-white:hover {

    border-color: var(--on-suface-container);

    background-color: var(--on-suface-container) !important

}



.tf-btn.bg-white:hover span {

    color: var(--white)

}



.tf-btn.bg-white.bg-white-style-2 {

    border: 1px solid rgba(0, 0, 0, 0)

}



.tf-btn.bg-white.bg-white-style-2:hover {

    border-color: var(--white)

}



.tf-btn.bg-color-primary {

    background-color: var(--primary)

}



.tf-btn.bg-color-primary span {

    color: var(--white)

}



.tf-btn.bg-color-primary:before {

    height: 100%;

    background-color: var(--on-suface-container)

}



.tf-btn.bg-color-primary:hover span {

    color: var(--white)

}



.tf-btn.style-border {

    border: 1px solid var(--primary)

}



.tf-btn.style-border span {

    color: var(--on-suface-container)

}



.tf-btn.style-border:hover span {

    color: var(--white)

}



.tf-btn.style-1 {

    padding: 15px 40px;

    border-radius: 999px

}



.tf-btn.style-1:before {

    border-radius: 26px

}



.tf-btn.style-2 {

    border-radius: 999px;

    padding: 12px 0

}



.tf-btn.style-2:before {

    border-radius: 26px

}



.tf-btn.style-3 {

    border-radius: 999px;

    padding: 8px 0

}



.tf-btn.style-3:before {

    border-radius: 26px

}



.tf-btn.style-4 {

    border-radius: 999px;

    padding: 12px 40px

}



.tf-btn.style-4:before {

    border-radius: 26px

}



.tf-btn.w-full {

    width: 100%

}



.tf-btn.hover-bg-primary:before {

    height: 100%;

    background-color: var(--primary)

}



.tf-btn.hover-bg-primary:hover {

    background-color: var(--primary) !important

}



.default-btn {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px

}



.default-btn span {

    border-bottom: 2px solid var(--on-suface-container);

    transition: all .3s ease

}



.default-btn.style-color-white span {

    color: var(--white);

    border-color: var(--white)

}



.default-btn.style-color-white:hover span {

    color: var(--primary);

    border-color: var(--primary)

}



.default-btn:hover span {

    border-color: var(--primary)

}



.tf-btn-search {

    display: flex;

    align-items: center;

    justify-content: center

}



.btn-load-more .tf-btn {

    padding: 12px 40px

}



.tf-btn-reply {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    color: var(--primary)

}



.tf-btn-reply:hover {

    color: var(--on-suface-container)

}



.tf-btn-arrow-t-r {

    display: flex;

    align-items: center;

    gap: 4px

}



.tf-btn-arrow-t-r span {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    color: var(--white);

    border-bottom: 1px solid var(--white);

    transition: all .3s ease

}



.tf-btn-arrow-t-r .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-btn-arrow-t-r i {

    color: var(--white);

    transition: all .3s ease

}



.tf-btn-arrow-t-r:hover span {

    color: var(--primary);

    border-color: var(--primary)

}



.tf-btn-arrow-t-r:hover i {

    color: var(--primary)

}



.btn-arrow-item {

    width: 60px;

    height: 60px;

    background-color: var(--bg-1);

    border: 1px solid var(--bg-1);

    border-radius: 50%;

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    overflow: hidden

}



.btn-arrow-item i {

    color: var(--white);

    font-size: 32px

}



.btn-arrow-item:hover i {

    animation: hover-btn-arrow .3s linear

}



.btn-cancel-review {

    display: none

}



.switch-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px

}



.switch-container .switch {

    position: relative;

    width: 80px;

    height: 40px;

    background-color: var(--white);

    border-radius: 999px;

    border: 1px solid var(--on-suface-variant-2);

    cursor: pointer;

    transition: all .3s ease

}



.switch-container .switch .toggle {

    position: absolute;

    width: 32px;

    height: 32px;

    background: var(--primary);

    border-radius: 50%;

    top: 3px;

    left: 3px;

    transition: transform .3s ease-in-out

}



.switch-container .switch.is-active .toggle {

    transform: translateX(40px)

}



.switch-container .switch-label {

    color: var(--on-suface-variant-2)

}



.page-btn,

.switch-container .switch-label.is-active {

    color: var(--on-suface-container)

}



.page-btn {

    padding: 5px 10px;

    background-color: var(--white);

    border-radius: 999px;

    transition: all .3s ease

}



.page-btn:hover {

    background-color: var(--primary);

    color: var(--white)

}



.range-slider .range-two-val {

    height: 4px;

    box-shadow: none;

    border: 0;

    background-color: var(--outline)

}



.range-slider .range-two-val .noUi-connects {

    position: relative

}



.range-slider .range-two-val .noUi-connects .noUi-connect {

    background-color: var(--on-suface-container);

    height: 4px

}



.range-slider .range-two-val .noUi-origin .noUi-handle {

    position: absolute;

    cursor: pointer;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background-color: var(--white);

    border: 4px solid var(--on-suface-container);

    box-shadow: none;

    top: -7px;

    right: -9px

}



.range-slider .range-two-val .noUi-origin .noUi-handle:after,

.range-slider .range-two-val .noUi-origin .noUi-handle:before {

    display: none

}



.range-slider .range-two-val .noUi-origin .noUi-handle:active {

    right: -10px !important

}



.range-slider .bottom {

    margin-top: 21px;

    display: flex;

    align-items: center;

    justify-content: space-between

}



.range-slider .value {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 11px 12px;

    border: 1px solid var(--outline);

    width: max-content

}



.range-slider .value .price-max,

.range-slider .value .price-min {

    border: 1px solid var(--Line);

    padding: 6px 12px;

    border-radius: 8px;

    width: 100%;

    position: relative

}



.range-slider .value>div {

    color: var(--color-text)

}



.range-slider .input-container div {

    position: absolute;

    width: max-content;

    padding: 5px;

    margin: 0;

    border: 1px solid var(--Line);

    border-radius: 5px;

    top: 20%;

    background-color: var(--White)

}



.range-slider .input-container div:before {

    position: absolute;

    display: block;

    content: "";

    bottom: -6px;

    left: 50%;

    width: 0;

    height: 0;

    margin-left: -3px;

    overflow: hidden;

    border-top-color: rgba(0, 0, 0, 0);

    border: 3px solid var(--Line);

    border-top-color: var(--White)

}



form {

    position: relative;

    z-index: 30

}



form input[type=color],

form input[type=date],

form input[type=datetime-local],

form input[type=datetime],

form input[type=email],

form input[type=month],

form input[type=number],

form input[type=password],

form input[type=search],

form input[type=tel],

form input[type=text],

form input[type=time],

form input[type=url],

form input[type=week],

form textarea {

    box-shadow: none;

    width: 100%;

    padding: 8px 15px;

    font-size: 16px;

    font-weight: 400;

    line-height: 28px;

    border: unset;

    overflow: hidden;

    margin-bottom: 0;

    outline: none

}



form input[type=color]::placeholder,

form input[type=date]::placeholder,

form input[type=datetime-local]::placeholder,

form input[type=datetime]::placeholder,

form input[type=email]::placeholder,

form input[type=month]::placeholder,

form input[type=number]::placeholder,

form input[type=password]::placeholder,

form input[type=search]::placeholder,

form input[type=tel]::placeholder,

form input[type=text]::placeholder,

form input[type=time]::placeholder,

form input[type=url]::placeholder,

form input[type=week]::placeholder,

form textarea::placeholder {

    font-size: 16px;

    font-weight: 400;

    line-height: 28px;

    color: var(--color-text)

}



form input[type=color].style-default,

form input[type=date].style-default,

form input[type=datetime-local].style-default,

form input[type=datetime].style-default,

form input[type=email].style-default,

form input[type=month].style-default,

form input[type=number].style-default,

form input[type=password].style-default,

form input[type=search].style-default,

form input[type=tel].style-default,

form input[type=text].style-default,

form input[type=time].style-default,

form input[type=url].style-default,

form input[type=week].style-default,

form textarea.style-default {

    padding: 0;

    border: 0 !important;

    border-radius: 0;

    background-color: rgba(0, 0, 0, 0)

}



form input:-webkit-autofill {

    background-color: rgba(0, 0, 0, 0) !important;

    box-shadow: rgba(0, 0, 0, 0) !important;

    -webkit-transition: background-color 5000s ease-in-out 0s;

    transition: background-color 5000s ease-in-out 0s

}



form button,

form input[type=button],

form input[type=reset],

form input[type=submit] {

    background-color: rgba(0, 0, 0, 0);

    overflow: hidden;

    padding: 0

}



fieldset {

    width: 100%

}



.cols {

    display: flex;

    align-items: center

}



.cols.g-20 {

    gap: 20px

}



.write-review {

    padding: 26px;

    border: 2px solid var(--outline);

    border-radius: 8px

}



.write-review .top {

    display: flex;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap

}



.write-review .title-wg-comment {

    margin-bottom: 24px

}



.write-review .cols {

    margin-bottom: 20px

}



.write-review input[type=email],

.write-review input[type=text] {

    border: 1px solid var(--outline);

    padding: 8.5px 16px;

    border-radius: 4px

}



.write-review input[type=email]::placeholder,

.write-review input[type=text]::placeholder {

    color: var(--on-suface-variant-2)

}



.write-review textarea {

    padding: 16px;

    border: 1px solid var(--outline);

    border-radius: 4px;

    margin-bottom: 20px;

    height: 100px

}



.write-review textarea::placeholder {

    color: var(--on-suface-variant-2)

}



.write-review .tf-btn {

    padding: 12px 32px

}



.write-review .check-box {

    margin-left: 3px

}



.write-review.no-border {

    padding: 0;

    border: 0;

    border-radius: 0

}



.check-box {

    display: flex;

    align-items: center;

    gap: 8px

}



input[type=checkbox] {

    position: relative;

    border-radius: 1px;

    background: none;

    cursor: pointer;

    outline: 0;

    height: 15px;

    width: 15px;

    overflow: visible

}



.form-contact-home {

    max-width: 400px;

    width: 100%;

    padding: 32px;

    background-color: var(--bg-1)

}



.form-contact-home .title-form {

    margin-bottom: 24px;

    color: var(--white)

}



.form-contact-home input[type=email],

.form-contact-home input[type=number],

.form-contact-home input[type=text] {

    background-color: var(--bg-1);

    border: 1px solid var(--bg-1);

    border-radius: 4px;

    margin-bottom: 12px;

    color: var(--white);

    font-weight: 400;

    font-size: 14px;

    line-height: 22px;

    padding: 11px 16px

}



.form-contact-home input[type=email]::placeholder,

.form-contact-home input[type=number]::placeholder,

.form-contact-home input[type=text]::placeholder {

    color: var(--white);

    font-weight: 400;

    font-size: 14px;

    line-height: 22px

}



.form-contact-home .nice-select {

    position: relative;

    background-color: var(--bg-1);

    border-color: var(--bg-1) !important;

    margin-bottom: 12px;

    padding: 10px 16px

}



.form-contact-home .nice-select:before {

    color: var(--white)

}



.form-contact-home .nice-select>span,

.form-contact-home textarea {

    color: var(--white);

    font-weight: 400;

    font-size: 14px;

    line-height: 22px

}



.form-contact-home textarea {

    border: 1px solid var(--bg-1);

    margin-bottom: 24px;

    height: 86px;

    background-color: var(--bg-1);

    padding: 11px 16px

}



.form-contact-home textarea::placeholder {

    color: var(--white);

    font-weight: 400;

    font-size: 14px;

    line-height: 22px

}



.form-contact-home .error {

    color: var(--white) !important

}



.form-contact-home.style-border {

    max-width: 100%;

    border: 2px solid var(--outline);

    padding: 32px 32px 21px

}



.form-contact-home.style-border .title-form {

    color: var(--on-suface-container);

    margin-bottom: 22px

}



.form-contact-home.style-border input[type=email],

.form-contact-home.style-border input[type=number],

.form-contact-home.style-border input[type=text] {

    background-color: var(--white);

    border: 1px solid var(--outline);

    color: var(--on-suface-container)

}



.form-contact-home.style-border input[type=email]::placeholder,

.form-contact-home.style-border input[type=number]::placeholder,

.form-contact-home.style-border input[type=text]::placeholder {

    color: var(--on-suface-variant-2)

}



.form-contact-home.style-border .nice-select {

    background-color: var(--white);

    border: 1px solid var(--outline) !important;

    margin-bottom: 12px

}



.form-contact-home.style-border .nice-select:before,

.form-contact-home.style-border .nice-select>span {

    color: var(--on-suface-container)

}



.form-contact-home.style-border textarea {

    border: 1px solid var(--outline);

    background-color: var(--white);

    color: var(--on-suface-container)

}



.form-contact-home.style-border textarea::placeholder {

    color: var(--on-suface-variant-2)

}



.tf-check-rounded {

    position: relative;

    border: 1px solid var(--on-suface-container);

    border-radius: 50% !important;

    background: none;

    cursor: pointer;

    outline: 0;

    height: 14px !important;

    width: 14px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    -webkit-appearance: none

}



.tf-check-rounded:before {

    content: "";

    position: absolute;

    border-radius: 50%;

    width: 8px;

    height: 8px;

    background-color: var(--on-suface-container);

    opacity: 0

}



.tf-check-rounded:checked {

    border-color: var(--on-suface-container)

}



.tf-check-rounded:checked:before {

    opacity: 1

}



.form-contact-us {

    margin-top: 5px;

    padding: 30px 31px;

    border: 1px solid var(--outline)

}



.form-contact-us .cols {

    gap: 16px;

    margin-bottom: 19px

}



.form-contact-us .cols fieldset {

    max-width: 50%;

    width: 100%

}



.form-contact-us input[type=email],

.form-contact-us input[type=number],

.form-contact-us input[type=text] {

    background-color: var(--white);

    border: 1px solid var(--outline);

    border-radius: 4px;

    color: var(--on-suface-container);

    padding: 9px 16px

}



.form-contact-us input[type=email]::placeholder,

.form-contact-us input[type=number]::placeholder,

.form-contact-us input[type=text]::placeholder {

    color: var(--on-suface-variant-2)

}



.form-contact-us .nice-select {

    background-color: var(--white);

    border: 1px solid var(--outline) !important;

    padding: 11px 16px

}



.form-contact-us .nice-select:before,

.form-contact-us .nice-select>span,

.form-contact-us textarea {

    color: var(--on-suface-container)

}



.form-contact-us textarea {

    border: 1px solid var(--outline);

    margin-bottom: 24px;

    height: 140px;

    background-color: var(--bg-1);

    padding: 11px 13px

}



.form-contact-us textarea::placeholder {

    color: var(--on-suface-variant-2)

}



.form-contact-us .tf-btn {

    padding: 16px 0 !important

}



.tf-btn-arrow {

    width: 52px;

    height: 76px;

    border-radius: 1000px;

    padding: 28px 16px;

    background: var(--bg-1);

    -webkit-backdrop-filter: blur(4px);

    backdrop-filter: blur(4px);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease

}



.tf-btn-arrow i {

    color: var(--white)

}



.tf-btn-arrow.swiper-button-disabled {

    pointer-events: none;

    position: relative

}



.tf-btn-arrow.swiper-button-disabled:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--white);

    opacity: .5;

    border-radius: 1000px

}



.tf-btn-arrow.style-2 {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: var(--surface);

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease

}



.tf-btn-arrow.style-2 i {

    color: var(--on-suface-container);

    font-size: 13px;

    transition: all .3s ease

}



.tf-btn-arrow.style-2:hover {

    background-color: var(--on-suface-container)

}



.tf-btn-arrow.style-2:hover i {

    color: var(--white)

}



.tf-btn-arrow.style-3 {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-btn-arrow.style-3,

.tf-btn-arrow.style-3 i {

    transition: all .3s ease

}



.tf-btn-arrow.style-3:hover {

    background-color: var(--white)

}



.tf-btn-arrow.style-3:hover i {

    color: var(--on-suface-container)

}



.swiper-slide-active .fade-item-1 {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

    transition-delay: .6s

}



.swiper-slide-active .fade-item-2 {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

    transition-delay: .8s

}



.swiper-slide-active .fade-item-3 {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

    transition-delay: 1s

}



.sw-new {

    margin: 0 -20px

}



.sw-new .swiper-slide {

    padding: 0 20px;

    border-right: 1px solid var(--outline)

}



.sw-new .swiper-slide:last-child {

    border: none

}



.sw-new.sw-new-2 {

    margin: 0 -21px

}



.sw-new.sw-new-2 .swiper-slide {

    padding: 0 22px;

    border-right: 1px solid var(--outline)

}



.sw-new.sw-new-2 .swiper-slide:last-child {

    border: none

}



.sw-icon-list {

    margin: 0 -30px

}



.sw-icon-list .swiper-slide {

    padding: 0 30px;

    border-right: 1px solid var(--outline)

}



.sw-icon-list .swiper-slide:last-child {

    border: none

}



.sw-services-list .swiper-slide {

    height: auto !important

}



.sw-services-list .swiper-slide>div {

    height: 100%

}



.sw-services-list .swiper-wrapper {

    margin-bottom: 35px

}



.sw-services-list .services-item {

    min-height: 354px

}



.sw-services-list .sw-pagination-layout {

    max-width: max-content;

    margin-left: auto;

    margin-right: auto

}



.sw-services-list .swiper-pagination-bullet {

    left: 6px

}



.sw-testimonial .swiper-slide {

    height: auto !important

}



.sw-testimonial .swiper-slide>div {

    height: 100%

}



.sw-pagination-layout.style-color-white .swiper-pagination-bullet {

    border: 1px solid var(--white)

}



.sw-pagination-layout.style-color-white .swiper-pagination-bullet.swiper-pagination-bullet-active {

    background-color: var(--white)

}



.sw-pagination-layout.style-color-white .swiper-pagination-bullet.swiper-pagination-bullet-active:after {

    border-color: var(--white)

}



.swiper-pagination-bullet {

    background-color: rgba(0, 0, 0, 0);

    opacity: 1;

    width: 8px;

    height: 8px;

    position: relative;

    margin-right: 13px !important;

    border: 1px solid var(--on-suface-container)

}



.swiper-pagination-bullet:after {

    position: absolute;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid rgba(0, 0, 0, 0);

    border-radius: 50%;

    width: 20px;

    height: 20px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    content: "";

    z-index: 5

}



.swiper-pagination-bullet.swiper-pagination-bullet-active {

    background-color: var(--on-suface-container)

}



.swiper-pagination-bullet.swiper-pagination-bullet-active:after {

    border-color: var(--on-suface-container)

}



.sw-benefit-h6 .box-icon {

    min-height: 298px;

    height: 100%

}



.tf-project-swiper {

    position: relative

}



.tf-project-swiper .tf-project-media-main .image img {

    width: 100%;

    height: 100%;

    min-height: 350px;

    object-fit: cover

}



.tf-project-swiper .tf-project-media-thumbs {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0

}



.tf-project-swiper .tf-project-media-thumbs .project-content {

    padding: 24px;

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    border-right: 1px solid var(--bg-1);

    transition: all .3s ease

}



.tf-project-swiper .tf-project-media-thumbs .project-content h5 {

    margin-bottom: 6px

}



.tf-project-swiper .tf-project-media-thumbs .project-content a,

.tf-project-swiper .tf-project-media-thumbs .project-content p {

    color: var(--white);

    transition: all .3s ease;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 1

}



.tf-project-swiper .tf-project-media-thumbs .project-content:hover {

    background-color: var(--white)

}



.tf-project-swiper .tf-project-media-thumbs .project-content:hover a {

    color: var(--on-suface-container)

}



.tf-project-swiper .tf-project-media-thumbs .project-content:hover p {

    color: var(--primary)

}



.tf-project-swiper .tf-project-media-thumbs .swiper-slide:last-child .project-content {

    border-right: none

}



.tf-project-swiper .tf-project-media-thumbs .swiper-slide.swiper-slide-thumb-active .project-content {

    background-color: var(--white)

}



.tf-project-swiper .tf-project-media-thumbs .swiper-slide.swiper-slide-thumb-active .project-content a {

    color: var(--on-suface-container)

}



.tf-project-swiper .tf-project-media-thumbs .swiper-slide.swiper-slide-thumb-active .project-content p {

    color: var(--primary)

}



.swiper-testimonials-h8 {

    display: flex;

    align-items: center;

    gap: 20px

}



.tf-testimonials-thumbs .swiper-slide {

    border: 2px solid rgba(0, 0, 0, 0);

    cursor: pointer

}



.tf-testimonials-thumbs .swiper-slide:hover {

    border-color: var(--primary)

}



.tf-testimonials-thumbs .swiper-slide:hover .img-thumb img {

    filter: grayscale(0);

    opacity: 1

}



.tf-testimonials-thumbs .swiper-slide-thumb-active {

    border-color: var(--primary)

}



.tf-testimonials-thumbs .swiper-slide-thumb-active .img-thumb img {

    filter: grayscale(0);

    opacity: 1

}



.image-testimonials {

    position: relative

}



.image-testimonials img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.image-testimonials .content {

    position: absolute;

    padding: 20px;

    bottom: 20px;

    right: 20px;

    left: 20px;

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.image-testimonials .content .name {

    color: var(--white)

}



.image-testimonials .content .name:hover {

    color: var(--primary)

}



.image-testimonials .content .position {

    color: var(--white)

}



.image-testimonials.img-thumb {

    background-color: var(--on-suface-container)

}



.image-testimonials.img-thumb img {

    filter: grayscale(100%);

    transition: all .3s ease;

    opacity: .7

}



.swiper-time-line {

    margin-top: -11px !important;

    position: relative;

    margin-right: -15px;

    margin-left: -15px

}



.swiper-time-line .swiper-wrapper {

    margin-top: 11px !important

}



.swiper-time-line .tf-btn-arrow {

    position: absolute;

    top: -20px

}



.swiper-time-line .tf-btn-arrow.arrow-left {

    left: -60px

}



.swiper-time-line .tf-btn-arrow.arrow-right {

    right: -60px

}



.tf-product-media-main {

    margin-bottom: 21px

}



.tf-product-media-main .image-main img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-product-media-thumbs .swiper-slide {

    width: max-content !important;

    border: 2px solid rgba(0, 0, 0, 0)

}



.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active {

    border-color: var(--on-suface-container)

}



.tf-product-media-thumbs .item {

    width: 96px;

    height: 96px

}



.sw-benefit-h6 .swiper-slide {

    height: auto !important

}



.sw-benefit-h6 .swiper-slide>div {

    height: 100%

}



.top-search {

    overflow: hidden

}



.top-search .top-search-content {

    position: fixed;

    top: 0;

    width: 100%;

    height: max-content;

    transform: translateY(-5%);

    padding-top: 24px;

    padding-bottom: 64px;

    transition: all .5s ease;

    background-color: var(--on-suface-container);

    opacity: 0;

    visibility: hidden;

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    z-index: 999999

}



.top-search .top-search-content .top-content {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.top-search .top-search-content .top-content .button-close i {

    color: var(--white);

    font-size: 24px

}



.top-search .top-search-content .wg-box-search {

    max-width: 1250px;

    margin-left: auto;

    margin-right: auto

}



.top-search .top-search-content .wg-box-search input[type=text] {

    background-color: rgba(0, 0, 0, 0);

    font-size: 20px;

    line-height: 28px;

    padding: 22px 0 !important;

    border-bottom: 2px solid var(--outline) !important;

    color: var(--on-suface-variant-2)

}



.top-search .top-search-content .wg-box-search .btn-search {

    position: absolute;

    top: 50%;

    right: 8px;

    transform: translateY(-50%)

}



.top-search .top-search-content .wg-box-search .btn-search i {

    color: var(--white);

    font-size: 32px

}



.top-search .ovelay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 999;

    cursor: url(/image/icon/cursor-close.svg), auto

}



.top-search.active .top-search-content {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

    z-index: 1000

}



.top-search.active .ovelay {

    display: block

}



body.no-scroll {

    overflow: hidden;

    height: 100vh

}



.offcanvas-backdrop {

    cursor: url(/image/icon/cursor-close.svg), auto;

    background-color: var(--on-suface-container)

}



.offcanvas-backdrop.show {

    opacity: .2 !important

}



.canvnas-quick-view {

    min-width: 856px;

    width: max-content;

    overflow-y: auto;

    z-index: 999999

}



.canvnas-quick-view .canvnas-content {

    display: flex;

    gap: 48px

}



.canvnas-quick-view .quick-view-content {

    max-width: calc(100% - 388px);

    padding-right: 24px;

    padding-top: 24px;

    width: 100%;

    position: relative

}



.canvnas-quick-view .quick-view-content .heading-quick-view {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: var(--white);

    position: relative;

    z-index: 9

}



.canvnas-quick-view .quick-view-content .heading-quick-view .mobile-nav-close {

    width: 40px;

    height: 40px;

    background-color: var(--surface);

    border-radius: 50%

}



.canvnas-quick-view .quick-view-content .heading-quick-view .mobile-nav-close i {

    font-size: 20px

}



.canvnas-quick-view .tf-product-info-wrap {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 24px

}



.tf-minicart-recommendations .wrap-recommendations {

    flex-grow: 1;

    height: 100vh;

    overflow: auto;

    direction: rtl

}



.tf-minicart-recommendations .wrap-recommendations .list-img {

    direction: ltr;

    padding-left: 16px;

    display: flex;

    flex-direction: column;

    gap: 20px

}



.tf-minicart-recommendations .wrap-recommendations .list-img-item img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.offcanvasMegamenu {

    background-color: var(--white);

    max-width: 420px;

    --bs-offcanvas-height: max-content;

    overflow-y: auto;

    padding: 20px;

    z-index: 999999

}



.offcanvasMegamenu .btn-close {

    overflow: visible;

    width: 60px;

    height: 60px;

    border: 1px solid var(--outline);

    border-radius: 50%

}



.offcanvasMegamenu .heading {

    margin-bottom: 30px;

    text-align: end

}



.offcanvasMegamenu .title-content {

    color: var(--secondary);

    margin-bottom: 15px

}



.offcanvasMegamenu .meag-menu-item {

    margin-bottom: 30px

}



.offcanvasMegamenu .contact-list-mega-menu li {

    padding-top: 3px;

    padding-bottom: 3px

}



.offcanvasMegamenu .contact-list-mega-menu li p {

    color: var(--on-suface-variant-1)

}



.offcanvasTeamsDetails {

    max-width: 1100px !important;

    width: 100% !important;

    overflow-y: auto

}



.offcanvasTeamsDetails .close-btn {

    position: absolute;

    top: 40px;

    right: 40px;

    overflow: visible;

    z-index: 9;

    background-color: var(--white)

}



.offcanvasTeamsDetails .close-btn i {

    font-size: 30px

}



.modalCenter {

    width: 100vw !important;

    padding-right: 0 !important

}



.modalCenter .modal-dialog {

    max-width: 880px

}



.modal {

    cursor: url(/image/icon/cursor-close.svg), auto

}



.modal .modal-content {

    cursor: default !important

}



.date {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background-color: var(--bg-1);

    min-width: 72px;

    min-height: 72px;

    gap: 3px;

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.date span {

    color: var(--white)

}



.date .day {

    font-size: 32px;

    line-height: 40px;

    font-weight: 500

}



.blog-right-sidebar-content .tf-post-grid {

    margin-bottom: 48px;

    padding-bottom: 50px

}



.blog-right-sidebar-content .tf-post-grid:last-child {

    margin-bottom: 0;

    padding-bottom: 0

}



.tf-post-grid {

    margin-bottom: 48px;

    padding-bottom: 40px;

    border-bottom: 1px solid var(--outline)

}



.tf-post-grid:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border: 0

}



.tf-post-grid .image {

    margin-bottom: 28px

}



.tf-post-grid .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-post-grid .date {

    position: absolute;

    bottom: 20px;

    left: 20px

}



.tf-post-grid .tf-grid-post-content .position,

.tf-post-grid .tf-grid-post-content .title-post {

    margin-bottom: 12px

}



.tf-post-grid .tf-grid-post-content .title-post a {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-text-decoration: underline hsla(0, 0%, 100%, 0);

    text-decoration: underline hsla(0, 0%, 100%, 0);

    color: var(--on-suface-container);

    transition: all .3s ease

}



.tf-post-grid .tf-grid-post-content .title-post a:hover {

    text-decoration: underline

}



.tf-post-grid .tf-grid-post-content .sub-title {

    color: var(--on-suface-variant-1);

    margin-bottom: 12px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2

}



.tf-post-grid.post-format-video .format-video {

    position: absolute;

    top: 49%;

    left: 49%;

    transform: translate(-50%, -50%)

}



.tf-post-grid.style-absolute {

    position: relative

}



.tf-post-grid.style-absolute .image {

    margin-bottom: 0

}



.tf-post-grid.style-absolute .image .date {

    top: 32px;

    left: 32px;

    bottom: auto

}



.tf-post-grid.style-absolute .tf-post-grid-content {

    position: absolute;

    bottom: 0;

    left: 0;

    padding: 32px;

    background: linear-gradient(180deg, rgba(36, 40, 61, 0), #24283D)

}



.tf-post-grid.style-absolute .tf-post-grid-content .position {

    color: var(--white);

    margin-bottom: 12px

}



.tf-post-grid.style-absolute .tf-post-grid-content .title-post {

    margin-bottom: 12px

}



.tf-post-grid.style-absolute .tf-post-grid-content .sub-title,

.tf-post-grid.style-absolute .tf-post-grid-content .title-post a {

    color: var(--white);

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2

}



.tf-post-grid.style-absolute.style-2 .image {

    background-color: var(--on-suface-container)

}



.tf-post-grid.style-absolute.style-2 .image img {

    opacity: .7

}



.tf-post-grid.style-absolute.style-2 .tf-post-grid-content {

    position: absolute;

    bottom: 30px;

    left: 30px;

    right: 50px;

    padding: 0;

    background: rgba(0, 0, 0, 0);

    display: flex;

    gap: 20px

}



.tf-post-grid.style-absolute.style-2 .tf-post-grid-content .date {

    position: unset

}



.tf-post-grid.style-absolute.style-2 .tf-post-grid-content .position {

    color: var(--white);

    margin-bottom: 0

}



.tf-post-grid.style-absolute.style-2 .tf-post-grid-content .title-post {

    margin-bottom: 8px

}



.tf-post-grid.style-absolute.style-3 {

    border: 1px solid var(--outline);

    overflow: hidden

}



.tf-post-grid.style-absolute.style-3 .image {

    background-color: var(--on-suface-container)

}



.tf-post-grid.style-absolute.style-3 .date {

    top: auto;

    left: 20px;

    bottom: 150px

}



.tf-post-grid.style-absolute.style-3 .tf-grid-post-content {

    height: 130px;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 19px;

    background: rgba(0, 0, 0, 0);

    transition: all .3s ease

}



.tf-post-grid.style-absolute.style-3 .tf-grid-post-content .title-post {

    margin-bottom: 0;

    position: relative

}



.tf-post-grid.style-absolute.style-3 .tf-grid-post-content .position {

    transition: all .3s ease;

    position: relative

}



.tf-post-grid.style-absolute.style-3 .tf-grid-post-content:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background-color: var(--white);

    transform: translateY(0);

    transition: all .3s ease

}



.tf-post-grid.style-absolute.style-3:hover .image img {

    opacity: .7

}



.tf-post-grid.style-absolute.style-3:hover .tf-grid-post-content .position,

.tf-post-grid.style-absolute.style-3:hover .tf-grid-post-content .title-post a {

    color: var(--white)

}



.tf-post-grid.style-absolute.style-3:hover .tf-grid-post-content:before {

    transform: translateY(100%)

}



.tf-post-grid.style-small {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0

}



.tf-post-grid.style-small .image {

    margin-bottom: 24px

}



.tf-post-grid.style-small .sub-title {

    margin-bottom: 0

}



.position {

    color: var(--primary)

}



.image {

    position: relative;

    overflow: hidden

}



.link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    cursor: pointer

}



.popup-youtube {

    width: 80px;

    height: 80px;

    background-color: var(--bg-1);

    border-radius: 50%;

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.popup-youtube,

.popup-youtube .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.popup-youtube .icon {

    position: relative;

    z-index: 2

}



.popup-youtube .icon i {

    font-size: 36px;

    color: var(--white)

}



.popup-youtube .wave {

    width: 150%;

    height: 150%;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid var(--bg-1)

}



.popup-youtube:hover {

    background-color: var(--primary)

}



.popup-youtube:hover .wave {

    border: 1px solid var(--primary)

}



.wave {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    animation: ripple 2s infinite

}



.wave:nth-child(2) {

    animation-delay: .5s

}



.wave:nth-child(3) {

    animation-delay: 1s

}



.tf-sidebar .sidebar-item {

    margin-bottom: 30px;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--outline)

}



.tf-sidebar .sidebar-item:first-child {

    padding-bottom: 0;

    border: 0

}



.tf-sidebar .sidebar-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border: 0

}



.tf-sidebar.style-position-sticky {

    position: -webkit-sticky !important;

    position: sticky !important;

    top: 110px !important

}



.tf-sidebar.style-position-sticky.top-140 {

    top: 140px !important

}



.sidebar-search fieldset {

    position: relative

}



.sidebar-search fieldset input[type=text] {

    width: 100%;

    border: 1px solid var(--outline);

    border-radius: 4px;

    padding: 12px 16px;

    font-size: 14px;

    line-height: 22px

}



.sidebar-search fieldset input[type=text]::placeholder {

    color: var(--on-suface-variant-2);

    font-size: 14px;

    line-height: 22px

}



.sidebar-search .tf-btn-search {

    position: absolute;

    top: 50%;

    right: 15px;

    transform: translateY(-50%)

}



.sidebar-search .tf-btn-search i {

    font-size: 24px;

    color: var(--on-suface-container)

}



.sidebar-info .info-top {

    display: flex;

    align-items: center;

    gap: 20px;

    padding-bottom: 20px

}



.sidebar-info .info-top .image {

    border-radius: 50%

}



.sidebar-info .info-top .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.sidebar-info .info-top .top-content .name {

    padding-bottom: 4px;

    display: inline-block

}



.sidebar-info .info-top .top-content .number-follower,

.sidebar-info .introduce {

    color: var(--on-suface-variant-1)

}



.sidebar-info .introduce {

    padding-bottom: 16px

}



.sidebar-info .tf-social .item a {

    border-color: var(--outline)

}



.sidebar-content .title-content {

    padding-bottom: 16px

}



.sidebar-content.sidebar-price .title-content {

    padding-bottom: 22px

}



.sidebar-content.sidebar-price .tf-btn {

    padding: 12px 28px;

    border-radius: 4px !important

}



.sidebar-categories ul li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 10px

}



.sidebar-categories ul li:last-child {

    padding-bottom: 0

}



.sidebar-categories ul li a {

    border-bottom: 2px solid rgba(0, 0, 0, 0);

    transition: all .3s ease;

    color: var(--on-suface-container);

    position: relative

}



.sidebar-categories ul li a:before {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 1px;

    background: var(--on-suface-container);

    transition: all .3s ease

}



.sidebar-categories ul li p {

    transition: all .3s ease

}



.sidebar-categories ul li:hover a {

    font-weight: 500

}



.sidebar-categories ul li:hover a:before {

    width: 100%;

    left: 0;

    right: auto

}



.sidebar-categories ul li:hover p {

    font-weight: 500

}



.tf-post-list {

    display: flex;

    align-items: center;

    gap: 28px;

    padding-bottom: 48px;

    margin-bottom: 48px;

    border-bottom: 1px solid var(--outline)

}



.tf-post-list:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0

}



.tf-post-list .post-date {

    color: var(--on-suface-variant-1);

    padding-bottom: 3px

}



.tf-post-list .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-post-list .image .date {

    position: absolute;

    bottom: 20px;

    left: 20px

}



.tf-post-list .tf-list-post-content {

    max-width: calc(100% - 428px)

}



.tf-post-list .tf-list-post-content .position {

    padding-bottom: 12px

}



.tf-post-list .tf-list-post-content .title-post {

    -webkit-line-clamp: 2

}



.tf-post-list .tf-list-post-content .sub-title,

.tf-post-list .tf-list-post-content .title-post {

    margin-bottom: 12px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis

}



.tf-post-list .tf-list-post-content .sub-title {

    color: var(--on-suface-variant-1);

    -webkit-line-clamp: 3

}



.tf-post-list.style-small {

    gap: 20px;

    padding-bottom: 12px;

    margin-bottom: 12px

}



.tf-post-list.style-small .post-date {

    padding-right: 12px

}



.tf-post-list.style-small:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0

}



.tf-post-list.style-small .post-content {

    max-width: calc(100% - 100px)

}



.tf-post-list.style-small .post-content .name-post {

    line-height: 24px;

    font-weight: 500

}



.tf-post-list.style-small.small-2 {

    padding-bottom: 26px;

    margin-bottom: 28px

}



.tf-post-list.style-small.small-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-post-list.style-small.small-2 .top {

    padding-bottom: 7px

}



.tf-post-list.style-small.small-2 .post-date {

    letter-spacing: .4px;

    padding-right: 7px

}



.tf-post-list.style-small.small-2 .post-content {

    max-width: calc(100% - 200px)

}



.tf-post-list.style-small.small-2:last-child {

    padding-bottom: 0;

    margin-bottom: 0

}



.tf-post-list.style-small-2 {

    gap: 30px;

    padding-bottom: 26px;

    margin-bottom: 29px;

    border-bottom: 1px solid var(--outline)

}



.tf-post-list.style-small-2 .date {

    position: absolute;

    bottom: 11px;

    left: 11px

}



.tf-post-list.style-small-2:last-child {

    padding-bottom: 0;

    border-bottom: 0;

    margin-bottom: 0

}



.tf-post-list.style-small-2 .tf-list-post-content {

    max-width: calc(100% - 330px)

}



.sidebar-newsletter fieldset {

    position: relative

}



.sidebar-newsletter fieldset input[type=text] {

    width: 100%;

    border: 1px solid var(--outline);

    border-radius: 4px;

    padding: 12px 16px;

    font-size: 14px;

    line-height: 22px

}



.sidebar-newsletter fieldset input[type=text]::placeholder {

    color: var(--on-suface-variant-2);

    font-size: 14px;

    line-height: 22px

}



.sidebar-newsletter .tf-btn-newsletter {

    position: absolute;

    top: 50%;

    right: 8px;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%

}



.sidebar-newsletter .tf-btn-newsletter i {

    font-size: 24px;

    color: var(--on-suface-container)

}



.sidebar-newsletter .tf-btn-newsletter:hover {

    background-color: var(--primary)

}



.sidebar-newsletter .tf-btn-newsletter:hover i {

    color: var(--white)

}



.tabs-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px

}



.tabs-list .tabs-item {

    padding: 4px 15px;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid var(--outline);

    color: var(--on-suface-variant-1)

}



.tabs-list .tabs-item:hover {

    background-color: var(--on-suface-container);

    border-color: var(--on-suface-container);

    color: var(--white)

}



.hover-img .image {

    overflow: hidden;

    position: relative

}



.hover-img .image img {

    transition: all 1s cubic-bezier(.3, 1, .35, 1) 0s

}



.hover-img:hover .image img {

    transform: scale3d(1.1, 1.1, 1.1)

}



.wg-pagination {

    padding-top: 50px

}



.wg-pagination ul {

    gap: 12px

}



.wg-pagination ul li a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    background-color: var(--white);

    cursor: pointer;

    color: var(--on-suface-container);

    border-radius: 50%;

    transition: all .3s ease;

    font-weight: 500;

    border: 1px solid var(--outline)

}



.wg-pagination ul li a:hover,

.wg-pagination ul li.active a {

    background: var(--on-suface-container);

    color: var(--white);

    border: 1px solid var(--on-suface-container)

}



.wg-pagination.style-2 {

    padding-top: 30px

}



.wg-pagination.style-2 ul a,

.wg-pagination.style-2 ul li {

    border-radius: 4px

}



.blog-no-sidebar-slide {

    position: relative

}



.blog-no-sidebar-slide .tf-btn-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    opacity: 0;

    visibility: hidden;

    transition: all .3s ease

}



.blog-no-sidebar-slide .tf-btn-arrow.arrow-left {

    left: 0

}



.blog-no-sidebar-slide .tf-btn-arrow.arrow-right {

    right: 0

}



.blog-no-sidebar-slide:hover .tf-btn-arrow {

    opacity: 1;

    visibility: visible

}



.blog-no-sidebar-slide:hover .tf-btn-arrow.arrow-left {

    left: 32px

}



.blog-no-sidebar-slide:hover .tf-btn-arrow.arrow-right {

    right: 32px

}



.blog-no-sidebar-content .blog-no-sidebar-slide,

.blog-no-sidebar-content .layout-grid-3 {

    margin-bottom: 40px

}



.blog-no-sidebar-content .layout-grid-3 .tf-post-grid {

    margin-bottom: 0;

    border-bottom: 0

}



.layout-grid-3 {

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: auto;

    display: grid;

    grid-row-gap: 40px;

    row-gap: 40px;

    margin-left: -22px;

    margin-right: -22px

}



.layout-grid-3.m-lr--20 {

    margin-left: -20px;

    margin-right: -20px

}



.layout-grid-3 .tf-post-grid {

    border-right: 1px solid var(--outline);

    padding: 0 22px

}



.layout-grid-3 .tf-post-grid.p-lr-20 {

    padding: 0 20px

}



.layout-grid-3 .tf-post-grid:last-child,

.layout-grid-3 .tf-post-grid:nth-child(12),

.layout-grid-3 .tf-post-grid:nth-child(3),

.layout-grid-3 .tf-post-grid:nth-child(6),

.layout-grid-3 .tf-post-grid:nth-child(9) {

    border: 0

}



.layout-grid-3.style-2 {

    margin-left: 0;

    margin-right: 0

}



.cols-img {

    display: flex;

    align-items: center;

    gap: 20px

}



.image-blog {

    width: 100%

}



.image-blog img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tab-list {

    justify-content: space-between;

    flex-wrap: wrap;

    row-gap: 15px

}



.tab-list,

.tab-list .tab-item {

    display: flex;

    align-items: center

}



.tab-list .tab-item.left {

    gap: 12px

}



.tab-list .tab-item.right {

    gap: 16px

}



.tab-list .tab-item.right .tf-social .item a {

    border-color: var(--outline)

}



.pre-next-blog {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 23px 0;

    border-bottom: 1px solid var(--outline);

    border-top: 1px solid var(--outline)

}



.pre-next-blog .pre-next-btn {

    font-weight: 500;

    line-height: 24px;

    margin-bottom: 8px

}



.pre-next-blog .pre-next-blog-item {

    display: flex;

    flex-direction: column;

    max-width: 346px;

    width: 100%

}



.pre-next-blog .pre-next-blog-item.next {

    direction: rtl

}



.pre-next-blog .pre-next-blog-item .name-blog {

    color: var(--on-suface-container);

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2

}



.pre-next-blog .line {

    width: 1px;

    height: 90px;

    background-color: var(--outline)

}



.comment-item {

    display: flex;

    gap: 16px

}



.comment-item .image {

    overflow: hidden;

    position: relative;

    border-radius: 50%;

    width: 60px;

    height: 60px

}



.comment-item .image img {

    width: 100%;

    height: auto;

    object-fit: cover

}



.comment-item .comment-item-content {

    max-width: calc(100% - 76px);

    padding: 6px 0 0

}



.comment-item .comment-item-content .top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    margin-top: -5px;

    flex-wrap: wrap;

    gap: 10px

}



.comment-item .comment-item-content .top .info .name {

    color: var(--on-suface-container)

}



.comment-item .comment-item-content .top .info .time {

    color: var(--on-suface-variant-1)

}



.comment-item .comment-item-content .desc {

    margin-bottom: 10px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 3

}



.comment-item.reply {

    margin-left: 76px;

    padding: 19px 0;

    margin-top: 24px;

    margin-bottom: 24px;

    border-top: 1px solid var(--outline);

    border-bottom: 1px solid var(--outline)

}



.comment-item.reply .top {

    margin-bottom: 10px

}



.comment-item.reply .name {

    font-weight: 700;

    line-height: 24px

}



.comment-item.reply .name,

.comment-item.reply .time {

    font-family: Oxygen, sans-serif

}



.comment-item.style-2 {

    flex-direction: column;

    gap: 12px

}



.comment-item.style-2 .image {

    background-color: var(--primary)

}



.comment-item.style-2 .name {

    display: block;

    margin-bottom: 4px

}



.comment-item.style-2 .top {

    display: flex;

    gap: 16px

}



.comment-item.style-2 .top .info {

    max-width: calc(100% - 76px)

}



.comment-item.style-2 .comment-item-content {

    padding: 0

}



.comment-item.style-2 .time {

    color: var(--on-suface-variant-2)

}



.comment-item.style-2 .comment-item-content {

    max-width: 100%

}



.comment-item.style-2.reply {

    margin-left: 40px;

    padding-top: 0;

    padding-bottom: 0;

    border-top: 0;

    border-bottom: 0;

    padding-left: 30px;

    border-left: 4px solid var(--outline);

    margin-top: 16px;

    gap: 11px

}



.comment-item.style-2.reply .image {

    display: flex;

    align-items: center;

    justify-content: center

}



.comment-item.style-2.reply .image img {

    max-width: 28px

}



.comment-item.style-2.reply .top {

    margin-bottom: 0

}



.comment-item.style-2.reply .name,

.comment-item.style-2.reply .time {

    font-family: Rethink Sans, sans-serif

}



.comment-item.style-2.reply .name {

    margin-bottom: 7px

}



.comment-item.style-2.reply .desc {

    margin-bottom: 0

}



.blog-details-content {

    display: flex;

    flex-direction: column;

    gap: 40px

}



.blog-details-content .desc-blog .title-desc,

.blog-details-content .desc-blog p {

    margin-bottom: 12px

}



.blog-details-content .desc-blog p:last-child {

    margin-bottom: 0

}



.blog-details-content .list-desc .desc-blog {

    margin-bottom: 16px

}



.blog-details-content .list-desc .desc-blog:last-child {

    margin-bottom: 0

}



.wg-comment .title-wg-comment {

    margin-bottom: 18px

}



.hearding-section .title-heading.mb-12 {

    margin-bottom: 12px

}



.hearding-section.mb-40 {

    margin-bottom: 40px

}



.blog-details-2-content {

    position: relative;

    z-index: 2;

    max-width: 1030px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding: 60px 60px 108px;

    margin-top: -80px;

    background-color: var(--white)

}



.blog-details-2-content .blog-details-top {

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column

}



.blog-details-2-content .blog-details-top .tag,

.blog-details-2-content .blog-details-top h2 {

    margin-bottom: 16px

}



.tag {

    padding: 2px 12px;

    background-color: var(--surface);

    color: var(--primary);

    display: block;

    width: max-content;

    pointer-events: none

}



.tag.bg-white {

    background-color: var(--white) !important;

    border: 1px solid var(--white)

}



.tag.color-white {

    background-color: var(--bg-1);

    color: var(--white)

}



.testimonial-item {

    border: 2px solid var(--surface);

    padding: 32px 30px 30px;

    background: var(--white)

}



.testimonial-item .testimonial-top {

    padding-bottom: 13px;

    margin-bottom: 16px;

    border-bottom: 1px solid var(--outline);

    position: relative

}



.testimonial-item .testimonial-top:before {

    content: "";

    position: absolute;

    bottom: -1px;

    left: auto;

    right: 0;

    width: 0;

    height: 1px;

    background-color: var(--primary);

    transition: all .3s ease

}



.testimonial-item .item-content .text {

    color: var(--on-suface-variant-1);

    margin-bottom: 16px

}



.testimonial-item .info-user {

    display: flex;

    align-items: center;

    gap: 12px

}



.testimonial-item .info-user .image {

    border-radius: 50%

}



.testimonial-item:hover .testimonial-top:before {

    left: 0;

    right: auto;

    width: 100%

}



.testimonial-item.no-boder {

    border: 0

}



.testimonial-item.style-2 {

    display: flex;

    padding: 0;

    border: none;

    height: 100%

}



.testimonial-item.style-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.testimonial-item.style-2 .testimonial-content {

    width: 100%;

    max-width: calc(100% - 210px);

    padding: 35px 26px;

    border: 2px solid var(--surface);

    height: 100%

}



.testimonial-item.style-2 .testimonial-content .name-testimonials {

    display: inline-block;

    margin-bottom: 16px;

    border-bottom: 1px solid var(--outline);

    padding-bottom: 16px;

    width: 100%

}



.testimonial-item.style-2 .testimonial-content .desc {

    margin-bottom: 20px;

    color: var(--on-suface-variant-1)

}



.testimonial-item.style-2 .testimonial-content .name-user {

    color: var(--on-suface-container)

}



.testimonial-item.style-2 .testimonial-content .caption-2 {

    color: var(--on-suface-variant-1)

}



.testimonial-item.bg-surface {

    background-color: var(--surface)

}



.testimonial-item.bg-surface .position-user {

    white-space: unset !important

}



.testimonial-item.bg-surface .info-content {

    max-width: calc(100% - 60px)

}



.according-item {

    padding: 22px 0 17px;

    border-bottom: 1px solid var(--outline)

}



.according-item .title-according {

    display: inline-block;

    color: var(--on-suface-container);

    position: relative;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px

}



.according-item .title-according span {

    position: relative;

    transition: all .3s ease;

    width: 18px

}



.according-item .title-according span:after,

.according-item .title-according span:before {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 18px;

    height: 1px;

    background-color: var(--on-suface-container);

    transition: all .3s ease

}



.according-item .title-according span:after {

    transform: rotate(90deg)

}



.according-item .title-according:not(.collapsed) span:after {

    opacity: 0;

    visibility: hidden

}



.according-item .according-content p {

    padding-top: 11px;

    padding-bottom: 3px;

    color: var(--on-suface-variant-1)

}



.according-item.style-arrow i {

    font-size: 13px;

    transition: all .3s ease

}



.according-item.style-arrow .title-according:not(.collapsed) i {

    transform: rotate(180deg)

}



.according-item.bg-white {

    background-color: var(--white);

    padding: 27px 32px;

    border: none;

    margin-bottom: 20px

}



.according-item.bg-white .according-content .content {

    display: flex;

    gap: 30px;

    padding-top: 20px;

    border-top: 1px solid var(--outline);

    margin-top: 20px

}



.according-item.bg-white .according-content .item-content .title-item {

    padding-bottom: 8px

}



.according-item.bg-white .according-content .item-content ul li {

    list-style: disc;

    margin-left: 27px

}



.according-item.bg-white .according-content .item-content .price-according {

    display: flex;

    align-items: center;

    gap: 4px

}



.according-item.bg-white .according-content .item-content .tf-btn {

    padding: 15px 47.5px

}



.according-item.bg-white .according-content .item-content.item-content-1 {

    max-width: 480px;

    width: 100%

}



.according-item.bg-white:last-child,

.according-item:last-child {

    margin-bottom: 0

}



.according-item.style-small {

    padding: 16px 0;

    margin-bottom: 15px

}



.according-item.style-small:last-child {

    margin-bottom: 0

}



.wg-according.style-border {

    border: 2px solid var(--outline);

    border-radius: 12px;

    background-color: var(--white)

}



.wg-according.style-border .according-item {

    padding-left: 31px;

    padding-right: 32px;

    margin-bottom: 0

}



.wg-according.style-border .according-item:last-child {

    border: none

}



.tf-sort {

    justify-content: space-between;

    gap: 10px

}



.tf-sort,

.tf-sort .tf-sort-content {

    display: flex;

    align-items: center;

    flex-wrap: wrap

}



.tf-sort .tf-sort-content {

    gap: 28px

}



.tf-sort .tf-sort-content .text {

    white-space: nowrap;

    color: var(--on-surface-container)

}



.tf-sort .tf-sort-content.tf-sort-right {

    gap: 9px

}



.tf-sort .shop-sale {

    display: flex;

    gap: 8px;

    align-items: center

}



.tf-sort .shop-sale i {

    font-size: 24px

}



.tf-sort .nice-select {

    min-width: 164px;

    width: max-content;

    padding: 10px 38px 10px 15px !important;

    border: 1px solid var(--outline) !important

}



.tf-sort .nice-select:after {

    right: 20px

}



.tf-sort .nice-select .list {

    z-index: 99

}



.product-item .image {

    margin-bottom: 20px;

    position: relative

}



.product-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.product-item .icon {

    opacity: 0;

    visibility: hidden;

    position: absolute;

    right: 0;

    transition: all .3s ease

}



.product-item .icon a {

    display: inline-block;

    width: 40px;

    height: 40px;

    background-color: var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease

}



.product-item .icon a i {

    font-size: 24px;

    color: var(--on-suface-container)

}



.product-item .icon a:hover {

    background-color: var(--on-suface-container)

}



.product-item .icon a:hover i {

    color: var(--white)

}



.product-item .icon.icon-1 {

    top: 16px

}



.product-item .icon.icon-2 {

    top: 64px;

    transition-delay: .1s

}



.product-item .icon.icon-3 {

    top: 112px;

    transition-delay: .2s

}



.product-item .tf-btn {

    position: absolute;

    opacity: 0;

    visibility: hidden;

    bottom: 0;

    left: 12px;

    right: 12px;

    transition: all .3s ease;

    max-width: calc(100% - 24px)

}



.product-item .product-item-content .name-product {

    color: var(--on-suface-container);

    display: inline-block;

    margin-bottom: 4px;

    position: relative

}



.product-item .product-item-content .name-product:before {

    content: "";

    position: absolute;

    width: 0;

    left: auto;

    right: 0;

    bottom: 0;

    height: 1px;

    background: var(--on-suface-container);

    transition: all .3s ease

}



.product-item .product-item-content .name-product:hover:before {

    width: 100%;

    left: 0;

    right: auto

}



.product-item .product-item-content .price {

    display: flex;

    align-items: center;

    gap: 8px

}



.product-item.discount {

    position: relative

}



.product-item.discount:before {

    content: "-32%";

    position: absolute;

    top: 16px;

    left: 16px;

    background-color: var(--error);

    padding: 0 6px;

    font-weight: 500;

    font-size: 12px;

    line-height: 20px;

    letter-spacing: 10%;

    color: var(--white);

    z-index: 2;

    border-radius: 2px

}



.product-item.style-2 {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap

}



.product-item.style-2 .image {

    max-width: 100px;

    height: 100px;

    margin-bottom: 0

}



.product-item:hover .icon {

    opacity: 1;

    visibility: visible;

    right: 16px

}



.product-item:hover .tf-btn {

    opacity: 1;

    visibility: visible;

    bottom: 12px

}



.wg-products-details .tf-product-info-choose-option {

    margin-top: -7px

}



.wg-products-details .tf-product-info-choose-option .top-product-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 27px

}



.wg-products-details .tf-product-info-choose-option .top-product-info .title {

    font-size: 24px;

    line-height: 30px;

    font-weight: 700;

    color: var(--secondary)

}



.wg-products-details .tf-product-info-choose-option .rating {

    gap: 8px

}



.wg-products-details .tf-product-info-choose-option .rating i {

    color: var(--yelow)

}



.wg-products-details .tf-product-info-choose-option .rating .text {

    color: var(--color-text)

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-wrap {

    margin-bottom: 20px;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--line)

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-desc p {

    color: var(--color-text);

    margin-bottom: 30px;

    line-height: 30px

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-btn {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 40px;

    flex-wrap: wrap

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-btn .tf-btn {

    padding: 14px 16px;

    min-width: 193px

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-btn .tf-btn span {

    text-transform: uppercase;

    font-size: 15px;

    text-align: left

}



.wg-products-details .tf-product-info-choose-option .tf-product-info-btn .tf-btn i {

    margin-left: 15px;

    padding-left: 15px;

    border-left: 1px solid var(--line-5)

}



.wg-products-details .tf-product-info-quanlity {

    display: flex;

    gap: 20px;

    align-items: center;

    margin-bottom: 40px

}



.wg-products-details .tf-product-info-quanlity .title-quanlity {

    color: var(--secondary)

}



.wg-products-details .tf-product-info-socail {

    display: flex;

    align-items: center;

    gap: 10px 17px;

    flex-wrap: wrap

}



.wg-products-details .tf-product-info-socail .text {

    text-transform: uppercase;

    color: var(--color-text)

}



.wg-products-details .tf-product-info-socail .social li a {

    border: 1px solid var(--line);

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center

}



.wg-products-details .tf-product-info-socail .social li a i {

    color: var(--color-text)

}



.wg-products-details .tf-product-info-socail .social li a:hover {

    border-color: var(--main-color);

    background-color: var(--main-color)

}



.wg-products-details .tf-product-info-socail .social li a:hover i {

    color: var(--white)

}



.wg-quanlity {

    display: flex;

    align-items: center;

    border: 1px solid var(--line);

    width: min-content

}



.wg-quanlity .quanlity-product {

    color: var(--secondary)

}



.wg-quanlity .btn-wg-quanlity .btn-quanlity {

    color: var(--color-text);

    font-size: 20px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--line);

    padding: 0 12px;

    line-height: 24px

}



.wg-quanlity input {

    width: 62px !important;

    padding: 0 !important;

    text-align: center;

    border: none

}



.tf-table-page-cart {

    width: 100%;

    border-collapse: collapse;

    border: none;

    border-spacing: 0;

    min-width: 850px

}



.tf-table-page-cart tr {

    border-bottom: 1px solid var(--outline)

}



.tf-table-page-cart thead th {

    text-align: center;

    border: none;

    color: var(--on-suface-container);

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    padding: 0 0 20px !important

}



.tf-table-page-cart thead th:first-child {

    text-align: left;

    width: 380px

}



.tf-table-page-cart thead th:nth-child(2) {

    width: 115px

}



.tf-table-page-cart thead th:nth-child(3),

.tf-table-page-cart thead th:nth-child(4) {

    width: 145px

}



.tf-table-page-cart thead th:last-child {

    text-align: right

}



.tf-table-page-cart tbody tr td {

    padding: 20px 0;

    border: none

}



.tf-table-page-cart tbody tr td.tf-cart-item_product {

    display: flex;

    align-items: center;

    gap: 20px

}



.tf-table-page-cart tbody tr td.tf-cart-item_product .img-box {

    flex-shrink: 0

}



.tf-table-page-cart tbody tr td.tf-cart-item_product .img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-table-page-cart tbody tr td.tf-cart-item_product .name-product {

    text-decoration: none;

    color: var(--on-suface-container);

    white-space: nowrap

}



.tf-table-page-cart tbody tr td.tf-cart-item_product .name-product:hover {

    color: var(--primary)

}



.tf-table-page-cart tbody tr td.tf-cart-item_price,

.tf-table-page-cart tbody tr td.tf-cart-item_total {

    text-align: center;

    color: var(--on-suface-container)

}



.tf-table-page-cart tbody tr td.tf-cart-item_quantity .quanlity-product {

    color: var(--primary)

}



.tf-table-page-cart tbody tr td:last-child {

    text-align: right

}



.tf-cart-sold .notification-sold {

    padding: 10px

}



.tf-cart-item .tf-cart-item_product {

    display: flex;

    align-items: center

}



.tf-cart-item .tf-cart-item_product .img-box {

    overflow: hidden;

    width: 100px;

    height: 100px;

    margin-right: 16px;

    display: block

}



.tf-cart-item .tf-cart-item_product .img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-cart-item .tf-cart-item_product .cart-info {

    display: grid;

    grid-gap: 12px;

    gap: 12px

}



.tf-cart-item .wg-quantity {

    width: 130px;

    height: 40px

}



.tf-cart-item .wg-quantity input {

    height: 38px;

    width: 50px

}



.tf-cart-item .wg-quantity .btn-quantity {

    width: 40px;

    height: 30px;

    font-size: 30px

}



.tf-cart-item .tf-cart-item_price .old-price {

    display: inline-block;

    margin-right: 8px;

    font-size: 14px;

    line-height: 22px;

    color: var(--secondary-2)

}



.tf-cart-item .remove-cart .icon {

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease;

    border: 1px solid var(--error);

    border-radius: 50%;

    font-size: 12px;

    color: var(--on-suface-container);

    cursor: pointer;

    margin-left: auto

}



.tf-cart-item .remove-cart .icon:hover {

    background-color: var(--error);

    color: var(--white)

}



.tf-cart-item_total {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px

}



.box-order {

    padding: 24px;

    border: 2px solid var(--outline)

}



.box-order .title-box {

    margin-bottom: 20px

}



.box-order .discount,

.box-order .ship,

.box-order .subtotal {

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--outline)

}



.box-order .ship {

    display: flex;

    gap: 69px;

    justify-content: space-between

}



.box-order .ship .ship-item {

    display: flex;

    align-items: center;

    gap: 8px

}



.box-order .ship .ship-item label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-grow: 1

}



.box-order .total-order {

    margin-bottom: 20px

}



#map {

    max-width: 100%;

    height: 520px;

    overflow: hidden

}



#map .marker {

    width: 60px;

    height: 60px;

    background-color: var(--bg-5);

    border-radius: 50%;

    cursor: pointer

}



#map .marker:before {

    content: "";

    width: 44px;

    height: 44px;

    background-color: var(--white);

    border-radius: 50%

}



#map .marker:after,

#map .marker:before {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



#map .marker:after {

    content: "";

    font-family: icomoon;

    color: var(--on-suface-container);

    font-size: 28px

}



.mapboxgl-ctrl-attrib a,

.mapboxgl-ctrl-attrib.mapboxgl-compact,

a.mapboxgl-ctrl-logo {

    display: none !important

}



.mapboxgl-popup-content {

    padding: 16px;

    background-color: var(--white)

}



.mapboxgl-popup-content .mapboxgl-popup-close-button {

    font-size: 30px;

    overflow: hidden;

    color: var(--on-suface-variant-1)

}



.nice-select {

    border: unset !important;

    position: relative

}



.nice-select:before {

    content: "";

    font-family: icomoon;

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-weight: 400;

    transition: all .3s ease

}



.nice-select:after {

    display: none

}



.nice-select>span {

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: var(--color-text)

}



.nice-select>.list {

    margin-top: 10px;

    border-radius: 16px;

    max-height: unset;

    border: unset !important;

    top: 110%;

    border: 1px solid var(--Line);

    box-shadow: 0 5px 18px 5px rgba(64, 72, 87, .1490196078)

}



.nice-select>.list .option {

    height: 41px;

    padding: 0 15px;

    border-radius: 12px;

    font-size: 16px;

    line-height: 41px;

    position: relative

}



.nice-select>.list .option,

.nice-select>.list .option.selected {

    font-weight: 400;

    color: var(--secondary)

}



.nice-select.no-border {

    border: none !important;

    padding: 0 !important

}



.nice-select.open {

    z-index: 50

}



.nice-select.open:before {

    transform: translateY(-50%) rotate(180deg)

}



.nice-select.default {

    padding: 0 18px 0 0;

    border: 0 !important

}



.nice-select.default:after {

    right: 0;

    top: 44%;

    right: 2px

}



.nice-select.default ul.list {

    width: 220px;

    right: 0;

    left: unset

}



@keyframes hover-btn-arrow {

    0% {

        transform: translateX(0);

        opacity: 1;

        visibility: visible

    }



    25% {

        transform: translateX(100%);

        opacity: 0;

        visibility: hidden

    }



    50% {

        transform: translateX(-100%);

        opacity: 0;

        visibility: hidden

    }



    to {

        transform: translateX(0);

        opacity: 1;

        visibility: visible

    }

}



@keyframes ripple {

    0% {

        width: 100%;

        height: 100%;

        opacity: .9

    }



    to {

        width: 150%;

        height: 150%;

        opacity: 0

    }

}



@keyframes ripple2 {

    0% {

        width: 0;

        height: 0;

        opacity: 0

    }



    50% {

        width: 200%;

        height: 200%;

        opacity: .5

    }



    to {

        width: 0;

        height: 0;

        opacity: 0

    }

}



@keyframes glow {



    0%,

    to {

        opacity: .3

    }



    50% {

        opacity: 1

    }

}



@keyframes rotate {

    0% {

        transform: rotate(0)

    }



    to {

        transform: rotate(1turn)

    }

}



@keyframes rotate2 {

    0% {

        transform: rotate(0)

    }



    to {

        transform: rotate(-1turn)

    }

}



.tf-fade-top {

    transform: translateY(10px)

}



.tf-fade-left,

.tf-fade-top {

    opacity: 0;

    visibility: hidden;

    transition: all .5s ease

}



.tf-fade-left {

    transform: translateX(-10px)

}



.tf-fade-right {

    transform: translateX(10px)

}



.tf-fade-bottom-left,

.tf-fade-right {

    opacity: 0;

    visibility: hidden;

    transition: all .5s ease

}



.tf-fade-bottom-left {

    transform: translate(10px, -10px)

}



.tf-fade-top-right {

    transform: translate(-10px, -10px);

    opacity: 0;

    visibility: hidden;

    transition: all .5s ease

}



.tf-animate-1 {

    -webkit-clip-path: inset(0 100% 0 0);

    clip-path: inset(0 100% 0 0);

    transition: .6s cubic-bezier(.63, .25, .25, 1)

}



.tf-animate-1.active-animate {

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

    animation-delay: .5s

}



.tf-animate-1.transition-1s {

    transition: 1s cubic-bezier(.63, .25, .25, 1)

}



.tf-animate-2 {

    -webkit-clip-path: inset(0 0 100% 0);

    clip-path: inset(0 0 100% 0);

    transition: .6s cubic-bezier(.63, .25, .25, 1)

}



.tf-animate-2.active-animate {

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

    animation-delay: .7s

}



.tf-animate-3 {

    -webkit-clip-path: inset(100% 0 0 0);

    clip-path: inset(100% 0 0 0);

    transition: .6s cubic-bezier(.63, .25, .25, 1)

}



.tf-animate-3.active-animate {

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

    animation-delay: .5s

}



.tf-animate-4 {

    -webkit-clip-path: inset(0 0 0 100%);

    clip-path: inset(0 0 0 100%);

    transition: .6s cubic-bezier(.63, .25, .25, 1)

}



.tf-animate-4.active-animate {

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

    animation-delay: .5s

}



@keyframes ring {

    0% {

        transform: rotate(0deg)

    }



    10% {

        transform: rotate(15deg)

    }



    20% {

        transform: rotate(-15deg)

    }



    30% {

        transform: rotate(10deg)

    }



    40% {

        transform: rotate(-10deg)

    }



    50% {

        transform: rotate(5deg)

    }



    60% {

        transform: rotate(-5deg)

    }



    70% {

        transform: rotate(3deg)

    }



    80% {

        transform: rotate(-3deg)

    }



    90% {

        transform: rotate(2deg)

    }



    to {

        transform: rotate(0deg)

    }

}



@keyframes l3 {

    to {

        transform: rotate(-1turn)

    }

}



@keyframes infiniteScroll {

    0% {

        transform: translateX(0)

    }



    to {

        transform: translateX(-100%)

    }

}



@keyframes tranform-x-item {

    0% {

        transform: translateX(0)

    }



    50% {

        transform: translateX(-10px)

    }



    to {

        transform: translateX(0)

    }

}



@keyframes tranform-y-item {

    0% {

        transform: translateY(0)

    }



    50% {

        transform: translateY(-10px)

    }



    to {

        transform: translateY(0)

    }

}



@keyframes tf-preload {

    0% {

        transform: scale(.8)

    }



    50% {

        transform: scale(1);

        background: rgba(0, 0, 0, 0)

    }



    to {

        transform: scale(.8);

        background: rgba(0, 0, 0, 0)

    }

}



.tf-zoom-main {

    position: -webkit-sticky;

    position: sticky;

    top: 30px;

    z-index: 50

}



.tf-zoom-main .drift-zoom-pane {

    top: 0;

    left: 0;

    height: 520px;

    max-width: 520px;

    width: 100%;

    background: #fff;

    -webkit-transform: translateZ(0);

    box-shadow: 0 1px 5px rgba(127, 127, 127, .0196078431), 0 5px 18px rgba(127, 127, 127, .2);

    z-index: 3

}



.drift-bounding-box.drift-open {

    background: hsla(0, 0%, 100%, .2509803922);

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);

    z-index: 5000

}



.drift-zoom-pane {

    z-index: 5000

}



.section-image-zoom .other-image-zoom {

    transition: all .3s ease

}



.section-image-zoom.zoom-active .other-image-zoom {

    opacity: .3

}



.pswp__bg {

    background: var(--white)

}



.pswp__icn {

    fill: #222;

    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 #fff

}



.tf-model-viewer,

.tf-model-viewer model-viewer {

    width: 100%;

    height: 100%;

    position: relative

}



.tf-model-viewer model-viewer {

    display: block;

    z-index: 5

}



.tf-model-viewer model-viewer.disabled {

    pointer-events: none

}



.tf-model-viewer.active model-viewer {

    pointer-events: all

}



.tf-model-viewer.active .wrap-btn-viewer {

    display: none

}



.tf-product-info-wrap .tf-product-info-sold {

    padding-bottom: 16px

}



.tf-product-info-wrap .tf-product-info-heading,

.tf-product-info-wrap .tf-product-info-price {

    padding-bottom: 20px

}



.tf-product-info-wrap .tf-product-info-desc {

    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--outline)

}



.tf-product-info-wrap p {

    color: var(--on-suface-variant-1)

}



.tf-product-info-wrap .tf-product-info-quantity {

    margin-bottom: 20px

}



.tf-product-info-wrap .tf-product-info-quantity .title {

    padding-bottom: 8px

}



.tf-product-info-wrap .tf-btn {

    padding: 11px 0 !important

}



.tf-product-info-wrap .tf-product-info-by-btn {

    margin-bottom: 12px

}



.tf-product-info-wrap .tf-product-info-choose-option .variant-picker-item {

    padding-bottom: 20px

}



.tf-product-info-sold {

    display: flex;

    gap: 4px;

    align-items: center

}



.tf-product-info-sold .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-product-info-sold .icon i {

    font-size: 24px;

    color: var(--error)

}



.tf-product-info-sold .text,

.tf-product-info-wrap .name-product {

    color: var(--on-suface-container)

}



.tf-product-info-heading {

    display: flex;

    align-items: center

}



.tf-product-info-heading .price-on-sale {

    padding-right: 8px

}



.tf-product-info-heading .compare-at-price {

    padding-right: 16px

}



.price-on-sale {

    color: var(--on-suface-container)

}



.compare-at-price {

    -webkit-text-decoration-line: line-through;

    text-decoration-line: line-through;

    color: var(--on-suface-variant-2)

}



.badges-on-sale {

    color: var(--white);

    background-color: var(--error);

    border-radius: 3px;

    padding: 0 8px

}



.variant-picker-item .variant-picker-label {

    padding-bottom: 8px

}



.variant-picker-item .variant-picker-values {

    display: flex;

    gap: 12px;

    align-items: center;

    flex-wrap: wrap

}



.variant-picker-item .variant-picker-values input {

    position: absolute !important;

    overflow: hidden;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    border: 0;

    clip: rect(0 0 0 0);

    word-wrap: normal !important

}



.variant-picker-item .variant-picker-values label {

    position: relative;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 0;

    border: 2px solid rgba(0, 0, 0, 0);

    cursor: pointer;

    font-weight: 400;

    line-height: 22.4px;

    border-radius: 4px

}



.variant-picker-item .variant-picker-values label.active {

    border-color: var(--on-suface-container)

}



.wg-quantity {

    width: 160px;

    height: 48px;

    padding: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: var(--white);

    border: 1px solid var(--outline);

    border-radius: 4px;

    overflow: hidden

}



.wg-quantity .btn-quantity {

    width: 44px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    color: var(--on-suface-container);

    cursor: pointer

}



.wg-quantity input {

    width: 88px;

    height: 44px;

    padding: 0;

    background-color: rgba(0, 0, 0, 0);

    border: 0;

    text-align: center;

    font-size: 16px;

    font-weight: 500;

    line-height: 24px;

    color: var(--on-suface-container)

}



.tf-product-info-by-btn {

    display: flex;

    align-items: center;

    gap: 10px

}



.tf-product-info-by-btn .btn-icon-action {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    border: 1px solid var(--outline)

}



.tf-product-info-by-btn .btn-icon-action i {

    font-size: 24px;

    transition: all .3s ease

}



.tf-product-info-by-btn .btn-icon-action:hover {

    background-color: var(--primary)

}



.tf-product-info-by-btn .btn-icon-action:hover i {

    color: var(--white)

}



.tf-product-info-price {

    display: flex;

    align-items: center

}



.tf-product-info-price .price-on-sale {

    -webkit-padding-end: 8px;

    padding-inline-end: 8px

}



.tf-product-info-price .compare-at-price {

    -webkit-padding-end: 16px;

    padding-inline-end: 16px

}



.tf-product-info-view {

    display: flex;

    gap: 4px;

    align-items: center

}



.tf-product-info-view .icon {

    font-size: 20px

}



.tf-product-info-view .icon i {

    color: var(--on-suface-container)

}



.tf-product-info-view span {

    text-decoration: underline

}



.tf-product-info-item {

    display: flex;

    align-items: center;

    gap: 4px

}



.tf-product-info-item .icon {

    font-size: 20px

}



.tf-product-info-item .icon i,

.tf-product-info-item span {

    color: var(--on-suface-container)

}



.tf-product-info-extra-link {

    display: flex;

    gap: 35px;

    align-items: center

}



.tf-product-extra-icon {

    display: flex;

    gap: 4px;

    align-items: center

}



.tf-product-extra-icon .icon {

    font-size: 20px

}



.tf-product-extra-icon .icon i,

.tf-product-extra-icon p {

    color: var(--on-suface-container)

}



.tf-product-info-sku {

    padding: 20px 0;

    border-top: 1px solid var(--outline);

    border-bottom: 1px solid var(--outline);

    margin-bottom: 20px

}



.tf-product-info-sku li {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 4px

}



.tf-product-info-sku li .title-sku {

    color: var(--on-suface-container)

}



.tf-product-info-sku li .text-1 {

    color: var(--on-suface-variant-1)

}



.tf-product-info-sku li:last-child {

    margin-bottom: 0

}



.tf-product-info-guranteed {

    display: flex;

    gap: 16px;

    text-align: center;

    flex-wrap: wrap;

    align-items: center

}



.tf-product-info-guranteed .tf-payment {

    display: flex;

    gap: 12px;

    flex-wrap: wrap

}



.tf-product-info-guranteed .tf-payment a {

    border: 1px solid var(--outline);

    border-radius: 4px

}



.tf-product-info-guranteed .tf-payment a img {

    width: 48px

}



.text-product-info-help {

    color: var(--on-suface-container)

}



.text-product-info-help a {

    text-decoration: underline

}



.progress-bars {

    display: flex;

    align-items: center;

    gap: 8px

}



.review-rating {

    padding: 41px 39px 39px 37px;

    border: 2px solid var(--outline)

}



.review-rating .heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 40px;

    gap: 10px;

    flex-wrap: wrap

}



.review-rating .heading .score {

    text-align: center;

    padding-right: 5px;

    width: max-content

}



.review-rating .heading .score h1 {

    color: var(--On-Surface)

}



.review-rating .heading .score .rating {

    margin-top: -5px

}



.review-rating .heading .score .rating i {

    font-size: 21px !important;

    margin-right: -4px

}



.review-rating .heading .score .rating i:nth-child(5) {

    color: var(--outline)

}



.review-rating .heading .score .rating .text {

    text-align: center;

    color: var(--Secondary2)

}



.review-rating .heading .tf-btn {

    padding: 12px 32px;

    margin-bottom: 7px

}



.review-rating .heading .progress-bars {

    height: 20px;

    margin-bottom: 8px

}



.review-rating .heading .progress-bars:last-child {

    margin-bottom: 0

}



.review-rating .heading .progress-rating {

    padding-bottom: 7px

}



.review-rating .heading .progress-rating .rating-style-2 {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px

}



.review-rating .heading .progress-rating i {

    font-size: 20px

}



.review-rating .heading .progress-rating .progress-cart {

    height: 12px

}



.review-rating .comment-review .title-comment {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

    flex-wrap: wrap;

    gap: 10px

}



.review-rating .comment-review .sort-by {

    display: flex;

    align-items: center;

    gap: 12px

}



.review-rating .comment-review .sort-by .text {

    white-space: nowrap;

    color: var(--on-suface-variant-1)

}



.review-rating .comment-review .sort-by .nice-select {

    border: 1px solid var(--outline) !important;

    border-radius: 4px;

    padding: 8px 55px 8px 16px

}



.review-rating .comment-review .comment .comment-item {

    margin-bottom: 24px

}



.review-rating .comment-review .comment .comment-item .name {

    padding-bottom: 5px;

    color: var(--On-Surface);

    width: 100%

}



.review-rating .comment-review .comment .comment-item:last-child {

    margin-bottom: 0

}



.review-rating .comment-review .comment .comment-item.type-reply {

    padding-left: 17px;

    border-left: 4px solid var(--Line)

}



.review-rating .comment-review .comment .comment-item.type-reply .avatar-comment {

    width: 52px;

    height: 52px

}



.rating-form {

    display: flex;

    flex-direction: row-reverse;

    justify-content: left

}



.rating-form input {

    display: none

}



.rating-form label {

    cursor: pointer;

    transition: color .3s ease

}



.rating-form label:before {

    content: "";

    font-family: icomoon;

    font-size: 40px;

    color: var(--outline);

    transition: all .3s ease;

    display: flex;

    align-items: center;

    justify-content: center

}



.rating-form input:checked~label:before,

.rating-form label:hover:before,

.rating-form label:hover~label:before {

    color: var(--on-suface-container)

}



.fl-item,

.fl-item-1,

.fl-item-2,

.fl-item-3,

.fl-item-4,

.fl-item-5 {

    display: none

}



.header-test {

    height: 500px;

    background-color: var(--primary)

}



.wg-counter {

    display: flex;

    align-items: center

}



.wg-counter.style-column {

    flex-direction: column;

    align-items: flex-start;

    justify-content: center

}



.counter-item .number-counter {

    display: flex;

    align-items: center

}



.counter-item .number-counter .number {

    font-family: Rethink Sans, sans-serif !important

}



.counter-item .number-counter .odometer-formatting-mark {

    display: none !important

}



.counter-item.style-2 h3 {

    color: var(--white)

}



.counter-item.style-2 .text {

    color: var(--primary)

}



.counter-item.style-3 .counter {

    display: flex;

    align-items: center;

    gap: 16px

}



.counter-item.style-3 h2 {

    color: var(--primary)

}



.counter-item.style-3 .text {

    color: var(--on-suface-container)

}



.counter-item.style-4 {

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    padding: 16px 24px

}



.counter-item.style-4 .text,

.counter-item.style-4 h3 {

    color: var(--white)

}



.box-icon .icon {

    color: var(--on-suface-container);

    margin-bottom: 5px;

    transition: all .3s ease;

    width: max-content

}



.box-icon .icon i {

    font-size: 60px

}



.box-icon .title-box {

    display: inline-block;

    margin-bottom: 16px

}



.box-icon .sub-title {

    color: var(--on-suface-variant-1)

}



.box-icon:hover .icon {

    transform: rotateY(180deg)

}



.box-icon.style-border {

    padding: 28px;

    border: 1px solid var(--outline);

    transition: all .3s ease

}



.box-icon.color-white .sub-title,

.box-icon.color-white a,

.box-icon.color-white i {

    color: var(--white)

}



.box-icon.bg-surface {

    padding: 40px;

    background-color: var(--surface)

}



.services-item {

    padding: 28px;

    border: 1px solid var(--surface);

    transition: all .3s ease

}



.services-item .icon {

    color: var(--primary);

    transition: all .3s ease;

    width: max-content

}



.services-item .icon i {

    font-size: 80px

}



.services-item .title-services {

    display: inline-block;

    margin-bottom: 16px

}



.services-item .sub-title {

    color: var(--on-suface-variant-1)

}



.services-item.style-2 {

    background-color: var(--bg-1);

    border-color: var(--bg-1);

    padding: 39px;

    width: 100%;

    position: relative

}



.services-item.style-2 .title-services {

    color: var(--white);

    margin-bottom: 12px;

    position: relative;

    z-index: 2

}



.services-item.style-2 .sub-title {

    color: var(--white);

    position: relative

}



.services-item.style-2:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0;

    background-image: url(../images/img-hover-services.f4b1ec53.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .8;

    transition: all .3s ease

}



.services-item.style-2:hover {

    background-color: var(--primary);

    transition-delay: .2s

}



.services-item.style-2:hover:before {

    height: 100%

}



.services-item:hover {

    border-color: var(--primary)

}



.services-item:hover .icon {

    transform: rotateY(180deg)

}



.box-icon-list {

    display: flex;

    justify-content: space-between

}



.benefit-items {

    display: flex;

    gap: 12px;

    max-width: 100%

}



.benefit-items .icon i {

    font-size: 32px;

    color: var(--primary)

}



.benefit-items .title {

    color: var(--on-suface-container)

}



.benefit-items.style-small-2 .icon i {

    font-size: 24px

}



.benefit-items.style-small {

    gap: 4px

}



.benefit-items.style-small .icon i {

    font-size: 20px

}



.section-services-item {

    display: flex;

    align-items: center;

    gap: 40px

}



.section-services-item .image {

    border-radius: 20px;

    width: 100%

}



.section-services-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-services-item .services-content {

    max-width: calc(100% - 625px);

    width: 100%

}



.section-services-item .services-content .heading {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--outline)

}



.section-services-item .services-content .name-services {

    display: inline-block;

    padding-bottom: 12px

}



.section-services-item .services-content .sub-name {

    color: var(--on-suface-variant-1)

}



.section-services-item .services-content .benefit-lists {

    padding-bottom: 28px

}



.section-services-item .services-content .benefit-lists .benefit-items {

    padding-bottom: 7px;

    align-items: flex-start

}



.section-services-item .services-content .benefit-lists .benefit-items:last-child {

    padding-bottom: 0

}



.section-services-item.style-border {

    gap: 0 61px;

    border: 2px solid var(--outline);

    padding: 0;

    margin-bottom: 79px;

    align-items: unset

}



.section-services-item.style-border:last-child {

    margin-bottom: 0

}



.section-services-item.style-border .heading {

    padding-bottom: 27px;

    margin-bottom: 30px

}



.section-services-item.style-border .image {

    border-radius: 0;

    max-width: 587px

}



.section-services-item.style-border .services-content {

    padding-right: 40px;

    max-width: 100%;

    padding-top: 60px;

    padding-bottom: 60px

}



.section-services-item.style-border .benefit-lists .benefit-items {

    padding-bottom: 6px

}



.section-services-item.style-border .benefit-lists .benefit-items:last-child {

    padding-bottom: 0

}



.process-item {

    position: relative

}



.process-item .process-top {

    display: flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--outline);

    margin-bottom: 20px;

    position: relative;

    transition: all .3s ease

}



.process-item .process-top:before {

    content: "";

    position: absolute;

    bottom: -1px;

    left: auto;

    right: 0;

    width: 0;

    height: 1px;

    background-color: var(--on-suface-container);

    transition: all .3s ease

}



.process-item .process-top .icon {

    transition: all .8s ease

}



.process-item .name-process {

    display: block;

    margin-bottom: 8px;

    color: var(--on-suface-container)

}



.process-item .name-process:hover {

    color: var(--primary)

}



.process-item .desc {

    color: var(--on-suface-container)

}



.process-item:hover .icon {

    transform: rotateY(180deg)

}



.process-item.active .process-top:before {

    left: 0;

    right: auto;

    width: 100%

}



.process-item.bg-1 {

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    padding: 32px

}



.process-item.bg-1 .process-top {

    border-color: var(--bg-1)

}



.process-item.bg-1 .process-top .icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background-color: var(--bg-1);

    border: 1px solid var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    display: flex;

    align-items: center;

    justify-content: center

}



.process-item.bg-1 .process-top .icon i {

    color: var(--white);

    font-size: 32px

}



.process-item.bg-1 .process-top span {

    color: var(--white)

}



.process-item.bg-1 .process-top:before {

    background-color: var(--white)

}



.process-item.bg-1 .name-process {

    color: var(--white);

    margin-bottom: 8px

}

.process-item.bg-1 .name-process:hover{color: var(--white);}




.process-item.bg-1 .desc {

    color: var(--surface)

}



.process-item.bg-1.bg-1-style-2 {

    padding: 20px

}



.process-item.bg-1.bg-1-style-2 .icon {

    width: 48px;

    height: 48px;

    background-color: rgba(0, 0, 0, 0);

    border: none;

    -webkit-backdrop-filter: unset;

    backdrop-filter: unset

}



.process-item.bg-1.bg-1-style-2 .icon svg path {

    stroke: var(--white)

}



.process-item.style-border {

    border: 1px solid var(--outline);

    padding: 32px;

    transition: all .3s ease

}



.process-item.style-border .icon {

    background-color: var(--surface);

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%

}



.process-item.style-border .icon i {

    font-size: 48px

}



.process-item.style-border .name-process {

    margin-bottom: 6px

}



.process-item.style-border .process-top:before {

    content: "";

    position: absolute;

    bottom: -1px;

    left: auto;

    right: 0;

    width: 0;

    height: 1px;

    background-color: var(--primary);

    transition: all .3s ease

}



.process-item.style-border .process-top .icon {

    transition: all .8s ease

}



.process-item.style-border.active {

    border-color: var(--primary)

}



.process-item.style-border.active .process-top:before {

    left: 0;

    right: auto;

    width: 100%

}



.process-item.style-2 {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    max-width: 25%;

    width: 100%

}



.process-item.style-2 .icon-list {

    position: absolute;

    top: 27%;

    left: -22%

}



.process-item.style-2 .icon-list i {

    color: var(--on-suface-variant-1);

    opacity: .3;

    transition: all .3s ease

}



.process-item.style-2 .icon-list.item-2 {

    top: 30%

}



.process-item.style-2 .icon-list.item-2 i {

    font-size: 13px

}



.process-item.style-2 .icon-list.item-3 {

    top: 30%

}



.process-item.style-2 .image {

    border-radius: 50%;

    max-width: 160px;

    margin-bottom: 20px

}



.process-item.style-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.process-item.style-2 .name-process {

    margin-bottom: 12px

}



.process-item.style-2 .label {

    margin-bottom: 4px

}



.process-item.style-2 .desc {

    font-family: Inter Tight, sans-serif;

    color: var(--on-suface-variant-1)

}



.process-item.style-2.active .icon-list i {

    color: var(--primary);

    opacity: 1

}



.process-item.style-3 {

    display: flex;

    gap: 28px;

    position: relative;

    height: 142px

}



.process-item.style-3 .number-process {

    color: var(--primary);

    width: 40px;

    height: 40px;

    border: 3px solid var(--bg-1);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background-color: var(--on-suface-container);

    transition: all .3s ease

}



.process-item.style-3 .circle {

    position: absolute;

    top: -73%;

    left: 20px;

    width: 2px;

    border-left: 2px dashed var(--bg-1);

    height: 101px;

    transition: all .3s ease

}



.process-item.style-3 .process-content {

    width: 100%;

    max-width: calc(100% - 68px)

}



.process-item.style-3.active .number-process {

    color: var(--on-suface-container);

    border-color: var(--primary);

    border-radius: 50%;

    background-color: var(--white)

}



.process-item.style-3.active .circle {

    border-color: var(--primary)

}



.process-item.style-3.style-3-2 {

    gap: 24px;

    height: 138px

}



.process-item.style-3.style-3-2 .icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background-color: var(--surface);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .8s ease

}



.process-item.style-3.style-3-2 .icon i {

    font-size: 48px

}



.process-item.style-3.style-3-2 .circle {

    position: absolute;

    top: 40px;

    left: 38px;

    width: 2px;

    border-left: 2px solid var(--outline);

    height: 101px;

    z-index: -1

}



.process-item.style-3.style-3-2 .process-content {

    max-width: calc(100% - 104px)

}



.process-item.style-3.style-3-2 .process-content .name-process {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 1

}



.process-item.style-3.style-3-2 .process-content .desc {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 3

}



.process-item.style-3.style-3-2:last-child {

    height: auto

}



.process-item.style-3.style-3-2:last-child .circle {

    display: none

}



.process-item.style-color-white .desc,

.process-item.style-color-white .name-process {

    color: var(--white)

}



.process-item.style-4 .process-top {

    border-bottom: 0;

    margin-bottom: 0;

    padding-bottom: 24px

}



.process-item.style-4 .process-top .icon {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--surface);

    border-radius: 50%;

    transition: all .3s ease

}



.process-item.style-4 .process-top .icon i {

    font-size: 48px;

    color: var(--on-suface-container);

    transition: all .3s ease

}



.process-item.style-4:hover .icon {

    background-color: var(--primary);

    transform: rotateY(0)

}



.process-item.style-4:hover .icon i {

    color: var(--white)

}



.case-studies-item {

    position: relative;

    width: 100%;

    overflow: hidden

}



.case-studies-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.case-studies-item .image:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 31.7%;

    background: linear-gradient(180deg, rgba(36, 40, 61, 0), #24283d);

    transition: all .3s ease

}



.case-studies-item .case-studies-content {

    position: absolute;

    bottom: 32px;

    left: 32px;

    right: 32px;

    transform: translateY(94px);

    transition: all .3s ease

}



.case-studies-item .case-studies-content h5 {

    margin-bottom: 7px

}



.case-studies-item .case-studies-content h5 .name {

    color: var(--white);

    border-bottom: 1px solid rgba(0, 0, 0, 0)

}



.case-studies-item .case-studies-content .text {

    color: var(--white)

}



.case-studies-item .desc {

    color: var(--white);

    transform: translateY(-30px);

    opacity: 0;

    margin-top: 16px;

    visibility: hidden;

    transition: all .3s ease

}



.case-studies-item.style-bg-content .image:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--primary);

    transition: all .3s ease

}



.case-studies-item.style-bg-content .image img {

    filter: grayscale(100%);

    opacity: .8;

    transition: all .3s ease

}



.case-studies-item.style-bg-content .case-studies-content {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 24px;

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    transform: translateY(39%)

}



.case-studies-item.style-bg-content .desc {

    margin-top: 8px

}



.case-studies-item.style-bg-content .btn-arrow-item {

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 20px;

    right: 20px

}



.case-studies-item.style-bg-content.style-2-content .case-studies-content {

    transform: translateY(31%)

}



.case-studies-item.style-bg-content.style-2 .case-studies-content {

    transform: translateY(17%);

    padding: 22px 24px

}



.case-studies-item.style-bg-content.style-2 .case-studies-content .desc {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 3

}



.case-studies-item.style-bg-content.style-2 .tf-btn-arrow-t-r {

    opacity: 0;

    visibility: hidden;

    transition: all .3s ease;

    transform: translateY(-100%)

}



.case-studies-item.style-bg-content.style-2:hover .case-studies-content {

    transform: translateY(0)

}



.case-studies-item.style-bg-content.style-2:hover .tf-btn-arrow-t-r {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition-delay: .1s

}



.case-studies-item.style-bg-content.style-no-color .image:before {

    background: var(--outline)

}



.case-studies-item.style-bg-content.style-no-color .image img {

    opacity: .8

}



.case-studies-item.style-bg-content.style-no-color .case-studies-content {

    transform: translateY(40%)

}



.case-studies-item.style-bg-content:hover .image img {

    filter: grayscale(0);

    opacity: 1

}



.case-studies-item.style-bg-content:hover .image:before {

    height: 0

}



.case-studies-item.style-bg-content:hover .case-studies-content {

    transform: translateY(0)

}



.case-studies-item:hover .image:before {

    height: 51.25%

}



.case-studies-item:hover .case-studies-content {

    transform: translateY(0)

}



.case-studies-item:hover .case-studies-content h5 {

    margin-bottom: 8px

}



.case-studies-item:hover .case-studies-content h5 .name {

    border-color: var(--white)

}



.case-studies-item:hover .desc {

    opacity: 1;

    transform: translateY(0);

    visibility: visible;

    transition-delay: .2s

}



.wg-video {

    background-image: url(/image/section/wg-video-small.jpg);

    background-position: 50%;

    background-size: cover;

    background-repeat: no-repeat;

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center

}



.wg-video.w-h-640 {

    width: 640px;

    height: 640px

}



.wg-video.w-full {

    background-image: url(/image/section/wg-video.jpg);

    height: 645px;

    background-attachment: fixed

}



.wg-video.w-full.img-2 {

    background-image: unset;

    background-color: var(--on-suface-container);

    height: 560px

}



.wg-video.w-full.img-2:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(/image/section/wg-video-2.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .9

}



.box-contact-item {

    display: flex;

    gap: 12px

}



.box-contact-item .icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: 1px solid var(--bg-1);

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px)

}



.box-contact-item .icon i {

    color: var(--white);

    font-size: 32px

}



.box-contact-item .title-section-contact {

    color: var(--on-suface-variant-2)

}



.box-contact-item .text {

    color: var(--white);

    display: inline-block

}



.box-contact-item .label {

    color: var(--white);

    border-bottom: 1px solid var(--white);

    width: max-content

}



.box-contact-item .content {

    display: flex;

    flex-direction: column;

    gap: 4px

}



.box-contact-item.style-bg-white {

    background-color: var(--white)

}



.box-contact-item.style-bg-white .icon {

    border-radius: 50%;

    border: 0;

    background-color: var(--surface)

}



.box-contact-item.style-bg-white .icon i {

    color: var(--on-suface-container)

}



.box-contact-item.style-bg-white .title-section-contact {

    color: var(--on-suface-variant-1)

}



.box-contact-item.style-bg-white .text {

    color: var(--on-suface-container)

}



.box-contact-item.style-bg-white .label {

    color: var(--on-suface-container);

    border-bottom: 0;

    width: max-content

}



.industry-item a {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--on-suface-container);

    border: 2px solid var(--outline);

    padding: 10px 24px;

    border-radius: 999px;

    width: max-content

}



.industry-item a i {

    font-size: 32px

}



.industry-item a:hover {

    border-color: var(--primary)

}



.industry-item.style-color-white a {

    color: var(--white);

    background-color: var(--bg-1);

    border-color: var(--bg-1);

    border-color: rgba(0, 0, 0, 0);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    transition: all .3s ease;

    padding: 9px 24px

}



.industry-item.style-color-white a:hover {

    border-color: var(--white)

}



.industry-item.style-2 {

    padding: 27px;

    border: 1px solid var(--outline);

    transition: all .3s ease

}



.industry-item.style-2 a {

    border: 0;

    padding: 0

}



.industry-item.style-2 .top {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px

}



.industry-item.style-2 .top .icon {

    transform: rotateY(0);

    transition: all .8s ease;

    display: flex;

    align-items: center;

    justify-content: center

}



.industry-item.style-2 .top .icon i {

    color: var(--on-suface-container);

    font-size: 32px

}



.industry-item.style-2 .top h6 {

    color: var(--on-suface-container)

}



.industry-item.style-2 .desc {

    color: var(--on-suface-variant-1)

}



.industry-item.style-2:hover {

    border-color: var(--primary)

}



.industry-item.style-2:hover .icon {

    transform: rotateY(180deg)

}



.pricing-card-items {

    background-color: var(--white);

    border: 1px solid var(--outline);

    padding: 39px 39px 44px

}



.pricing-card-items .pricing-card-top {

    padding-bottom: 24px;

    border-bottom: 1px solid var(--outline);

    margin-bottom: 24px

}



.pricing-card-items .tf-btn {

    padding: 13px 0 !important

}



.pricing-card-items ul li {

    margin-bottom: 12px;

    display: flex;

    gap: 8px;

    color: var(--on-suface-variant-1)

}



.pricing-card-items ul li i {

    color: var(--primary);

    font-size: 24px

}



.pricing-card-items ul li:last-child {

    margin-bottom: 0

}



.pricing-card-items ul .color-on-suface-variant-2 i {

    color: var(--on-suface-variant-2)

}



.pricing-card-items.best-value {

    padding: 37px 39px

}



.pricing-card-items.best-value .bg-color-primary {

    border: 1px solid var(--primary)

}



.pricing-card-items.best-value .bg-color-primary:before {

    background: var(--white)

}



.pricing-card-items.best-value .bg-color-primary:hover span {

    color: var(--on-suface-container)

}



.pricing-card-items.best-value .header-card {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    row-gap: 12px

}



.pricing-card-items.best-value .best-value-btn {

    background-color: var(--primary);

    border-radius: 999px;

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 4px 16px

}



.pricing-card-items.best-value .best-value-btn p {

    color: var(--white);

    font-size: 14px;

    font-weight: 600;

    line-height: 24px;

    font-family: SUSE, sans-serif

}



.pricing-card-items.best-value.bg-on-suface-container .price,

.pricing-card-items.best-value.bg-on-suface-container ul li {

    color: var(--white)

}



.pricing-card-items.bg-surface {

    background-color: var(--surface);

    border: none;

    padding: 39px 40px

}



.pricing-card-items.bg-surface pricing-card-top {

    border-color: #e4e4e4

}



.pricing-card-items.bg-surface ul li {

    color: var(--on-suface-variant-1)

}



.pricing-card-items.bg-surface.best-value .best-value-btn {

    letter-spacing: 0

}



.team-item .image {

    margin-bottom: 24px

}



.team-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.team-item .image .team-social {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: max-content;

    transform: translateY(100%);

    padding: 12px 0;

    background-color: var(--bg-3);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .3s ease

}



.team-item .team-content .name-team {

    margin-bottom: 4px

}



.team-item .team-content .name-team a {

    color: var(--on-suface-container);

    position: relative

}



.team-item .team-content .name-team a:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: auto;

    right: 0;

    background-color: var(--on-suface-container);

    width: 0;

    height: 2px;

    transition: all .3s ease

}



.team-item .team-content .name-team a:hover {

    color: var(--primary)

}



.team-item .team-content .name-team a:hover:before {

    background-color: var(--primary)

}



.team-item.style-2 {

    background-color: var(--white);

    padding: 32px

}



.team-item.style-2 .image {

    max-width: 258.5px;

    border-radius: 50%;

    margin-bottom: 25px

}



.team-item.style-2 .image .team-social {

    top: 60%;

    bottom: unset;

    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0);

    opacity: 0;

    visibility: hidden

}



.team-item.style-2 .image .tf-social .item a {

    background-color: var(--bg-3);

    -webkit-backdrop-filter: unset;

    backdrop-filter: unset

}



.team-item.style-2 .image .tf-social .item a:hover {

    background-color: var(--white)

}



.team-item.style-2:hover .team-social {

    top: 50%;

    opacity: 1;

    visibility: visible

}



.team-item:hover .team-social {

    transform: translateY(0)

}



.team-item:hover .team-content .name-team a:before {

    left: 0;

    right: auto;

    width: 100%

}



.box-agent {

    display: flex;

    gap: 16px;

    align-items: flex-start;

    padding-bottom: 40px;

    border-bottom: 1px solid var(--bg-1);

    margin-bottom: 40px;

    flex-wrap: wrap

}



.box-agent .list-img {

    display: flex;

    align-items: center

}



.box-agent .item {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    overflow: hidden;

    margin-left: -16px;

    position: relative;

    z-index: 1

}



.box-agent .item.img-avata {

    border: 2px solid var(--white)

}



.box-agent .item.img-avata.no-border {

    border: none

}



.box-agent .item.text-item {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--white);

    padding-left: 12px;

    padding-right: 8px

}



.box-agent .item:nth-child(2) {

    z-index: 4

}



.box-agent .item:nth-child(3) {

    z-index: 3

}



.box-agent .item:nth-child(4) {

    z-index: 2

}



.box-agent .item:first-child {

    margin-left: 0;

    z-index: 5

}



.box-agent.no-border {

    padding-bottom: 0;

    border-bottom: 0;

    margin-bottom: 0

}



.number-year {

    max-width: 150px;

    width: 100%;

    background-color: var(--primary);

    padding: 24.5px 34.5px

}



.number-year h3,

.number-year p {

    color: var(--white)

}



.tf-marquee {

    display: flex;

    overflow: hidden;

    width: 100%

}



.tf-marquee .marquee-wrapper {

    display: flex;

    animation: infiniteScroll 20s linear infinite;

    align-items: center;

    transition: animation-duration .3s

}



.tf-marquee .marquee-wrapper .initial-child-container {

    flex: 0 0 auto;

    display: flex;

    min-width: auto;

    flex-direction: row;

    align-items: center

}



.tf-marquee .marquee-wrapper .initial-child-container .marquee-child-item {

    display: inline-flex

}



.tf-marquee .marquee-wrapper:hover {

    animation-play-state: paused

}



.tf-marquee.style-2 .marquee-wrapper {

    animation: infiniteScroll 150s linear infinite

}



.tf-marquee.style-2 .marquee-wrapper:hover {

    animation-play-state: paused

}



.tf-group-features {

    position: relative;

    width: 466px;

    height: 466px;

    animation: rotate 200s linear infinite;

    overflow: hidden

}



.tf-group-features .image-main {

    width: 160px;

    height: 160px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



.tf-group-features .image-main a {

    display: inline-block;

    width: 160px;

    height: 160px;

    background-color: var(--on-suface-container);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center

}



.tf-group-features .img-item {

    max-width: 97px;

    height: 97px;

    border-radius: 50%;

    overflow: hidden;

    position: absolute

}



.tf-group-features .img-item a {

    width: 97px;

    height: 97px

}



.tf-group-features .img-item img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.tf-group-features .img-item.item-1 {

    top: 0;

    left: 184px

}



.tf-group-features .img-item.item-2 {

    top: 15%;

    left: 32px

}



.tf-group-features .img-item.item-3 {

    top: 47.4%;

    left: 0

}



.tf-group-features .img-item.item-4 {

    top: 76%;

    left: 102px

}



.tf-group-features .img-item.item-5 {

    top: 76%;

    right: 97px

}



.tf-group-features .img-item.item-6 {

    top: 47%;

    right: 5px

}



.tf-group-features .img-item.item-7 {

    top: 15%;

    right: 40px

}



.tf-group-features .dashed-lines {

    position: absolute;

    width: 100%;

    height: 100%

}



.tf-group-features .inner {

    animation: rotate2 200s linear infinite

}



.brand-item.style-opacity {

    opacity: .4

}



.brand-item.style-opacity:hover {

    opacity: 1

}



.w-100 {

    max-width: 100px;

    width: 100%

}



.progress-box {

    max-width: 398px;

    width: 100%;

    padding: 35px;

    background-color: var(--white);

    border-radius: 30px;

    box-shadow: 0 10px 25px 0 rgba(54, 95, 104, .1019607843)

}



.progress-box .top-box {

    display: flex;

    align-items: flex-end;

    justify-content: space-between

}



.progress-cart {

    width: 100%;

    background-color: #ededed;

    height: 8px

}



.progress-cart,

.progress-cart .value {

    position: relative;

    border-radius: 1000px

}



.progress-cart .value {

    height: 100%;

    background-color: var(--primary);

    transition: width 2s ease

}



.progress-cart.bg-color-on-suface-container {

    height: 4px

}



.progress-cart.bg-color-on-suface-container .value {

    background-color: var(--on-suface-container)

}



.progress-cart.bg-color-on-suface-container .round {

    position: absolute;

    left: 98%;

    top: 50%;

    transform: translateY(-50%);

    width: 16px;

    height: 16px;

    background-color: var(--on-suface-container);

    border-radius: 1000px

}



.progress-cart.style-2 {

    border-radius: 0;

    background-color: var(--outline);

    width: 440.2px

}



.progress-cart.style-2 .value {

    background-color: var(--on-suface-container);

    border-radius: 0

}



.card-chart {

    box-shadow: 0 10px 25px 0 rgba(54, 95, 104, .1019607843);

    padding: 23px 39px;

    border-radius: 30px;

    position: relative;

    background-color: var(--white)

}



.card-chart .top-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 21px

}



.card-chart .top-card .text {

    color: #959fba

}



.card-chart .arrow-card-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    position: absolute;

    top: 31px;

    right: 27px

}



.card-chart .arrow-card-btn .card-chart-arrow-btn {

    width: 15.22px;

    height: 15.22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #edf0f8;

    border-radius: 50%

}



.card-chart .arrow-card-btn .card-chart-arrow-btn i {

    font-size: 7px;

    color: #959fba

}



.card-chart .number-char {

    font-size: 50px;

    line-height: 50px;

    color: #081d34;

    font-weight: 700

}



.card-chart .number-plus {

    color: #63e483

}



.card-chart .number-plus.style-2 {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #bfbfbf

}



.card-chart .number-plus.style-2 .icon {

    width: 18px;

    height: 18px;

    background-color: #3ec770;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%

}



.card-chart .number-plus.style-2 .icon i {

    font-size: 10px;

    font-weight: 700;

    color: var(--white)

}



.card-chart .card-chart-content text {

    font-family: Rethink Sans, sans-serif !important

}



.card-chart p {

    color: #959fba

}



.card-chart.card-chart-1 {

    padding: 23px 39px 30px

}



.card-chart.card-chart-1 .card-chart-content {

    margin-bottom: 29px

}



.card-chart.card-chart-1 .card-chart-content text {

    display: none

}



.card-chart.card-chart-1 .number-percent {

    text-align: center;

    margin-top: -57px

}



.card-chart.style-2 {

    padding: 38px 32px 15px

}



.card-chart.style-2 .card-content {

    display: flex;

    align-items: center;

    border-bottom: 1px solid #bababa;

    justify-content: space-between;

    padding-bottom: 13px

}



.card-chart.style-2 .card-content .number-plus {

    padding-left: 5px

}



.card-chart.style-2 .card-content .text {

    padding-bottom: 3px;

    padding-left: 4px

}



.card-chart.style-2 .card-content h5 {

    font-weight: 700

}



.card-chart.style-2 .card-content:last-child {

    border: none;

    padding-bottom: 0;

    padding-top: 15px

}



.card-chart.style-3 {

    max-width: 100%;

    padding: 0 24px 14px 37px

}



.card-chart.style-3 .left {

    padding-top: 30px

}



.card-chart.style-3 .card-content {

    display: flex;

    justify-content: space-between

}



.card-chart.style-3 .card-content .text {

    margin-bottom: 5px

}



.card-chart.style-3 .card-content .price-card {

    font-weight: 700;

    font-size: 35px;

    line-height: 40px;

    margin-bottom: 33px

}



.card-chart .nice-select {

    max-width: 72px;

    width: 100%

}



.card-chart .nice-select span {

    color: var(--color-text-4)

}



.card-chart .nice-select:before {

    right: 0;

    color: var(--color-text-4)

}



.wg-box-chart {

    border: 1px solid var(--outline)

}



.wg-box-chart .top-wg-box-char {

    justify-content: space-between;

    padding: 24px 24px 20px

}



.wg-box-chart .top-wg-box-char,

.wg-box-chart .top-wg-box-char .left {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    row-gap: 15px

}



.wg-box-chart .top-wg-box-char .left h5 {

    padding-right: 12px

}



.wg-box-chart .top-wg-box-char .left .number {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 10px;

    color: var(--primary)

}



.wg-box-chart .wg-tab ul {

    min-width: unset;

    border: 0

}



.wg-box-chart .wg-tab ul a {

    padding-bottom: 0 !important;

    color: var(--on-suface-variant-1)

}



.wg-box-chart .wg-tab ul a:before {

    background-color: var(--on-suface-container)

}



.wg-box-chart .wg-tab ul a.active,

.wg-box-chart .wg-tab ul a:hover {

    color: var(--on-suface-container)

}



.time-line-item {

    padding-top: 38px;

    border-top: 2px solid var(--bg-1);

    position: relative

}



.time-line-item:before {

    top: -11px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 4px solid var(--bg-1);

    background-color: var(--on-suface-container);

    transition: all .3s ease

}



.time-line-item:after,

.time-line-item:before {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%)

}



.time-line-item:after {

    top: 0;

    width: 2px;

    height: 38px;

    background-color: var(--bg-1);

    z-index: -1

}



.time-line-item.active {

    border-color: var(--primary)

}



.time-line-item.active:before {

    border-color: var(--white)

}



.time-line-item.active .time-line-content,

.time-line-item.active:after {

    background-color: var(--primary)

}



.time-line-item.active .time-line-content .label {

    color: var(--white)

}



.time-line-content {

    background-color: var(--bg-1);

    text-align: center;

    padding: 30px;

    min-height: 234px;

    margin: 0 15px;

    transition: all .3s ease

}



.time-line-content .heading {

    margin-bottom: 16px

}



.time-line-content .heading .label {

    margin-bottom: 8px;

    color: var(--primary);

    transition: all .3s ease

}



.time-line-content .desc,

.time-line-content .heading .title-content {

    color: var(--white)

}



.sidebar-contact {

    background-color: var(--on-suface-container);

    position: relative;

    padding: 33px 32px 30px;

    overflow: hidden

}



.sidebar-contact:before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 36px;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-sidebar-details.3e0d011c.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .2

}



.sidebar-contact .heading-section {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--bg-1)

}



.sidebar-contact .box-contact-item .content {

    max-width: calc(100% - 72px)

}



.header-content-menu-sidebar {

    position: -webkit-sticky;

    position: sticky;

    top: -80px;

    z-index: 100;

    padding-top: 100px;

    padding-bottom: 60px;

    background-color: var(--white);

    overflow: auto

}



.header-content-menu-sidebar::-webkit-scrollbar {

    display: none

}



.detalis-content .cols .benefit-lists {

    max-width: 50%;

    width: 100%

}



.wg-team-details {

    display: flex;

    gap: 60px;

    padding: 40px;

    background-color: var(--white)

}



.wg-team-details .image img {

    width: 100%;

    height: auto;

    object-fit: cover

}



.wg-team-details .tf-social .item a {

    border-color: var(--outline)

}



.wg-team-details .team-details-content {

    max-width: 480px;

    width: 100%

}



.team-details-content .desc,

.team-details-content .label,

.team-details-content .position {

    color: var(--on-suface-variant-1)

}



.infomation-team .cols {

    gap: 20px;

    margin-bottom: 20px

}



.infomation-team .cols:last-child {

    margin-bottom: 0

}



.infomation-team .cols .label {

    margin-bottom: 8px

}



.infomation-team .cols .infomation-content {

    max-width: 50%;

    width: 100%

}



.experience-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--outline)

}



.experience-item:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: none

}



.experience-item h6 {

    text-align: end

}



.gallery-item {

    position: relative

}



.gallery-item .image {

    background-color: var(--on-suface-container);

    transition: all .3s ease

}



.gallery-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .3s ease

}



.gallery-item .gallery-content .icon {

    display: inline-block;

    width: 100px;

    height: 100px;

    background-color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    visibility: hidden;

    transition: all .3s ease

}



.gallery-item .gallery-content .icon i {

    font-size: 40px;

    color: var(--on-suface-container)

}



.gallery-item:hover .image img {

    opacity: .4

}



.gallery-item:hover .icon {

    width: 80px;

    height: 80px;

    opacity: 1;

    visibility: visible

}



.ratings {

    display: flex;

    align-items: center;

    gap: 2px;

    margin-bottom: 4px

}



.ratings li i {

    color: var(--on-suface-container)

}



.ratings li:nth-child(5) i {

    color: var(--outline)

}



.tf-cart-sold .notification-sold {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 20px

}



.tf-cart-sold .notification-sold .icon {

    max-width: 30px

}



.tf-cart-sold .time-count {

    display: inline-block;

    color: var(--error)

}



.ip-discount-code {

    position: relative;

    max-width: 520px;

    width: 100%

}



.ip-discount-code input {

    width: 100%;

    padding: 11px 20px !important;

    border: 1px solid var(--outline) !important;

    border-radius: 4px

}



.ip-discount-code input::placeholder {

    color: var(--on-suface-variant-2) !important

}



.ip-discount-code .tf-btn {

    padding: 8px 20px;

    position: absolute;

    top: 50%;

    right: 6px;

    transform: translateY(-50%);

    border-radius: 2px

}



.bottom-form-table {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    row-gap: 20px

}



.wg-form-information .cols {

    gap: 20px 16px

}



.wg-form-information textarea {

    padding: 9px 14px;

    border: 2px solid var(--outline);

    height: 100px;

    border-radius: 4px

}



.wg-form-information textarea::placeholder {

    color: var(--on-suface-variant-2)

}



.wg-form-information input[type=text] {

    padding: 8px 15px;

    border: 2px solid var(--outline);

    border-radius: 4px;

    width: 100%

}



.wg-form-information input[type=text]::placeholder {

    color: var(--on-suface-variant-2)

}



.wg-form-information .nice-select {

    border-radius: 8px;

    border: 2px solid var(--outline) !important;

    padding: 9px 16px

}



.wg-form-information .nice-select:after {

    right: 16px

}



.form-payment .payment-item {

    padding: 10px 18px;

    border: 2px solid var(--outline);

    border-radius: 8px;

    margin-bottom: 20px;

    transition: all .3s ease

}



.form-payment .payment-item .payment-header {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    cursor: pointer

}



.form-payment .payment-item .text {

    margin-bottom: 18px

}



.form-payment .payment-item.active {

    padding-top: 18px;

    padding-bottom: 16px

}



.form-payment .payment-item.active .payment-header {

    margin-bottom: 8px

}



.form-payment .payment-item:nth-child(2) .collapse:not(.show) {

    display: block

}



.form-payment .payment-item:nth-child(3) {

    padding: 10px 18px;

    display: flex;

    align-items: center;

    gap: 10px

}



.form-payment .payment-item:nth-child(3) .collapse:not(.show) {

    display: block

}



.form-payment .payment-item:last-child {

    padding: 13px 18px;

    margin-bottom: 41px

}



.form-payment .payment-item:last-child .collapse:not(.show) {

    display: block

}



.form-payment .card-numbers {

    position: relative

}



.form-payment .card-numbers .img-icon-payment {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 16px;

    display: flex;

    align-items: center;

    gap: 12px

}



.form-payment input[type=date],

.form-payment input[type=text] {

    padding: 9px 15px;

    border: 2px solid var(--outline);

    border-radius: 8px;

    width: 100%

}



.form-payment input[type=checkbox] {

    background: none;

    height: 20px;

    width: 20px

}



.form-payment input[type=checkbox]:checked:before {

    opacity: 1;

    width: 100%;

    height: 100%;

    background-color: var(--on-suface-container);

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center

}



.form-payment input[type=checkbox]:before {

    content: "";

    position: absolute;

    font-size: 15px;

    color: var(--white);

    font-family: icomoon;

    opacity: 0

}



.wg-your-order .heading h5 {

    color: var(--On-Surface)

}



.wg-your-order .wg-your-order-list li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--outline);

    padding-bottom: 19px;

    margin-bottom: 20px

}



.wg-your-order .wg-your-order-list li:last-child {

    margin-bottom: 0

}



.wg-your-order .wg-order-summary {

    padding: 20px 0 0;

    border-top: 1px solid var(--Line);

    margin-left: 0

}



.wg-your-order .wg-order-summary .order-summary-content {

    padding: 0 0 16px

}



.wg-your-order .wg-order-summary .total {

    padding: 20px 0 0;

    border-top: 1px solid var(--Line)

}



.wg-your-order .ip-discount-code {

    margin-right: 0

}



.wg-your-order .ip-discount-code input {

    padding: 10px 20px !important

}



.box-buy .shiping {

    padding: 20px 0;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--outline);

    border-top: 1px solid var(--outline)

}



.wg-404 {

    position: relative;

    max-width: 100%;

    width: 100%;

    height: 1080px;

    background-color: var(--on-suface-container)

}



.wg-404:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(/image/section/bg-404.jpg);

    background-position: 50%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: .5

}



.wg-404 .inner-404 {

    background: rgba(0, 0, 0, .1490196078);

    -webkit-backdrop-filter: blur(40px);

    backdrop-filter: blur(40px);

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center

}



.wg-404 .content-404 {

    background: rgba(0, 0, 0, 0);

    max-width: 520px

}



.wg-404 .content-404 .text-oops {

    font-weight: 400;

    font-size: 180px;

    line-height: 225px;

    letter-spacing: 0;

    font-family: Geologica, sans-serif;

    color: var(--white);

    margin-bottom: 28px

}



.wg-404 .content-404 h3 {

    color: var(--white);

    margin-bottom: 12px

}



.wg-404 .content-404 .text {

    color: var(--on-suface-variant-2);

    margin-bottom: 28px

}



.banner-item .image {

    margin-bottom: 30px

}



.banner-item .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.banner-item .banner-item-content {

    text-align: center

}



.banner-item .banner-item-content .name-banner {

    margin-bottom: 16px

}



.banner-item .banner-item-content ul li {

    margin-bottom: 4px

}



.banner-item .banner-item-content ul li:last-child {

    margin-bottom: 0

}



.service-details-content .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.service-details-content.style-2 .cols .benefit-lists {

    max-width: 42% !important

}



.case-details-box {

    padding: 23px;

    border: 2px solid var(--outline)

}



.case-details-box h5 {

    margin-bottom: 18px

}



.case-details-box .box-item {

    padding-bottom: 16px;

    margin-bottom: 16px;

    border-bottom: 1px solid var(--outline)

}



.case-details-box .box-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0

}



.case-details-box .number-month {

    padding-right: 8px

}



.wg-new-letter {

    display: flex;

    text-align: center;

    justify-content: space-between;

    background-color: var(--white);

    max-width: 880px;

    width: 100%;

    position: relative

}



.wg-new-letter .image {

    max-width: 440px;

    width: 100%

}



.wg-new-letter .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.wg-new-letter .heading {

    margin-bottom: 28px

}



.wg-new-letter .new-letter-content {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 20px;

    width: 100%

}



.wg-new-letter .new-letter-content input {

    padding: 13px 24px;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid var(--outline);

    border-radius: 999px;

    font-size: 14px;

    line-height: 22px;

    color: var(--on-suface-container);

    margin-bottom: 16px;

    width: 100%;

    max-width: 320px

}



.wg-new-letter .new-letter-content input::placeholder {

    color: var(--on-suface-variant-2);

    font-size: 14px;

    line-height: 22px

}



.wg-new-letter .new-letter-content .tf-btn {

    max-width: 304px;

    width: 100%;

    text-align: center;

    margin-bottom: 16px

}



.wg-new-letter .icon-new-letter {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: var(--bg-6);

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 50

}



.wg-new-letter .icon-new-letter i {

    font-size: 24px;

    color: #181818

}



.text-color-change {

    letter-spacing: -.15px

}



.cd-words-wrapper:after {

    display: none

}



.cd-words-wrapper .item-text {

    color: var(--color-text-1);

    -webkit-text-fill-color: unset;

    -webkit-text-stroke: unset;

    background-image: unset

}



.sidebar-details .form-contact-home {

    padding: 32px 32px 28px

}



.sidebar-details .form-contact-home input {

    padding: 11px 13px

}



.sidebar-details .form-contact-home .nice-select {

    padding: 9px 13px

}



.sidebar-details .form-contact-home textarea {

    padding: 11px 13px

}



.menu-sidebar-tab li {

    margin-bottom: 8px

}



.menu-sidebar-tab li:last-child {

    margin-bottom: 0

}



.menu-sidebar-tab a {

    padding: 16px 24px;

    border: 2px solid var(--outline);

    display: block;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center

}



.menu-sidebar-tab a i {

    color: var(--on-suface-variant-2)

}



.menu-sidebar-tab a.active,

.menu-sidebar-tab a:hover {

    color: var(--white);

    background-color: var(--on-suface-container);

    border-color: var(--on-suface-container)

}



.menu-sidebar-tab.style-2 {

    display: flex;

    align-items: center;

    min-width: 921px

}



.menu-sidebar-tab.style-2 li {

    margin-bottom: 0 !important;

    max-width: 25%;

    width: 100%

}



.menu-sidebar-tab.style-2 li:last-child a {

    border: none

}



.menu-sidebar-tab.style-2 a {

    display: flex;

    width: 100%;

    justify-content: center;

    border-left: 0;

    border-top: 0;

    border-bottom: 0;

    background-color: var(--surface)

}



.menu-sidebar-tab.style-2 a.active,

.menu-sidebar-tab.style-2 a:hover {

    background-color: var(--on-suface-container)

}



.project-item {

    height: 634px;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    overflow: hidden;

    background-color: rgba(0, 0, 0, 0);

    position: relative;

    z-index: 2

}



.project-item .project-content {

    transform: translateY(38%);

    padding: 32px;

    position: relative;

    transition: all .4s ease

}



.project-item .project-content h5 {

    margin-bottom: 8px;

    position: relative

}



.project-item .project-content h5 a {

    color: var(--white);

    border-bottom: 1px solid rgba(0, 0, 0, 0)

}



.project-item .project-content h5 a:hover {

    color: var(--primary);

    border-color: var(--primary)

}



.project-item .project-content .text {

    color: var(--white);

    position: relative

}



.project-item .project-content .desc {

    color: var(--white);

    transform: translateY(-30px);

    transition: all .4s ease;

    opacity: 0;

    visibility: hidden;

    padding-top: 16px

}



.project-item .project-content:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(36, 40, 61, 0), #24283d)

}



.project-item.active .project-content {

    transform: translateY(0)

}



.project-item.active .project-content a {

    border-color: var(--white)

}



.project-item.active .desc {

    transform: translateY(0);

    transition-delay: .2s;

    opacity: 1;

    visibility: visible

}



.project-item.style-2 {

    height: 680px

}



.project-item.style-2 .project-content {

    width: 100%;

    padding: 24px;

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    transform: translateY(0)

}



.project-item.style-2 .project-content:before {

    display: none

}



.project-item.style-2 a {

    color: var(--white);

    border: none

}



.project-item.style-2 .label {

    color: var(--white)

}



.project-item.style-2.active .project-content {

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    background-color: var(--white)

}



.project-item.style-2.active .project-content a {

    color: var(--on-suface-container)

}



.project-item.style-2.active .project-content .label {

    color: var(--primary)

}



.list-image-project .image-project {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    transform: scale(.95);

    transition: all .3s ease

}



.list-image-project .image-project img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.list-image-project .image-project.active {

    opacity: 1;

    visibility: visible;

    transform: scale(1)

}



.preload-container {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 999999999999999;

    height: 100%;

    width: 100%;

    background-color: var(--white)

}



.preload-container .middle {

    top: 50%;

    left: 50%;

    position: absolute;

    width: 100px;

    height: 100px;

    z-index: 100;

    margin: -50px 0 0 -50px;

    background-repeat: no-repeat;

    background-position: 50%;

    background-size: contain;

    content: url(/image/logo/preload.png);

    animation: tf-preload 1.2s linear infinite alternate

}



.progress-wrap {

    position: fixed;

    bottom: 40px;

    right: 20px;

    border-radius: 50%;

    box-shadow: inset 0 0 0 2px rgba(130, 130, 130, .2);

    z-index: 99999;

    opacity: 0;

    visibility: hidden;

    transform: translateX(20px);

    transition: all .3s linear;

    background: var(--white)

}



.progress-wrap,

.progress-wrap:after {

    height: 40px;

    width: 40px;

    cursor: pointer;

    display: block

}



.progress-wrap:after {

    position: absolute;

    content: "";

    font-family: icomoon;

    text-align: center;

    line-height: 40px;

    font-size: 10px;

    color: var(--on-suface-container);

    left: 0;

    top: 0;

    z-index: 1;

    transition: all .4s linear;

    transform: rotate(180deg);

    transform: rotate(-90deg)

}



.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    transform: translateX(0)

}



.progress-wrap svg path {

    fill: none

}



.progress-wrap svg.progress-circle path {

    box-sizing: border-box;

    stroke: var(--primary);

    stroke-width: 5;

    transition-property: all;

    transition-timing-function: cubic-bezier(.4, 0, .2, 1);

    transition-duration: .15s;

    transition-duration: .4s;

    transition-timing-function: linear

}



.tf-spacing-1 {

    padding-top: 100px;

    padding-bottom: 152px

}



.tf-spacing-2 {

    padding-top: 100px;

    padding-bottom: 100px

}



.tf-spacing-3 {

    padding-top: 0;

}



.tf-spacing-6 {

    padding-top: 76px;

    padding-bottom: 109px

}



.tf-spacing-7 {

    padding-top: 100px;

    padding-bottom: 0

}



.tf-spacing-8 {

    padding-top: 40px;

    padding-bottom: 0

}



.tf-spacing-11 {

    padding-top: 98px;

    padding-bottom: 97px

}



.tf-spacing-12 {

    padding-top: 98px;

    padding-bottom: 104px

}



.tf-spacing-14 {

    padding-top: 112px;

    padding-bottom: 100px

}



.tf-spacing-15 {

    padding-top: 80px;

    padding-bottom: 83px

}



.tf-spacing-16 {

    padding-top: 100px;

    padding-bottom: 107px

}



.tf-spacing-17 {

    padding-top: 100px;

    padding-bottom: 96px

}



.tf-spacing-18 {

    padding-top: 97px;

    padding-bottom: 100px

}



.tf-spacing-21 {

    padding-top: 100px;

    padding-bottom: 120px

}



.tf-spacing-22 {

    padding-top: 97px;

    padding-bottom: 107px

}



.tf-spacing-23 {

    padding-top: 100px;

    padding-bottom: 78px

}



.tf-spacing-24 {

    padding-top: 96px;

    padding-bottom: 100px

}



.tf-spacing-25 {

    padding-top: 76px;

    padding-bottom: 103px

}



.tf-spacing-26 {

    padding-top: 98px;

    padding-bottom: 0

}



.tf-spacing-27 {

    padding-top: 100px;

    padding-bottom: 114px

}



.tf-spacing-28 {

    padding-top: 80px;

    padding-bottom: 80px

}



.tf-spacing-29 {

    padding-top: 100px;

    padding-bottom: 77px

}



.tf-spacing-30 {

    padding-top: 100px;

    padding-bottom: 70px

}



.tf-spacing-31 {

    padding-top: 100px;

    padding-bottom: 98px

}



.page-title {

    background-color: var(--on-suface-container)

}



.page-title,

.page-title .page-title-content {

    position: relative

}



.page-title .page-title-content .sub-title,

.page-title .page-title-content .title-page-title {

    color: var(--white)

}



.page-title:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover

}



.page-title.style-1 {

    padding: 122px 0 88px

}



.page-title.style-1 .breadkcum {

    padding-bottom: 44px

}



.page-title.style-1 .title-page-title {

    padding-bottom: 16px

}



.page-title.bg-img-1:before {

    background-image: url(/image/page-title/page-title-1.jpg);

    opacity: .3

}



.page-title.bg-img-2:before {

    background-image: url(/image/page-title/page-title-2.jpg);

    opacity: .3

}



.page-title.bg-img-3:before {

    background-image: url(/image/page-title/page-title-3.jpg);

    opacity: .5

}



.page-title.bg-img-4:before {

    background-image: url(/image/page-title/page-title-5.jpg);

    opacity: .3

}



.page-title.bg-img-5:before {

    background-image: url(/image/page-title/page-title-6.jpg);

    opacity: .3

}



.page-title.bg-img-6:before {

    background-image: url(/image/page-title/page-title-7.jpg);

    opacity: .3

}



.page-title.bg-img-7:before {

    background-image: url(/image/page-title/page-title-8.jpg);

    opacity: .5

}



.page-title.bg-img-8:before {

    background-image: url(/image/page-title/page-title-9.jpg);

    opacity: .5

}



.page-title.bg-img-9:before {

    background-image: url(/image/page-title/page-title-10.jpg);

    opacity: .5

}



.page-title.bg-img-10:before {

    background-image: url(/image/page-title/page-title-11.jpg);

    opacity: .5

}



.page-title.bg-img-11:before {

    background-image: url(/image/page-title/page-title-2.jpg);

    opacity: .5

}



.page-title.bg-img-12:before {

    background-image: url(/image/page-title/page-title-12.jpg);

    opacity: .5

}



.page-title.bg-img-13:before {

    background-image: url(/image/page-title/page-title-13.jpg);

    opacity: .3

}



.page-title.bg-img-14:before {

    background-image: url(/image/page-title/page-title-14.jpg);

    opacity: .3

}



.page-title.bg-img-15:before {

    background-image: url(/image/page-title/page-title-15.jpg);

    opacity: .3

}



.page-title.bg-img-16 {

    padding: 122px 0 96px

}



.page-title.bg-img-16:before {

    background-image: url(/image/page-title/page-title-16.jpg);

    opacity: .3

}



.page-title.bg-img-17:before {

    background-image: url(/image/page-title/page-title-17.jpg);

    opacity: .3

}



.page-title.bg-img-18:before {

    background-image: url(/image/page-title/page-title-18.jpg);

    opacity: .3

}



.page-title.bg-img-19:before {

    background-image: url(/image/page-title/page-title-19.jpg);

    opacity: .3

}



.page-title.bg-img-20:before {

    background-image: url(/image/page-title/page-title-20.jpg);

    opacity: .4

}



.page-title.style-2 {

    padding: 122px 0 40px

}



.page-title.style-2 .breadkcum {

    padding-bottom: 434px

}



.page-title.style-2 .title-page-title {

    margin-bottom: 16px

}



.breadkcum .caption-1,

.page-title.style-2 .meta .meta-content .icon i,

.page-title.style-2 .meta .meta-content .text {

    color: var(--white)

}



.breadkcum .caption-1.page-breadkcum {

    opacity: 50%

}



.meta {

    gap: 15px 33px;

    flex-wrap: wrap

}



.meta,

.meta .meta-content {

    display: flex;

    align-items: center

}



.meta .meta-content {

    gap: 8px

}



.meta .meta-content .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.meta .meta-content .icon i {

    font-size: 20px

}



.page-title-home .page-title-inner {

    background-color: var(--on-suface-container);

    position: relative

}



.page-title-home .page-title-inner:before {

    content: "";

    position: absolute;

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%

}



.page-title-home .page-title-inner .page-title-content {

    position: relative;

    z-index: 2

}



.page-title-home .page-title-inner .page-title-content h1 {

    color: var(--white);

    margin-bottom: 16px

}



.page-title-home .page-title-inner .page-title-content .sub-title {

    color: var(--white);

    margin-bottom: 36px

}



.page-title-home .page-title-inner .page-title-content.text-center {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column

}



.page-title-home .tf-btn-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    opacity: 0;

    visibility: hidden;

    z-index: 4

}



.page-title-home .tf-btn-arrow.arrow-left {

    left: 30px

}



.page-title-home .tf-btn-arrow.arrow-right {

    right: 30px

}



.page-title-home .tf-btn-arrow:hover {

    background-color: var(--primary)

}



.page-title-home:hover .tf-btn-arrow {

    opacity: 1;

    visibility: visible

}



.page-title-home:hover .tf-btn-arrow.arrow-left {

    left: 40px

}



.page-title-home:hover .tf-btn-arrow.arrow-right {

    right: 40px

}



.page-title-home .page-title-inner {

    padding: 227px 0 173px

}



.page-title-home .page-title-inner.img-h1-1:before {

    background-image: url(../images/page-title-home-1.034313cd.jpg);

    opacity: .5

}



.page-title-home .page-title-inner.img-h1-2:before {

    background-image: url(../images/page-title-home-h1-2.975af0e1.jpg);

    opacity: .5

}



.page-title-home .page-title-inner.img-h1-3:before {

    background-image: url(../images/page-title-home-h1-3.296bb90c.jpg);

    opacity: .5

}



.page-title-home.h-2 .page-title-inner {

    padding: 187px 0 142px

}



.page-title-home.h-2 .page-title-inner.img-h2-1:before {

    background-image: url(../images/page-title-home-2.36829662.jpg);

    opacity: .5

}



.page-title-home.h-2 .page-title-inner.img-h2-2:before {

    background-image: url(../images/page-title-home-h2-2.cbf0708f.jpg);

    opacity: .5

}



.page-title-home.h-2 .page-title-inner.img-h2-3:before {

    background-image: url(../images/page-title-home-h2-3.01862c5a.jpg);

    opacity: .5

}



.page-title-home.img-3 .page-title-inner {

    padding: 217px 0 141px

}



.page-title-home.img-3 .page-title-inner:before {

    background-image: url(../images/page-title-home-4.6921b23a.jpg);

    opacity: .5

}



.page-title-home.h-5 .page-title-inner {

    padding: 283px 0 213px !important

}



.page-title-home.h-5 .page-title-inner.img-h5-1:before {

    background-image: url(../images/page-title-home-5.bfe27dbd.jpg);

    opacity: .5

}



.page-title-home.h-5 .page-title-inner.img-h5-2:before {

    background-image: url(../images/page-title-home-h5-2.5c4efc68.jpg);

    opacity: .5

}



.page-title-home.h-5 .page-title-inner.img-h5-3:before {

    background-image: url(../images/page-title-home-h5-3.bcf3a952.jpg);

    opacity: .5

}



.page-title-home.h-5 .page-title-inner:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(36, 40, 62, .5), rgba(0, 0, 0, .1))

}



.page-title-home.h-6 .page-title-inner {

    padding: 309.5px 0 215.5px

}



.page-title-home.h-6 .page-title-inner.img-h6-1:before {

    background-image: url(../images/page-title-home-6.f21d8a2e.jpg);

    opacity: .5

}



.page-title-home.h-6 .page-title-inner.img-h6-2:before {

    background-image: url(../images/page-title-home-h6-2.a51d7a86.jpg);

    opacity: .5

}



.page-title-home.h-6 .page-title-inner.img-h6-3:before {

    background-image: url(../images/page-title-home-h6-3.b809c4b8.jpg);

    opacity: .5

}



.page-title-home.h-7 .page-title-inner {

    padding: 283px 0 243px

}



.page-title-home.h-7 .page-title-inner.img-h7-1:before {

    background-image: url(../images/page-title-home-7.7e7b7bb5.jpg);

    opacity: .5

}



.page-title-home.h-7 .page-title-inner.img-h7-2:before {

    background-image: url(../images/page-title-home-h7-2.8660e847.jpg);

    opacity: .5

}



.page-title-home.h-7 .page-title-inner.img-h7-3:before {

    background-image: url(../images/page-title-home-h7-3.435ab6ed.jpg);

    opacity: .5

}



.page-title-home.style-2 .page-title-inner {

    background-color: var(--bg-2);

    padding-top: 0;

    padding-bottom: 0

}



.page-title-home.style-2 .page-title-inner .page-title-content {

    padding: 105px 0 107px

}



.page-title-home.style-2 .page-title-inner .page-title-content .sub-title,

.page-title-home.style-2 .page-title-inner .page-title-content h1 {

    color: var(--on-suface-container)

}



.page-title-home.style-2 .page-title-inner .page-title-home-right {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0

}



.page-title-home.style-2 .page-title-inner .page-title-home-right .image {

    background-color: var(--on-suface-container);

    max-width: 959px;

    width: 100%;

    height: 100%

}



.page-title-home.style-2 .page-title-inner .page-title-home-right .image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: .5

}



.page-title-home.style-2 .page-title-inner .page-title-home-right .wg-counter {

    position: absolute;

    bottom: 20px;

    left: 20px;

    right: 20px;

    flex-wrap: wrap

}



.page-title-home.style-2 .page-title-inner .page-title-home-right .wg-counter .counter-item {

    flex-grow: 1;

    flex-shrink: 1;

    flex-basis: calc(25% - 20px)

}



.page-title-home.style-2 .page-title-inner .page-title-home-right .wg-counter .counter-item .number-counter {

    margin-bottom: -2px

}



.page-title-home.bg-surface {

    background-color: var(--surface)

}



.page-title-home.style-3 .heading-section {

    padding-top: 57px;

    padding-bottom: 39px;

    align-items: flex-end

}



.page-title-home.style-3 .image-title-home {

    position: relative

}



.page-title-home.style-3 .image-title-home .wg-curve-text {

    position: absolute;

    top: -70px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2

}



.page-title-home.style-3 .image-title-home .image {

    max-height: 660px

}



.page-title-home.style-3 .image-title-home .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.page-title-home.style-3 .right {

    padding-right: 8px

}



.page-title-home.style-3 .right .tf-btn {

    padding: 15px 33px

}



.heading-section {

    margin-bottom: 40px;

    position: relative

}



.heading-section .tag {

    margin-bottom: 20px

}



.heading-section .sub-title {

    color: var(--on-suface-variant-1)

}



.heading-section .bottom {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap

}



.heading-section.style-2 {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.heading-section.style-2 h3 {

    margin-bottom: 0

}



.heading-section.style-color-white .sub-title,

.heading-section.style-color-white .title-section,

.heading-section.style-color-white h3 {

    color: var(--white)

}



.text-center .tag,

.text-center .tf-btn {

    margin-left: auto;

    margin-right: auto

}



.section-content .bottom {

    display: flex;

    align-items: center;

    gap: 28px;

    flex-wrap: wrap

}



.wg-curve-text {

    position: relative;

    width: max-content;

    height: max-content;

    background-color: var(--white);

    border-radius: 50%

}



.wg-curve-text .icon {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center

}



.wg-curve-text .icon i {

    font-size: 32px

}



.wg-curve-text .text-rotate {

    display: flex;

    align-items: center;

    justify-content: center;

    width: max-content;

    height: max-content;

    margin: 0;

    background-color: rgba(0, 0, 0, 0);

    animation: rotate 10s linear infinite

}



.wg-curve-text .text-rotate .circle {

    width: 140px;

    height: 140px;

    border-radius: 50%;

    position: relative

}



.text-rotate .text span {

    font-weight: 700;

    font-size: 14px;

    line-height: 100%;

    position: absolute;

    top: 0;

    left: 50%;

    transform-origin: 0 70px;

    color: var(--on-suface-container);

    padding-top: 5px;

    vertical-align: middle

}



.section-about.h-1 .flat-animate-tab {

    margin-top: 40px;

    padding-top: 40px;

    border-top: 1px solid var(--outline)

}



.section-about.h-1 .text {

    color: var(--on-suface-variant-1)

}



.section-about.h-2 .about-inner {

    position: relative;

    border-top: 1px solid var(--outline)

}



.section-about.h-2 .about-inner .about-content {

    display: flex;

    padding-top: 54px;

    padding-bottom: 56px;

    max-width: 74.5%;

    width: 100%

}



.section-about.h-2 .about-inner .about-content .wg-counter {

    padding-left: 40px;

    margin-left: 68px;

    border-left: 1px solid var(--outline)

}



.section-about.h-2 .about-inner .about-bottom {

    background-color: var(--surface)

}



.section-about.h-2 .about-inner .flat-animate-tab {

    padding-top: 40px;

    padding-bottom: 41px;

    max-width: 70%;

    width: 100%

}



.section-about.h-2 .section-about-right {

    position: absolute;

    top: 0;

    right: 0;

    width: 640px;

    height: 100%

}



.section-about.h-3.section-one-page {

    scroll-margin-top: 50px

}



.section-about.h-5 .about-left {

    position: relative

}



.section-about.h-5 .about-left .item {

    position: absolute

}



.section-about.h-5 .about-left .item.item-2 {

    bottom: 0;

    right: 0;

    padding-left: 20px;

    padding-top: 20px;

    background-color: var(--white)

}



.section-about.h-5 .about-left .item.item-3 {

    top: 17.2%;

    right: 0

}



.section-about.h-5 .section-content {

    padding-top: 60px

}



.section-about.h-5 .benefit-lists .benefit-items {

    align-items: center

}



.section-about.h-5 .benefit-lists .benefit-items .icon {

    display: flex;

    align-items: center;

    justify-content: center

}



.section-about.h-5 .tf-phone {

    gap: 17px

}



.section-about.h-5 .tf-phone .content .caption-1 {

    margin-bottom: 4px

}



.section-about.h-6 {

    background-color: var(--on-suface-container)

}



.section-about.h-6 .section-about-inner {

    display: flex

}



.section-about.h-6 .section-about-inner .section-about-content {

    padding: 88px 80px;

    max-width: calc(100% - 600px)

}



.section-about.h-6 .section-about-inner .section-about-content .tf-btn {

    padding: 13px 39px

}



.section-about.h-6 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-about.h-6 .line {

    background-color: var(--bg-1);

    width: 1px;

    height: 80px

}



.section-about.h-6.section-one-page {

    scroll-margin-top: 100px

}



.section-about.h-7 {

    display: flex;

    flex-wrap: wrap

}



.section-about.h-7 .about-left {

    padding: 99px 111px 82px 15px;

    flex: 1 1 50%;

    display: flex;

    flex-direction: column;

    align-items: flex-end

}



.section-about.h-7 .about-left .heading-section .tag {

    margin-bottom: 15px

}



.section-about.h-7 .about-right {

    padding: 81px 15px 82px 100px;

    flex: 1 1 50%

}



.section-about.h-7 .about-right .section-content {

    max-width: max-content

}



.section-about.h-7 .about-right .text {

    font-family: Archivo, sans-serif

}



.section-about.h-7 .about-right .bottom {

    padding-top: 32px;

    border-top: 1px solid var(--outline);

    margin-top: 32px

}



.section-about.h-7 .tf-btn {

    padding: 15px 33px

}



.section-about.page-career .about-content-right {

    padding: 0

}



.section-about.page-career .flat-animate-tab {

    margin-top: 40px;

    padding-top: 40px;

    border-top: 1px solid var(--outline)

}



.section-about.page-career .text {

    color: var(--on-suface-variant-1)

}



.section-about.page-career .counter-item .number-counter {

    margin-bottom: -3px

}



.section-benefit.h-1 .box-icon-list {

    background-color: var(--surface);

    padding: 40px;

    gap: 40px 60px

}



.section-benefit.h-1 .box-icon-list .box-icon {

    max-width: 257.5px;

    width: 100%

}



.section-benefit.h-3 .box-icon-list {

    border-bottom: 1px solid var(--outline)

}



.section-benefit.h-3 .box-icon-list .box-icon {

    padding-top: 54px;

    padding-bottom: 54px;

    padding-right: 30px;

    margin-right: 30px;

    border-right: 1px solid var(--outline)

}



.section-benefit.h-3 .box-icon-list .box-icon:first-child {

    padding-left: 60px

}



.section-benefit.h-3 .box-icon-list .box-icon:last-child {

    padding-right: 44px;

    margin-right: 0;

    border-right: 0

}



.section-benefit.h-7 {

    background-color: var(--on-suface-container);

    position: relative

}



.section-benefit.h-7:before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-benefit-h7.25664b6f.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .5

}



.section-benefit.h-7 .box-icon-list {

    background-color: var(--bg-1);

    border: 1px solid var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    padding: 32px 32px 47px;

    justify-content: flex-start

}



.section-benefit.h-7 .box-icon-list .box-icon {

    padding-right: 20px;

    margin-right: 20px;

    border-right: 1px solid var(--bg-1);

    max-width: 25%;

    width: 100%

}



.section-benefit.h-7 .box-icon-list .box-icon:last-child {

    padding-right: 0;

    border-right: 0;

    margin-right: 0

}



.section-project.h-1 .heading-section {

    padding-top: 40px

}



.section-project.h-1 .section-project-inner {

    position: relative

}



.section-project.h-2 .sw-project-list {

    background-color: var(--white);

    padding-top: 10px

}



.section-project.h-7 .section-project-inner {

    position: relative

}



.awards-list {

    display: flex;

    align-items: center;

    gap: 30px;

    justify-content: center

}



.awards-list .image-awards img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .3s ease

}



.awards-list .image-awards:hover img {

    transform: scale(1.05)

}



.section-cta.h-1 .tag {

    padding: 2px 10px

}



.section-cta.h-1 .cta-inner {

    background-color: #317c6f;

    max-height: 402px

}



.section-cta.h-1 .cta-inner .image {

    position: absolute;

    bottom: 0;

    left: 65.56px

}



.section-cta.h-1 .cta-inner:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-cta-1.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .5;

    background-attachment: fixed

}



.section-cta.h-1 .cta-content {

    width: 100%;

    max-width: 763px;

    padding: 58px 124px 60px 0;

    position: relative

}



.section-cta.h-1 .tf-phone .icon {

    width: 56px;

    height: 56px

}



.section-cta.h-1 .tf-phone .icon i {

    font-size: 32px

}



.section-cta.h-1.section-one-page {

    scroll-margin-top: 180px

}



.section-cta.h-2 {

    background-color: var(--primary);

    align-items: center;

    padding: 40px 0

}



.section-cta.h-2 .cta-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    row-gap: 30px

}



.section-cta.h-3 {

    background-color: var(--on-suface-container);

    position: relative;

    padding-top: 100px;

    padding-bottom: 70px

}



.section-cta.h-3:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-contact-h3.299c2324.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .5

}



.section-cta.h-3 .cta-content {

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    padding: 60px

}



.section-cta.h-3.section-one-page {

    scroll-margin-top: 100px

}



.section-cta.h-6 {

    position: relative;

    background-color: var(--primary);

    overflow: hidden

}



.section-cta.h-6:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(/image/section/bg-section-cta-h6.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .5;

    background-attachment: fixed

}



.section-cta.h-6 .cta-inner {

    padding-top: 56px;

    padding-bottom: 20px

}



.section-cta.h-6 .cta-inner .image {

    position: absolute;

    bottom: 0;

    left: -19.44px

}



.section-cta.h-6 .cta-content {

    padding-right: 155px

}



.section-cta.h-6 .tf-phone {

    gap: 13px

}



.section-cta.h-6 .tf-phone .icon {

    width: 56px;

    height: 56px

}



.section-cta.h-6 .tf-phone .icon i {

    font-size: 32px

}



.section-cta.h-6.section-one-page {

    scroll-margin-top: 170px

}



.cta-inner {

    position: relative;

    flex-direction: row-reverse;

    display: flex;

    justify-content: space-between

}



.cta-inner.style-2 {

    flex-direction: row;

    width: 100%

}



.cta-inner.style-2 .cta-content {

    max-width: 100%;

    width: 100%

}



.cta-inner.style-2 .cta-content .title-content {

    color: var(--white)

}



.section-process.h-2 {

    background-color: var(--on-suface-container);

    position: relative

}



.section-process.h-2:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-process.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .5;

    background-attachment: fixed

}



.section-process.h-2 .process-item {

    height: 100%

}



.section-process.h-6 {

    background-color: var(--on-suface-container)

}



.section-process.h-6 .section-process-inner {

    display: flex

}



.section-process.h-6 .section-process-inner .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-process.h-6 .section-process-inner .section-process-content {

    padding-top: 72px;

    padding-left: 80px;

    padding-right: 80px;

    max-width: calc(100% - 900px)

}



.section-process.h-7 .heading-section {

    flex-wrap: wrap

}



.section-process.h-7 .heading-section .tag {

    margin-bottom: 11px

}



.section-process.h-7 .process-item {

    height: 100%

}



.section-process.h-8 {

    background-color: var(--on-suface-container);

    position: relative

}



.section-process.h-8:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-process.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .5

}



.section-process.page-our-services-2 .process-item .desc {

    font-family: Rethink Sans, sans-serif

}



.section-why-choose.h-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-why-choose.h-2 .section-content .heading-section {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--outline)

}



.section-why-choose.h-2 .benefit-lists {

    margin-bottom: 30px

}



.section-why-choose.h-2 .benefit-lists .benefit-items {

    padding-bottom: 6px;

    align-items: flex-start

}



.section-why-choose.h-2 .benefit-lists .benefit-items:last-child {

    padding-bottom: 0

}



.section-why-choose.h-3 .list-card {

    display: flex;

    gap: 20px

}



.section-why-choose.h-3 .list-card .card-chart {

    max-width: 50%;

    width: 100%

}



.section-why-choose.h-3 .section-content .heading-section {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--outline)

}



.section-why-choose.h-3 .benefit-lists .benefit-items {

    margin-bottom: 6px

}



.section-why-choose.h-3 .benefit-lists .benefit-items:last-child {

    margin-bottom: 0

}



.section-why-choose.h-4 .section-conten {

    padding-top: 10px

}



.section-why-choose.h-4 .heading-section {

    margin-bottom: 29px;

    border-bottom: 1px solid var(--outline);

    padding-bottom: 27px

}



.section-why-choose.h-4 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-why-choose.h-4 .benefit-lists {

    margin-bottom: 30px

}



.section-why-choose.h-4 .benefit-lists .benefit-items {

    padding-bottom: 6px;

    align-items: flex-start

}



.section-why-choose.h-4 .benefit-lists .benefit-items:last-child {

    padding-bottom: 0

}



.section-why-choose.h-5 .section-why-inner {

    display: flex;

    justify-content: space-between;

    gap: 30px

}



.section-why-choose.h-5 .section-why-inner .section-left {

    position: relative;

    max-width: 672px;

    width: 100%

}



.section-why-choose.h-5 .section-why-inner .section-left .progress-box {

    position: absolute;

    right: 0;

    bottom: 16px;

    letter-spacing: .8px

}



.section-why-choose.h-5 .section-why-inner .section-content {

    max-width: 535px;

    width: 100%

}



.section-why-choose.h-5 .section-why-inner .section-content .heading-section {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--outline)

}



.section-why-choose.h-5 .section-why-inner .benefit-lists .benefit-items {

    margin-bottom: 6px

}



.section-why-choose.h-5 .section-why-inner .card-chart {

    padding: 23px 44px 23px 13px

}



.section-why-choose.h-5 .section-why-inner .nice-select .current,

.section-why-choose.h-5 .section-why-inner .nice-select:before {

    color: #bababa

}



.section-why-choose.h-7 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-why-choose.h-7 .heading-section {

    margin-bottom: 28px;

    border-bottom: 1px solid var(--outline);

    padding-bottom: 28px

}



.section-why-choose.h-7 .heading-section .tag {

    margin-bottom: 11px

}



.section-why-choose.h-7 .benefit-lists .benefit-items {

    align-items: flex-start !important;

    margin-bottom: 11px

}



.section-why-choose.h-7 .benefit-lists .benefit-items:last-child {

    margin-bottom: 0

}



.section-why-choose.h-8 .list-box-icon {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    row-gap: 30px;

    height: 100%

}



.section-why-choose.h-8 .box-icon .icon {

    margin-bottom: 12px

}



.section-why-choose.h-8 .box-icon .title-box {

    margin-bottom: 8px

}



.section-why-choose.page-about .border-bottom {

    border-bottom: 1px solid var(--outline) !important

}



.section-contact-home.h-2 {

    background-color: var(--on-suface-container);

    position: relative

}



.section-contact-home.h-2:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: .3;

    background-image: url(../images/bg-section-contact.74d3b795.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed

}



.section-contact-home.h-2 .section-content {

    max-width: 810px;

    width: 100%

}



.section-contact-home.h-2 .section-contact-home-inner {

    display: flex;

    justify-content: space-between;

    align-items: center

}



.section-contact-home.h-2 .cols {

    gap: 13px;

    flex-wrap: wrap

}



.section-contact-home.h-2 .cols .benefit-lists {

    flex: 1 1 auto;

    max-width: calc(50% - 8px);

    width: 100%

}



.section-contact-home.h-2 .cols .benefit-lists .benefit-items {

    margin-bottom: 9px;

    align-items: flex-start

}



.section-contact-home.h-2 .cols .benefit-lists .benefit-items:last-child {

    margin-bottom: 0

}



.section-contact-home.h-2 .cols .benefit-lists .benefit-items .caption-1,

.section-contact-home.h-2 .cols .benefit-lists .benefit-items i {

    color: var(--white)

}



.section-contact-home.h-2 .list-box-contact {

    margin-top: 33px;

    padding-top: 40px;

    border-top: 1px solid var(--bg-1)

}



.section-contact-home.h-2 .list-box-contact .box-contact-item .content {

    width: 100%;

    max-width: calc(100% - 72px)

}



.section-contact-home.h-4 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-contact-home.h-4 .section-contact-home-inner {

    display: flex;

    align-items: center;

    width: 100%;

    justify-content: flex-end

}



.section-contact-home.h-4 .section-contact-home-inner .left {

    max-width: 100%

}



.section-contact-home.h-4 .section-contact-home-inner .right {

    padding-top: 60px;

    padding-bottom: 60px;

    background-color: var(--on-suface-container)

}



.section-contact-home.h-4 .section-contact-home-inner .box-agent {

    align-items: center;

    padding-bottom: 37px

}



.section-contact-home.h-4 .section-contact-home-inner .tf-btn {

    padding-top: 14px;

    padding-bottom: 14px

}



.section-contact-home.h-4.section-one-page {

    scroll-margin-top: 160px

}



.section-contact-home.page-contact .section-content .cols {

    padding-bottom: 33px;

    margin-bottom: 40px;

    border-bottom: 1px solid var(--outline);

    gap: 8px

}



.section-contact-home.page-contact .section-content .cols .item {

    flex: 1 1 auto;

    max-width: calc(100% - 4px);

    width: 100%

}



.section-contact-home.page-contact .benefit-items {

    margin-bottom: 10px

}



.section-contact-home.page-contact .benefit-items .icon i {

    font-size: 24px;

    color: var(--on-suface-container)

}



.section-contact-home.page-contact .benefit-items:last-child {

    margin-bottom: 0

}



.section-contact-home.page-contact .list-box-contact {

    justify-content: space-between;

    align-items: center

}



.section-contact-home.page-contact .list-box-contact .box-contact-item {

    gap: 17px

}



.section-contact-home.page-our-services .nice-select {

    padding: 9px 15px !important

}



.list-box-contact {

    display: flex;

    gap: 20px;

    flex-wrap: wrap

}



.list-box-contact .box-contact-item {

    flex: 1 1 auto;

    max-width: calc(33.3% - 13px)

}



.list-box-contact.style-column {

    flex-direction: column;

    gap: 24px

}



.list-box-contact.style-column .box-contact-item {

    flex: 1 1 auto;

    max-width: 100%

}



.section-case.h-3 .tf-btn-arrow-t-r {

    margin-top: 8px

}



.section-case.h-3.section-one-page {

    scroll-margin-top: 170px

}



.section-case.h-6 .case-studies-item h5 {

    font-size: 24px !important

}



.section-case.h-6 .case-studies-item .name,

.section-case.h-6 .case-studies-item .text {

    font-family: SUSE, sans-serif !important

}



.section-case.h-6 .case-studies-item .desc {

    font-family: Nunito, sans-serif !important

}



.section-case.h-6 .case-studies-item .case-studies-content {

    transform: translateY(35%) !important

}



.section-case.h-6 .case-studies-item:hover .case-studies-content {

    transform: translateY(0) !important

}



.section-case.h-6.section-one-page {

    scroll-margin-top: 100px

}



.section-case.h-8 .case-studies-item .case-studies-content {

    transform: translateY(16%)

}



.section-case.h-8 .case-studies-item:hover .case-studies-content {

    transform: translateY(0)

}



.section-case.h-8 .sw-project-list {

    background-color: var(--white);

    padding-top: 10px

}



.section-case.h-8.section-one-page {

    scroll-margin-top: 70px

}



.process-list {

    display: flex;

    gap: 39px;

    position: relative;

    justify-content: space-between

}



.process-list.style-column {

    flex-direction: column;

    gap: 0;

    position: relative

}



.industry-list {

    display: flex;

    gap: 22px 17px;

    flex-wrap: wrap;

    justify-content: center

}



.industry-list.style-2 {

    width: 100%;

    overflow: auto;

    flex-wrap: nowrap

}



.section-awards.h-4 .section-awards-list {

    padding: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center

}



.section-awards.h-4 .section-awards-list .awards-list .image-awards.img-1 {

    max-width: 74.1333312988px

}



.section-awards.h-4 .section-awards-list .awards-list .image-awards.img-2 {

    max-width: 93.3333358765px

}



.section-industry.h-3 .default-btn span {

    padding: 0 10px 8px;

    font-family: Kumbh Sans, sans-serif;

    margin-left: 8px

}



.section-industry.h-5 {

    position: relative

}



.section-industry.h-5:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-industries-h5.57ca0365.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .3

}



.section-industry.h-5 .industry-list {

    padding-left: 125px;

    padding-right: 120px;

    margin-bottom: 52px

}



.section-industry.h-5 .default-btn span {

    padding: 0 10px 8px;

    font-family: Kumbh Sans, sans-serif;

    margin-left: 8px

}



.section-industry.page-price .heading-section .tag {

    margin-bottom: 19px

}



.section-industry.h-6 {

    position: relative

}



.section-industry.h-6:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-industries-h6.277a1503.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .5

}



.section-industry.h-6.section-one-page {

    scroll-margin-top: 100px

}



.section-faqs .section-faqs-inner {

    display: flex;

    justify-content: space-between

}



.section-faqs.h-1 {

    background-color: var(--surface)

}



.section-faqs.h-1 .section-faqs-inner {

    gap: 0 30px

}



.section-faqs.h-1 .section-faqs-inner .left,

.section-faqs.h-1 .section-faqs-inner .right {

    width: 100%;

    max-width: 605px

}



.section-faqs.h-5 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-faqs.h-5 .section-content {

    padding-top: 5px

}



.section-faqs.h-5 .section-content .heading-section {

    margin-bottom: 37px

}



.section-faqs.h-7 .heading-section {

    margin-bottom: 35px !important

}



.section-team.h-5 .section-team-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    row-gap: 30px

}



.section-team.h-5 .section-team-right {

    overflow: hidden

}



.section-team.h-6 {

    position: relative;

    background-color: var(--on-suface-container);

    padding: 60px

}



.section-team.h-6:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-team-h6.825b1b02.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    opacity: .7

}



.section-team.h-6 .section-team-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: var(--bg-1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    padding: 40px

}



.section-team.h-6 .section-team-inner .section-content {

    max-width: 30%;

    width: 100%

}



.section-team.h-6 .box-agent {

    align-items: center

}



.section-team.h-6 .box-agent a {

    border-bottom: 1px solid var(--white)

}



.section-team.h-6 .list-team-item {

    width: 100%;

    max-width: 63.9%

}



.list-team-item {

    display: flex;

    gap: 40px

}



.section-brand.h-7 .text-heading {

    position: relative;

    text-align: center

}



.section-brand.h-7 .text-heading span {

    background-color: var(--white);

    position: relative;

    padding-left: 40px;

    padding-right: 40px;

    text-align: center

}



.section-brand.h-7 .text-heading:before {

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    width: 100%;

    height: 1px;

    background-color: var(--outline)

}



.section-services.h-4.section-one-page {

    scroll-margin-top: 150px

}



.section-services.h-5.section-one-page {

    scroll-margin-top: 70px

}



.section-services.h-8 .services-inner {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.section-services.h-8 .services-inner .services-content {

    padding-right: 40px;

    padding-left: 40px

}



.section-services.h-8 .services-inner .services-content .cols {

    flex-wrap: wrap

}



.section-services.h-8 .services-inner .services-content .cols .item {

    flex: 1 1 auto;

    max-width: 50%

}



.section-services.h-8 .services-inner .services-content .benefit-items {

    margin-bottom: 2px

}



.section-services.h-8 .services-inner .services-content .benefit-items:last-child {

    margin-bottom: 0

}



.section-services.h-8 .services-inner .image {

    max-width: 640px

}



.section-services.h-8 .services-inner .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.section-services.h-8 .tab-product {

    width: 100%

}



.section-services.h-8 .tab-product li {

    max-width: 292.5px;

    width: 100%;

    text-align: center

}



.section-services.h-8 .tab-product li a {

    width: 100%;

    padding-bottom: 20px

}



.section-testimonials.h-6 .counter-item .number-counter {

    margin-bottom: 0

}



.section-testimonials.h-6 .counter-item .number-counter h4 {

    font-family: SUSE, sans-serif !important

}



.section-testimonials.h-6 .counter-item .text {

    font-size: 24px !important;

    font-family: SUSE, sans-serif !important

}



.section-testimonials.h-6 .testimonial-item .testimonial-top {

    padding-bottom: 16px !important

}



.section-testimonials.h-6 .testimonial-item .info-content .name,

.section-testimonials.h-6 .testimonial-item .info-content .position-user {

    font-family: SUSE, sans-serif !important

}



.section-testimonials.h-6.section-one-page {

    scroll-margin-top: 100px

}



.section-testimonials.h-8 .section-content {

    padding-bottom: 89px

}



.section-testimonials.h-8 .section-content .heading-section {

    margin-bottom: 32px;

    border-bottom: 1px solid var(--outline);

    padding-bottom: 32px

}



.section-banner.h-8 {

    position: relative;

    background-color: var(--on-suface-container)

}



.section-banner.h-8 .heading-section {

    margin-bottom: 25px

}



.section-banner.h-8:before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-section-banner-h8.9d95fcbf.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .5

}



.section-banner.h-8 .tf-phone .icon {

    width: 56px;

    height: 56px

}



.section-banner.h-8 .tf-phone .icon i {

    font-size: 32px

}



.dropdown .dropdown-title {

    cursor: pointer

}



.dropdown .dropdown-backdrop.show:before {

    position: fixed;

    content: "";

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(24, 24, 24, .2);

    z-index: 200

}



.dropdown.dropdown-store-location {

    width: max-content

}



.dropdown.dropdown-store-location .dropdown-title {

    cursor: pointer;

    width: max-content

}



.dropdown.dropdown-store-location .dropdown-menu {

    border: 0;

    background-color: rgba(0, 0, 0, 0);

    padding: 0

}



.dropdown.dropdown-store-location .dropdown-content {

    box-shadow: 0 10px 25px 0 rgba(43, 52, 74, .12);

    width: 360px;

    padding: 20px;

    border-radius: 12px;

    border: 1px solid var(--line);

    background-color: var(--white);

    margin: 17px 0 !important;

    display: flex;

    flex-direction: column;

    gap: 20px

}



.dropdown.dropdown-store-location .dropdown-content-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%

}



.dropdown.dropdown-store-location .dropdown-content-heading .icon {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    cursor: pointer

}



.line-check-out {

    position: absolute;

    background-color: var(--outline);

    height: 100%;

    width: 1px;

    top: 0;

    bottom: 0;

    left: 52.9%

}



.coming-soon {

    height: 1080px;

    background-color: var(--on-suface-container);

    position: relative

}



.coming-soon:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url(../images/bg-coming-soon.1260f647.jpg);

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: .5

}



.coming-soon .coming-soon-inner {

    display: flex;

    position: relative;

    height: 100%

}



.coming-soon .coming-soon-inner .content .heading {

    color: var(--white)

}



.coming-soon .coming-soon-inner .js-countdown .countdown__timer {

    display: flex;

    justify-content: center;

    gap: 74px

}



.coming-soon .coming-soon-inner .js-countdown .countdown__item {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative

}



.coming-soon .coming-soon-inner .js-countdown .countdown__item:not(:last-child):after {

    position: absolute;

    content: ":";

    font-size: 56px;

    line-height: 68px;

    font-weight: 500;

    top: 50%;

    right: -22px;

    transform: translateY(-50%)

}



.coming-soon .coming-soon-inner .js-countdown .countdown__item:after,

.coming-soon .coming-soon-inner .js-countdown .countdown__label,

.coming-soon .coming-soon-inner .js-countdown .countdown__value {

    color: var(--white)

}



.coming-soon .coming-soon-inner .js-countdown .countdown__value {

    font-size: 80px;

    line-height: 88px;

    font-weight: 500

}



.coming-soon .coming-soon-inner .js-countdown .countdown__label {

    font-weight: 500;

    font-size: 22px;

    line-height: 30px

}



.coming-soon .left {

    background-color: var(--bg-4);

    max-width: 960px;

    width: 100%;

    height: 100%;

    -webkit-backdrop-filter: blur(40px);

    backdrop-filter: blur(40px);

    display: flex;

    align-items: center;

    justify-content: center

}



.coming-soon .left .content {

    max-width: 550px;

    width: 100%;

    padding-left: 15px;

    padding-right: 15px

}



.coming-soon .left .content input {

    padding: 18px 24px

}



.coming-soon .left .content .tf-btn-newsletter {

    width: 44px;

    height: 44px

}



.coming-soon .left .content .box-agent {

    flex-wrap: wrap

}



.coming-soon .right {

    display: flex;

    align-items: center;

    padding-right: 15px;

    padding-left: 15px

}



.section-services-content {

    padding: 40px;

    background-color: var(--white)

}



.section-pricing.h-3 .heading-section {

    margin-bottom: 39px

}



.section-pricing.page-price .pricing-card-items {

    padding: 39px 39px 37px

}



.section-pricing.page-price .pricing-card-items .pricing-card-top {

    padding-bottom: 24px !important

}



.section-pricing.page-price .pricing-card-items ul li {

    align-items: center

}



.section-pricing.page-price .pricing-card-items .tf-btn {

    padding: 15px 0 !important

}



.section-pricing.page-price .pricing-card-items.best-value {

    padding: 39px

}



.section-pricing.page-price .pricing-card-items.best-value .best-value-btn {

    padding: 2px 16px;

    letter-spacing: 0

}



.section-pricing.page-price .pricing-card-items.best-value .tf-btn {

    padding: 13px 0 !important

}



.case-studies-details .detalis-content .benefit-items {

    margin-bottom: 6px

}



.case-studies-details .detalis-content .benefit-items:last-child {

    margin-bottom: 0

}



.fqas-item .according-item {

    padding-top: 15px;

    padding-bottom: 16px;

    margin-bottom: 16px

}



.fqas-item .according-item .according-content p {

    padding-top: 8px;

    padding-bottom: 0

}



.fqas-item .according-item:last-child {

    margin-bottom: 0

}



.gallery-list .tf-btn {

    padding: 16px 40px !important

}



.section-new.h-1 .tf-post-grid .sub-title {

    margin-bottom: 2px !important

}



.section-new.h-2 .tf-post-grid .sub-title {

    margin-bottom: 5px !important

}



.section-one-page {

    scroll-margin-top: 70px

}



@media(min-width:1921px) {



    .coming-soon,

    .wg-404 {

        height: 100vh

    }

}



@media(min-width:1501px) {

    .section-process.h-5 .process-list {

        margin-right: -12px;

        margin-left: -12px

    }



    .coming-soon .right {

        padding-left: 148px

    }



    .ml-51 {

        margin-left: 51px !important

    }



    .mr-65 {

        margin-right: 65px !important

    }



    .section-awards.h-4 .section-awards-list .awards-list {

        padding-right: 80px;

        gap: 40px;

        padding-left: 80px

    }



    .related-post {

        margin-right: 8px

    }

}



@media(min-width:1201px) {

    .sw-layout .sw-pagination-layout {

        display: none

    }

}



@media(min-width:1150px) {

    .section-contact-home.h-4 {

        position: relative

    }



    .section-contact-home.h-4 .left {

        position: absolute;

        top: 0;

        left: 0

    }



    .section-contact-home.h-4 .section-contact-home-inner .right {

        padding-top: 80px;

        padding-bottom: 80px;

        padding-left: 20px;

        margin-left: -20px

    }



    .ml-50 {

        margin-left: 50px

    }



    .mr-50 {

        margin-right: 50px

    }

}



@media(min-width:992px) {



    .section-benefit.h-6 .heading-section,

    .section-industry.h-6 .heading-section {

        margin-bottom: 0 !important

    }



    .pl-80 {

        padding-left: 80px !important

    }



    .pb-80 {

        padding-bottom: 80px !important

    }



    .section-team.h-5 .heading-section {

        margin-bottom: 0

    }



    .testimonial-item .position-user {

        white-space: nowrap !important

    }



    .mb-10 {

        margin-bottom: 10px !important

    }



    .mb--3 {

        margin-bottom: -3px !important

    }



    .section-process.h-7 .heading-section {

        gap: 95px

    }



    .section-why-choose.h-3 .section-why-choose-inner {

        padding-top: 25px;

        padding-bottom: 20px

    }



    .section-why-choose.h-4 .image {

        margin-left: 14px

    }



    .section-why-choose.h-4 .section-content {

        margin-right: 15px

    }



    .section-why-choose.h-5 .section-why-inner {

        padding-top: 14px

    }



    .section-why-choose.h-5 .section-why-inner .section-left {

        padding-top: 20px

    }



    .section-why-choose.h-7 .section-content {

        padding-top: 32px

    }



    .page-title-home.style-2 .page-title-inner .page-title-content {

        max-width: 50%

    }



    .card-chart.w-627 {

        max-width: 627px

    }



    .m-lr-100 {

        margin-left: 100px;

        margin-right: 100px

    }



    .m-40 {

        margin: 40px !important

    }



    .ml-40 {

        margin-left: 40px !important

    }



    .ml-30 {

        margin-left: 30px

    }



    .ml-35 {

        margin-left: 35px !important

    }



    .mr-30 {

        margin-right: 30px !important

    }



    .mr-25 {

        margin-right: 25px !important

    }



    .ml-25 {

        margin-left: 25px !important

    }



    .mr-15 {

        margin-right: 15px

    }



    .ml-15 {

        margin-left: 15px

    }



    .mr-10 {

        margin-right: 10px !important

    }



    .section-about.h-1 .about-content-left {

        margin-right: 6px;

        border-right: 1px solid var(--outline);

        margin-bottom: 0 !important

    }



    .section-about.h-1 .about-content-right {

        margin-left: 4px;

        padding: 34px 0

    }



    .section-about.h-2 .heading-section {

        margin-bottom: 0

    }

}



@media(min-width:860px) {

    .tf-minicart-recommendations .wrap-recommendations::-webkit-scrollbar {

        width: 8px

    }



    .tf-minicart-recommendations .wrap-recommendations::-webkit-scrollbar-track {

        background: var(--outline)

    }



    .tf-minicart-recommendations .wrap-recommendations::-webkit-scrollbar-thumb {

        background: var(--on-suface-variant-2)

    }



    .tf-minicart-recommendations .wrap-recommendations::-webkit-scrollbar-thumb:hover {

        background: var(--outline)

    }

}



@media(max-width:1920px) {

    .page-title-home.style-2 .page-title-inner .page-title-home-right {

        max-width: 49.9%;

        width: 100%

    }

}



@media(max-width:1752px) {

    .section-process.h-6 .section-process-inner {

        display: flex;

        align-items: center

    }



    .section-process.h-6 .section-process-inner .image {

        width: 100%;

        max-width: 50%

    }



    .section-process.h-6 .section-process-inner .section-process-content {

        max-width: 50%;

        padding-left: 40px;

        padding-right: 40px

    }



    .page-title-home.style-2 .wg-counter .counter-item {

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(50% - 20px)

    }



    .section-about.h-2 .section-about-right {

        width: 500px !important

    }

}



@media(max-width:1656px) {

    .section-team.h-6 {

        padding-left: 15px;

        padding-right: 15px

    }



    .section-team.h-6 .list-team-item {

        gap: 20px

    }



    .header.style-border-bottom .tf-phone,

    .header.style-border-radius .tf-phone {

        display: none !important

    }

}



@media(max-width:1500px) {



    .page-title-home.h-2 .tf-btn-arrow,

    .swiper-time-line .tf-btn-arrow {

        display: none

    }



    .section-about.h-2 .section-about-right {

        width: 400px !important

    }



    .section-benefit.h-7 .box-icon-list {

        flex-wrap: wrap;

        row-gap: 30px;

        justify-content: space-between

    }



    .section-benefit.h-7 .box-icon-list .box-icon {

        flex: 1 1 auto;

        max-width: calc(25% - 30px);

        width: 100%;

        padding-right: 0;

        border-right: 0;

        margin-right: 0

    }

}



@media(max-width:1425px) {

    .header.style-border-bottom .nav-btn {

        display: none !important

    }

}



@media(max-width:1400px) {

    .page-title-home.style-3 .image {

        height: 500px !important

    }



    .section-team.h-6 .section-team-inner {

        flex-direction: column;

        row-gap: 60px

    }



    .section-team.h-6 .section-team-inner .list-team-item,

    .section-team.h-6 .section-team-inner .section-content {

        max-width: 100%

    }



    .section-team.h-6 .section-team-inner .list-team-item {

        flex-wrap: wrap

    }



    .section-team.h-6 .section-team-inner .list-team-item .team-item {

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(33.33% - 20px);

        text-align: center;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column

    }



    .section-team.h-6 .section-team-inner br {

        display: none

    }



    .sw-icon-list,

    .sw-new {

        margin: 0 -15px !important

    }



    .sw-icon-list .swiper-slide,

    .sw-new .swiper-slide {

        padding: 0 15px !important

    }



    .sw-new-2 {

        margin: 0 -15px !important

    }



    .sw-new-2 .swiper-slide {

        padding: 0 15px !important

    }



    .section-about.h-6 .wg-counter {

        flex-wrap: wrap;

        row-gap: 30px

    }



    .section-about.h-6 .wg-counter .counter-item {

        flex: 1 1 50%

    }



    .section-about.h-6 .wg-counter .line {

        display: none

    }



    .case-studies-item .case-studies-content {

        bottom: 15px;

        left: 15px;

        right: 15px

    }



    .header .header-content .header-left {

        gap: 40px !important

    }

}



@media(max-width:1350px) {

    .section-about.h-2 br {

        display: none !important

    }



    .section-about.h-2 .heading-section {

        margin-bottom: 40px !important

    }



    .section-about.h-2 .about-content {

        flex-direction: column !important;

        max-width: 100% !important

    }



    .section-about.h-2 .about-content .wg-counter {

        padding-left: 0 !important;

        margin-left: 0 !important;

        border-left: 0 !important

    }



    .section-about.h-2 .about-content .wg-counter.style-column {

        flex-direction: row;

        justify-content: left;

        flex-wrap: wrap

    }



    .section-about.h-2 .flat-animate-tab {

        max-width: 100% !important

    }



    .section-about.h-2 .section-about-right {

        position: unset;

        width: 100% !important;

        height: 250px !important

    }



    .header.style-border-radius .nav-btn {

        display: none

    }



    .layout-grid-3 {

        margin-left: -15px !important;

        margin-right: -15px !important

    }



    .layout-grid-3 .tf-post-grid {

        padding: 0 15px !important

    }

}



@media(max-width:1320px) {



    .header .nav-btn,

    .header .tf-phone {

        display: none !important

    }

}



@media(max-width:1300px) {



    .section-about.h-7 .about-left,

    .section-about.h-7 .about-right {

        padding: 100px 15px

    }

}



@media(max-width:1225px) {

    .according-item.bg-white .content {

        flex-wrap: wrap

    }



    .according-item.bg-white .content .item-content {

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(50% - 30px)

    }

}



@media(max-width:1200px) {

    .sw-layout .sw-pagination-layout {

        padding-bottom: 6px;

        margin-top: 20px

    }



    .sw-project-list {

        margin-left: 15px;

        margin-right: 15px

    }



    .section-process.h-6 .section-process-inner {

        flex-direction: column

    }



    .section-process.h-6 .section-process-inner .image {

        max-width: 100%

    }



    .section-process.h-6 .section-process-inner .section-process-content {

        padding-top: 60px;

        padding-bottom: 0;

        max-width: 100%

    }



    .process-list .icon-list {

        display: none

    }



    .section-benefit.h-7 .box-icon-list {

        gap: 30px

    }



    .section-benefit.h-7 .box-icon-list .box-icon {

        padding: 0;

        border: 0;

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(50% - 30px)

    }



    .section-about.h-6 .section-about-inner {

        flex-wrap: wrap

    }



    .section-about.h-6 .section-about-inner .image {

        flex: 1 1 50%;

        max-width: 100%

    }



    .section-about.h-6 .section-about-inner .section-about-content {

        padding-left: 15px;

        padding-right: 15px;

        flex: 1 1 50%;

        max-width: 100%

    }



    .section-benefit.h-3 .box-icon-list {

        flex-wrap: wrap;

        border: 0 !important;

        padding: 30px 15px !important

    }



    .section-benefit.h-3 .box-icon-list .box-icon {

        padding-top: 30px;

        padding-bottom: 30px;

        padding-right: 15px !important;

        padding-left: 15px !important;

        margin-right: 0 !important;

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(50% - 30px);

        border: 1px solid var(--outline) !important

    }



    .section-services-item .image,

    .section-services-item .services-content {

        max-width: 50%;

        width: 100%

    }



    .header.style-border-bottom {

        margin-bottom: -80px

    }



    .header.style-border-bottom .canvas-btn,

    .header.style-border-bottom .main-menu {

        display: none !important

    }



    .header.style-border-bottom .mobile-button {

        display: block

    }



    .header.style-border-bottom .header-content {

        padding-top: 20px !important;

        padding-bottom: 20px !important

    }



    .footer br {

        display: none !important

    }

}



@media(max-width:1149px) {

    .product-item .icon {

        opacity: 1;

        visibility: visible;

        right: 16px

    }



    .product-item .tf-btn {

        opacity: 1;

        visibility: visible;

        bottom: 12px

    }



    .tf-sidebar.ml-30 {

        margin-left: 0 !important

    }



    .section-contact-home.h-4 .section-contact-home-inner br {

        display: none

    }



    .section-contact-home.h-4 .section-contact-home-inner .box-agent {

        padding-bottom: 30px;

        margin-bottom: 30px

    }



    .m-lr-40 {

        margin-left: 15px;

        margin-right: 15px

    }

}



@media(max-width:1100px) {



    .section-team.h-5 .section-team-inner .section-team-left,

    .section-team.h-5 .section-team-inner .section-team-right {

        flex: 1 1 50%

    }



    .section-cta.h-1 .cta-inner {

        flex-direction: row-reverse

    }



    .section-cta.h-1 .cta-inner .image {

        position: absolute;

        bottom: 0;

        left: 30px

    }



    .section-cta.h-1 .cta-content {

        max-width: 60%;

        padding-right: 60px !important

    }



    .section-cta.h-1 .tf-phone .icon {

        width: 56px;

        height: 56px

    }



    .section-cta.h-1 .tf-phone .icon i {

        font-size: 32px

    }



    .section-benefit.h-1 .box-icon-list {

        flex-wrap: wrap

    }



    .section-benefit.h-1 .box-icon-list .box-icon {

        flex: 1 1 auto;

        max-width: calc(50% - 60px)

    }



    .header.style-border-radius .header-content {

        padding: 20px !important

    }



    .header.style-border-radius .main-menu {

        display: none

    }

}



@media(max-width:1050px) {

    .page-title-home.style-3 .image {

        height: 400px !important

    }



    .section-benefit.h-7 .box-icon-list {

        justify-content: space-between

    }



    .section-benefit.h-7 .box-icon-list .box-icon {

        flex: 1 1 auto;

        max-width: calc(50% - 30px);

        width: 100%

    }



    .section-services.h-8 .services-inner {

        flex-direction: column

    }



    .section-services.h-8 .services-inner .services-content {

        padding: 40px 15px

    }



    .section-services.h-8 .services-inner .cols {

        align-items: flex-start

    }



    .section-services.h-8 .services-inner .image {

        max-width: 100%;

        width: 100%

    }



    .section-why-choose.h-7 .wg-counter {

        flex-wrap: wrap;

        row-gap: 30px

    }



    .section-why-choose.h-7 .wg-counter .counter-item {

        flex: 1 1 50%

    }



    .section-contact-home.h-2 .section-contact-home-inner {

        flex-direction: column;

        gap: 60px 40px

    }



    .section-contact-home.h-2 .section-contact-home-inner .form-contact-home,

    .section-contact-home.h-2 .section-contact-home-inner .section-content {

        max-width: 100%

    }



    .list-box-contact .box-contact-item {

        max-width: calc(50% - 12px);

        flex: 1 1 auto

    }



    .page-title-home.style-2 .wg-counter {

        display: none

    }



    .page-title-home.style-3 .heading-section {

        flex-direction: column;

        row-gap: 30px

    }



    .page-title.style-2 .breadkcum {

        padding-bottom: 70px

    }



    br {

        display: none

    }



    .tf-post-grid.style-absolute .image {

        height: 398.5px

    }



    .tf-post-grid.style-absolute.style-3 .image {

        height: 100% !important

    }



    .footer .footer-center {

        padding-left: 0 !important

    }



    .top-bar .tf-tb-left .top-bar-content {

        border: none

    }



    .top-bar .tf-tb-left .top-bar-content:first-child {

        display: none

    }



    .top-bar .tf-tb-right .top-bar-content {

        border: none

    }



    .top-bar .tf-tb-right .top-bar-content:first-child {

        display: none

    }



    .header.style-absolute {

        margin-bottom: -80px !important

    }



    .header .header-content {

        padding: 20px 0 !important

    }



    .header .canvas-btn,

    .header .main-menu {

        display: none

    }



    .header .mobile-button {

        display: block

    }



    .header.style-2 .header-top {

        display: none

    }



    .header.style-2 .logo-mobile {

        display: block !important

    }



    .header.style-border-radius {

        margin-bottom: -100px !important

    }



    .header.style-border-bottom {

        margin-bottom: -81px !important

    }

}



@media(max-width:991px) {



    .tf-spacing-1,

    .tf-spacing-2 {

        padding-top: 60px;

        padding-bottom: 60px

    }



    .tf-spacing-3 {

        padding-top: 0;

    }



    .tf-spacing-4 {

        margin-top: 60px;

        margin-bottom: 60px

    }



    .tf-spacing-5,

    .tf-spacing-6 {

        padding-top: 60px;

        padding-bottom: 60px

    }



    .tf-spacing-7 {

        padding-top: 60px;

        padding-bottom: 0

    }



    .tf-spacing-10,

    .tf-spacing-11,

    .tf-spacing-12,

    .tf-spacing-13,

    .tf-spacing-14,

    .tf-spacing-15,

    .tf-spacing-16,

    .tf-spacing-17,

    .tf-spacing-18,

    .tf-spacing-19,

    .tf-spacing-20,

    .tf-spacing-21,

    .tf-spacing-22,

    .tf-spacing-23,

    .tf-spacing-24,

    .tf-spacing-25,

    .tf-spacing-9 {

        padding-top: 60px;

        padding-bottom: 60px

    }



    .tf-spacing-26 {

        padding-top: 60px;

        padding-bottom: 0

    }



    .tf-spacing-27,

    .tf-spacing-28,

    .tf-spacing-29,

    .tf-spacing-30,

    .tf-spacing-31 {

        padding-top: 60px;

        padding-bottom: 60px

    }



    h1 {

        font-size: 50px !important;

        line-height: 55px !important

    }



    h2 {

        font-size: 45px !important;

        line-height: 50px !important

    }



    h3 {

        font-size: 40px !important;

        line-height: 45px !important

    }



    h4 {

        font-size: 30px !important;

        line-height: 35px !important

    }



    .section-awards.h-4 {

        text-align: center;

        padding: 15px 40px !important

    }



    .section-cta.h-3 {

        padding-top: 60px;

        padding-bottom: 60px

    }



    .section-testimonials.h-8 .row {

        flex-direction: column-reverse

    }



    .project-item.style-2 {

        height: 380px !important

    }



    .project-item.style-2 .project-content {

        padding-left: 15px;

        padding-right: 15px

    }



    .wg-tab .tab-product {

        gap: 24px

    }



    .wg-tab h5 {

        font-size: 19px;

        line-height: 30px

    }



    .section-case.h-6 {

        margin-left: 15px;

        margin-right: 15px

    }



    .section-project.h-7 .section-project-inner {

        height: 380px

    }



    .section-benefit.h-6 {

        margin-right: 15px;

        margin-left: 15px

    }



    .section-industry .heading-section {

        padding-left: 15px;

        padding-right: 15px

    }



    .section-cta .cta-inner.style-2 {

        text-align: center

    }



    .section-cta .cta-inner.style-2 .tf-btn {

        margin-left: auto;

        margin-right: auto

    }



    .section-contact-home.h-4 .box-agent {

        padding-bottom: 20px !important;

        margin-bottom: 20px !important

    }



    .page-title-home.style-3 .image {

        height: 300px !important

    }



    .pricing-card-items {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .section-awards.h-4 .section-awards-list {

        gap: 30px;

        flex-wrap: wrap;

        justify-content: center

    }



    .section-services-item.style-border .image {

        border-radius: 0;

        max-width: 100%

    }



    .section-why-choose.h-2 .heading-section,

    .section-why-choose.h-3 .heading-section {

        padding-bottom: 20px !important;

        margin-bottom: 20px !important

    }



    .section-why-choose.h-3 .list-card {

        flex-wrap: wrap;

        gap: 20px;

        justify-content: space-between

    }



    .section-why-choose.h-3 .list-card .card-chart {

        flex: 1 1 auto;

        max-width: calc(50% - 10px)

    }



    .section-why-choose.h-4 .heading-section,

    .section-why-choose.h-5 .heading-section {

        padding-bottom: 20px !important;

        margin-bottom: 20px !important

    }



    .section-why-choose.h-5 .section-why-inner {

        flex-direction: column;

        row-gap: 60px

    }



    .section-why-choose.h-5 .section-why-inner .section-content,

    .section-why-choose.h-5 .section-why-inner .section-left {

        max-width: 100%

    }



    .section-why-choose.h-5 .section-why-inner .progress-box {

        margin-top: 30px;

        position: unset !important;

        max-width: 100%

    }



    .section-why-choose.h-5 .section-why-inner .card-chart {

        padding: 20px 15px !important

    }



    .section-why-choose.h-8 {

        padding-bottom: 60px

    }



    .header-content-menu-sidebar {

        top: -40px;

        padding-top: 60px;

        padding-bottom: 30px

    }



    .section-testimonials.h-6 {

        margin-left: 15px;

        margin-right: 15px

    }



    .section-testimonials.h-8 .section-content {

        padding-bottom: 40px

    }



    .section-about.h-1 .heading-section .mb-40 {

        margin-bottom: 20px !important

    }



    .section-about.h-1 .flat-animate-tab {

        margin-top: 20px !important;

        padding-top: 20px !important

    }



    .section-about.h-1 .counter-item .number-counter,

    .section-about.h-1 .flat-animate-tab .wg-tab .tab-product {

        margin-bottom: 10px !important

    }



    .section-about.h-2 .about-bottom .flat-animate-tab,

    .section-about.h-2 .about-content {

        padding-top: 60px !important;

        padding-bottom: 60px !important

    }



    .section-about.h-5 .about-left {

        max-width: 700px;

        margin-left: auto;

        margin-right: auto

    }



    .section-about.h-6 .section-about-inner .image {

        flex: 1 1 100%

    }



    .section-about.h-6 .section-about-inner .section-about-content,

    .section-about.h-7 .about-left,

    .section-about.h-7 .about-right {

        padding-top: 60px;

        padding-bottom: 60px;

        flex: 1 1 100%

    }



    .section-about.h-7 .about-left {

        align-items: flex-start

    }



    .section-about.h-7 .about-right .bottom {

        padding-top: 20px;

        margin-top: 20px

    }



    .page-title-home .page-title-inner {

        padding: 100px 0 !important

    }



    .page-title-home.style-absolute .page-title-inner {

        padding: 180px 0 100px !important

    }



    .page-title-home.style-2 .page-title-inner {

        padding: 0 !important

    }



    .page-title-home.style-2 .page-title-content {

        padding: 100px 0 !important

    }



    .page-title-home.style-2 .page-title-home-right {

        display: none

    }



    .page-title-home.style-3 .image-title-home .image {

        height: max-content

    }



    .coming-soon {

        height: 100%

    }



    .coming-soon .coming-soon-inner {

        flex-wrap: wrap;

        height: max-content

    }



    .coming-soon .heading {

        margin-bottom: 30px !important

    }



    .coming-soon .left {

        height: max-content;

        flex: 1 1 auto;

        max-width: 100%

    }



    .coming-soon .left .content {

        max-width: 100%;

        padding-top: 60px;

        padding-bottom: 60px

    }



    .coming-soon .right {

        padding-top: 60px;

        padding-bottom: 60px;

        margin-left: auto;

        margin-right: auto

    }



    .line-check-out {

        display: none

    }



    .section-services-item.style-border .services-content {

        max-width: 100%;

        padding-right: 15px !important;

        padding-left: 15px !important

    }



    .section-team.h-5 .section-team-inner .section-team-left,

    .section-team.h-5 .section-team-inner .section-team-right {

        flex: 1 1 100%

    }



    .section-team.h-5 .section-team-inner .section-team-right .tf-group-features {

        margin-left: auto;

        margin-right: auto

    }



    .process-list {

        flex-wrap: wrap

    }



    .process-list .process-item.style-2 {

        flex: 1 1 auto;

        max-width: calc(50% - 39px)

    }



    .flat-animate-tab.style-row .wg-tab.style-3 ul {

        min-width: 320px

    }



    .flat-animate-tab.style-row .tab-content {

        max-width: calc(100% - 360px)

    }



    .section-cta .image {

        display: none

    }



    .section-cta.h-1 .cta-inner {

        flex-direction: row;

        max-height: 100%

    }



    .section-cta.h-1 .cta-content {

        padding: 60px 15px !important;

        max-width: 100%

    }



    .section-cta.h-6 .cta-content {

        max-width: 100%;

        padding-right: 0 !important

    }



    .section-faqs.h-1 .section-faqs-inner {

        flex-direction: column

    }



    .section-faqs.h-1 .section-faqs-inner .left,

    .section-faqs.h-1 .section-faqs-inner .right {

        width: 100%;

        max-width: 100%

    }



    .section-services-item {

        flex-direction: column

    }



    .section-services-item .image,

    .section-services-item .services-content {

        max-width: 100%;

        width: 100%

    }



    .tf-btn-arrow {

        display: none

    }



    .blog-details-2-content {

        padding: 60px 0;

        margin-top: 0

    }



    .layout-grid-3 {

        grid-template-columns: repeat(2, 1fr);

        margin: 0 -15px

    }



    .layout-grid-3 .tf-post-grid {

        padding: 0 15px;

        border-right: 0

    }



    .footer .footer-top {

        flex-direction: column;

        padding: 80px 0

    }



    .footer .footer-top .footer-center,

    .footer .footer-top .footer-left,

    .footer .footer-top .footer-right {

        padding: 0 !important;

        max-width: 100%

    }



    .footer .footer-top .footer-left,

    .footer .footer-top .footer-right {

        border: 0 !important

    }



    .footer .footer-top .footer-center {

        flex-wrap: wrap

    }



    .footer .footer-top .footer-center .footer-content {

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(50% - 47px)

    }



    .footer.style-2 .footer-center .footer-content {

        flex-grow: 1;

        flex-shrink: 1;

        flex-basis: calc(33.33% - 32px)

    }

}



@media(max-width:860px) {

    .canvnas-quick-view {

        min-width: unset !important;

        padding: 15px !important

    }



    .canvnas-quick-view .canvnas-content {

        flex-direction: column

    }



    .canvnas-quick-view .wrap-recommendations {

        overflow-x: auto;

        direction: ltr;

        height: 100%

    }



    .canvnas-quick-view .wrap-recommendations .list-img {

        flex-direction: row !important;

        padding: 0 !important

    }



    .canvnas-quick-view .wrap-recommendations .list-img .list-img-item .image {

        width: 200px

    }



    .canvnas-quick-view .quick-view-content {

        max-width: 100% !important;

        padding: 0 !important

    }



    .canvnas-quick-view .quick-view-content .heading-quick-view {

        padding-bottom: 25px

    }



    .canvnas-quick-view .quick-view-content .tf-product-info-wrap {

        position: unset !important;

        transform: translate(0) !important

    }

}



@media(max-width:767px) {



    h3,

    h2 {

        font-size: 24px !important;

        line-height: 34px !important;

    }



    .wg-tab.style-3 .tab-product {

        margin-bottom: 0 !important

    }



    .wg-tab.style-3 a {

        padding: 15px 0 !important

    }



    .heading-section .mb-12,

    .heading-section .mb-28,

    .heading-section .mb-32,

    .heading-section .mb-40,

    .heading-section .tag,

    .heading-section.mb-32 {

        margin-bottom: 20px !important

    }



    .heading-section.style-2 {

        flex-wrap: wrap;

        gap: 20px !important

    }



    .page-title-home.style-3 .image {

        height: max-content !important

    }



    .section-benefit.h-3 .box-icon-list {

        border-bottom: 0 !important

    }



    .section-benefit.h-3 .box-icon-list .box-icon {

        flex: 1 1 100%

    }



    .project-item {

        height: 434px

    }



    .project-item .project-content {

        padding-left: 15px;

        padding-right: 15px

    }



    .wg-new-letter {

        flex-wrap: wrap

    }



    .wg-new-letter .image {

        flex: 1 1 50%;

        max-width: 50%

    }



    .wg-new-letter .new-letter-content {

        flex: 1 1 50%

    }



    .review-rating .heading {

        flex-direction: column

    }



    .review-rating .heading .progress-rating {

        width: 100%

    }



    .review-rating .heading .progress-rating .progress-cart {

        max-width: calc(100% - 80px)

    }



    .offcanvasTeamsDetails .close-btn {

        background-color: rgba(0, 0, 0, 0) !important

    }



    .offcanvasTeamsDetails .close-btn i {

        color: var(--white) !important

    }



    .wg-team-details {

        flex-direction: column

    }



    .wg-team-details .team-details-content {

        max-width: 100%

    }



    .section-team.h-6 .section-team-inner .list-team-item {

        flex-wrap: wrap

    }



    .section-team.h-6 .section-team-inner .list-team-item .team-item {

        flex: 1 1 100%

    }



    .section-team.h-6 .section-team-inner br {

        display: none

    }



    .flat-animate-tab.style-row {

        flex-direction: column;

        padding-left: 15px;

        padding-right: 15px

    }



    .flat-animate-tab.style-row .wg-tab.style-3 ul {

        min-width: 100%

    }



    .flat-animate-tab.style-row .tab-content {

        max-width: 100%

    }



    .section-benefit.h-1 .box-icon-list {

        padding-left: 15px !important;

        padding-right: 15px !important;

        gap: 40px !important

    }



    .section-benefit.h-1 .box-icon-list .box-icon {

        max-width: calc(50% - 30px)

    }



    .tf-post-list.default .tf-list-post-content {

        max-width: calc(100% - 300px)

    }

}



@media(max-width:650px) {

    .footer.style-2 .footer-subscribe .footer-subscribe-content {

        max-width: 100%;

        width: 100%

    }



    .coming-soon .js-countdown .countdown__timer {

        gap: 25px !important

    }



    .coming-soon .js-countdown .countdown__item:not(:last-child):after {

        font-size: 35px !important;

        line-height: 40px !important

    }



    .coming-soon .js-countdown .countdown__item:after,

    .coming-soon .js-countdown .countdown__label,

    .coming-soon .js-countdown .countdown__value {

        color: var(--white)

    }



    .coming-soon .js-countdown .countdown__value {

        font-size: 40px !important;

        line-height: 45px !important

    }



    .wg-new-letter {

        flex-wrap: wrap

    }



    .wg-new-letter .image {

        flex: 1 1 100%;

        max-width: 100%

    }



    .wg-new-letter .new-letter-content {

        flex: 1 1 100%

    }



    .footer .footer-top {

        padding: 60px 0 !important

    }



    .footer.style-2 .quick-links .flex {

        flex-direction: column !important

    }



    .footer.style-2 .quick-links .g-12 {

        gap: 0 !important

    }



    .footer.style-2 .footer-subscribe {

        flex-direction: column !important;

        gap: 20px !important;

        margin-bottom: 30px !important;

        padding-bottom: 30px !important

    }



    .section-why-choose.h-7 .wg-counter .counter-item {

        flex: 1 1 100%

    }



    .footer-bottom .footer-bottom-inner {

        flex-direction: column;

        justify-content: center;

        gap: 15px

    }

}



@media(max-width:575px) {

    .time-line-content {

        margin-right: 0 !important;

        margin-left: 0 !important

    }

}



@media(max-width:550px) {

    .tag {

        padding: 2px 10px

    }



    .cta-inner:before,

    .section-benefit:before,

    .section-contact-home:before,

    .section-cta:before,

    .section-industry:before,

    .section-process:before,

    .section-team:before {

        background-attachment: unset !important

    }



    .wg-video {

        height: 300px !important

    }



    .wg-video.w-full,

    .wg-video:before {

        background-attachment: unset !important

    }



    .offcanvasTeamsDetails .close-btn {

        background-color: rgba(0, 0, 0, 0) !important;

        right: 15px

    }



    .wg-team-details {

        padding-left: 15px;

        padding-right: 15px

    }



    .box-map #map {

        height: 300px

    }



    .form-contact-home {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .wrap-switch-tabs-content h5 {

        font-size: 17px !important

    }



    .section-about.h-5 .about-left .image img {

        width: 100%;

        height: 100%;

        object-fit: cover

    }



    .section-about.h-5 .about-left .item-2,

    .section-about.h-5 .about-left .item-3 {

        display: none

    }



    .awards-list {

        gap: 10px

    }



    .section-services-content {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .content-404 {

        padding: 100px 0 0 !important

    }



    .content-404 .text-oops {

        font-size: 70px !important;

        line-height: 75px !important

    }



    .box-order {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .ship {

        gap: 30px !important

    }



    .review-rating {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .section-why-choose.h-3 .list-card .card-chart {

        max-width: 100% !important

    }



    .section-brand.h-7 .text-heading:before {

        display: none !important

    }



    .section-brand.h-7 .text-heading span {

        padding: 0 !important

    }



    .testimonial-item.style-2 {

        flex-direction: column-reverse

    }



    .testimonial-item.style-2 .image {

        width: 100%

    }



    .testimonial-item.style-2 .testimonial-content {

        max-width: 100%;

        padding-top: 28px;

        padding-bottom: 28px

    }



    .tf-post-list.style-small-2 {

        flex-direction: column !important

    }



    .tf-post-list.style-small-2 .image {

        width: 100%

    }



    .tf-post-list.style-small-2 .tf-list-post-content {

        max-width: 100%

    }



    .section-cta.h-3 .cta-content {

        padding: 60px 15px !important

    }



    .process-list {

        gap: 39px 15px

    }



    .process-list .process-item.style-2 {

        flex: 1 1 auto;

        max-width: calc(50% - 8px)

    }



    .according-item {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .according-item.bg-white .content {

        flex-wrap: wrap

    }



    .according-item.bg-white .content .item-content {

        flex: 1 1 100%

    }



    .section-benefit.h-7 .box-icon-list {

        padding: 30px 15px

    }



    .section-benefit.h-7 .box-icon-list .box-icon {

        padding: 0;

        border: 0;

        max-width: 100%

    }



    .section-contact-home.h-2 .benefit-lists {

        max-width: 100% !important

    }



    .list-box-contact .box-contact-item {

        max-width: 100%

    }



    .testimonial-item {

        padding-right: 15px;

        padding-left: 15px

    }



    .section-benefit.h-1 .box-icon-list .box-icon {

        max-width: 100% !important

    }



    .write-review {

        padding-left: 15px;

        padding-right: 15px

    }



    .cols {

        flex-direction: column

    }



    .benefit-lists,

    .cols .item {

        max-width: 100% !important

    }



    .benefit-lists {

        width: 100%

    }



    .cols-img {

        flex-direction: column

    }



    .layout-grid-3 {

        grid-template-columns: repeat(1, 1fr);

        margin-left: 0 !important;

        margin-right: 0 !important

    }



    .layout-grid-3 .tf-post-grid {

        padding: 0 !important;

        border-right: 0

    }



    .tf-post-list.default {

        flex-direction: column

    }



    .tf-post-list.default .image {

        width: 100%

    }



    .tf-post-list.default .tf-list-post-content {

        max-width: 100%

    }



    .footer-content {

        flex: 1 1 100% !important

    }



    .footer-content .title-mobile {

        position: relative

    }



    .footer-content .title-mobile:before {

        content: "";

        font-family: icomoon;

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        right: 15px;

        font-size: 7px;

        color: var(--white);

        transition: all .3s ease

    }



    .footer-content.open .title-mobile:before {

        transform: translateY(-50%) rotate(180deg)

    }



    .section-team.h-6 .section-team-inner {

        padding-left: 15px !important;

        padding-right: 15px !important

    }

}



@media(max-width:500px) {

    .tf-group-features {

        width: 280px !important;

        height: 280px !important

    }



    .tf-group-features .image-main,

    .tf-group-features .image-main a {

        width: 50px !important;

        height: 50px !important

    }



    .tf-group-features .image-main a img {

        width: 25px !important;

        height: 25px !important

    }



    .tf-group-features .img-item {

        border-radius: 50%;

        overflow: hidden;

        position: absolute

    }



    .tf-group-features .img-item,

    .tf-group-features .img-item a {

        width: 50px !important;

        height: 50px !important

    }



    .tf-group-features .img-item.item-1 {

        left: 119px !important

    }



    .tf-group-features .img-item.item-2 {

        top: 17%;

        left: 23px

    }



    .tf-group-features .img-item.item-4 {

        left: 64px

    }



    .tf-group-features .img-item.item-5 {

        top: 78%;

        right: 68px

    }



    .tf-group-features .img-item.item-6 {

        top: 47%;

        right: 5px

    }



    .tf-group-features .img-item.item-7 {

        top: 17%;

        right: 24px

    }



    .tf-group-features .dashed-lines {

        position: absolute;

        width: 100%;

        height: 100%

    }



    .tf-group-features .inner {

        animation: rotate2 200s linear infinite

    }



    .section-process.h-6 .section-process-content {

        padding-left: 15px !important;

        padding-right: 15px !important

    }



    .section-process.h-6 .process-item {

        height: 208px !important

    }



    .section-process.h-6 .process-item .circle {

        top: -82%;

        height: 170px !important

    }



    .process-list .process-item.style-2 {

        flex: 1 1 auto;

        max-width: 100%

    }



    .top-bar .tf-tb-right {

        display: none !important

    }



    .top-bar .tf-tb-left {

        justify-content: space-between !important;

        max-width: 100%;

        width: 100%

    }



    .top-bar .tf-tb-left .tf-language {

        border: none

    }

}



@media(max-width:374px) {

    .switch-container .switch {

        width: 55px;

        height: 25px

    }



    .switch-container .switch .toggle {

        width: 17px;

        height: 17px

    }



    .switch-container .switch.is-active .toggle {

        transform: translateX(30px)

    }



    .section-new.h-5 .tf-post-list {

        flex-direction: column

    }



    .section-new.h-5 .tf-post-list .image {

        width: 100% !important

    }



    .section-new.h-5 .tf-post-list .post-content {

        max-width: 100%

    }



    .wg-your-order .wg-your-order-list li {

        flex-direction: column;

        row-gap: 16px

    }



    .experience-item,

    .wg-your-order .wg-your-order-list li .product-item {

        flex-direction: column

    }



    .experience-item {

        align-items: flex-start

    }



    .experience-item h6 {

        text-align: left

    }



    .pricing-card-items {

        padding-left: 15px;

        padding-right: 15px

    }



    .footer-bottom .right ul {

        justify-content: center;

        gap: 10px

    }



    .footer-bottom .right ul li {

        padding-right: 0 !important;

        border-right: 0 !important;

        margin-right: 0 !important

    }

}



#toggle-rtl {

    padding: 0;

    position: fixed;

    top: 50%;

    right: 15px;

    width: 40px;

    height: 40px;

    min-width: 30px;

    text-transform: uppercase;

    z-index: 999;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--primary);

    color: var(--white)

}



.rtl .header.style-border-bottom .tf-phone,

.style-RTL .header.style-border-bottom .tf-phone {

    padding-left: 39px;

    padding-right: 0

}



.rtl .page-title-home .page-title-content,

.style-RTL .page-title-home .page-title-content {

    text-align: end

}



.rtl .page-title-home .page-title-content .tf-btn,

.style-RTL .page-title-home .page-title-content .tf-btn {

    margin-left: auto;

    margin-right: 0

}



.rtl .page-title-home .page-title-content.text-center .tf-btn,

.style-RTL .page-title-home .page-title-content.text-center .tf-btn {

    margin-left: auto;

    margin-right: auto

}



.rtl .page-title-home.style-2 .page-title-home-right,

.style-RTL .page-title-home.style-2 .page-title-home-right {

    left: 0;

    right: auto

}



.rtl .page-title-home.style-2 .page-title-content,

.style-RTL .page-title-home.style-2 .page-title-content {

    text-align: start

}



.rtl .top-bar .tf-phone-topbar,

.style-RTL .top-bar .tf-phone-topbar {

    padding-left: 24px;

    border-left: 1px solid var(--bg-1);

    padding-right: 0;

    border-right: 0

}



.rtl .top-bar .tf-language,

.style-RTL .top-bar .tf-language {

    -webkit-border-start: 1px solid var(--line-1);

    border-inline-start: 1px solid var(--line-1);

    padding-left: 0;

    padding-right: 24px;

    cursor: pointer

}



.rtl .text-color-change,

.style-RTL .text-color-change {

    direction: ltr;

    text-align: end

}



.rtl .number-counter,

.style-RTL .number-counter {

    direction: ltr;

    display: flex;

    justify-content: flex-end

}



.rtl .section-about.h-1 .about-content-right,

.style-RTL .section-about.h-1 .about-content-right {

    margin-right: 4px;

    margin-left: 0

}



.rtl .section-about.h-1 .tf-btn,

.style-RTL .section-about.h-1 .tf-btn {

    margin-left: auto;

    margin-right: 0

}



.rtl .section-benefit.h-1 .box-icon-list,

.style-RTL .section-benefit.h-1 .box-icon-list {

    gap: 30px

}



.rtl .section-benefit.h-1 .box-icon-list .box-icon,

.style-RTL .section-benefit.h-1 .box-icon-list .box-icon {

    max-width: 100%

}



.rtl .heading-section,

.style-RTL .heading-section {

    direction: ltr;

    text-align: end

}



.rtl .heading-section .tag,

.style-RTL .heading-section .tag {

    margin-right: 0;

    margin-left: auto

}



.rtl .heading-section .bottom,

.style-RTL .heading-section .bottom {

    justify-content: flex-end

}



.rtl .heading-section .tf-btn,

.style-RTL .heading-section .tf-btn {

    margin-left: auto;

    margin-right: 0

}



.rtl .heading-section.text-center,

.style-RTL .heading-section.text-center {

    direction: ltr

}



.rtl .heading-section.text-center .tag,

.style-RTL .heading-section.text-center .tag {

    margin-left: auto;

    margin-right: auto

}



.rtl .heading-section.style-2,

.style-RTL .heading-section.style-2 {

    flex-direction: row-reverse

}



.rtl .footer .footer-subscribe .tf-btn-newsletter i,

.style-RTL .footer .footer-subscribe .tf-btn-newsletter i {

    transform: rotateY(180deg)

}



.rtl .according-item .title-according,

.style-RTL .according-item .title-according {

    direction: ltr;

    flex-direction: row-reverse

}



.rtl .case-studies-item,

.style-RTL .case-studies-item {

    direction: rtl

}



.rtl .case-studies-item .btn-arrow-item,

.style-RTL .case-studies-item .btn-arrow-item {

    right: auto;

    left: 20px

}



.rtl .process-item.style-3 .circle,

.style-RTL .process-item.style-3 .circle {

    right: 20px

}



.rtl .process-item.style-3.style-3-2 .circle,

.style-RTL .process-item.style-3.style-3-2 .circle {

    right: 38px

}



.rtl .sw-new,

.style-RTL .sw-new {

    direction: ltr

}



.rtl .sw-new .tf-post-grid,

.style-RTL .sw-new .tf-post-grid {

    text-align: end

}



.rtl .sw-new .tf-post-grid .date,

.style-RTL .sw-new .tf-post-grid .date {

    right: 20px;

    left: auto

}



.rtl .sw-services-list,

.style-RTL .sw-services-list {

    direction: ltr

}



.rtl .sw-services-list .services-item,

.style-RTL .sw-services-list .services-item {

    direction: rtl

}



.rtl .awards-list,

.style-RTL .awards-list {

    direction: ltr

}



.rtl .section-cta.h-1 .cta-inner .image,

.style-RTL .section-cta.h-1 .cta-inner .image {

    right: 122.56px;

    left: auto

}



.rtl .section-cta.h-1 .cta-content,

.style-RTL .section-cta.h-1 .cta-content {

    padding: 58px 0 60px 80px;

    position: relative;

    max-width: 705px

}



.rtl .section-cta.h-1 .cta-content .bottom,

.style-RTL .section-cta.h-1 .cta-content .bottom {

    direction: ltr;

    justify-content: flex-end

}



.rtl .section-cta.h-6 .cta-content,

.style-RTL .section-cta.h-6 .cta-content {

    padding-right: 0;

    padding-left: 155px

}



.rtl .section-cta.h-6 .cta-content .bottom,

.style-RTL .section-cta.h-6 .cta-content .bottom {

    justify-content: flex-end

}



.rtl .footer .footer-left,

.style-RTL .footer .footer-left {

    padding-left: 30px;

    border-left: 1px solid var(--bg-1);

    border-right: 0;

    max-width: 421px;

    padding-right: 0

}



.rtl .footer .contact-bottom,

.style-RTL .footer .contact-bottom {

    direction: ltr;

    justify-content: flex-end

}



.rtl .footer .contact-footer-content,

.style-RTL .footer .contact-footer-content {

    direction: ltr;

    text-align: end

}



.rtl .footer .footer-center,

.style-RTL .footer .footer-center {

    padding-right: 19px;

    padding-left: 0

}



.rtl .footer .footer-right,

.style-RTL .footer .footer-right {

    padding-right: 30px;

    border-right: 1px solid var(--bg-1);

    padding-left: 0;

    border-left: 0

}



.rtl .footer .footer-social,

.style-RTL .footer .footer-social {

    direction: ltr;

    text-align: end

}



.rtl .footer .footer-social .tf-social,

.style-RTL .footer .footer-social .tf-social {

    justify-content: flex-end

}



.rtl .footer .footer-content,

.style-RTL .footer .footer-content {

    direction: ltr;

    text-align: end

}



.rtl .footer .footer-subscribe,

.style-RTL .footer .footer-subscribe {

    direction: ltr;

    text-align: end;

    flex-direction: row-reverse

}



.rtl .footer .footer-subscribe fieldset input,

.style-RTL .footer .footer-subscribe fieldset input {

    direction: rtl

}



.rtl .footer .footer-subscribe .tf-btn-newsletter,

.style-RTL .footer .footer-subscribe .tf-btn-newsletter {

    left: 8px;

    right: auto

}



.rtl .footer .footer-bottom-inner,

.style-RTL .footer .footer-bottom-inner {

    direction: ltr;

    flex-direction: row-reverse

}



.rtl .footer.style-2 .footer-left,

.style-RTL .footer.style-2 .footer-left {

    padding-left: 0;

    border-left: 0

}



.rtl .footer.style-2 .footer-right,

.style-RTL .footer.style-2 .footer-right {

    padding-right: 0;

    border-right: 0

}



.rtl .footer.style-2 .footer-center,

.style-RTL .footer.style-2 .footer-center {

    max-width: 100%;

    padding-top: 0;

    padding-bottom: 0;

    padding-left: 0;

    gap: 0 15px

}



.rtl .footer.style-2 .footer-center .footer-content,

.style-RTL .footer.style-2 .footer-center .footer-content {

    flex-grow: 1;

    flex-shrink: 1;

    flex-basis: calc(33.33% - 32px)

}



.rtl .footer.style-2 .footer-center .footer-content.quick-links ul,

.style-RTL .footer.style-2 .footer-center .footer-content.quick-links ul {

    max-width: 119px;

    width: 100%

}



.rtl .footer.style-2 .footer-center .footer-content .title-mobile,

.style-RTL .footer.style-2 .footer-center .footer-content .title-mobile {

    color: var(--on-suface-variant-2)

}



.rtl .footer.style-2 .footer-center .footer-content .support-item-footer a,

.style-RTL .footer.style-2 .footer-center .footer-content .support-item-footer a {

    color: var(--surface)

}



.rtl .footer.style-2 .footer-subscribe,

.style-RTL .footer.style-2 .footer-subscribe {

    display: flex;

    gap: 45px;

    margin-bottom: 40px;

    padding-bottom: 40px;

    border-bottom: 1px solid var(--bg-1)

}



.rtl .footer.style-2 .footer-subscribe .footer-subscribe-content,

.style-RTL .footer.style-2 .footer-subscribe .footer-subscribe-content {

    max-width: calc(100% - 290px);

    width: 100%

}



.rtl .footer.style-2 .footer-subscribe fieldset,

.style-RTL .footer.style-2 .footer-subscribe fieldset {

    margin-bottom: 7px

}



.rtl .footer.style-2 .footer-contact .support-item-footer,

.style-RTL .footer.style-2 .footer-contact .support-item-footer {

    padding-bottom: 4px

}



.rtl .footer.style-2 .image,

.style-RTL .footer.style-2 .image {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



.rtl .footer.style-2 .image img,

.style-RTL .footer.style-2 .image img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.rtl .footer.style-2.bg-color-white,

.style-RTL .footer.style-2.bg-color-white {

    background-color: var(--white)

}



.rtl .footer.style-2.bg-color-white .text,

.style-RTL .footer.style-2.bg-color-white .text {

    color: var(--on-suface-variant-1)

}



.rtl .footer.style-2.bg-color-white .title-footer,

.style-RTL .footer.style-2.bg-color-white .title-footer {

    color: var(--on-suface-container)

}



.rtl .footer.style-2.bg-color-white .title-mobile,

.rtl .footer.style-2.bg-color-white .title-mobile:before,

.style-RTL .footer.style-2.bg-color-white .title-mobile,

.style-RTL .footer.style-2.bg-color-white .title-mobile:before {

    color: var(--on-suface-variant-1) !important

}



.rtl .footer.style-2.bg-color-white .tf-social .item a,

.style-RTL .footer.style-2.bg-color-white .tf-social .item a {

    border-color: var(--outline)

}



.rtl .footer.style-2.bg-color-white .footer-subscribe fieldset input[type=text],

.style-RTL .footer.style-2.bg-color-white .footer-subscribe fieldset input[type=text] {

    border: 1px solid var(--outline);

    background-color: var(--surface)

}



.rtl .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter,

.style-RTL .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter {

    background-color: var(--on-suface-container)

}



.rtl .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter i,

.style-RTL .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter i {

    color: var(--white)

}



.rtl .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter:hover,

.style-RTL .footer.style-2.bg-color-white .footer-subscribe .tf-btn-newsletter:hover {

    background-color: var(--primary)

}



.rtl .footer.style-2.bg-color-white .support-item-footer a,

.style-RTL .footer.style-2.bg-color-white .support-item-footer a {

    color: var(--on-suface-container) !important

}



.rtl .footer.style-2.bg-color-white .support-item-footer a:before,

.style-RTL .footer.style-2.bg-color-white .support-item-footer a:before {

    background: var(--on-suface-container)

}



.rtl .footer.style-2.bg-color-white .footer-bottom,

.style-RTL .footer.style-2.bg-color-white .footer-bottom {

    border-color: var(--outline)

}



.rtl .nice-select,

.style-RTL .nice-select {

    direction: ltr;

    text-align: end

}



.rtl .nice-select:before,

.style-RTL .nice-select:before {

    left: 20px;

    right: auto

}



.rtl .nice-select .list li,

.style-RTL .nice-select .list li {

    text-align: end

}



.rtl .section-benefit.h-2 .sw-icon-list .swiper-slide,

.style-RTL .section-benefit.h-2 .sw-icon-list .swiper-slide {

    border-left: 1px solid var(--outline);

    border-right: 0

}



.rtl .section-benefit.h-2 .sw-icon-list .swiper-slide:last-child,

.style-RTL .section-benefit.h-2 .sw-icon-list .swiper-slide:last-child {

    border-left: 0

}



.rtl .section-benefit.h-7 .box-icon,

.style-RTL .section-benefit.h-7 .box-icon {

    padding-left: 20px !important;

    margin-left: 20px !important;

    border-left: 1px solid var(--bg-1) !important;

    padding-right: 0 !important;

    margin-right: 0 !important;

    border-right: 0 !important

}



.rtl .section-benefit.h-7 .box-icon:last-child,

.style-RTL .section-benefit.h-7 .box-icon:last-child {

    padding-left: 0 !important;

    margin-left: 0 !important;

    border-left: 0 !important

}



.rtl .section-benefit.h-8 .box-icon-list .box-icon,

.style-RTL .section-benefit.h-8 .box-icon-list .box-icon {

    margin-right: 0;

    padding-left: 20px;

    border-right: 0;

    border-left: 1px solid var(--outline)

}



.rtl .section-about.h-2 .section-about-right,

.style-RTL .section-about.h-2 .section-about-right {

    left: 0;

    right: auto

}



.rtl .section-about.h-2 .wg-counter,

.style-RTL .section-about.h-2 .wg-counter {

    border-right: 1px solid var(--outline);

    padding-right: 40px;

    margin-right: 68px;

    border-left: 0 !important;

    padding-left: 0 !important;

    margin-left: 0 !important

}



.rtl .section-about.h-5 .about-left .item-2,

.style-RTL .section-about.h-5 .about-left .item-2 {

    left: 0;

    right: auto;

    padding-right: 20px;

    padding-left: 0

}



.rtl .section-about.h-5 .about-left .item-3,

.style-RTL .section-about.h-5 .about-left .item-3 {

    left: 0;

    right: auto

}



.rtl .section-about.h-7,

.style-RTL .section-about.h-7 {

    flex-direction: row-reverse

}



.rtl .section-about.h-7 .about-left,

.style-RTL .section-about.h-7 .about-left {

    padding: 99px 15px 82px 111px;

    align-items: flex-start

}



@media(max-width:991px) {



    .rtl .section-about.h-7 .about-left,

    .style-RTL .section-about.h-7 .about-left {

        align-items: flex-end

    }

}



.rtl .section-about.h-7 .about-right,

.style-RTL .section-about.h-7 .about-right {

    padding: 81px 100px 82px 15px

}



.rtl .section-about.h-7 .about-right .section-content,

.style-RTL .section-about.h-7 .about-right .section-content {

    margin-left: auto;

    margin-right: 0

}



.rtl .section-about.h-7 .about-right .bottom,

.style-RTL .section-about.h-7 .about-right .bottom {

    justify-content: flex-end

}



.rtl .section-about.h-7 .tf-phone,

.style-RTL .section-about.h-7 .tf-phone {

    padding-right: 0;

    text-align: end

}



.rtl .section-content .text,

.style-RTL .section-content .text {

    text-align: end

}



.rtl .wg-new-letter,

.style-RTL .wg-new-letter {

    flex-direction: row-reverse

}



.rtl .wg-new-letter .new-letter-content,

.style-RTL .wg-new-letter .new-letter-content {

    direction: ltr

}



.rtl #menu-mobile li.menu-item-has-children-mobile>a,

.style-RTL #menu-mobile li.menu-item-has-children-mobile>a {

    position: relative

}



.rtl #menu-mobile li.menu-item-has-children-mobile>a:after,

.style-RTL #menu-mobile li.menu-item-has-children-mobile>a:after {

    left: 0;

    right: auto

}



.rtl #menu-mobile li.menu-item-has-children-mobile2>a,

.style-RTL #menu-mobile li.menu-item-has-children-mobile2>a {

    position: relative

}



.rtl #menu-mobile li.menu-item-has-children-mobile2>a:after,

.style-RTL #menu-mobile li.menu-item-has-children-mobile2>a:after {

    left: 0;

    right: auto

}



.rtl .card-chart .arrow-card-btn,

.style-RTL .card-chart .arrow-card-btn {

    direction: ltr;

    left: 21px;

    right: auto

}



.rtl .card-chart .number-percent,

.style-RTL .card-chart .number-percent {

    direction: ltr

}



.rtl .card-chart .number-plus,

.style-RTL .card-chart .number-plus {

    direction: ltr;

    text-align: end

}



.rtl .section-contact-home.h-4 .box-agent,

.style-RTL .section-contact-home.h-4 .box-agent {

    gap: 32px

}



@keyframes infiniteScroll-rtl {

    0% {

        transform: translateX(0)

    }



    to {

        transform: translateX(100%)

    }

}



.rtl .marquee-wrapper,

.style-RTL .marquee-wrapper {

    animation: infiniteScroll-rtl 70s linear infinite !important

}



.rtl .section-why-choose .progress-box,

.style-RTL .section-why-choose .progress-box {

    right: auto !important;

    left: 0

}



.rtl .process-item.style-2 .icon-list,

.style-RTL .process-item.style-2 .icon-list {

    left: auto;

    right: -22%;

    transform: rotateY(180deg)

}



.rtl .tf-post-list,

.style-RTL .tf-post-list {

    direction: ltr;

    flex-direction: row-reverse

}



.rtl .tf-post-list .post-content,

.style-RTL .tf-post-list .post-content {

    text-align: end

}



.rtl .tf-post-list .date,

.style-RTL .tf-post-list .date {

    left: auto;

    right: 12px

}



.rtl .tf-post-list .tf-list-post-content,

.style-RTL .tf-post-list .tf-list-post-content {

    text-align: end

}



.rtl .tf-post-grid .tf-post-grid-content,

.style-RTL .tf-post-grid .tf-post-grid-content {

    direction: ltr;

    flex-direction: row-reverse;

    text-align: end

}



.rtl .tf-post-grid.style-absolute.style-3 .date,

.style-RTL .tf-post-grid.style-absolute.style-3 .date {

    left: auto;

    right: 20px

}



.rtl .section-cta.h-6 .cta-inner,

.style-RTL .section-cta.h-6 .cta-inner {

    direction: ltr

}



.rtl .section-cta.h-6 .cta-inner .cta-content,

.style-RTL .section-cta.h-6 .cta-inner .cta-content {

    flex-direction: row-reverse;

    text-align: end

}



.rtl .pl-80,

.style-RTL .pl-80 {

    padding-right: 80px;

    padding-left: 0

}



.rtl .wg-tab.style-3 li a:after,

.style-RTL .wg-tab.style-3 li a:after {

    content: "" !important;

    left: 0;

    right: auto !important

}



.rtl .item-content,

.style-RTL .item-content {

    direction: ltr;

    text-align: end

}



.rtl .benefit-lists .benefit-items .title,

.rtl .tf-project-media-thumbs .project-content,

.style-RTL .benefit-lists .benefit-items .title,

.style-RTL .tf-project-media-thumbs .project-content {

    text-align: end

}



.rtl .sw-testimonial .testimonial-item .text,

.style-RTL .sw-testimonial .testimonial-item .text {

    text-align: end !important

}



.rtl .testimonial-item .text,

.style-RTL .testimonial-item .text {

    text-align: start

}



.rtl .testimonial-item .info-user,

.style-RTL .testimonial-item .info-user {

    direction: rtl

}



.rtl .testimonial-item .info-user .info-content,

.style-RTL .testimonial-item .info-user .info-content {

    direction: ltr

}



.rtl .testimonial-item.style-2,

.style-RTL .testimonial-item.style-2 {

    direction: ltr;

    flex-direction: row-reverse

}



.rtl .testimonial-item.style-2 .testimonial-content,

.style-RTL .testimonial-item.style-2 .testimonial-content {

    text-align: end

}



.rtl .section-services .services-inner .services-content,

.style-RTL .section-services .services-inner .services-content {

    direction: ltr;

    text-align: end

}



.rtl .benefit-items,

.style-RTL .benefit-items {

    direction: ltr;

    flex-direction: row-reverse

}



.rtl .according-item .title-according,

.rtl .tf-testimonials-main .content,

.style-RTL .according-item .title-according,

.style-RTL .tf-testimonials-main .content {

    text-align: end

}



.rtl .according-item.bg-white .price-according,

.style-RTL .according-item.bg-white .price-according {

    justify-content: flex-end

}



.rtl .according-item.bg-white .tf-btn,

.style-RTL .according-item.bg-white .tf-btn {

    margin-left: auto

}



.rtl .comment-item.reply,

.style-RTL .comment-item.reply {

    margin-left: 0;

    padding-right: 76px

}



.rtl .comment-item.style-2.reply,

.style-RTL .comment-item.style-2.reply {

    margin-right: 40px;

    border-right: 4px solid var(--outline);

    border-left: 0;

    padding-left: 0;

    padding-right: 30px

}



.rtl .input-search .btn-search,

.style-RTL .input-search .btn-search {

    left: 8px;

    right: auto !important

}



.rtl .sidebar-search .tf-btn-search,

.style-RTL .sidebar-search .tf-btn-search {

    left: 15px;

    right: auto

}



.rtl .canvnas-quick-view .quick-view-content,

.style-RTL .canvnas-quick-view .quick-view-content {

    padding-left: 24px;

    padding-right: 0

}



.rtl .canvnas-quick-view .list-img,

.style-RTL .canvnas-quick-view .list-img {

    padding-left: 0;

    padding-right: 16px

}



.rtl .canvnas-quick-view .tf-product-info-wrap,

.style-RTL .canvnas-quick-view .tf-product-info-wrap {

    right: 0;

    left: 24px

}



.rtl .wg-your-order .wg-your-order-list .price,

.style-RTL .wg-your-order .wg-your-order-list .price {

    direction: ltr

}



.rtl .write-cancel-review-wrap .nice-select,

.style-RTL .write-cancel-review-wrap .nice-select {

    padding: 8px 16px 8px 55px !important

}



.rtl .dropdown-store-location .dropdown-content,

.style-RTL .dropdown-store-location .dropdown-content {

    text-align: end;

    align-items: flex-start;

    justify-content: flex-end

}



.rtl .dropdown-store-location .dropdown-content h6,

.rtl .dropdown-store-location .dropdown-content p,

.style-RTL .dropdown-store-location .dropdown-content h6,

.style-RTL .dropdown-store-location .dropdown-content p {

    text-align: start

}



.rtl .ip-discount-code .tf-btn,

.style-RTL .ip-discount-code .tf-btn {

    right: auto;

    left: 6px

}



.rtl .form-payment .img-icon-payment,

.style-RTL .form-payment .img-icon-payment {

    left: 16px;

    right: auto

}



.rtl .sidebar-item.sidebar-newsletter .tf-btn-newsletter,

.style-RTL .sidebar-item.sidebar-newsletter .tf-btn-newsletter {

    left: 8px;

    right: auto

}



.rtl .sidebar-item.sidebar-newsletter .tf-btn-newsletter i,

.style-RTL .sidebar-item.sidebar-newsletter .tf-btn-newsletter i {

    transform: rotateY(180deg)

}



.rtl .wg-pagination i,

.style-RTL .wg-pagination i {

    transform: rotateY(180deg) !important

}



.rtl .line-check-out,

.style-RTL .line-check-out {

    right: 52.9%;

    left: auto

}



.rtl .breadkcum span svg,

.rtl .menu-sidebar-tab .list-menu-item i,

.style-RTL .breadkcum span svg,

.style-RTL .menu-sidebar-tab .list-menu-item i {

    transform: rotateY(180deg)

}



.rtl .section-services-item.style-border .services-content,

.style-RTL .section-services-item.style-border .services-content {

    padding-right: 0;

    padding-left: 40px

}



.rtl .sw-team-list .team-item,

.style-RTL .sw-team-list .team-item {

    text-align: end

}



.rtl .sw-product .product-item,

.style-RTL .sw-product .product-item {

    direction: rtl

}



.rtl .product-item .icon,

.style-RTL .product-item .icon {

    right: auto;

    left: 0

}



.rtl .product-item:hover .icon,

.style-RTL .product-item:hover .icon {

    left: 16px

}



.rtl .product-item.discount:before,

.style-RTL .product-item.discount:before {

    left: auto;

    right: 16px

}



.rtl .sidebar-price,

.style-RTL .sidebar-price {

    overflow: hidden

}



.rtl .sidebar-price .range-two-val,

.style-RTL .sidebar-price .range-two-val {

    padding-right: 10px;

    padding-left: 10px

}



.rtl .noUi-horizontal .noUi-handle,

.style-RTL .noUi-horizontal .noUi-handle {

    left: auto !important

}



.rtl .tf-sort .nice-select,

.style-RTL .tf-sort .nice-select {

    padding: 10px 15px 10px 38px !important

}



.rtl .tf-cart-item_total,

.style-RTL .tf-cart-item_total {

    direction: ltr

}



.rtl .progress-cart.bg-color-on-suface-container .round,

.style-RTL .progress-cart.bg-color-on-suface-container .round {

    left: unset;

    right: 100%

}



.rtl .tf-zoom-main .drift-zoom-pane,

.style-RTL .tf-zoom-main .drift-zoom-pane {

    display: flex;

    justify-content: flex-end

}



.rtl .switch-container .switch .toggle,

.style-RTL .switch-container .switch .toggle {

    transform: translateX(40px)

}



.rtl .switch-container .switch.is-active .toggle,

.style-RTL .switch-container .switch.is-active .toggle {

    transform: translateX(0)

}



.rtl .section-services.h-8 .tf-btn,

.style-RTL .section-services.h-8 .tf-btn {

    margin-right: 0;

    margin-left: auto

}



.rtl .footer-content .title-mobile:before,

.style-RTL .footer-content .title-mobile:before {

    right: auto;

    left: 0

}



@media(min-width:992px) {

    .rtl .mr-25 {

        margin-right: 0 !important;

        margin-left: 25px !important

    }



    .rtl .section-about .about-content-left {

        margin-left: 6px;

        border-left: 1px solid var(--outline);

        margin-right: 0;

        border-right: 0

    }



    .rtl .section-about .tf-btn {

        margin-left: auto;

        margin-right: 0

    }



    .rtl .ml-40 {

        margin-left: 0;

        margin-right: 40px

    }



    .rtl .mr-10 {

        margin-left: 10px;

        margin-right: 0

    }



    .rtl .mr-15 {

        margin-left: 15px;

        margin-right: 0

    }



    .rtl .ml-15 {

        margin-left: 0;

        margin-right: 15px

    }



    .rtl .ml-35 {

        margin-left: 0;

        margin-right: 35px

    }



    .rtl .mr-50 {

        margin-right: 0;

        margin-left: 50px

    }



    .rtl .ml-50 {

        margin-left: 0;

        margin-right: 50px

    }



    .rtl .section-contact-home.h-4 .left {

        right: 0;

        left: auto !important

    }



    .rtl .section-contact-home.h-4 .right {

        padding-right: 20px;

        margin-right: -20px;

        padding-left: 0 !important;

        margin-left: 0 !important

    }

}



@media(min-width:1150px) {

    .ml-30 {

        margin-left: 0;

        margin-right: 30px

    }

}



@media(max-width:1300px) {

    .rtl .section-about .about-right {

        padding-right: 15px !important

    }



    .rtl .section-benefit .box-icon-list {

        gap: 20px

    }



    .rtl .section-benefit .box-icon-list .box-icon {

        max-width: calc(50% - 10px) !important;

        padding: 0 !important;

        border: 0 !important;

        margin: 0 !important

    }

}



@media only screen and (max-width:991px) {

    .rtl .flat-countdown-banner .banner-img {

        left: 0;

        right: unset

    }



    .rtl .section-about.h-2 .wg-counter {

        border-right: 0;

        padding-right: 0;

        margin-right: 0;

        justify-content: flex-start !important

    }

}



@media only screen and (max-width:767px) {

    .rtl .tf-cart-item .img-box {

        left: auto;

        right: 0

    }

}



@media(max-width:650px) {

    .rtl .footer.style-2 .footer-subscribe .footer-subscribe-content {

        max-width: 100% !important

    }



    .rtl .footer.style-2 .quick-links .flex {

        align-items: flex-end

    }

}



@media(max-width:550px) {

    .rtl .heading-section.style-2 {

        flex-direction: column;

        align-items: center;

        text-align: center

    }



    .rtl .heading-section.style-2 .tag {

        margin-left: auto;

        margin-right: auto

    }



    .rtl .section-benefit .box-icon-list .box-icon {

        max-width: 100% !important

    }

}



@media(max-width:374px) {

    .rtl .switch-container .switch .toggle {

        transform: translateX(30px)

    }

}



.rtl .breadkcum .arrow-svg {

    transform: rotate(180deg) !important;

    transform-origin: center;

    display: inline-block

}



.tf-btn.hover-white:before {

    display: none

}



.rc-slider .rc-slider-handle {

    border: 2px solid var(--on-suface-container);

    opacity: 1 !important;

    background-color: #fff !important;

    width: 24px;

    height: 24px;

    margin-top: -11px

}



.rc-slider .rc-slider-handle:hover {

    border-color: var(--on-suface-container)

}



.rc-slider .rc-slider-handle-dragging {

    border-color: var(--on-suface-container) !important;

    box-shadow: none !important

}



.rc-slider .rc-slider-track,

.rc-slider .rc-slider-tracks {

    background-color: var(--on-suface-container)

}



@media only screen and (max-width:550px) {

    .footer .footer-col-block .tf-collapse-content {

        overflow-y: hidden;

        display: block;

        height: 0;

        transition: .5s

    }

}



.tfSubscribeMsg {

    display: none;

    max-height: 0;

    overflow: hidden

}



.tfSubscribeMsg.active {

    margin-top: 10px;

    margin-bottom: 10px;

    max-height: 180px;

    display: block

}



.awards-list .image {

    overflow: visible

}



.rtl .tf-btn-newsletter i {

    transform: rotate(-90deg);

    transform-origin: center center

}



.overflow-clip {

    max-width: 100vw;

    overflow: clip

}



.flex-1 {

    flex: 1 1;

    padding-left: 10%;

    min-width: 10px

}



.border-bottom-none {

    border-bottom: none

}



.sidebar-categories .item.active,

.sidebar-categories .item.active a {

    color: var(--primary) !important

}



.typeanimation {

    transition: width .58s ease-out !important;

    height: 100% !important;

    padding-right: 10px

}



.typeanimation b.is-visible {

    padding-right: 10px !important

}



#toggle-rtl span:last-child {

    display: none

}



.rtl #toggle-rtl,

.style-RTL #toggle-rtl {

    left: 15px;

    right: auto

}



.rtl #toggle-rtl span:first-child,

.style-RTL #toggle-rtl span:first-child {

    display: none

}



.rtl #toggle-rtl span:last-child,

.style-RTL #toggle-rtl span:last-child {

    display: block

}



.tf-btn-arrow {

    cursor: pointer

}



.rtl .wg-team-details .image {

    flex: 1 1

}



.rtl .newsletter-form .tf-btn-newsletter {

    left: 8px;

    right: auto

}



.rtl .newsletter-form .tf-btn-newsletter i {

    transform: rotateY(180deg)

}



.rtl .blog-right-sidebar-content .date {

    left: unset;

    right: 20px

}



.rtl .blog-no-sidebar-slide .date {

    left: unset !important;

    right: 20px

}


/*================== about page ==================*/
.innrbnr {
    background: url(../images/inner-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 50px 0;
}
.innrbnr p{font-size: 16px;text-transform: uppercase;margin-bottom: 10px;color: white;}
.innrbnr h1{    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    color: white;}

.abtsec {
    background-color: var(--surface);
    padding: 80px 0;
}
.abtbox {
    background: #fff;
    padding: 50px;
}
.abtbox h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: normal;
}
.abtbox p{font-size: 15px;    color: var(--on-suface-variant-1);margin-bottom: 10px}
.abtimg {
    width: 50%;
    height: auto;
    overflow: hidden;
    margin-right: 20px;
    float: left;
}
.abtimg img{width: 100%;height: 100%;object-fit: cover}

.infosec{
    padding: 80px 0;
}

.infosec .infobox{
   background-color: var(--surface);padding: 20px;min-height: 280px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.infosec .infobox h4 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: normal;
    position: relative;
}
.infosec .infobox h4::after {
    content: "";
    background: var(--on-suface-container);
    width: 15%;
    height: 3px;
    position: absolute;
    bottom: -10px;
    left: 0;
    border-radius: 10px;
}

.infosec .infobox p {
    color: #000;
    font-size: 15px;
    line-height: 26px;
}

/*================== SBA Loan page ==================*/
.mb-80{margin-bottom: 80px}
.img-content{
    padding: 80px 0;
}
.img-content .image{
    width: 100%;height: auto;overflow: hidden;    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.img-content .image img{width: 100%;height: 100%;object-fit: cover}
.img-content h2 {
    font-weight: 700;
    font-size: 48px;
    margin-bottom: 15px;
}

.img-content p{color: var(--on-suface-variant-1);}
.img-content ul{margin: 0;padding: 0;padding-left: 18px;margin-bottom: 10px}
.img-content ul li{list-style: disc;color: var(--on-suface-variant-1)}
.img-content .btnsec{display: flex;justify-content: flex-start;align-items: center;gap:10px;}
.img-content .btnsec a{text-transform: uppercase;}
.btnsec a.applybtn{background: #000 !important}

.why-choose-us{
    padding: 30px 0 80px; 

}
.why-choose-us h2{font-weight: 700}
.why-choose-item {
    background-color: #f9fafb;
    text-align: center;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: .5s;
    margin-bottom: 30px;
    z-index: 1;
    min-height: 335px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.why-choose-item:hover {
    transform: translateY(-10px);
}
.why-choose-item:before {
    position: absolute;
    content: "";
    height: 90%;
    width: 90%;
    background-color: #3272b938;
    left: 0;
    right: 0;
    margin: auto;
    top: -165px;
    z-index: -1;
    border-radius: 50%;
    transition: .5s;
}
.why-choose-item .icon {
    margin-bottom: 20px;
    position: relative;
}
.why-choose-item .icon img{max-height: 90px}
.why-choose-item h3 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-top: 30px;
    line-height: 35px
}
.why-choose-item p{
    font-size: 16px;color: var(--on-suface-variant-1);
}
.text-anime-wave{
    translate: none; rotate: none; scale: none; transform-origin: 0% 50%; transform: translate(0px, 0px); opacity: 1;
}
.text-anime-wave-2{
    translate: none; rotate: none; scale: none; transform-origin: 100% 50%; transform: translate(0px, 0px); opacity: 1;
}
.section-faqs ul{margin-top: 10px;padding-left: 18px;color: var(--on-suface-variant-1)}
.section-faqs ul li{margin-bottom: 10px;list-style: disc;}

.featuresec{
    background: #f3f5f5;padding-bottom: 80px
}
.featuresec .image{
    width: 100%;    height: auto;
    overflow: hidden;
}
.featuresec .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featuresec .content {
    background: #fff;
    padding: 70px 50px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
    z-index: 1;
}
.featuresec .content h4{font-weight: 700;margin-bottom: 10px}
.featuresec .content p{color: var(--on-suface-variant-1);}
.featuresec .row:first-child {margin-bottom: 30px}
.featuresec .fistrow .content{margin-left: -50px;}
.featuresec .lastrow .content{margin-right: -50px;}
.knowmore{
    background: url(../images/know-more-bnr.jpg) no-repeat;
    background-position: top left;background-size: cover;
    min-height: 400px;
    padding: 120px 0;
}
.knowmore h3{font-weight: 700;margin-bottom: 10px;color: #fff}
.pt-80{padding-top: 80px}
.schdl_cnsltatn, .apply_now{text-transform: uppercase;}


/*================== SBA Loan page new ==================*/
.bnr-btmsec .col-md-4:nth-child(1) .btmbox{background-image: url(../images/hp-2-service-bg-1.jpg);}
.bnr-btmsec .col-md-4:nth-child(2) .btmbox{background-image: url(../images/hp-2-service-bg-2.jpg);}
.bnr-btmsec .col-md-4:nth-child(3) .btmbox{background-image: url(../images/hp-2-service-bg-3.jpg);}
.bnr-btmsec .btmbox{
    background-size: cover;
    background-position: center center;
    min-height: 300px;
    padding: 50px 80px;color: #fff;height: 100%
}
.bnr-btmsec .btmbox h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 32px;
    color: #fff;
    margin-top: 15px;
}

.img-content-new .container{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.img-content-new .image{box-shadow: none;height: 100%}
.img-content-new .row {
    align-items: stretch;
}
.img-content-new .content{padding: 50px}
.img-content h2{    line-height: 55px;}
.why-choose-us2 {padding:0px 0 80px;}
.why-choose-us-box .image{width: 100%;height: 280px;overflow: hidden;}
.why-choose-us-box .image img{width: 100%;height: 100%;object-fit: cover;}
.why-choose-us-box{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;margin-bottom: 20px}
.why-choose-us-box .content{padding: 30px 20px;text-align: center;min-height: 220px}
.why-choose-us-box .content h4 {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
}
.why-choose-us-box .content h4::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #3272b9;
    width: 80px;
    height: 3px;
}
.why-choose-us-box .content p{color: var(--on-suface-variant-1);}
.sba-faq-section{padding-bottom: 200px !important}
.businessec{
    background: url(../images/hp2-about-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 400px;
    padding: 80px 0;
}
.businessec .image{
    width: 100%;height: auto;overflow: hidden; margin-top: -200px;
}
.businessec .image img{
    width: 100%;
    height: auto;
    overflow: hidden;
   
}

.businessec .content h3, .businessec .content p{color: #fff}

@media only screen and (max-width:1400px){
.img-content.img-content-new .btnsec a{padding: 15px 25px !important;}
}

@media only screen and (max-width:1200px){
/*================== SBA Loan page new ==================*/
.bnr-btmsec .btmbox {
    min-height: 335px;
    padding: 50px 45px; 
}
.knowmore{background-position: center;}
}
@media only screen and (max-width:992px){
.img-content h2{
    font-size: 32px !important;
    line-height: 40px !important;
}
.img-content .btnsec{flex-direction: column;}
.img-content .btnsec a{width: 100%;margin-top: 10px}
.why-choose-item h3{font-size: 28px !important}
.why-choose-item{    min-height: 380px;}
.why-choose-item:before{    top: -200px;}
/*================== SBA Loan page new ==================*/
.img-content-new .content {
    padding: 40px 30px;
}
}



@media only screen and (max-width:768px){
.innrbnr{    min-height: 340px;}
.abtsec {
    padding: 40px 0;
}
.abtimg{width: 100%;float: none}
.abtbox {    padding: 20px;}
.infosec {
    padding: 45px 0;
}
.infosec .infobox{margin-bottom: 20px}
.infosec .infobox h4{font-size: 25px;}
.process-item.bg-1 .process-top .icon{    width: 60px;
    height: 60px;}
/*.featuresec .content {    padding: 40px 20px;}*/
.knowmore{text-align: center;background-position: center;}
/*================== SBA Loan page new ==================*/
.bnr-btmsec .btmbox {padding: 50px 30px;}
.img-content-new .content {
    padding: 30px;
}
}

@media only screen and (max-width:767px){
.img-content {
    padding: 50px 0 20px;
}
.img-content .image{margin-bottom: 20px}
.img-content .btnsec{    flex-direction: column;    gap: 5px;margin-bottom: 10px}
.img-content .btnsec a {
    width: 100%;
    margin-top: 10px;
}
.mb-80 {
    margin-bottom: 30px;
}
.why-choose-us {
    padding: 30px 0 30px;
}
.btnsec a.applybtn{width: 100%}
.featuresec {
    padding-bottom: 30px;
}
.featuresec .row:first-child .content {
    margin-left: 0px;
}
.featuresec .row:last-child .content {
    margin-right: 0px;
}
.featuresec .content {    padding: 40px 20px;}
.knowmore{text-align: center;}

/*================== SBA Loan page new ==================*/
.bnr-btmsec .btmbox {padding: 50px 30px;}
.img-content-new .content {
    padding: 30px;
}
.why-choose-us-box .image{height: auto;}
.why-choose-us-box .content{min-height: unset;}
}

.mob-heading{
    display: block!important;
}