:root {
  /* Font Properties */
  --font-family-en: 'Prompt', sans-serif;

  --font-family-th-light: 'skv-light', sans-serif;
  --font-family-th-med: 'skv-med', sans-serif;
  --font-family-th-semibold: 'skv-semibold', sans-serif;
  --font-family-th-bold: 'skv-bold', sans-serif;

  --theme-primary-green: #59B54A;
  --theme-primary-green-active: #67cb58;
  --theme-primary-blue: #68CEF6;
  --theme-primary-blue-active: #52b5dd;
  --theme-background-light-green: #D7EFE2;
  --theme-background-light-green-sub: #F6FAF7;

  --theme-primary-dark: #102949;
  --theme-primary-dark-active: #233751;
  --theme-background-light-blue-sub: #E6F2F9;

  --theme-secondary-light-red: #E13485;

  --text-color-normal: #102949;
  --text-color-normal-level-1: #545454;
  --text-color-mini-header: #9b9b9b;

  --icon-facebook: #2a79e0;
  --icon-facebook-active: #5599f3;

  --footer-background: #F6F6F6;
  --border-color: #D6D6D6;

}

.skv-light {
  font-family: 'skv-light', sans-serif !important;
}

.skv-med {
  font-family: 'skv-med', sans-serif !important;
}

.skv-semibold {
  font-family: 'skv-semibold', sans-serif !important;
}

.skv-bold {
  font-family: 'skv-bold', sans-serif !important;
}

body {
  font-family: var(--font-family-en);
  font-weight: 300;
  color: var(--text-color-normal);
}

.text-light-red {
  color: var(--theme-secondary-light-red);
}

.text-blue {
  color: var(--theme-primary-blue);
}

.navbar-nav a.nav-link,
.navbar-nav a.nav-link.active {
  color: #424743;
}

.navbar-nav a.nav-link:hover,
.navbar-nav a.nav-link.active {
  color: var(--theme-primary-green);
}

.navbar-nav a.nav-link.active {
  font-weight: 500;
}

.bd-radius-32 {
  border-top-left-radius: 0;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.l-en {
  font-family: var(--font-family-en);
}

.bg-nav {
  background: rgb(45, 45, 45);
  background: linear-gradient(0deg, rgba(45, 45, 45, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.text-normal {
  color: var(--text-color-normal);
}

.text-sub {
  color: var(--text-color-normal-level-1);
}

.bg-section {
  background-color: var(--theme-primary-green);
}

.bg-sub-section {
  background-color: var(--theme-background-light-green-sub);
}

.section-title {
  padding-bottom: 2.5rem;
}

.ui-brand {
  max-width: 140px;
  width: 140px;
  height: auto;
}

.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.pt-6 {
  padding-top: 6rem;
}

.pt-7 {
  padding-top: 76rem;
}

.pt-8 {
  padding-top: 8rem;
}

.readmore {
  color: var(--theme-primary-green);
  text-decoration: none;
}

.readmore:hover {
  color: var(--theme-primary-green);
}

.text-theme-primary {
  color: var(--theme-primary-green);
}

.btn-theme-primary,
.btn-theme-outline-primary:hover {
  background-color: var(--theme-primary-green);
  color: #fff;
}

.btn-theme-primary-blue,
.btn-theme-outline-primary-blue:hover {
  background-color: var(--theme-primary-blue);
  color: #fff;
}

.btn-theme-primary-blue:hover {
  color: #fff;
  background-color: var(--theme-primary-blue-active);
}

.btn-theme-outline-primary {
  border-color: var(--theme-primary-green);
  color: var(--theme-primary-green);
}

.btn-theme-primary:hover {
  background-color: var(--theme-primary-green-active);
  color: #fff;
}

.btn-theme-primary-light {
  background-color: var(--theme-background-light-green-sub);
  color: var(--theme-primary-green);
}

.btn-theme-primary-light:hover {
  background-color: var(--theme-primary-green);
  color: #e8e8e8;
}

ul.list-unstyled li {
  margin-bottom: 0.5rem;
}

ul.list-unstyled li>i {
  color: var(--theme-primary-green);
}

.text-mini-head {
  color: var(--text-color-mini-header);
}

.btn-light {
  background-color: var(--theme-background-light-green-sub);
  color: var(--text-color-mini-header);
  border: 0;
}

.btn-light:hover {
  background-color: var(--theme-background-light-green);
  color: var(--text-color-mini-header);
  border: 0;
}

.footer {
  background-color: var(--footer-background);
  color: #83868B;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(208, 208, 208, 0.25) !important;
}

.shadow {
  box-shadow: 0 1rem 3rem rgba(208, 208, 208, 0.25) !important;
}

.icon-facebook {
  color: var(--icon-facebook);
  transition: color 0.3s;
}

.icon-facebook:hover {
  color: var(--icon-facebook-active) !important;
  transition: color 0.3s;
}

.bg-light-yellow {
  height: 15rem;
  top: -12rem;
  z-index: -2;
  background-color: var(--theme-background-light-yellow);
}

.mt-n10 {
  margin-top: -14rem;
}

#appointment .card:hover {
  background-color: var(--theme-background-light-yellow);
  transition: background 0.3s;
}

#appointment .card {
  transition: background 0.3s;
}

.card.benefit,
.card.aboutproject {
  background-color: rgba(255, 255, 255, 0.85);
  border: 0;
}

.card.benefit>.d-flex:first-child {
  border-bottom: 2px solid var(--border-color);
}

.benefit-details,
.aboutproject-details {
  font-size: 1.16rem !important;
  line-height: 1.8rem !important;
  color: var(--text-color-normal-level-1);
}

.benefit-details {
  border-left: 2px solid var(--border-color);
}

.benefit-details a,
.aboutproject-details a {
  color: var(--theme-primary-green);
  font-weight: 500;
}

.benefit-details a:hover,
.aboutproject a:hover {
  color: var(--theme-primary-green-active) !important;
  font-weight: 500;
}

.benefit-items.type-1 {
  color: var(--theme-primary-green);
}

.benefit-items.type-2 {
  color: var(--theme-primary-blue);
}

.modal-content.about {
  background-color: #fff;
}

@media (max-width: 575.98px) {
  .ui-brand {
    max-width: 140px;
    width: 80px;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .ui-brand {
    max-width: 140px;
    width: 80px;
    height: auto;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {}