html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-variation-settings: normal;
    tab-size: 4;
}

body,
html {
    font-size: 15px;
}

.dark,
.dark p,
.dark td,
.absolute-footer.dark,
.dark .nav-vertical li li.menu-item-has-children>a,
.dark .nav-vertical-fly-out>li>a,
.dark .nav-vertical>li>ul li a,
.dark .nav>li.html,
.dark .nav>li>a,
.nav-dark .is-outline,
.nav-dark .nav>li>a,
.nav-dark .nav>li>button,
.nav-dropdown.dark .nav-column>li>a,
.nav-dropdown.dark>li>a {
    color: #fff;
}

.nav>li>a {
    font-size: inherit;
}

p {
    margin: 0 0 15px;
}


#wrapper .section-py {
    padding-top: 2.08333rem;
    padding-bottom: 2.08333rem;
}

.blog-wrapper>.row,
.row.category-page-row,
.product-section>.row,
.ss-container>.section-content>.row:not(.row-collapse) {
    margin: 0 -15px;
    width: auto !important;
    max-width: unset !important;
}

.archive.woocommerce-page #main,
.ss-container>.section-content {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}


@media (min-width: 100vw) {

    .archive.woocommerce-page #main,
    .ss-container>.section-content {
        max-width: 100vw;
    }
}

@media (min-width: 768px) {

    .archive.woocommerce-page #main,
    .ss-container>.section-content {
        padding-right: 30px;
        padding-left: 30px;
        max-width: 768px;
    }

    body,
    html {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {

    .archive.woocommerce-page #main,
    .ss-container>.section-content {
        max-width: 1024px;
    }

    #wrapper .section-py {
        padding-top: 3.125rem;
        padding-bottom: 3.125rem;
    }
}

@media (min-width: 1200px) {
    #wrapper .section-py {
        padding-top: 4.16667rem;
        padding-bottom: 4.16667rem;
    }

    body,
    html {
        font-size: 1vw;
    }
}

@media (min-width: calc(76.0417rem)) {

    .archive.woocommerce-page #main,
    .ss-container>.section-content {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        max-width: 76.04167rem;
    }
}


body {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity));
    font-size: clamp(14px, .83333rem, .83333rem);
    font-family: Bai Jamjuree, sans-serif;
    margin: 0;
    line-height: inherit;
}

h1 {
    font-size: 1.5625rem
}

h1,
h2 {
    font-weight: 700
}

h2 {
    font-size: clamp(18px, 1.25rem, 1.25rem)
}

h3 {
    font-size: 1.04167rem
}

h3,
h4 {
    font-weight: 700
}

h4 {
    font-size: .9375rem
}

.font-semibold {
    font-weight: 600;
}

.text-sm {
    font-size: clamp(14px, .72917rem, .72917rem);
}


.button-primary:before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: height .3s ease;
    background-color: var(--primary-color);
    width: 100%;
    height: 0;
    content: "";
}

.button-primary:hover:before {
    height: 100%;
}

.button-primary {
    position: relative;
    transition: color .3s ease, border-color .3s ease;
    border: 1px solid rgb(255 255 255 / 1);
    border-radius: 1.5rem;
    padding: .625rem 1.25rem;
    overflow: hidden;
    color: rgb(255 255 255 / 1);
    font-weight: 600;
    font-size: .9375rem;
}

.button-primary:hover {
    color: #fff
}

.button.btn-main span {
    line-height: inherit;
}

.button.btn-main {
    padding: .625rem 1.25rem;
    border-radius: 1.5rem;
    font-weight: 600;
    font-size: .9375rem;
    overflow: hidden;
    border-width: 1px;
    line-height: 1.5;
}

button.flickity-prev-next-button {
    z-index: 9999;
    color: #fff;
    width: 48px;
    height: 48px;
    opacity: 1;
    background: var(--primary-color);
    border-radius: 100%;
    transform: unset !important;
}

button.flickity-prev-next-button svg {
    width: 37px;
}

.slider-show-nav .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button {
    opacity: 1;
}


header.archive-page-header h1 span,
.title h1,
.title h2 {
    font-weight: 400;
    font-size: 1.5625rem;
    line-height: 1.1666666667;
    letter-spacing: -.96px;
    margin-bottom: .41667rem;
}

.title li,
.title p {
    font-size: .9375rem;
}

.title h3 {
    font-size: clamp(18px, 1.25rem, 1.25rem);
}

.title-p h2 {
    margin-bottom: 20px;
}

.title-p p {
    font-size: 1.04167rem;
}

.rounded-5 {
    border-radius: 1.04167rem;
    overflow: hidden;
}

@media (min-width: 1024px) {


    header.archive-page-header h1 span,
    .title h1,
    .title h2 {
        font-size: 1.875rem;
    }

    .title-l h2 {
        font-weight: 700;
        font-size: 3.33333rem !important;
    }
}


@media (min-width: 1200px) {


    header.archive-page-header h1 span,
    .title h1,
    .title h2 {
        font-size: 2.5rem;
    }
}