@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-SemiBold.woff?v=3.19") format("woff");
}  
@font-face{
  font-family: Mitr-Bold;
  src: url(../fonts/Mitr-Bold.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: Mitr-ExtraLight;
  src: url(../fonts/Mitr-ExtraLight.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: Mitr-Light;
  src: url(../fonts/Mitr-Light.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: Mitr-Medium;
  src: url(../fonts/Mitr-Medium.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: Mitr-Regular;
  src: url(../fonts/Mitr-Regular.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: Mitr-SemiBold;
  src: url(../fonts/Mitr-SemiBold.ttf);
  font-style: normal;
  font-variant:initial;
}   
@font-face{
  font-family: IBMPlexSansThaiLooped-Regular;
  src: url(../fonts/IBMPlexSansThaiLooped-Regular.ttf);
  font-style: normal;
  font-variant:initial;
}  
@font-face{
  font-family: IBMPlexSansThaiLooped-SemiBold;
  src: url(../fonts/IBMPlexSansThaiLooped-SemiBold.ttf);
  font-style: normal;
  font-variant:initial;
}  
a:hover{
  text-decoration: none;
}  
   
@media only screen and (max-width: 1024px) { /* MOBILE */
  .mb-x{
    display: none !important;
  }  
}
@media only screen and (min-width: 1025px) { /* PC */
  .pc-x{
    display: none !important;
  }  
}  

@media (min-width: 1200px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1240px !important;
  }
}
header nav{
  height: 80px;
  background: #FFFFFF;
  border-bottom: 1px solid #F4F4F4; 
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
}
header nav .navbar-brand{
  font-family: Mitr-Bold;
  font-weight: 600;
  font-size: 24px;
  line-height: 160.5%; 
  background: linear-gradient(93.57deg, #4C6FFF -8.15%, #25AAE1 109.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  text-shadow: 0px 4px 47px rgba(50, 165, 252, 0.32); 
}
header nav .nav-item a{
  font-family: Mitr-SemiBold;
  font-weight: 600;
  font-size: 24px;
  line-height: 20px; 
  color: #000; 
}
header nav .nav-item.border-right{
  margin-top: 5px;
  height: 30px;
  padding-right: 20px;
  margin-right: 10px;
}
header nav  .flag img{
  height: 40px;
  width: 40px;
}
.sec1{ 
  background: #F0F6FE;
  padding-top: 50px;
  padding-bottom: 120px;
}
.sec1 .b2{ 
  background: linear-gradient(115.13deg, #4C6FFF 3.54%, #3F88F5 91.61%);
  border-radius: 75px 0px 0px 75px;
  height: 435px;
  padding: 44px 72px 0px 62px;
}
.sec1 h1{ 
  font-family: Mitr-SemiBold; 
  font-weight: 500;
  font-size: 48px; 
  color: #FFFFFF; 
  margin-bottom: 15px; 
} 
.sec1 h3{ 
  font-family: Mitr-Regular; 
  font-weight: 400;
  font-size: 24px; 
  color: #FFFFFF; 
  margin-bottom: 48px; 
}
.sec1 h5{ 
  font-family: Mitr-Regular; 
  font-weight: 400;
  font-size: 24px; 
  color: #FFFFFF; 
  margin-bottom: 8px;  
}
.contact-sec1{
  margin-top: 65px;
}




.sec2{
  padding-top: 80px;
  padding-bottom: 80px;
}
.sec2 h1{ 
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 48px; 
  color: rgba(0, 0, 0, 0.83);
  margin-bottom: 20px;
}
.sec2 h2{ 
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px; 
  padding-left: 17px;
  border-left: 4px solid #4C6FFF;
  color: rgba(0, 0, 0, 0.83);
  margin-bottom: 40px;
}
.sec2 .box-cover{  
  background: url(../images/question-mark.png) , linear-gradient(107.3deg, #4977FD 0.93%, #49A7FD 106.97%) !important;
  background-position: top right -39px , center !important;  
  background-repeat: no-repeat , no-repeat !important;
  background-size: 136px , 100% !important; 
  border-radius: 16px;
}
.sec2 .box2{  
  padding: 24px;   
  height: 204px; 
  background: #FFFFFF;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  margin-bottom: 24px;
}
.sec2 .box2 .in{  
  width: 72px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(142.22deg, #F4FCFF 0%, #D1F1FF 100.2%);
  border-radius: 9px; 
  margin-bottom: 8px;
}
.sec2 .box2 .in img{  
  width: 48px;
  height: 48px;
}
.sec2 .box2 h3{  
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
  line-height: 38px; 
  color: rgba(0, 0, 0, 0.83);
}
.sec2 .box-cover h3{  
  color: #fff !important;
  position: absolute;
  bottom: 0;
}
.box-like{
  margin-top: 150px;
  width: 1031px;
  height: 252px; 
  background: linear-gradient(93.57deg, #4C6FFF -8.15%, #25AAE1 109.3%);
  border: 6px solid #FFFFFF;
  box-shadow: 0px 4px 33px rgba(50, 165, 252, 0.5);
  border-radius: 44px;
  padding: 40px 70px 24px;
  position: relative;
}
.sec2 h4{  
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 32px; 
  color: #fff;
}
.sec2 h3{  
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 40px; 
  color: #fff;
  margin-bottom: 50px;
}
.sec2 h6{  
  font-family: Mitr-Regular;
  font-weight: 400; 
  font-size: 18px; 
  color: rgba(255, 255, 255, 0.79);
}
.like-b{
  position: absolute;
  bottom: 0;
  margin-bottom: 0px;
}
.sec3{
  background: #FAFAFA;
  padding-top: 80px;
  padding-bottom: 80px;
}
.sec3 h6{
  font-family: Mitr-Regular;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase; 
  color: #4C6FFF;
}
.sec3 h1{
  font-family: Mitr-Regular;
  margin-top: 25px;
  font-weight: 400;
  font-size: 50px;
  line-height: 62px; 
  text-align: center; 
  color: #170F49;
  margin-bottom: 12px;
}
.sec3 h2{
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px; 
  text-align: center; 
  color: rgba(102, 102, 102, 0.83);
  margin-bottom: 40px;
}
.package{
  padding: 24px 16px;   
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 32px; 
}
.package h1{
  font-family: IBMPlexSansThaiLooped-SemiBold;
  font-weight: 600;
  font-size: 40px;
  line-height: 134%; 
  color: #000000;
  text-align: left;
  margin-top: 0px !important;
  margin-bottom: -10px !important;
}
.package h1 span{
  font-size: 22px; 
  font-weight: 500;
  color: #000000;
}
.package h5{
  font-family: IBMPlexSansThaiLooped-SemiBold;
  font-weight: 500;
  font-size: 14px;
  line-height: 23px; 
  color: rgba(102, 102, 102, 0.83);
}
.package .inner{
  border: 2px solid #EBEBEB;
  margin-top: 16px;
  padding: 8px 16px; 
  height: 69px;  
  box-shadow: 0px 4px 16px rgba(50, 165, 252, 0.04);
  border-radius: 19px;
  background: #FFFFFF;
  position: relative;
}
.package .inner p{
  top: 18px;
  right: 16px;
  position: absolute;
  padding: 4px 16px; 
  min-width: 113px;
  height: 33px; 
  background: #FFFFFF;
  border-radius: 31px;
  text-align: center; 
  font-family: Mitr-Regular; 
  font-weight: 500;
  font-size: 16px;
  line-height: 25px; 
  color: #4C6FFF;
}
.package h4{
  font-family: IBMPlexSansThaiLooped-SemiBold;
  font-size: 32px;
  color: #000;
  line-height: 50px;
}
.package.bg h4{ 
  color: #fff !important; 
}
.package h4 span{ 
  font-family: Mitr-Regular;  
  font-size: 24px; 
}
.package.bg-orange h1{
  color: #EF963D !important;
} 
.package.bg-orange .inner{
  border: 0px !important;
  background: linear-gradient(93.57deg, #FFB35A -8.15%, #E17F25 109.3%);
}
.package.bg-green h1{
  color: #1CA356 !important;
} 
.package.bg-green .inner{
  border: 0px !important;
  background: linear-gradient(93.57deg, #39C022 -8.15%, #008686 109.3%);
} 
.package.bg-sky h1{
  color: #59ABFF !important;
} 
.package.bg-sky .inner{
  border: 0px !important;
  background: linear-gradient(93.57deg, #4CBFFF -8.15%, #5BA7FF 109.3%);
} 
.package.bg-blue h1{
  color: #4537EF !important;
} 
.package.bg-blue .inner{
  border: 0px !important;
  background: linear-gradient(93.57deg, #654CFF -8.15%, #2925E1 109.3%);
} 
.package.bg-purple h1{
  color: #7036EE !important;
} 
.package.bg-purple .inner{
  border: 0px !important;
  background: linear-gradient(93.57deg, #C64CFF -8.15%, #3425E1 109.3%);
}  
.package .inner .contact{
  padding: 8px; 
  width: 44px;
  height: 44px; 
  background: #F7F7F7;
  border-radius: 9px; 
  position: absolute;
  right: 16px;
  top: 14px;
}
.package .inner .contact:nth-child(2){ 
  right: 65px; 
} 
.package .inner .contact div{ 
  position: relative;
  text-align: center;
} 
.package .inner .contact div img{  
  width: 30px;
  height: 30px;
} 
.sec4{ 
  padding-top: 80px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #67C0F7;
}
.sec4 h6{
  font-family: Mitr-Regular;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase; 
  color: #4C6FFF;
}
.sec4 h1{
  font-family: Mitr-Regular;
  margin-top: 25px;
  font-weight: 400;
  font-size: 50px;
  line-height: 62px; 
  text-align: center; 
  color: #170F49;
  margin-bottom: 12px;
}
.sec4 h2{
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px; 
  text-align: center; 
  color: rgba(102, 102, 102, 0.83);
  margin-bottom: 40px;
}
.sec4 .workflow{
  padding-left: 124px;
  position: relative;
  margin-bottom: 60px;
}
.sec4 .workflow img{
  position: absolute;
  left: 0;
  height: 100px;
  border-radius: 100%;
}
.sec4 .workflow h3{
  font-family: IBMPlexSansThaiLooped-SemiBold;
  font-weight: 600;
  font-size: 50px;
  line-height: 82px; 
  color: rgba(0, 0, 0, 0.83); 
}
.sec4 .workflow h4{
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 22px;
  line-height: 38px;
  color: rgba(0, 0, 0, 0.83); 
}
.sec5 .box-like2{ 
  margin-top: 250px;
  margin-bottom: 250px;
  height: 315px; 
  width: 100%;
  background: linear-gradient(93.57deg, #4C6FFF -8.15%, #25AAE1 109.3%);
  border: 6px solid #FFFFFF;
  box-shadow: 0px 4px 33px rgba(50, 165, 252, 0.5);
  border-radius: 44px;
  border-radius: 44px;
  padding: 53px 66px;
  position: relative;
}
.sec5 .box-like2 h3{ 
  font-family: Mitr-Regular;
  color: #fff;
  font-size: 48px;
  line-height: 62px;
}
.sec5 .box-like2 h6{ 
  font-family: IBMPlexSansThaiLooped-SemiBold;
  font-size: 24px;
  line-height: 40px; 
  color: rgba(255, 255, 255, 0.83);
}
.sec5 .like-b{
  position: absolute; 
  bottom: 0;
  margin-bottom: -180px; 
  width: 440px; 
}
.sec5 h2{ 
  font-family: Mitr-Regular;
  font-style: normal;
  font-weight: 400;
  font-size: 40px; 
  color: #000000;
  margin-bottom: 10px;
}
.sec5 h1{ 
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 50px;
  color: #4C6FFF;
  margin-bottom: 40px;
}
.sec6{   
  background: url(../images/Ellipse-442.png) , #FAFAFA !important;
  background-position: bottom 100px center , center !important;  
  background-repeat: no-repeat , no-repeat !important;
  background-size: 594px auto , 100% !important;  
  padding-top: 60px;    
  margin-bottom: -110px; 
}    
.sec7{  
  background: #fff; 
  padding-top: 230px;  
} 
.sec7 .container-fluid{
  height: 436px;
  background: url(../images/bg-93.png) !important;
  background-position: center center !important;  
  background-repeat: no-repeat !important;
  background-size: 100%  auto  !important;  

}
.sec7 .container-fluid{ 
  padding-top: 78px; 
}
.sec7 .container-fluid h1{
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 50px; 
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 32px;
}
.contact-ck{
  padding: 24px; 
  width: 390px;
  height: 121px;
  margin-left: 16px;
  margin-right: 16px;
  background: #FFFFFF;
  border: 3px solid #EDEDED;
  box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  position: relative;
} 
.contact-ck img{
  height: 72px;
  position: absolute;
} 
.contact-ck h4{
  padding-left: 90px;
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 0px;
} 
.contact-ck h2{
  padding-left: 90px;
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 40px;
} 
.contact-ck h4{
  padding-left: 90px;
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
} 
.contact-ck.contact1{
  color: #4CAF50;
} 
.contact-ck.contact2{
  color: #0084FF ;
} 
.contact-ck h3{
  font-family: Mitr-Regular;
  color: #fff;
  margin-top: 20px;
  padding-left: 0px;
  margin-left: -25px;
  font-size: 22px;
  line-height: 50px;
} 
footer{
  padding: 40px; 
  height: 206px; 
  background: #FFFFFF;
}
footer h3{
  font-family: Mitr-SemiBold;
  font-weight: 600;
  font-size: 24px;
  color: #000;
}
footer h4{
  font-family: Mitr-Regular;
  font-weight: 400;
  font-size: 24px;
  color: #000;
  margin-bottom: 15px;
}
footer h6{
  font-family: Mitr-Light;
  font-weight: 300;
  font-size: 20px;
  color: #000;
}
.f-bot{
  margin-top: -60px;
  position: relative;
}
footer a img{
  height: 63px;
  margin-left: 15px;
  margin-right: 15px;
}
 
 
 
@media only screen and (max-width: 1024px) { /* MOBILE */  
  footer{
    display: none;
  }
  .sec1{
    background: linear-gradient(115.13deg, #4C6FFF 3.54%, #3F88F5 91.61%);
    padding-bottom: 0px;
  }
  header nav{
    height: 80px;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    border-bottom: 0px solid #F4F4F4; 
    box-shadow: none !important;
  }
  header nav .navbar-brand img{
    height: 35px;
  }
  header nav .navbar-brand{
    color: #fff !important;
    font-size: 16px;
    background: linear-gradient(93.57deg, #fff -8.15%, #fff 109.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
  }
  .sec1 .col-xl-5 img{
    height: 196px;
  }
  .sec1 h1{
    font-size: 22px; 
  }
  .sec1 .b2 {
    background: transparent;
    border-radius: 0px;
    height: unset;
    padding: 20px;
  }
  .sec1 h3{
    font-size: 12px; 
    margin-bottom: 16px;
  }
  .sec1 h5{
    font-size: 14px; 
  }
  .sec1 h5 img{
    height: 15px; 
  }
  .sec1 .contact-ck{
    width: 50%;
    border-radius: 10px;
  }
  .contact-ck { 
    width: 158px !important;
    padding: 10px; 
    height: 60px;
    margin-left: 4px;
    margin-right: 4px; 
  }
  .contact-ck img {
    height: 28px; 
  }
  .contact-ck h4 {
    padding-left: 37px; 
    font-size: 10px;
  }
  .contact-ck h2 {
    padding-left: 37px; 
    font-size: 16px;
  }
  .contact-sec1{
    margin-top: 30px;
    margin-bottom: -60px;
  } 
  .sec2 h1 { 
    font-size: 18px; 
  }
  .sec2 h2 { 
    font-size: 14px; 
  }
  .sec2 .box2 {
    padding: 8px;
    height: 146px; 
    border-radius: 16px;
    margin-bottom: 16px;
  }
  .sec2 .box2 h3 { 
    font-size: 13px;
    line-height: 20px; 
  }
  .box-like {
    margin-top:  50px;
    width: 100%;
    height: 131px;  
    padding:  24px; 
    border: 2.07143px solid #FFFFFF;
    box-shadow: 0px 1.38095px 11.3929px rgba(50, 165, 252, 0.5);
    border-radius: 15.1905px;
  } 
  .sec2  { 
    padding-left: 20px;
    padding-right: 20px;
  }
  .sec2 h4 { 
    font-size: 11px; 
  }
  .sec2 h4 img{ 
    height: 16px;
  }
  .sec2 h3{ 
    font-size: 16px;
    margin-bottom: 20px;
  }
  .sec2 h6{ 
    font-size: 8px; 
  }
  .like-b{
    height: 100px;
    margin-top: 20px;
  }
  .sec3 { 
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .sec3 h6{ 
    font-size: 16px; 
    margin-bottom: 8px;
  }
  .sec3 h1{ 
    font-size: 32px; 
    margin-bottom: 8px;
    margin-top: 0px;
    line-height: 30px;
  }
  .sec3 h2{ 
    font-size: 14px; 
    line-height: 23px;
  }
  .package h1 span {
    font-size: 20px; 
  }
  .sec4 { 
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .sec4 h6{ 
    font-size: 16px; 
    margin-bottom: 8px;
  }
  .sec4 h1{ 
    font-size: 32px; 
    margin-bottom: 8px;
    margin-top: 0px;
    line-height: 30px;
  }
  .sec4 h2{ 
    font-size: 14px; 
    line-height: 23px;
  }
  .sec4 .workflow img { 
    height: 60px; 
  }
  .sec4 .workflow {
    padding-left: 87px;
    position: relative;
    margin-bottom: 40px; 
  }
  .sec4 .workflow h3 { 
    font-size: 32px;
    line-height: 53px;  
  }
  .sec4 .workflow h4{ 
    font-size: 16px;
    line-height: 25px;  
  }
  .sec5 .box-like2{
    margin-top: 0px;
    border: none;
    border-radius: 0;
    padding: 32px 43px;
    margin-bottom: 0px;
    height: unset;
  }
  .sec5 .box-like2 h3 { 
    font-size: 24px;
    line-height:  38px;
    text-align: center;
  }
  .sec5 .box-like2 h6 { 
    font-size: 13px;
    line-height:  21px;
    text-align: center;
  }
  .sec5 .like-b { 
    height: unset !important;
    max-width: 100%;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    position: relative;
  }
  .sec5 h2 { 
    margin-top: 50px;
    font-size: 24px; 
  }
  .sec5 h1 {  
    font-size: 32px; 
  }
  .sec6 {
    background:   #FAFAFA !important;
    background-position: center !important;
    background-repeat:  no-repeat !important;
    background-size:  100% !important;
    padding-top: 20px;
    margin-bottom: 0px;
    padding-bottom: 50px;
  }
  .sec7 { 
    padding-top: 0px;
  }
  .sec7 .container-fluid {
    padding-top: 0px; 
    background-size: auto 100%  !important;
  }
  .sec7 .container-fluid h1 {
    padding-top: 40px;
    font-size: 32px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 32px;
  }
  .sec7 .contact-ck {
    width: 100% !important;
    margin-bottom: 50px;
    border-radius: 20px;
    height: 100px;
    padding: 20px;
  }
  .sec7 .contact-ck img{
    height: 60px;
  }
  .sec7 .justify-content-center > a{
    width: 85%;
  }
  .sec7 .contact-ck h4 {
    padding-left: 75px;
    font-size: 20px;
  }
  .sec7 .contact-ck h2 {
    padding-left: 75px;
    font-size: 32px;
  }
  .contact-ck h3 {
    font-family: Mitr-Regular;
    color: #fff;
    margin-top: 24px;
    padding-left: 0px;
    margin-left: 0px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
  }
  .position-absolute.rig{
    right: 15px;
  }
  .package h4{ 
    font-size: 24px; 
  }
} 

@media only screen and (min-width: 1025px) { /* PC */

  .sec6 .container .row > div:nth-child(1) img{  
    max-height: 640px;
  }
  .sec6 .container .row > div:nth-child(2) img{  
    margin-top: 58px !important;
    height: 760px;
    margin-top: 58px;
  } 
  .sec6 .container .row > div:nth-child(3) img{   
    max-height: 587px;
    margin-top: 121px !important;  
  }  
  .sec1 .contact-h {
    width: 257px !important;
    padding: 15px 10px 15px 15px;
    height: 100%;
  }
  .contact-h img {
    height: 55px; 
  }
  .contact-h h4 {
    padding-left: 70px;
    font-family: Mitr-Regular;
    font-weight: 400;
    font-size: 17px;
  }
  .contact-h h2 {
    padding-left: 70px;
    font-family: Mitr-Regular;
    font-weight: 400;
    font-size: 30px;
  }
}  
  
@media only screen and (min-width: 1626px) { /* PC */  
  .sec1 .contact-ck {  
    width: 390px !important; 
  } 
}