@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-100-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 100;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-100-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 100;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-200-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 200;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-200-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 200;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-300-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-300-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-400-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-400-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-500-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-500-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-600-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 600;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-600-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-700-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-700-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-800-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 800;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-800-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-900-italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
    font-weight: 900;
}

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url('../../fonts/dm-sans/dm-sans-900-normal.woff2') format('woff2');
    font-display: swap;
    font-weight: 900;
}

*:before, *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-track {
    background-color: var(--wp--preset--color--accent-2);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--wp--preset--color--accent-1);
    border-radius: 6px;
}

:root {
    --button-padding-default: 12px 25px;
    --button-padding-small: 10px 15px;
    --button-padding-medium: 10px 20px;
    --button-padding-xs: 8px 15px;
    --button-border-radius-default: 15px;
    --button-border-radius-medium: 15px;
    --button-border-radius-small: 15px;
    --button-border-radius-xs: 15px;
}

h1 {
    font-size: clamp(2.188rem, 1.119vw + 1.47rem, 2.813rem);
}

h2 {
    font-size: clamp(2.188rem, 0.559vw + 1.829rem, 2.5rem);
}

h3 {
    font-size: clamp(1.875rem, 0.559vw + 1.516rem, 2.188rem);
}

h4 {
    font-size: clamp(1.563rem, 0.559vw + 1.204rem, 1.875rem);
}

h5 {
    font-size: clamp(1.25rem, 0.559vw + 0.891rem, 1.563rem);
}

h6 {
    font-size: clamp(0.938rem, 0.559vw + 0.579rem, 1.25rem);
}

button {
    font-family: var(--wp--preset--font-family--dm-sans);
}

@keyframes beat {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.4);
            transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.8);
            transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes stretchBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2, 0.9); }
  50%  { transform: scale(0.95, 1.05); }
  70%  { transform: scale(1.05, 0.97); }
  100% { transform: scale(1); }
}

.play-beat {
    position: relative;
    &:before, &:after {
        content:" ";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        z-index: 0;
        opacity: 0;
        animation: beat 1.5s infinite;
    }
    &:after {
        animation-delay: 0.75s;
    }
    &:hover {
        &:before, &:after {
            background-color: rgba(254, 85, 6, .5);
        }
    }
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

body.lightbox-open {
    main.wp-block-group {
        z-index: 1;
    }
}


main.wp-block-group {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.hide {
    display: none;
}

.flex {
    display: flex;
}

.block {
    display: block;
}

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

.inline {
    display: inline;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-title-bg {
    background-image: url('../../images/section-title-bg.svg');
    background-repeat: no-repeat;
    background-position: left 5px;
    padding-left: 68px;
    margin-top: 0;
    margin-bottom: 0;
}

.default__button {
    button {
        border: none;
    }
    a, button {
        background-color: var(--wp--preset--color--accent-1);
        padding: var(--button-padding-default);
        color: var(--wp--preset--color--accent-2);
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        border-radius: var(--button-border-radius-default);
        column-gap: 10px;
        font-size: clamp(1.063rem, 0.224vw + 0.919rem, 1.188rem);
        font-weight: 700;
        transition: background-color .25s ease-in, color .25s ease-in;
        &:hover {
            background-color: var(--wp--preset--color--contrast);
            color: var(--wp--preset--color--accent-1);
            cursor: pointer;
        }
        span {
            display: block;
            width: 31px;
            height: 31px;
            line-height: 35px;
            text-align: center;
            background-color: var(--wp--preset--color--accent-2);
            border-radius: 50%;
        }
    }
    &.light-bg {
        a {
            &:hover {
                background-color: var(--wp--preset--color--base);
                color:var(--wp--preset--color--accent-2);
            }
        }
    }
}

.wp-block-buttons {
    margin-block-start: 30px !important;
    .wp-block-button {
        &.still-have-issues {
            a {
                font-weight: 700 !important;
                color: #dc3232 !important;
            }
        }
    }
    .wp-block-button .wp-block-button__link {
        transition: background-color .25s ease-in, color .25s ease-in;
        border-radius: var(--button-border-radius-default);
        &:hover, &.active {
            background-color: var(--wp--preset--color--contrast) !important;
            color: var(--wp--preset--color--accent-1) !important;
            cursor: pointer;
        }
    } 
}

.wp-block-button.active .wp-block-button__link {
    background-color: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--accent-1) !important;
    cursor: pointer;
}

.full-w {
    width: 100%;
}

.full-h {
    height: 100%;
}

.auto-h {
    height: auto;
}

.auto-w {
    width: auto;
}

.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

.page-banner {
    position: relative;
    height: 272px;
    background-color: #000;
    margin-top: 0 !important;
    z-index: 0;
    &:after {
        content:" ";
        height: 100%;
        width: 100%;
        background-image: url('../../images/page-banner-bg.svg');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: auto 272px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .wp-block-post-featured-image,
    .wp-block-image {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 0;
        opacity: .6;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    & > .container {
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
        z-index: 2;
        margin-top: 0 !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        display: flex;
        height: 100%;
        flex: 100% 0 0;
        row-gap: 72px;
        padding-top: 30px;
        padding-bottom: 30px;
        h1 {
            color: var(--wp--preset--color--accent-2);
        }
    }
}

.page-spacing,
.block-spacing {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-spacing {
    padding-block-start: 20px;
    padding-block-end: 20px;
}

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

.padding-reset {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.content-wrapper {
    z-index: 0;
    position: relative;
}

.page-template-wp-custom-template-services {
    .pagination.hide {
        display: none;
    }
}

.pagination {
    margin-block-start: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        column-gap: 20px;
        align-items: center;
        a, span {
            font-weight: 700;
            font-size: 1.125rem;
        }
        .next.page-numbers,
        .prev.page-numbers {
            background-repeat: no-repeat;
            background-color: var(--wp--preset--color--contrast);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 0;
            display: block;
            transition: background-color .25s ease;
            &:hover {
                background-color: var(--wp--preset--color--base);
            }
        }
        .prev.page-numbers {
            background-image: url(../../images/arrow-left-slider.svg);
            background-position: 45% center;
        }
        .next.page-numbers {
            background-image: url(../../images/arrow-right-slider.svg);
            background-position: 55% center;
        }
        .current.page-numbers {
            color: var(--wp--preset--color--accent-1);
        }
    }
}

.wp-lightbox-overlay .close-button {
    background-color: var(--wp--preset--color--accent-1) !important;
    border-radius: 50%;
    transition: background-color .25s ease-in;
    svg {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7460%) hue-rotate(33deg) brightness(113%) contrast(87%);
        transition: filter .25s ease-in;
    }
    &:hover {
        background-color: var(--wp--preset--color--contrast) !important;
        svg {
            filter: brightness(0) saturate(100%) invert(33%) sepia(97%) saturate(2028%) hue-rotate(359deg) brightness(104%) contrast(99%);
        }
    }
}

.wp-block-list {
    list-style: none;
    padding: 0;
    display: inline-block;
    ul {
        margin-block-start: 20px;
    }
    li {
        position: relative;
        margin-bottom: 20px;
        font-size: 1rem;
        font-weight: 700;
        padding-left: 48px;
        a {
            font-weight: 700;
            color: var(--wp--preset--color--accent-1);
            transition: color .25s ease-in;
            &:hover {
                color: var(--wp--preset--color--base);
            }
        }
        &:before {
            content: " ";
            position: absolute;
            left: 0;
            top: -5px;
            background-image: url(../../images/check-bg.svg);
            background-repeat: no-repeat;
            background-position: center center;
            width: 36px;
            height: 36px;
        }
    }
}

.wsp-container {
    list-style: none;
    padding: 0;
    h2 {
        margin-block-start: 30px;
        margin-block-end:  30px;
    }
    ul {
        margin-block-start: 20px;
        list-style: none;
        padding: 0;
    }
    li {
        position: relative;
        margin-bottom: 20px;
        font-size: 1rem;
        font-weight: 700;
        padding-left: 48px;
        a {
            font-weight: 700;
            color: var(--wp--preset--color--base);
            transition: color .25s ease-in;
            &:hover {
                color: var(--wp--preset--color--accent-1);
            }
        }
        &:before {
            content: " ";
            position: absolute;
            left: 0;
            top: -5px;
            background-image: url(../../images/check-bg.svg);
            background-repeat: no-repeat;
            background-position: center center;
            width: 36px;
            height: 36px;
        }
    }
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
}

.entry-content {
    .wp-block-heading {
        margin-block-start: 60px !important;
        margin-block-end: 30px !important;
    }
}

.cn-text-container,
.cookie-agree-btn {
    font-family: var(--wp--preset--font-family--dm-sans) !important;
}

.cookie-notice-container {
    .cn-close-icon {
        opacity: 1;
    }
    .cn-close-icon:after, .cn-close-icon:before {
        background-color: var(--wp--preset--color--accent-2);
        transition: background-color .25s ease;
    }

    .cn-close-icon:hover:after, .cn-close-icon:hover:before {
        background-color: var(--wp--preset--color--accent-1);
    }
}

.cookie-agree-btn {
    border: 0;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding: var(--button-padding-xs);
    border-radius: var(--button-border-radius-xs);
    transition: color .25s ease-in, background-color .25s ease-in;
    cursor: pointer;
    font-weight: 700;
    &:hover {
        background-color: var(--wp--preset--color--accent-1);
        color: var(--wp--preset--color--accent-2);
    }
}

#swipebox-prev, #swipebox-next, #swipebox-close {
    &:hover {
        filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(2460%) hue-rotate(359deg) brightness(102%) contrast(99%);
    }
}

.custom-aligned-buttons {
    justify-content: space-between;
    align-items: center;
    margin-block-end: 30px !important;

    .wp-block-button {
        min-width: 300px;
    }
}

@media (max-width: 1024px) {
    .custom-aligned-buttons {
        justify-content: space-around;
    }    
}

@media (max-width: 639px) {
    .section-title-bg {
        padding-left: 58px;
    }
    .page-banner {
        position: relative;
        height: 300px;
        &::after {
            background-position: -20% bottom;
            background-size: auto 186px;
            background-image: url('../../images/page-banner-mob-bg.svg');
        }
        .wp-block-post-featured-image {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        & > .container {
            padding-left: 1rem;
            padding-right: 1rem;
            justify-content: center;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .wp-block-post-title {
            margin-block-start: auto !important;
        }
    }
}

@media (max-width: 767px) {
    .max-medium {
        display: block;
    }
}

@media (min-width: 768px) {
    .min-medium {
        display: block;
    }
    .page-spacing,
    .block-spacing {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .top-spacing  {
        padding-top: 60px;
    }
}

@media (max-width: 1023px) {
    .hide-on-medium {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hide-on-large {
        display: none;
    }
    .page-spacing,
    .block-spacing {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .top-spacing  {
        padding-top: 80px;
    }
    .pagination {
        margin-block-start: 50px;
    }
    
}

@media (min-width: 1280px) {
    .page-banner {
        & > .container {
            padding-left: 0;
            padding-right: 0;
            &.height-reached {
                row-gap: 0;
            }
        }
    }

    .section-spacing {
        padding-block-start: 40px;
        padding-block-end: 40px;
    }
    
    .template-bg {

        position: relative;
        &:before {
            content:" ";
            width: calc(100% - 32px);
            height: 100%;
            position: absolute;
            background-image: url('../../images/template-bg.svg');
            background-repeat: no-repeat;
            background-position: center center;
            z-index: 0;
            opacity: 0.04;
        }
    }
    .entry-content {
        .wp-block-heading {
            margin-block-start: 80px !important;
            margin-block-end: 40px !important;
        }
    }

    .wsp-container {
        list-style: none;
        padding: 0;
        h2 {
            margin-block-start: 60px;
            margin-block-end:  60px;
        }
    }
}

@media ( min-width: 1536px ) {
    .page-spacing,
    .block-spacing {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.prevent-links-click a {
    pointer-events: none;
}

.page-id-3517 .our-partners {
    display: none !important;
}