*{box-sizing: border-box}
:root {
    --blue: #0053a0;
}
body, html {scroll-behavior: smooth; margin:0; background-color:rgb(255, 255, 255); font-family: "Kanit", sans-serif; font-size:0px;}
h1,h2,h3,h4,h5,h6{outline:none;font-weight:inherit;font-size:inherit;color:inherit;margin:0;padding:0;display:inline}
a {text-decoration: none; color: inherit;}
.wrapper {margin:0px auto; max-width: 1100px; width: 95%;}
.big-wrapper {margin:0px auto; max-width: 1400px; width: 95%;}
.padding {padding:1% 0}
.text-wrapper {max-width: 800px; padding: 40px 0;}
.bigtitle {font-size:75px}
.title {font-size:45px; margin: 60px 0 40px;}
h1.title {font-size:32px;}
.subtitle {font-size:30px; line-height: 34px;}
.text {font-size:16px; line-height:20px; margin: 0;}
.white {color:#FFF}
.bg-white {background-color:#FFF}
.blue {color: var(--blue);}
.bg-blue {background-color: var(--blue);}
.black {color:black}
.bg-black {background-color:#000}
.caps {text-transform:uppercase}
.bold {font-weight:700}
.semi-bold {font-weight: 600;}
.light {font-weight:300}
.extralight {font-weight:200}
.rtl {direction:rtl}
.ltr {direction:ltr}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.hidden {display: none !important; opacity: 0;}
.noinput {position:absolute; left:-200%; opacity:0}
.left-transition {transform: translateX(100px);}
.right-transition {transform: translateX(-100px);}
.motionEase {transition: ease-in .3s;}
.opacity0 {opacity: 0.01;}
.absolute {position: absolute;}

u {text-decoration-color: var(--blue);}

.text8 {font-size: 8px;}
.text10 {font-size: 10px;}
.text12 {font-size: 12px;}
.text14 {font-size: 14px;}
.text16 {font-size: 16px; line-height: 22px;}
.text18 {font-size: 18px;}
.text20 {font-size: 20px; line-height: 30px;}
.text22 {font-size: 22px;}
.text26 {font-size: 26px; line-height: 30px;}
.text28 {font-size: 28px; line-height: 35px;}
.text30 {font-size: 30px;}
.text34 {font-size: 34px; letter-spacing:-1px; line-height:32px}
.text40 {font-size: 40px; letter-spacing:-1px; line-height: 38px;}
.text45 {font-size: 45px; letter-spacing:-1px; line-height: 42px;}
.text50 {font-size: 50px; line-height: 55px}
.text60 {font-size: 60px; line-height: 1.2;}

#hero {}
#hero .hero-wrapper {width: 100%; height: 600px;}
#hero .hero-wrapper img {width: 100%; height: 100%; object-fit: cover; object-position: bottom;}
#hero .lang-pastille {right: 0; font-size: 22px; padding: 15px; position: absolute; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}

#form {margin: 40px 0 80px;}
#form label {width: 98%; display: block; margin: 0 auto;}
#form .custom-input {padding: 15px; display: inline-block; width: 48%; margin: 10px 1%; border: 1.5px solid black; border-radius: 5px;}
#form .custom-file {vertical-align: top; display: inline-block; width: 48%; margin: 10px 1%;}
#form input[type="button"] {cursor: pointer; padding: 8px 35px; border-radius: 5px; background-color: #0053a0; color: white; font-size: 18px; font-weight: bold; display: inline-block; border: none;}

#footer {text-align: center; padding: 40px 0; margin-top: 40px;}

@media (max-width:600px) {
    .title {font-size: 35px;}

    #form .custom-input {width: 100%; margin: 5px 0;}
    #form .custom-file {width: 100%; margin: 20px 0 10px;}
}