@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'ntBold';
    src        : url('../font/ntfont/NTBold.eot');
    src        : url('../font/ntfont/NTBold.eot?#iefix') format('embedded-opentype'),
        /* url('../font/ntfont/NTBold.woff2') format('woff2'),
        url('../font/ntfont/NTBold.woff') format('woff'), */
        url('../font/ntfont/NTBold.ttf') format('truetype'),
        /* url('../font/ntfont/NTBold.svg#promptbold') format('svg') */;
    font-weight: normal;
    font-style : normal;
}

@font-face {
    font-family: 'ntReg';
    src        : url('../font/ntfont/NTRegular.eot');
    src        : url('../font/ntfont/NTRegular.eot?#iefix') format('embedded-opentype'),
        url('../font/ntfont/NTRegular.woff2') format('woff2'),
        url('../font/ntfont/NTRegular.woff') format('woff'),
        url('../font/ntfont/NTRegular.ttf') format('truetype'),
        /* url('../font/ntfont/NTRegular.svg#promptbold') format('svg') */;
    font-weight: normal;
    font-style : normal;
}

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

/* body{
    background-color: #000;
} */

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
}

/* body {
  min-width                : auto !important;
  background-repeat        : no-repeat;
  font-family              : 'ntReg';
  background               : #f7f7f7;
  filter                   : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF00A8FF', endColorstr='#FF8822B2', GradientType=1);
} */


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 75px;
}

body{
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
  background-color: #f7f7f7;
  font-size: 16px;
  height: 100vh;
  font-family: 'ntReg' !important;
}

h1,h2,h3,h4,h5,h6{
  margin: 0;
  padding: 0;
  line-height: normal;
}


/* ===== Customs CSS ===== */
.font-nt-bold{
  font-family: 'ntBold' !important;
}

/* - Main Section - */
.nt-bg-colver-yellow{
  background-color: #F1D430;
}


/* - Color - */
.nt-palate-yellow{
  color: #F1D430;
}
.nt-palate-gray{
  color: #53595F;
}

.nt-palate-black{
    color: #3A3A32;
}


/* - Background - */
.nt-bg-palate-yellow{
  background-color: #F1D430;
}
.nt-bg-palate-gray{
  background-color: #53595F;
}

.shape1 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background: #FFD100;
  z-index: -990;
  transform: skewY(5deg);
  transform-origin: top right;
  box-shadow: 0 0 0 1px rgba(53, 72, 91, .1), 0 3px 2px rgba(0, 0, 0, .04), 0 7px 5px rgba(0, 0, 0, .02), 0 13px 10px rgba(0, 0, 0, .02), 0 22px 17px rgba(0, 0, 0, .02) !important;
}
.shape2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background: #FFD100;
  z-index: -990;
  transform: skewY(175deg);
  transform-origin: top left;
  box-shadow: 0 0 0 1px rgba(53, 72, 91, .1), 0 3px 2px rgba(0, 0, 0, .04), 0 7px 5px rgba(0, 0, 0, .02), 0 13px 10px rgba(0, 0, 0, .02), 0 22px 17px rgba(0, 0, 0, .02) !important;
}
.shape3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background: #FFD100;
  z-index: -990;
  transform: skewY(5deg);
  transform-origin: top right;
}


/* - Button - */
.btnNt-ntyellow {
  background: #FFD100;
  color: #000000;
  border: 3px solid #FFD100;
  transition: all .16s;
}

.btnNt-disable {
  background:  #d5d8dc!important;
  color: #2c3e50!important;
  border: 3px solid  #d5d8dc!important;
  transition: all .16s
}


/* - Layout - */
.nt-main{
    position: relative;
    min-height: 100vh;
}
.nt-navber{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.whiteborad{
    background-color: #fff;
    border-radius: 25px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 0 0 1px rgba(53, 72, 91, .1), 0 3px 2px rgba(0, 0, 0, .04), 0 7px 5px rgba(0, 0, 0, .02), 0 13px 10px rgba(0, 0, 0, .02), 0 22px 17px rgba(0, 0, 0, .02) !important;
    z-index: 2;
    max-width: 1119px;
    margin: 0 auto;
}
.whiteborad .whiteborad-title{
    text-align: center;
}
.whiteborad .header-title{
    background-color: #3A3A32;
    border-radius: 8px;
    color: #FFF;
    font-size: 14px;
    padding: 6px 16px;
}

.note-description{
  padding: 1.5rem;
  position: relative;
  max-width: 1119px;
  margin: 0 auto;
}


.divide-nt-left{
  border-left: 4px solid #F1D430 !important;
  padding-left: 4px;
}
.divide-nt-tagY {
  border-radius: 20px;
  border: rgb(255, 209, 0) 1px solid;
  background: rgb(255, 209, 0);
  padding-left: 5px;
  margin-right: 5px;
}
.divide-nt-tagY-line {
  border-bottom: #FFD100 2px dotted;
  color: rgb(84,88,89);
}





/* === Loader NT === */
.ntLoader-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 990;
  overflow: hidden;
}
.ntLoader-container{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 991;
}
.ntLoader-container .ntLoader{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
  background: #fff;
  border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.ntLoader-container .ntLoader img{
  display: flex;
  align-items: center;
  width: 100px;
  z-index: 999;
}


/* --- Mod Loader Master --- */
.wrapper-loader{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  top: 0;
  left: 0;
}
.wrapper-loader-bg{
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #969696;
  opacity: .5;
  z-index: 990;
}
.wrapper-loader .container-loader{
  position: absolute;
  top: 40%;
  left: 45%;
  width: 140px;
  height: 140px;
  background: #fff;
  border: 4px solid #f7dc6f;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  opacity: 1;
  z-index: 991;
}
.wrapper-loader .nt-loader{
  position: relative;
  margin: 0 auto;
  padding-top: 3rem;
  color:  #FFC300;
  z-index: 992;
}
.wrapper-loader .nt-loader-msg{
  margin: 0 auto;
  text-align: center;
  color:  #666;
  font-weight: 600;
}

/* Type: 1 */
.wrapper-loader .type1{
  margin: 0 auto; 
  text-align: center;
}
.wrapper-loader .type1 > div{
  display : inline-block;
  background-color : #FFC300;
  height : 10px;
  width : 10px;
  border-radius : 50%;
  animation : stretchdelay 0.7s infinite ease-in-out;
  -webkit-animation : stretchdelay 0.7s infinite ease-in-out;
}
.wrapper-loader .type1 .dot1{
  animation-delay        : -0.6s;
  -webkit-animation-delay: -0.6s;
}
.wrapper-loader .type1 .dot2{
  animation-delay        : -0.5s;
  -webkit-animation-delay: -0.5s;
}
.wrapper-loader .type1 .dot3{
  animation-delay        : -0.4s;
  -webkit-animation-delay: -0.4s;
}
.wrapper-loader .type1 .dot4{
  animation-delay        : -0.3s;
  -webkit-animation-delay: -0.3s;
}

@-webkit-keyframes fade {
  0% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  75% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

@keyframes fade {
  0% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  75% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
      -webkit-transform: translateY(-10px)
  }
  20% {
      -webkit-transform: translateY(-20px)
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
      transform        : translateY(-10px);
      -webkit-transform: translateY(-10px);
  }
  20% {
      transform        : translateY(-20px);
      -webkit-transform: translateY(-20px);
  }
}


/* === Step === */
.stepper-wrapper {
  margin-top     : auto;
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 20px;
  max-width: 460px;
  width: 100%;;
}
.step-name {
  font-size  : 90%;
  font-weight: 300;
  text-align : center;
  color      : #3A3A32;
}
.stepper-item {
  position      : relative;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  flex          : 1;

  @media (max-width: 768px) {
      font-size: 12px;
  }
}
.stepper-item::before {
  position     : absolute;
  content      : "";
  border-bottom: 2px dotted #F8F9FA;
  width        : 100%;
  top          : 28px;
  left         : -50%;
  z-index      : 2;
}
.stepper-item::after {
  position     : absolute;
  content      : "";
  border-bottom: 2px dotted #F8F9FA;
  width        : 100%;
  top          : 28px;
  left         : 50%;
  z-index      : 2;
}
.stepper-item .step-counter {
  position       : relative;
  z-index        : 5;
  display        : flex;
  justify-content: center;
  align-items    : center;
  width          : 56px;
  height         : 56px;
  border-radius  : 50%;
  background     : linear-gradient(to left, #ffefba, #ffffff);
  margin-bottom  : 6px;
  color          : #F1D430;
  font-size      : 1.5rem;
}
.stepper-item.active {
  font-weight: bold;
}
.stepper-item.completed .step-counter {
  background: linear-gradient(to left, #232526, #414345);
  color     : #F1D430;
}
.stepper-item.completed::after {
  position     : absolute;
  content      : "";
  border-bottom: 2px dotted #000000;
  width        : 100%;
  top          : 28px;
  left         : 50%;
  z-index      : 3;
}
.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}


.hd_teaser{
  font-size: 2.5rem;
}