@charset "UTF-8";

/*!
* Start Bootstrap - New Age v6.0.7 (https://startbootstrap.com/theme/new-age)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-new-age/blob/master/LICENSE)
* Bootstrap  v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*
* Remove Bootstrap v5.2.3, Keep modifications only
*/
:root,
[data-bs-theme=light] {
  --bs-blue: #2937f0;
  --bs-purple: #9f1ae2;
  --bs-primary: #2937f0;
  --bs-secondary: #9f1ae2;
  --bs-primary-rgb: 41, 55, 240;
  --bs-secondary-rgb: 159, 26, 226;

  /* check color .alert-primary .alert-link */
  /* --bs-primary-text-emphasis: #141a73; */
  --bs-primary-text-emphasis: #192190;

  /* check color .alert-secondary .alert-link { */
  /* --bs-secondary-text-emphasis: #4c0d6d; */
  --bs-secondary-text-emphasis: #5f1088;

  --bs-primary-bg-subtle: #d4d7fc;
  --bs-secondary-bg-subtle: #ecd1f9;
  --bs-primary-border-subtle: #bfc3fb;;
  --bs-secondary-border-subtle: #e2baf6;

  --bs-font-sans-serif: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --bs-body-font-weight: 500;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #212cc0;
  --bs-link-hover-color-rgb: 33, 44, 192;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  font-family: "Newsreader", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #d4d7fc;
  --bs-table-border-color: #bfc2e3;
  --bs-table-striped-bg: #c9ccef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bfc2e3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c4c7e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #ecd1f9;
  --bs-table-border-color: #d4bce0;
  --bs-table-striped-bg: #e0c7ed;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d4bce0;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #dac1e6;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.form-control:focus {
  border-color: #949bf8;
}

.form-select:focus {
  border-color: #949bf8;
}

.form-check-input:focus {
  border-color: #949bf8;
  box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
}

.form-check-input:checked {
  background-color: #2937f0;
  border-color: #2937f0;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: #2937f0;
  border-color: #2937f0;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949bf8'/%3e%3c/svg%3e");
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
}

.form-range::-webkit-slider-thumb {
  background-color: #2937f0;
}

.form-range::-webkit-slider-thumb:active {
  background-color: #bfc3fb;
}

.form-range::-moz-range-thumb {
  background-color: #2937f0;
}

.form-range::-moz-range-thumb:active {
  background-color: #bfc3fb;
}

.input-group-text {
  font-weight: 500;
}

.btn {
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2937f0;
  --bs-btn-border-color: #2937f0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #232fcc;
  --bs-btn-hover-border-color: #212cc0;
  --bs-btn-focus-shadow-rgb: 73, 85, 242;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212cc0;
  --bs-btn-active-border-color: #1f29b4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2937f0;
  --bs-btn-disabled-border-color: #2937f0;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #9f1ae2;
  --bs-btn-border-color: #9f1ae2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8716c0;
  --bs-btn-hover-border-color: #7f15b5;
  --bs-btn-focus-shadow-rgb: 173, 60, 230;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7f15b5;
  --bs-btn-active-border-color: #7714aa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #9f1ae2;
  --bs-btn-disabled-border-color: #9f1ae2;
}

.btn-outline-primary {
  --bs-btn-color: #2937f0;
  --bs-btn-border-color: #2937f0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2937f0;
  --bs-btn-hover-border-color: #2937f0;
  --bs-btn-focus-shadow-rgb: 41, 55, 240;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2937f0;
  --bs-btn-active-border-color: #2937f0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #2937f0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2937f0;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #9f1ae2;
  --bs-btn-border-color: #9f1ae2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9f1ae2;
  --bs-btn-hover-border-color: #9f1ae2;
  --bs-btn-focus-shadow-rgb: 159, 26, 226;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9f1ae2;
  --bs-btn-active-border-color: #9f1ae2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #9f1ae2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #9f1ae2;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 500;
  --bs-btn-focus-shadow-rgb: 73, 85, 242;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: #2937f0;
}

.dropdown-item {
  font-weight: 500;
}

.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: #2937f0;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #2937f0;
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
  --bs-accordion-active-color: #2532d8;
  --bs-accordion-active-bg: #eaebfe;
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
  --bs-pagination-active-bg: #2937f0;
  --bs-pagination-active-border-color: #2937f0;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: #2937f0;
}

.list-group {
  --bs-list-group-active-bg: #2937f0;
  --bs-list-group-active-border-color: #2937f0;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.25);
}

.tooltip {
  font-weight: 500;
}

.popover {
  font-weight: 500;
}

.link-primary:hover,
.link-primary:focus {
  color: #212cc0 !important;
}

.link-secondary:hover,
.link-secondary:focus {
  color: #7f15b5 !important;
}

.fw-normal {
  font-weight: 500 !important;
}

/* Bootstrap END*/
html {
  scroll-padding-top: 4.5rem;
}

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

.bg-gradient-primary-to-secondary {
  background: linear-gradient(45deg, #2937f0, #9f1ae2) !important;
}

.font-alt {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.text-gradient {
  background: -webkit-linear-gradient(#2937f0, #9f1ae2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

aside,
section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.app-badge {
  height: 3rem;
}

#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #fff;
}

#mainNav .navbar-brand {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active {
  color: #2937f0;
}

#mainNav .navbar-toggler {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  color: #212529;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #212529;
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #6c757d;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #2937f0;
}

.device-wrapper {
  max-width: 300px;
  width: 100%;
}

.device {
  position: relative;
  background-size: cover;
}

.device::after {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.device .screen {
  position: absolute;
  background-size: cover;
  pointer-events: auto;
}

.device .button {
  position: absolute;
  cursor: pointer;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] {
  padding-bottom: 198.898071625%;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .screen {
  top: 3.1855955679%;
  left: 6.8870523416%;
  width: 86.2258953168%;
  height: 93.6288088643%;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black]::after {
  content: "";
  background-image: url("../assets/img/portrait_black.png");
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .button {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.cta {
  position: relative;
  padding: 15rem 0;
  background-image: url("https://source.unsplash.com/5g41N3uRPf8/1500x800");
  background-position: center;
  background-size: cover;
}

section.cta .cta-content {
  position: relative;
  z-index: 1;
}

section.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.icon-feature {
  font-size: 4rem;
}

.features-device-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.features-device-mockup .circle {
  position: absolute;
  left: 0;
  fill: url(#circleGradient);
  width: 70%;
  display: none;
}

.features-device-mockup .circle .gradient-start-color {
  stop-color: #2937f0;
}

.features-device-mockup .circle .gradient-end-color {
  stop-color: #9f1ae2;
}

.features-device-mockup .shape-1 {
  position: absolute;
  height: 1rem;
  width: 1rem;
  transform: rotate(10deg);
  fill: #2937f0;
  top: 15%;
  right: 10%;
}

.features-device-mockup .shape-2 {
  position: absolute;
  height: 0.75rem;
  width: 0.75rem;
  fill: #2937f0;
  bottom: 15%;
  left: 10%;
}

.features-device-mockup .device-wrapper {
  max-width: 10rem;
}

@media (min-width:576px) {
  .features-device-mockup .circle {
    width: 70%;
    display: block;
    left: auto
  }

  .features-device-mockup .device-wrapper {
    max-width: 12.5rem
  }
}

@media (min-width:768px) {
  .features-device-mockup .circle {
    width: 60%;
    left: auto
  }

  .features-device-mockup .device-wrapper {
    max-width: 15rem
  }
}

@media (min-width:992px) {
  .features-device-mockup .circle {
    width: 90%;
    left: -25%
  }

  .features-device-mockup .shape-1 {
    top: 5%;
    right: -15%
  }

  .features-device-mockup .shape-2 {
    bottom: 10%;
    left: -10%
  }

  .features-device-mockup .device-wrapper {
    max-width: 15rem;
    margin-left: auto
  }
}

@media (min-width:1200px) {
  .features-device-mockup .circle {
    width: 75%;
    left: 0
  }

  .features-device-mockup .shape-2 {
    bottom: 15%;
    left: 10%
  }

  .features-device-mockup .device-wrapper {
    max-width: 15rem
  }
}

@media (min-width:1400px) {
  .features-device-mockup .circle {
    width: 80%;
    left: 0
  }

  .features-device-mockup .device-wrapper {
    max-width: 17rem
  }
}

footer a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

footer a:hover,
footer a:active,
footer a:focus {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.masthead {
  background-color: #f8f9fa;
  padding-top: 9.5rem;
  padding-bottom: 5rem;
}

.masthead .masthead-device-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.masthead .masthead-device-mockup .circle {
  position: absolute;
  fill: url(#circleGradient);
  width: 70%;
  display: none;
}

.masthead .masthead-device-mockup .circle .gradient-start-color {
  stop-color: #2937f0;
}

.masthead .masthead-device-mockup .circle .gradient-end-color {
  stop-color: #9f1ae2;
}

.masthead .masthead-device-mockup .shape-1 {
  position: absolute;
  height: 1rem;
  width: 1rem;
  transform: rotate(-10deg);
  fill: #2937f0;
  bottom: 15%;
  left: 10%;
}

.masthead .masthead-device-mockup .shape-2 {
  position: absolute;
  height: 0.75rem;
  width: 0.75rem;
  fill: #2937f0;
  top: 15%;
  right: 10%;
}

.masthead .masthead-device-mockup .device-wrapper {
  max-width: 10rem;
}

@media (min-width:576px) {
  .masthead .masthead-device-mockup .circle {
    width: 70%;
    display: block
  }

  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 12.5rem
  }
}

@media (min-width:768px) {
  .masthead .masthead-device-mockup .circle {
    width: 60%
  }

  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 15rem
  }
}

@media (min-width:992px) {
  .masthead .masthead-device-mockup .circle {
    width: 90%
  }

  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 15rem
  }
}

@media (min-width:1200px) {
  .masthead .masthead-device-mockup .circle {
    width: 75%
  }

  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 15rem
  }
}

@media (min-width:1400px) {
  .masthead .masthead-device-mockup .circle {
    width: 70%
  }

  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 17rem
  }
}