html {
  overflow-x: hidden;
}

body{
  overflow: hidden;
}

html, body {
  --type-ramp-base-font-size: 20px;
  --calendar-cell-size: 35px;
  --design-unit: 6;
  padding: 0px;
  margin: 0px;
  font-size: 20px;
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  color: #3a67de;
}

.wt-container-outer {
  width: 100%;
  box-sizing: border-box;
}

.wt-container-inner {
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.wt-body-image{
  width: 100%;
  max-width: 300px;
}
.wt-body-image-small{
  width: 100%;
  max-width: 200px;
}
.wt-page-form {
  text-align: center;
}

.wt-segment-h1 {
  padding: 0px;
  margin: 0px;
  font-weight: 500;
  font-size: 30px;
}

.wt-segment-h2 {
  padding: 0px;
  margin: 0px;
  font-weight: 500;
  font-size: 30px;
}

.wt-segment-h3 {
  padding: 0px;
  margin: 0px;
  font-weight: 200;
  font-size: 30px;
}
.wt-segment-h3 {
  padding: 0px;
  margin: 0px;
  font-weight: 200;
  font-size: 25px;
}
.wt-segment-p {
  font-weight: 400;
  font-size: 20px;
}

.wt-segment-bold{
  font-weight:500;
}

.wt-segment {
  padding-top: 100px;
  padding-bottom: 100px;
}

.wt-center {
  text-align: center;
}

.wt-invert {
  color: #ffffff;
  background-color: #3a67de;
}

.wt-head {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
}
.wt-head .wt-logo img {
  transition: all 0.2s ease-out;
  height: 50px;
  cursor: pointer;
}
.wt-head.active {
  background-color: #3a67de;
  transition: all 0.2s ease-out;
}
.wt-head.active .wt-logo img {
  height: 40px;
}
@media (max-width: 900px) {
  .wt-head .wt-logo img {
    height: 40px;
  }
}
.wt-head a {
  color: white;
  text-decoration: none;
  font-weight: 200;
}
.wt-head a.active {
  font-weight: 400;
}

.wt-head-content {
  display: flex;
  align-items: center;
}

.wt-mobilemenu {
  margin-left: auto;
  display: none;
}
@media (max-width: 1000px) {
  .wt-mobilemenu {
    display: block;
  }
}

.wt-sc-navigation {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
@media (max-width: 1000px) {
  .wt-sc-navigation {
    display: none;
  }
}
.wt-sc-navigation .wt-sc-navigation-separator {
  height: 30px;
  background-color: rgba(255, 255, 255, 0.7019607843);
  width: 1px;
}
@media (max-width: 1000px) {
  .wt-sc-navigation .wt-sc-navigation-separator {
    display: none;
  }
}
.wt-sc-navigation.active {
  margin-left: auto;
  display: flex;
  gap: 30px;
  flex-direction: column;
  position: fixed;
  background-color: #022b89;
  width: 100%;
  top: 0px;
  left: 0px;
  padding: 30px;
  font-size: 30px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
}

.wt-page-home {
  height: 900px;
  background-image: url("img/tback.webp");
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 1600px) {
  .wt-page-home {
    height: 650px;
  }
}
@media (max-width: 1200px) {
  .wt-page-home {
    height: 500px;
  }
}
.wt-page-home .wt-shape-left {
  position: absolute;
  top: 0px;
  left: 0px;
}
@media (max-width: 1600px) {
  .wt-page-home .wt-shape-left {
    height: 650px;
  }
}
@media (max-width: 1200px) {
  .wt-page-home .wt-shape-left {
    height: 500px;
  }
}
.wt-page-home .wt-shape-right {
  position: absolute;
  top: 0px;
  right: 0px;
}
@media (max-width: 1600px) {
  .wt-page-home .wt-shape-right {
    height: 650px;
  }
}
@media (max-width: 1200px) {
  .wt-page-home .wt-shape-right {
    height: 500px;
  }
}


.wt-workshow{
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.wt-workshow-image{
  box-shadow: 4px 6px 13px -3px rgba(0,0,0,0.82);
-webkit-box-shadow: 4px 6px 13px -3px rgba(0,0,0,0.82);
-moz-box-shadow: 4px 6px 13px -3px rgba(0,0,0,0.82);

 width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;

 box-sizing:border-box;
}
.wt-workshow-image img{
 width: 100%;
  height: auto;
  transform: translateY(0%);
  transition: transform 2s ease;
}

.wt-workshow-image:hover img{
  transform: translateY(-60%);
}

.wt-sysshow {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.wt-sysshow-image {
  box-shadow: 4px 6px 13px -3px rgba(0, 0, 0, 0.82);
  -webkit-box-shadow: 4px 6px 13px -3px rgba(0, 0, 0, 0.82);
  -moz-box-shadow: 4px 6px 13px -3px rgba(0, 0, 0, 0.82);

  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
}

.wt-sysshow-image img {
  width: 100%;
  height: auto;
  transform: translateY(0%);
  transition: transform 2s ease;
}






.wt-slider {
  color: white;
  position: relative;
}
.wt-slider .wt-slide .ll {
  opacity: 0 !important;
  left: -1000x !important;
}
.wt-slider .wt-slide .lr {
  opacity: 0 !important;
  right: 1000px !important;
}
.wt-slider .wt-slide .rr {
  opacity: 0 !important;
  right: -1000px !important;
}
.wt-slider .wt-slide .rl {
  opacity: 0 !important;
  left: 1000px !important;
}
.wt-slider .wt-slide .slidebold {
  font-weight: 400;
}
.wt-slider .wt-slide .wt-slide-item {
  transition: all 0.5s ease-out;
}

#slide1text,#slide2text,#slide3text{
  transition: all 0.5s ease-out;
}

.wt-slider .wt-slide.slide1 #slide1text {
  position: absolute;
  top: 300px;
  left: 0px;
  font-size: 50px;
  font-weight: 100;
  line-height: 50px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide1 #slide1text {
    top: 200px;
    font-size: 45px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide1 #slide1text {
    top: 150px;
    font-size: 40px;
  }
}
@media (max-width: 700px) {
  .wt-slider .wt-slide.slide1 #slide1text {
    top: 200px;
    font-size: 30px;
    width:100%;
    text-align:center;
    line-height: 35px;
  }
}
.wt-slider .wt-slide.slide1 #slide1image {
  position: absolute;
  top: 200px;
  right: 0px;
  width: 650px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide1 #slide1image {
    width: 550px;
    top: 150px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide1 #slide1image {
    width: 400x;
    top: 100px;
  }
}
@media (max-width: 700px) {
  .wt-slider .wt-slide.slide1 #slide1image {
    width: 300px;
    top: 0px;
    right: auto;
    left: 50%;
    margin-left: -150px;
  }
}
.wt-slider .wt-slide.slide2 #slide2text {
  position: absolute;
  top: 300px;
  left: 0px;
  font-size: 50px;
  font-weight: 100;
  line-height: 50px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide2 #slide2text {
    top: 200px;
    font-size: 45px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide2 #slide2text {
    top: 150px;
    font-size: 40px;
  }
}
@media (max-width: 700px) {
  .wt-slider .wt-slide.slide2 #slide2text {
    top: 200px;
    font-size: 30px;
    right: 0px;
    right:auto;
    width:100%;
    text-align:center;
    line-height: 35px;
  }
}
.wt-slider .wt-slide.slide2 #slide2image {
  position: absolute;
  top: 200px;
  right: 0px;
  width: 500px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide2 #slide2image {
    width: 500px;
    top: 150px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide2 #slide2image {
    width: 300px;
    top: 100px;
  }
}

@media (max-width: 700px) {
  .wt-slider .wt-slide.slide2 #slide2image {
    width: 300px;
    top: 0px;
    left: auto;
    left: 50%;
    margin-left: -150px;
  }
}

.wt-slider .wt-slide.slide3 #slide3text {
  position: absolute;
  top: 300px;
  left: 0px;
  font-size: 50px;
  font-weight: 100;
  line-height: 50px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide3 #slide3text {
    top: 200px;
    font-size: 45px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide3 #slide3text {
    top: 150px;
    font-size: 40px;
  }
}
@media (max-width: 700px) {
  .wt-slider .wt-slide.slide3 #slide3text {
    top: 200px;
    font-size: 30px;
    width:100%;
    text-align:center;
    line-height: 35px;
  }
}
.wt-slider .wt-slide.slide3 #slide3image {
  position: absolute;
  top: 200px;
  right: 0px;
  width: 500px;
  opacity: 1;
  display: inline-block;
}
@media (max-width: 1600px) {
  .wt-slider .wt-slide.slide3 #slide3image {
    width: 500px;
    top: 150px;
  }
}
@media (max-width: 1200px) {
  .wt-slider .wt-slide.slide3 #slide3image {
    width: 300px;
    top: 100px;
  }
}
@media (max-width: 700px) {
  .wt-slider .wt-slide.slide3 #slide3image {
    width: 300px;
    top: 0px;
    right: auto;
    left: 50%;
    margin-left: -150px;
  }
}



.contact-form input.textcontrol{
border: 2px solid #3a67de;
    border-radius: 5px;
    line-height: 40px;
    width: 100%;
    max-width: 400px;
    color: #3a67de;
    font-size: 20px;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.contact-form input.numbercontrol{
border: 2px solid #3a67de;
    border-radius: 5px;
    line-height: 40px;
    width: 100%;
    max-width: 80px;
    color: #3a67de;
    font-size: 20px;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* .contact-form .form-check-input{
  scale: 2;
} */
input[type='radio']{
  width: 0px;
  height: 0px;
}
 input[type='radio']:after {
  width: 20px;
    height: 20px;
    border-radius: 20px;
        top: -13px;
    left: -27px;
    position: relative;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #3a67de;
    }

    input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    top: -13px;
    left: -27px;
    position: relative;
    background-color: #3a67de;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 5px solid #ffffff;
    }

.contact-form textarea{
    border: 2px solid #3a67de;
    border-radius: 5px;
    line-height: 40px;
    width: 100%;
    max-width: 600px;
    color: #3a67de;
    font-size: 20px;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #ffffff;
}

input::placeholder {
  color: rgb(209, 209, 209);
}

.contact-form button{
  border: 1px solid white!important;
}

.contact-form button:hover{
  border: 1px solid white;
  color: #3a67de;
  background-color: #ffffff;
  cursor: pointer;
}

.contact-form .btn-primary{
      color: white;
    background-color: #3a67de;
    border: 1px solid #3a67de;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 5px;
}



.form-part{
  padding-bottom:30px;
}

.form-check{
  display: flex;
  align-items: center;
  justify-content: center;
}


.validation-message{
      color: #fd9595;
  
}


.wt-ck-cont {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 999;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
  font-size: 15px;
}
.wt-ck-cont .wt-ck {
  margin: auto;
  width: 100%;
  max-width: 600px;
  background-color: white;
  padding: 20px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
}
.wt-ck-cont .wt-ck .wt-ck-title {
  font-size: 20px;
  padding-bottom: 20px;
}
.wt-ck-cont .wt-ck .wt-ck-main {
  padding-bottom: 20px;
}
.wt-ck-cont .wt-ck .wt-ck-title-sub {
  font-size: 17px;
  padding-bottom: 20px;

}
.wt-ck-cont .wt-ck .wt-ck-title-sub span{
  cursor: pointer;
}
.wt-ck-cont .wt-ck .wt-ck-main-sub {
  padding-bottom: 20px;
}
.wt-ck-cont .wt-ck .wt-ck-btns {
  text-align: right;
}

.wt-ck-cont input[type="checkbox"]{
  scale: 1.7;
}

.wt-ck-cont button{
 
      color: #3a67de;
    background-color: #ffffff;
    border: 1px solid #3a67de;
    font-size: 17px;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 2px;
}

.wt-ck-cont button:hover{
  border: 1px solid 3a67de;
  color: white;
  background-color: #3a67de;
  cursor: pointer;
}

.wt-page-contact .wt-page-contact-seg{
  padding-bottom: 35px;
}

.photobuble img{
  width: 300px;
  height: 300px;
}


#blazor-error-ui {
  display: none;
}




#components-reconnect-modal{
  display: none!important;
}
.btprice {
    background-color: #04ac0a;
      text-decoration: none;
      padding: 6px 15px;
      color: white;
      position: absolute;
      transition: all 0.5s ease-out;
      display: inline-block;
      z-index: 8;
      cursor: pointer;
      border-radius: 5px 5px 0px 0px;
      bottom: 0px;
}


.btclose{
  color: black;
  cursor: pointer;
}
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}


.dialog {
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.dialog-content {
      padding: 20px;
        overflow-y: auto;
        color: #6d6d6d;
        text-align: left;
        font-size: 70%;
}

input[type=checkbox]{
  zoom: 2;
}

.lb-gdpr{
  cursor: pointer;
  text-decoration: underline;
}