div {
  /* border: #f87c60 dotted 1px; */
}


body {
  font-family: "Anuphan", serif !important; 
}

.text-black {
  color: #000 !important;
}


.bg-footer{
  background-color: #242424;
}

.hover-zoom {
  transition:  .2s ease-out;
}
.hover-zoom:hover {
  transform: scale(1.05) translateY(-2px);
  transition:  0.3s ease-in-out;
  /* transition-duration: 0.5s; */
}

.text-orange {
  color: #FD6B4B;
}
.bg-light-gray {
  background-color: #F1F2F2;
}
.bg-orange {
  background-color: #FD6B4B;
}
.bg-blue {
  background-color: #2682C8;
}
.bg-green {
  background-color: #00BF86;
}
.bg-dark-gray {
  background-color: #333333;
}
.bg-gradient-1{
  background: linear-gradient(343deg, rgba(227,121,97,1) 0%, rgba(170,142,205,1) 100%);
}


.cartoon-1 {
  max-width: calc(90px + 10vw);
  position: absolute;
  left: calc(-7rem - -10vw);
  bottom: 240px;
}
.cartoon-2 {
  max-width: calc(90px + 10vw);
  position: absolute;
  right: calc(-8rem - -10vw);
  bottom: 14rem;
}


/* modal */
.modal-activity .modal-title{
  background-color: #333333;
  border-radius: 10rem;
  position: absolute;
  top: -25px;
  z-index: 1000;
}
.modal-activity .modal-header .btn-close{
  background-color: #333333;
  border-radius: 20rem;
  right: 40px;
  top: 50px;
  z-index: 1000;
}
.modal {
  --bs-modal-bg: #E2E2E2 !important;
}
.modal-backdrop {
  --bs-backdrop-bg: #ffffff;
  --bs-backdrop-opacity: 0.2;
}
/* modal */

/* btn */
.btn-dark{
  background-color: #333333;
}

      .btn-orange {
        color: #fff;
        background-color: #FD6B4B;
        border-color: #FD6B4B;
      }
      .btn-orange.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon):not(:disabled):not(.disabled) {
        box-shadow: 0 0.125rem 0.375rem 0 rgba(203, 32, 39, 0.3);
      }
      .btn-orange:hover {
        color: #fff !important;
        background-color: #f87c60 !important;
        border-color: #f87c60 !important;
      }
      .btn-check:focus + .btn-orange, .btn-orange:focus, .btn-orange.focus {
        color: #fff;
        background-color: #f87c60;
        border-color: #f87c60;
      }
      .btn-check:checked + .btn-orange, .btn-check:active + .btn-orange, .btn-orange:active, .btn-orange.active, .btn-orange.show.dropdown-toggle, .show > .btn-orange.dropdown-toggle {
        color: #fff !important;
        background-color: #f87c60 !important;
        border-color: #f87c60 !important;
      }
      .btn-orange.disabled, .btn-orange:disabled {
        color: #fff !important;
        background-color: #FD6B4B !important;
        border-color: #FD6B4B !important;
      }

      .btn-group .btn-orange,
      .input-group .btn-orange {
        border-right: var(--bs-border-width) solid #f87c60;
        border-left: var(--bs-border-width) solid #f87c60;
      }

      .btn-group-vertical .btn-orange {
        border-top-color: #f87c60;
        border-bottom-color: #f87c60;
      }
      
      
      
      .btn-blue {
        color: #fff;
        background-color: #2682C8;
        border-color: #2682C8;
      }
      .btn-blue.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon):not(:disabled):not(.disabled) {
        box-shadow: 0 0.125rem 0.375rem 0 rgb(74 146 200 / 30%);
      }
      .btn-blue:hover {
        color: #fff !important;
        background-color: #4a92c8 !important;
        border-color: #4a92c8 !important;
      }
      .btn-check:focus + .btn-blue, .btn-blue:focus, .btn-blue.focus {
        color: #fff;
        background-color: #4a92c8;
        border-color: #4a92c8;
      }
      .btn-check:checked + .btn-blue, .btn-check:active + .btn-blue, .btn-blue:active, .btn-blue.active, .btn-blue.show.dropdown-toggle, .show > .btn-blue.dropdown-toggle {
        color: #fff !important;
        background-color: #4a92c8 !important;
        border-color: #4a92c8 !important;
      }
      .btn-blue.disabled, .btn-blue:disabled {
        color: #fff !important;
        background-color: #2682C8 !important;
        border-color: #2682C8 !important;
      }

      .btn-group .btn-blue,
      .input-group .btn-blue {
        border-right: var(--bs-border-width) solid #4a92c8;
        border-left: var(--bs-border-width) solid #4a92c8;
      }

      .btn-group-vertical .btn-blue {
        border-top-color: #4a92c8;
        border-bottom-color: #4a92c8;
      }
      
      
      
      .btn-green {
        color: #fff;
        background-color: #00BF86;
        border-color: #00BF86;
      }
      .btn-green.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon):not(:disabled):not(.disabled) {
        box-shadow: 0 0.125rem 0.375rem 0 rgba(203, 32, 39, 0.3);
      }
      .btn-green:hover {
        color: #fff !important;
        background-color: #47cba4 !important;
        border-color: #47cba4 !important;
      }
      .btn-check:focus + .btn-green, .btn-green:focus, .btn-green.focus {
        color: #fff;
        background-color: #47cba4;
        border-color: #47cba4;
      }
      .btn-check:checked + .btn-green, .btn-check:active + .btn-green, .btn-green:active, .btn-green.active, .btn-green.show.dropdown-toggle, .show > .btn-green.dropdown-toggle {
        color: #fff !important;
        background-color: #47cba4 !important;
        border-color: #47cba4 !important;
      }
      .btn-green.disabled, .btn-green:disabled {
        color: #fff !important;
        background-color: #00BF86 !important;
        border-color: #2682C8 !important;
      }

      .btn-group .btn-green,
      .input-group .btn-green {
        border-right: var(--bs-border-width) solid #47cba4;
        border-left: var(--bs-border-width) solid #47cba4;
      }

      .btn-group-vertical .btn-green {
        border-top-color: #47cba4;
        border-bottom-color: #47cba4;
      }
/* btn */



/* nav */
.dark-style .layout-navbar .navbar.landing-navbar {
  /* border-color: #f0f0f034 !important; */
  /* background-color: #f0f0f034 !important; */
  border-color: unset !important;
  background-color: unset !important;
}
@media (max-width: 991.98px) {
  .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
    background-color: linear-gradient(343deg, rgba(227,121,97,1) 0%, rgba(170,142,205,1) 100%) !important;
  }
}
.dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
  /* background: linear-gradient(343deg, rgba(227,121,97,1) 0%, rgba(170,142,205,1) 100%) !important; */
  border-color: unset !important;
  box-shadow: unset !important;
}
/* nav */



.logo-associate {
  height: 60px;
  width: auto;
  margin: 0px 1px;
}
/* .container-sm */
@media (min-width: 576px) {
  .logo-associate {
    height: 60px;
    width: auto;
    margin: 0px 2px;
  }
}
/* .container-md */
@media (min-width: 768px) {
  .logo-associate {
    height: 80px;
    width: auto;
    margin: 0px 3px;
  }
}
/* .container-lg */
@media (min-width: 992px) {
  .logo-associate {
    height: 100px;
    width: auto;
    margin: 0px 4px;
  }
}
/* .container-xl */
@media (min-width: 1200px) {
  .logo-associate {
    height: 100px;
    width: auto;
    margin: 0px 4px;
  }
}
/* .container-xx */
@media (min-width: 1400px) {
  .logo-associate {
    height: 110px;
    width: auto;
    margin: 0px 4px;
  }
}