@font-face {font-family: 'Exo 2'; font-style: normal; font-display: swap; src: url('../fonts/Exo_2/Exo2-VariableFont_wght.ttf') format('opentype');}
@font-face {font-family: 'Exo 2'; font-style: italic; font-display: swap; src: url('../fonts/Exo_2/Exo2-Italic-VariableFont_wght.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-Regular.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 400;font-style: italic; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-Italic.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-Medium.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 500;font-style: italic; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-MediumItalic.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-SemiBold.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 600;font-style: italic; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-SemiBoldItalic.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-Bold.ttf') format('opentype');}
@font-face {font-family: 'Bai Jamjuree'; font-weight: 700;font-style: italic; font-display: swap; src: url('../fonts/Bai_Jamjuree/BaiJamjuree-BoldItalic.ttf') format('opentype');}

body {font-family: var(--text-font-family); font-size: calc(var(--font-scale) * var(--text)); font-size: calc(var(--font-scale) * var(--text-clamp)); line-height: var(--text-lh); font-style: normal; font-weight: var(--text-weight); color: var(--text-color);}

hr {margin: var(--hr-margin); background: var(--hr-color); opacity: 1;}
img {display: inline-block; max-width: 100%; height: auto;}
video {display: inline-block; max-width: 100%; height: auto;}

/*headings*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {font-family: var(--heading-font-family); font-weight: var(--heading-weight); color: var(--heading-color); line-height: var(--heading-lh); margin: 0 0 1rem;}
h1, .h1 {font-size: calc(var(--font-scale) * var(--h1)); font-size: calc(var(--font-scale) * var(--h1-clamp));}
h2, .h2 {font-size: calc(var(--font-scale) * var(--h2)); font-size: calc(var(--font-scale) * var(--h2-clamp));}
h3, .h3 {font-size: calc(var(--font-scale) * var(--h3)); font-size: calc(var(--font-scale) * var(--h3-clamp));}
h4, .h4 {font-size: calc(var(--font-scale) * var(--h4)); font-size: calc(var(--font-scale) * var(--h4-clamp));}
h5, .h5 {font-size: calc(var(--font-scale) * var(--h5)); font-size: calc(var(--font-scale) * var(--h5-clamp));}
h6, .h6 {font-size: calc(var(--font-scale) * var(--h6)); font-size: calc(var(--font-scale) * var(--h6-clamp));}
/*headings end*/

/*text*/
.paragraph {font-family: var(--text-font-family); font-size: calc(var(--font-scale) * var(--text)); line-height: var(--text-lh); color: var(--text-color);}
.lead strong {font-weight: 600;}

.title-small {font-size: calc(var(--font-scale) * .875rem);/*14px*/ line-height: 1; font-weight: 700; color: var(--color-green); text-transform: uppercase; position: relative;}
.title-small:before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); position: absolute; bottom: 1px; left: 50px; transform: translate(-50%, 50%);}
.title-small:after {content: ''; display: block; width: 50px; height: 2px; margin-top: 15px; background: linear-gradient(90deg, rgba(221, 240, 105, 0) 0%, var(--color-green-5) 46.5%, var(--color-green) 100%);}
.title-small.horizontal {padding-left: 70px; position: relative;}
.title-small.horizontal:before,
.title-small.horizontal:after {margin: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.title-small.horizontal:before {left: 50px;}

.paragraph-with-address,
.paragraph-with-email,
.paragraph-with-phone {display: flex; gap: .75rem;}
:is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {content:''; display: inline-block; width: calc(var(--text) * var(--text-lh)); height: calc(var(--text) * var(--text-lh)); background: var(--color-primary); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain;}
.paragraph-with-address:before {mask-image: url('../images/location-pin.svg'); -webkit-mask-image: url('../images/location-pin.svg');}
.paragraph-with-email:before {mask-image: url('../images/mail.svg'); -webkit-mask-image: url('../images/mail.svg');}
.paragraph-with-phone:before {mask-image: url('../images/phone.svg'); -webkit-mask-image: url('../images/phone.svg');}

:is(h1, .h1):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h1) * var(--heading-lh) / 2); top: calc(var(--h1-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}
:is(h2, .h2):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h2) * var(--heading-lh) / 2); top: calc(var(--h2-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}
:is(h3, .h3):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h3) * var(--heading-lh) / 2); top: calc(var(--h3-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}
:is(h4, .h4):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h4) * var(--heading-lh) / 2); top: calc(var(--h4-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}
:is(h5, .h5):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h5) * var(--heading-lh) / 2); top: calc(var(--h5-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}
:is(h6, .h6):is(.paragraph-with-address, .paragraph-with-email, .paragraph-with-phone):before {position: relative; top: calc(var(--h6) * var(--heading-lh) / 2); top: calc(var(--h6-clamp) * var(--heading-lh) / 2); transform: translateY(-50%);}

a {color: var(--link-color); text-decoration: none; transition: var(--transition);}
a:is(:hover, :focus) {text-decoration: none !important; color: var(--link-color-active);}

.text-white {--text-color: var(--color-white); --heading-color: var(--color-white);}
/*text end*/

.rounded {border-radius: var(--radius) !important;}

.bg-dark {background-color: var(--color-black) !important;}
.bg-gray {background-color: var(--color-gray-1);}
.bg-green {background-color: var(--color-green);}

/*buttons*/
.btn {font-family: 'Exo 2', sans-serif; padding: var(--btn-padding); font-size: calc(var(--font-scale) * var(--btn-text)); line-height: var(--btn-text-lh); font-weight: var(--btn-weight); color: var(--link-color); text-transform: uppercase; box-shadow: none !important; border-radius: var(--btn-radius); transition: var(--transition);}
.btn:is(.active, :hover, :focus) {color: var(--link-color-active);}
.btn.btn-wide {display: block;}
.btn:focus-visible {outline: 1px auto rgb(16, 16, 16);}

.btn.btn-primary {background: no-repeat top right / 200% 100%; background-image: var(--btn-bg); border: none; color: var(--btn-text-color);}
.btn.btn-primary:is(.active, :hover, :focus) {background-position: top right;/*background: var(--btn-bg-active);*/ color: var(--btn-text-color-active);}

.btn.btn-secondary {background: var(--btn-secondary-bg); border: none; color: var(--btn-secondary-text-color);}
.btn.btn-secondary:is(.active, :hover, :focus) {background: var(--btn-secondary-bg-active);  color: var(--btn-secondary-text-color-active);}

.btn.btn-outline-primary {border: var(--btn-border-size) solid var(--btn-bg); color: var(--btn-bg);}
.btn.btn-outline-primary:is(.active, :hover, :focus) {background: var(--btn-bg-active); border-color: var(--btn-bg-active); color: var(--btn-text-color-active);}

.btn.btn-outline-secondary {border: var(--btn-border-size) solid var(--btn-secondary-bg); color: var(--btn-secondary-bg);}
.btn.btn-outline-secondary:is(.active, :hover, :focus) {background: var(--btn-secondary-bg-active); border-color :var(--btn-secondary-bg-active); color: var(--btn-secondary-text-color-active);}

.btn.btn-arrow,
.btn.btn-arrow-back,
.btn.btn-hamburger {display: inline-flex; justify-content: space-between; align-items: center; gap: .75rem;}
.btn.btn-arrow:after,
.btn.btn-arrow-back:before {content: ''; display: inline-block; width: 32px; height: 6px; background: var(--link-color); mask-image: url('../images/btn-arrow.svg'); -webkit-mask-image: url('../images/btn-arrow.svg');  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; transition: var(--transition);}
.btn.btn-arrow-back:before {transform: scaleX(-1);}
.btn.btn-hamburger:after {content: ''; display: inline-block; width: .75rem; height: .75rem; background: var(--link-color); mask-image: url('../images/hamburger.svg'); -webkit-mask-image: url('../images/hamburger.svg');  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; transition: var(--transition);}
.btn.btn-arrow:is(.active, :hover, :focus):after,
.btn.btn-arrow-back:is(.active, :hover, :focus):after,
.btn.btn-hamburger:is(.active, :hover, :focus):after, {background: var(--link-color-active);}

.btn.btn-primary.btn-arrow:after,
.btn.btn-primary.btn-arrow-back:before,
.btn.btn-primary.btn-hamburger:after {background: var(--btn-text-color);}
.btn.btn-primary.btn-arrow:is(.active, :hover, :focus):after,
.btn.btn-primary.btn-arrow-back:is(.active, :hover, :focus):before,
.btn.btn-primary.btn-hamburger:is(.active, :hover, :focus):after {background: var(--btn-text-color-active);}

.btn.btn-secondary.btn-arrow:after,
.btn.btn-secondary.btn-arrow-back:before,
.btn.btn-secondary.btn-hamburger:after {background: var(--btn-secondary-text-color);}
.btn.btn-secondary.btn-arrow:is(.active, :hover, :focus):after,
.btn.btn-secondary.btn-arrow-back:is(.active, :hover, :focus):before,
.btn.btn-secondary.btn-hamburger:is(.active, :hover, :focus):after {background: var(--btn-secondary-text-color-active);}

.btn.btn-outline-primary.btn-arrow:after,
.btn.btn-outline-primary.btn-arrow-back:before,
.btn.btn-outline-primary.btn-hamburger:after {background: var(--btn-bg);}
.btn.btn-outline-primary.btn-arrow:is(.active, :hover, :focus):after,
.btn.btn-outline-primary.btn-arrow-back:is(.active, :hover, :focus):before,
.btn.btn-outline-primary.btn-hamburger:is(.active, :hover, :focus):after {background: var(--btn-text-color-active);}

.btn.btn-outline-secondary.btn-arrow:after,
.btn.btn-outline-secondary.btn-arrow-back:before,
.btn.btn-outline-secondary.btn-hamburger:after {background: var(--btn-secondary-bg);}
.btn.btn-outline-secondary.btn-arrow:is(.active, :hover, :focus):after,
.btn.btn-outline-secondary.btn-arrow-back:is(.active, :hover, :focus):before,
.btn.btn-outline-secondary.btn-hamburger:is(.active, :hover, :focus):after {background: var(--btn-secondary-text-color-active);}

.bg-dark {
    --btn-secondary-bg: var(--color-black-2);
    --btn-secondary-bg-active: var(--color-gray-2);
    --btn-secondary-text-color: var(--color-white);
    --btn-secondary-text-color-active: var(--color-black);
}
/*buttons end*/

/*list*/
.list-dot {list-style: none; padding: 0;}
.list-dot > li {padding-left: 1.5rem; position: relative;}
.list-dot > li:before {--list-dot-border: 2px; content: ''; display: block; width: calc(.75rem - var(--list-dot-border) * 2); height: calc(.75rem - var(--list-dot-border) * 2); background: var(--color-primary); box-shadow: 0 0 0 var(--list-dot-border) rgba(32, 148, 239, .3); border-radius: 50%; position: absolute; top: calc((var(--text) * var(--text-lh)) / 2); left: 0; transform: translateY(-50%);}
.list-dot > li + li {}

.list-dash {list-style: none; padding: 0;}
.list-dash > li {padding-left: 1.5rem; position: relative;}
.list-dash > li:before {content: ''; display: block; width: .5rem; height: 1px; background: var(--color-primary); position: absolute; top: calc((var(--text) * var(--text-lh)) / 2); left: 0; transform: translateY(-50%);}
.list-dash > li + li {}

.list-arrow {list-style: none; padding: 0;}
.list-arrow > li {padding-left: 1.5rem; position: relative;}
.list-arrow > li:before {content: ''; display: block; width: .75rem; height: .75rem; background: var(--color-primary); mask-image: url('../images/arrow.svg'); -webkit-mask-image: url('../images/arrow.svg');  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; position: absolute; top: calc((var(--text) * var(--text-lh)) / 2); left: 0; transform: translateY(-50%);}
.list-arrow > li + li {}

.list-check {list-style: none; padding: 0;}
.list-check > li {padding-left: 1.5rem; position: relative;}
.list-check > li:before {content: ''; display: block; width: .75rem; height: .75rem; background: var(--color-primary); mask-image: url('../images/check.svg'); -webkit-mask-image: url('../images/check.svg');  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; position: absolute; top: calc((var(--text) * var(--text-lh)) / 2); left: 0; transform: translateY(-50%);}
.list-check > li + li {}
/*list end*/

/*row*/
.row {--bs-gutter-x: var(--column-gutter);}
.row.row-no-gutter {--bs-gutter-x: 0;}
.row.row-thin-gutter {--bs-gutter-x: var(--column-gutter-thin);}
/*row end*/

/*margin*/
.mt-100 {margin-top:100px !important;}
.mb-100 {margin-bottom:100px !important;}
.mt-60 {margin-top:60px !important;}
.mb-60 {margin-bottom:60px !important;}
.mt-50 {margin-top:50px !important;}
.mb-50 {margin-bottom:50px !important;}
.mt-30 {margin-top:30px !important;}
.mb-30 {margin-bottom:30px !important;}
.mt-0 {margin-top:0 !important;}
.mb-0 {margin-bottom:0 !important;}
/*margin end*/

/*padding*/
.pt-100 {padding-top:100px !important;}
.pb-100 {padding-bottom:100px !important;}
.pt-60 {padding-top:60px !important;}
.pb-60 {padding-bottom:60px !important;}
.pt-50 {padding-top:50px !important;}
.pb-50 {padding-bottom:50px !important;}
.pt-30 {padding-top:30px !important;}
.pb-30 {padding-bottom:30px !important;}
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
/*padding end*/

@media only screen and (min-width:768px) {
    /*row*/
    .row.row-wide-gutter {--bs-gutter-x: var(--column-gutter-wide);}
    /*row end*/
}

/*breakpoint XXL*/
@media only screen and (min-width: 1400px) {
    .col-xxl-1-5 {width: 20%}
}
/*breakpoint XXL end*/

/*breakpoint XL*/
@media only screen and (min-width: 1200px) {
    .col-xl-1-5 {width: 20%}
}
@media only screen and (max-width: 1399px) {}
/*breakpoint XL end*/

/*breakpoint LG*/
@media only screen and (min-width: 992px) {
    .col-lg-1-5 {width: 20%}
}
@media only screen and (max-width: 1199px) {}
/*breakpoint LG end*/

/*breakpoint MD*/
@media only screen and (min-width: 768px) {
    .col-md-1-5 {width: 20%}
}

@media only screen and (max-width: 991px) {}
/*breakpoint MD end*/

/*breakpoint SM*/
@media only screen and (min-width: 576px) {
    .col-sm-1-5 {width: 20%}
}
@media only screen and (max-width: 767px) {
    /*margin*/
    .mt-100 {margin-top:60px !important;}
    .mb-100 {margin-bottom:60px !important;}
    /*margin end*/

    /*padding*/
    .pt-100 {padding-top:60px !important;}
    .pb-100 {padding-bottom:60px !important;}
    /*padding end*/
}
/*breakpoint SM end*/

/*breakpoint XS*/
@media only screen and (max-width: 575px) {}
/*breakpoint XS end*/

/*padding*/
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
/*padding end*/