:root { /* Colors */ --primary-blue: #005be3; --notice-success-green: #009819; --notice-error-red: #FF0000; --white: #fff; --grey: #4D5F70; --black: #001A33; /* Fonts */ --font-family: 'Ubuntu', Arial, sans-serif; --h1-title: 700 2.8rem/3.2rem "Ubuntu", sans-serif; --h2-title: 700 2.8rem/3.2rem "Ubuntu", sans-serif; --h4-title: 700 1.6rem/2.2rem "Ubuntu", sans-serif; --p-text: 400 1.4rem/1.8rem "Ubuntu", sans-serif; }

*, :after, :before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

html { width: 100%; height: 100%; /**/ font-size: 10px; /**/ overflow: hidden; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: none; font-feature-settings: none; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { width: 100%; height: 100%; overflow-x: hidden; font-size: 1.6rem; font-weight: 400; font-family: var(--font-family); color: #1c1b1b; background: #FBFCFF; }

h1, h2, h3, h4, h5, h6 { color: var(--black); font-weight: bold; font-family: var(--font-family); }
ul, li { list-style-type: none; }
p { color: var(--grey); font: var(--p-text); }
a { color: var(--primary-blue); text-decoration: none; }
strong { font-weight: 700; }

/* ********** */

.wrapper { width: 100%; display: flex; flex-direction: column; position: relative; }

/* ********** */

.header { width: 100%; padding: 2.4rem; position: relative; display: flex; align-items: center; }
.logo { width: auto; height: 3.4rem; }

/* ********** */

.main { width: 100%; padding: 1.6rem 2.4rem; position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }

.main h1 { margin-bottom: 1.6rem; font: var(--h1-title); }
.main h2 { margin-bottom: 1.6rem; font: var(--h2-title); }
.main h1 span,
.main h2 span { display: block; }

.info-txt { padding-top: .4rem; font: 400 1.1rem/1.4rem var(--font-family); }

.why-list { width: 100%; display: flex; flex-direction: column; gap: .8rem; }
.why-list li { width: 100%; display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; border-radius: .8rem; border: 1px solid #ECECEC; background-color: #fff; }
.why-list .wl-title { width: 100%; display: flex; flex-direction: row; gap: .8rem; align-items: center; }
.why-list img { width: 3.5rem; height: 3.5rem; }

/* ********** */

.footer { width: 100%; padding: 2.4rem; position: relative; display: flex; gap: 2.4rem; flex-direction: column; align-items: center; justify-items: center; }

.social-media { width: 100%; display: flex; gap: 2.4rem; flex-direction: row; align-items: center; justify-content: center; }
.social-media a { display: inline-block; }
.social-media img { width: 2.4rem; height: 2.4rem; }

/* ********** */


.form { width: 100%; position: relative; margin: 0 auto 1.6rem; padding: 1.6rem 0; display: flex; gap: 1.2rem; flex-direction: column; }
.form fieldset { width: 100%; border: none; position: relative; padding: 0; display: flex; gap: .8rem; flex-direction: column; }

.form .input-box-field { width: 100%; height: 6rem; position: relative; margin: 0 auto; /*overflow:hidden;*/ background: #fff; border: 1px solid #EFEFEF; border-radius: .8rem; transition: height 0.3s ease-in-out, border 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.form .input-box-field.active { height: 6rem; background: #fff; border: 1px solid var(--grey); border-radius: .8rem; }

.form .input-box-field.error { border-color: var(--notice-error-red); background-color: #FFE5E5; }
.form .input-box-field.valid { border-color: var(--notice-success-green); background-color: #C9F4DF; }
.form .input-box-field.disabled { border-color: transparent; background-color: #EFEFEF; pointer-events: none; }

.form span.text { width: 100%; display: block; margin: 0 auto 1rem; font-size: 1.4rem; line-height: 2rem; }

.form label { width: 100%; height: 5.6rem; position: absolute; top: 0; left: 0; display: block; z-index: 2; padding: 0 1.5rem; font-size: 1.4rem; line-height: 5.8rem; font-weight: 300; text-align: left; font-family: var(--font-family); margin-bottom: 0; color: var(--grey); cursor: pointer; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out; transform-origin: 4% 50%; backface-visibility: hidden; }
.form .active label,
.form .valid label { opacity: .8; transform: scale3d(.8,.8,.8) translate3d(0,-1.6rem,0); backface-visibility: hidden; height: 4.5rem; }

input,
select,
textarea { width: 100%; height: 3.6rem; color: var(--grey); font-size: 1.4rem; font-weight: normal; font-family: var(--font-family), Arial, sans-serif; box-shadow: none !important; background: #fff !important; border: none !important; padding: 1.8rem 1.5rem 0; border-radius: 1rem; transition: all 0.3s ease-in-out; }

.form input,
.form select,
.form textarea { width: 100%; height: 5.6rem; position: absolute; left: 0; bottom: .1rem; z-index: 1; opacity: 0; background: transparent !important; }
.form .active input,
.form .active select,
.form .active textarea,
.form .valid input,
.form .valid select,
.form .valid textarea { z-index: 2; opacity: 1; }

input:focus,
select:focus,
textarea:focus,
input:active,
select:active,
textarea:active,
input:hover,
select:hover,
textarea:hover,
.form input:focus,
.form select:focus,
.form textarea:focus,
.form input:active,
.form select:active,
.form textarea:active,
.form input:hover,
.form select:hover,
.form textarea:hover { border: none !important; outline: none !important; }

.form .error input { color: var(--notice-error-red); }
.form .valid input { color: var(--notice-success-green); }

.error-msg,
.succes-msg { width: 100%; display: none; margin: -.2rem 0 .6rem; color: var(--notice-error-red); font-size: 1.2rem; line-height: 1.6rem; }
.succes-msg { color: var(--notice-success-green); }

.input-box-field-message-error { width: 100%; display: block; min-height: 2.4rem; margin: -1.7rem auto 1.5rem; position: relative; overflow: hidden; color: #fff; background: var(--notice-error-red); font-size: 1rem; line-height: 2.4rem; padding: 0 1.5rem; border-radius: 0 0 .4rem .4rem; transition: opacity .3s ease-in-out,height .3s ease-in-out, margin .3s ease-in-out, padding .3s ease-in-out; overflow: hidden; }

.button { width: auto; height: 4.8rem; position: relative; display: block; padding: 0 1.6rem; color: #fff; background: #FF7272; border: none; border-radius: .8rem; font-size: 1.4rem; font-weight: 600; line-height: 4.8rem; text-align: center; font-family: var(--font-family); cursor: pointer; user-select: none; /*box-shadow:0 0.1vw 0.2vw rgba(0,0,0,0);*/ -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; }
button.button { line-height: inherit !important; }
button.button-disabled { color: #fff; background-color: #A0A0A0; pointer-events: none; }
.button:active { color: #fff; background: var(--black); outline: none !important; /*box-shadow:0 0.1vw 0.2vw rgba(0,0,0,0.2);*/ text-decoration: none; }