@font-face {font-family: 'DIN';src: url('../fonts/DIN-BoldAlternate.woff2') format('woff2'),url('../fonts/DIN-BoldAlternate.woff') format('woff');font-weight: bold;font-style: normal;font-display: swap;}
@font-face {font-family: 'DIN 2014';src: url('../fonts/DIN2014-Bold.woff2') format('woff2'),url('../fonts/DIN2014-Bold.woff') format('woff');font-weight: bold;font-style: normal;font-display: swap;}
@font-face {font-family: 'DIN 2014';src: url('../fonts/DIN2014-Light.woff2') format('woff2'),url('../fonts/DIN2014-Light.woff') format('woff');font-weight: 300;font-style: normal;font-display: swap;}


* {box-sizing: border-box;padding: 0;margin: 0;}
body {background-color: #000000;color: #FAFAF9;font-family: 'DIN 2014';font-weight: 300;height: 100vh;}

.form-wrp {display: flex;align-items: center;height: 100vh;}
form {max-width: 630px;margin: 0 auto 0 auto;width: 100%;}
form .form-heading {max-width: 596px;margin: 0 auto;padding-bottom: 58px;}
form .form-heading h2 {color: #FAFAF9;font-size: 56px;font-weight: 300;line-height: 64px;letter-spacing: 0.61px;text-align: center;}
form .opt-inputs {position: relative;margin-bottom: 30px;}
form .opt-inputs::before {content: '';background: url(../images/left-corner.svg) no-repeat center;background-size: contain;width: 61px;height: 100%;position: absolute;left: -55px;top: 0;}
form .opt-inputs::after {content: '';background: url(../images/right-corner.svg) no-repeat center;background-size: contain;width: 61px;height: 100%;position: absolute;right: -55px;top: 0;}
form .opt-inputs #otp-container {display: flex;justify-content: center;align-items: center;background-color: #FAFAF9;height: 96px;width: 100%;column-gap: 18px;}
form .opt-inputs #otp-container input {font-family: 'DIN 2014';font-weight: bold;font-size: 40px;line-height: 100%;letter-spacing: 1.12px;text-align: center;height: 62px;width: 52px;background-color: #000000;border-radius: 11px;color: #FAFAF9;border: none;padding: 10px;display: flex;align-items: center;justify-content: center;}
form .form-row {display: flex;align-items: center;justify-content: space-between;column-gap: 26px;max-width: 470px;margin: 0px auto 17px auto;}
form .form-row + .form-row .form-group {max-width: 100%;}
form .form-group {max-width: 50%;width: 100%;}
form label {display: block;color: #FAFAF9;font-family: 'DIN 2014';font-weight: 300;color: #FAFAF9;}
form .form-group label {margin-bottom: 9px;}
form .form-group input {font-family: 'DIN';font-size: 16px;line-height: 100%;font-weight: bold;width: 100%;background-color: #000000;color: #FAFAF9;height: 43px;border: 1px solid #FAFAF9;border-radius: 10px;padding: 10px;outline: none;}
form .form-checkbox {position: relative;display: flex;align-items: center;column-gap: 26px;max-width: 470px;margin: 23px auto 0px auto;}
form .form-checkbox #FormCheckbox {position: absolute;top: 0;left: 0;opacity: 0;}
form .form-checkbox #FormCheckbox + label {position: relative;font-family: 'DIN 2014';font-size: 16px;line-height: 100%;font-weight: 300;color: #FAFAF9;letter-spacing: 0.42px;display: flex;align-items: center;user-select: none;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;cursor: pointer;}
form .form-checkbox #FormCheckbox + label span {padding-left: 35px;}
form .form-checkbox #FormCheckbox + label::before {content: '';display: inline-block;width: 20px;height: 20px;border: 1px solid #FAFAF9;border-radius: 5px;margin-right: 8px;position: absolute;left: 0;}
form .form-checkbox #FormCheckbox:checked + label::before {background: url(../images/right-mark-icon.svg) no-repeat;background-position: 3px 6px;background-size: 15px;background-color: #FAFAF9;}

form .form-checkbox #FormCheckboxNieuws {position: absolute;top: 0;left: 0;opacity: 0;}
form .form-checkbox #FormCheckboxNieuws + label {position: relative;font-family: 'DIN 2014';font-size: 16px;line-height: 100%;font-weight: 300;color: #FAFAF9;letter-spacing: 0.42px;display: flex;align-items: center;user-select: none;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;cursor: pointer;}
form .form-checkbox #FormCheckboxNieuws + label span {padding-left: 35px;}
form .form-checkbox #FormCheckboxNieuws + label::before {content: '';display: inline-block;width: 20px;height: 20px;border: 1px solid #FAFAF9;border-radius: 5px;margin-right: 8px;position: absolute;left: 0;}
form .form-checkbox #FormCheckboxNieuws:checked + label::before {background: url(../images/right-mark-icon.svg) no-repeat;background-position: 3px 6px;background-size: 15px;background-color: #FAFAF9;}


form .s-button {display: flex;align-items: center;justify-content: center;margin-top: 48px;}
form .s-button .btn-submit {font-family: 'DIN 2014';font-weight: bold;font-size: 24px;line-height: 100%;background-color: #E30613;color: #FAFAF9;width: 180px;height: 64px;padding: 10px;border: none;outline: none;cursor: pointer;transition: 0.33s linear;}
form .s-button .btn-submit:hover {background-color: #FAFAF9;color: #000000;}

.bottom-images {position: relative;}
.bottom-images .left-img {position: absolute;bottom: 0;left: 0;max-width: 422px;width: 100%;}
.bottom-images .left-img img {width: 100%;height: auto;display: block;}
.bottom-images .right-img {position: absolute;bottom: 115px;right: 60px;max-width: 271px;width: 100%;}
.bottom-images .right-img img {width: 100%;height: auto;display: block;}

/* thankyou page css */
.thankyou-text-wrp {height: 100vh;display: flex;align-items: center;justify-content: center;text-align: center;}
.thankyou-text-wrp h1 {max-width: 370px;font-size: 54px;color: #FAFAF9;font-family: 'DIN 2014';font-weight: 300;}
.thankyou-text-wrp h1 span {font-weight: bold;}

@media (max-width: 1366px) {
    form .form-heading h2 {font-size: 37px;line-height: 54px;}
    form .opt-inputs {max-width: 500px;margin-left: auto;margin-right: auto;}
    form .opt-inputs #otp-container input {font-size: 28px;height: 52px;width: 42px;border-radius: 8px;}
    form .s-button .btn-submit {font-size: 20px;width: 160px;height: 44px;}

    .bottom-images .left-img {max-width: 340px;}
}

@media (max-width: 1199px) {
    .form-wrp {height: 100%;padding-top: 50px;padding-bottom: 50px;align-items: flex-start;}
    .bottom-images .right-img {right: 0;}
    .bottom-images .left-img {max-width: 280px;}
    .bottom-images .right-img {max-width: 220px;bottom: 50px;}
}

@media (max-width: 1024px) and (min-width: 992px){
    .bottom-images .left-img {max-width: 250px;}
    .bottom-images .right-img {max-width: 220px;bottom: 50px;}
}

@media (max-width: 991px) {
    .bottom-images .right-img {bottom: 150px;max-width: 210px;right: 0;}
}

@media (max-width: 767px) {
    html {height: auto;}
    form {padding-left: 15px;padding-right: 15px;}
    form .opt-inputs #otp-container {border-radius: 10px;}
    form .opt-inputs::before, form .opt-inputs::after {display: none;}

    .bottom-images .left-img, .bottom-images .right-img {display: none;}

    .thankyou-text-wrp {padding-left: 15px;padding-right: 15px;}
    .thankyou-text-wrp h1 {font-size: 44px;}
}

@media (max-width: 535px) {
    form .form-heading {padding-bottom: 48px;}
    form .form-heading h2 {font-size: 27px;line-height: 33px;}
    form .opt-inputs #otp-container {height: 60px;column-gap: 10px;}
    form .opt-inputs #otp-container input {font-size: 15px;height: 35px;width: 30px;border-radius: 8px;}
}
a {
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration: none;
}