*{margin:0;padding:0;box-sizing:border-box}button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

:root {

    --light: #f0f0f0;
    --text:  #414042;
    --dark:  #231F20;
    --blue:  #0082CA;

    --gradient:           linear-gradient(180deg,rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient--reverse:  linear-gradient(0deg,rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient--fallback: var(--light);


    --font-size:        clamp(16px, 1.1458333333333333vw, 20px);
    --font-size--small: clamp(14px, 0.9375vw, 16px);
    --font-size--h1:    clamp(40px, 3.8020833333333335vw, 73px);
    --font-size--h2:    clamp(35px, 3.3333333333333335vw, 64px);
    --font-size--h3:    clamp(23px, 2.8645833333333335vw, 29px);
    --font-size--h4:    clamp(20px, 2.3958333333333335vw, 24px);

    --font:    "Nata Sans", sans-serif;
    --heading: "Outfit", sans-serif;
    
    --button-border:             1px solid;
    --button-background:         var(--blue);
    --button-background--white:  #fff;
    --button-background--ghost:  transparent;
    --button-background--hover:  var(--text);
    --button-color:              #fff;
    --button-color--white:       var(--dark);
    --button-color--hover:       #fff;
    --button-font-size:          var(--font-size);
    --button-font-weight:        600;
    --button-radius:             200px;
    --button-padding--left:      clamp(24.666666666666668px, 1.9270833333333333vw, 37px);
    --button-padding--right:     var(--button-padding--left);
    --button-padding--top:       clamp(11.333333333333334px, 0.8854166666666666vw, 15px);
    --button-padding--bottom:    var(--button-padding--top);
    --button-line-height:        1;
    --button-casing:             none;
    
    --line-height: 1.65;
    --container:   clamp(866.6666666666666px, 67.70833333333333vw, 1300px);
    --spacing:     clamp(66.66666666666667px, 5.208333333333333vw, 100px);
    --radius:      clamp(13.333333333333334px, 1.0416666666666667vw, 20px);
    --transition:  all 0.35s ease;

}

html {
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
  text-rendering: optimizeLegibility;   
  font-smooth: always;                  
}

.sr-only {
  position: absolute;
  width: clamp(1px, 0.05vw, 1px);
  height: clamp(1px, 0.05vw, 1px);
  padding: 0;
  margin: clamp(-1px, -0.05vw, -1px);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
    color: var(--text);
    line-height: var(--line-height);
    font-size: var(--font-size);
    font-family: var(--font);
}

h1, h2, h3, h4 {
    font-family: var(--heading);
    color: var(--dark);
    line-height: 1;
}

h1, h2 {
    letter-spacing: clamp(-1px, -0.05vw, -1px);
}

h1 { font-size: var(--font-size--h1); }
h2 { font-size: var(--font-size--h2); }
h3 { font-size: var(--font-size--h3); }
h4 { font-size: var(--font-size--h4); }

a, a:hover, a:focus { transition: var(--transition); }
.text-center { text-align: center; }
.pg-section { padding: var(--spacing) 0; }
.pg-section.pt-0 { padding-top: 0; }
.pg-section.pb-0 { padding-bottom: 0; }
.bg-dark { background-color: var(--dark); }
.bg-light { background-color: var(--light); }
.bg-gradient { background: var(--gradient--fallback); background: var(--gradient); }
.no-gradient .bg-gradient { background: #fff; }

.button {
    display: inline-block;
    border: var(--button-border) var(--button-background);
    background-color: var(--button-background);
    color: var(--button-color);
    font-family: var(--font--narrow);
    font-weight: var(--button-font-weight);
    text-transform: var(--button-casing);
    border-radius: var(--button-radius);
    padding: var(--button-padding--top) var(--button-padding--right) var(--button-padding--bottom) var(--button-padding--left);
    line-height: var(--button-line-height);
    transform-origin: center;
    transform: scale(1);
    text-decoration: none;
}

.button.ghost { color: #fff; }
.button.white { color: var(--dark); }
.button.ghost { background-color: var(--button-background--ghost); border-color: #fff; }
.button.white { background-color: var(--button-background--white); border-color: var(--button-background--white); }

.button:hover,
.button:focus {
    border-color: var(--button-background--hover);
    background-color: var(--button-background--hover);
    color: var(--button-color--hover);
    transform: scale(1.05);
}

.button.ghost:hover,
.button.ghost:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--dark);
}

.container, hr {
    margin: 0 auto;
    width: 82.5%;
}

@media (min-width: 1001px) {
    .container, hr {
        width: var(--container);
    }
}

hr {
    border: none;
    border-top: clamp(1px, 0.05vw, 1px) solid #e5e5e5;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: transparent;
    transition: var(--transition);
    padding: clamp(13px, 1.04vw, 20px) 0;
    z-index: 11;
    box-shadow: 0 0 clamp(2px, 0.16vw, 3px) rgba(0,0,0,0);
    border-top: clamp(0px, 0.00vw, 0px) solid var(--blue);
}

header.active {
    border-top: clamp(4px, 0.31vw, 6px) solid var(--blue);
    background-color: #fff;
    padding: clamp(8px, 0.63vw, 12px) 0;
    box-shadow: 0 clamp(2px, 0.16vw, 3px) clamp(6px, 0.47vw, 9px) rgba(0,0,0,0.25);
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

header p {
    line-height: 1;
}

header a.brand {
    width: clamp(127px, 13.80vw, 265px);
    display: inline-block;
    height: auto;
}

header.active a.brand {
    width: clamp(127px, 10.16vw, 195px);
}

header a.brand svg {
    width: 100%;
    height: auto;
}

header a.brand svg * {
    transition: var(--transition);
}

header:not(.active) a.brand svg * {
    fill: #fff;
}

header a.button {
    display: inline-flex;
    align-items: center;
}

header a.button svg {
    width: clamp(14px, 1.09vw, 21px);
    height: clamp(14px, 1.09vw, 21px);
    margin: 0 clamp(7px, 0.52vw, 10px) 0 0;
}

header a.button span {
    margin: 0 clamp(3px, 0.21vw, 4px) 0 clamp(3px, 0.26vw, 5px);
}

#hero {
    height: clamp(533px, 41.67vw, 800px);
    height: 100vh;
    background-image: url(i/hero-min.webp?v=2);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

#hero:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--dark);
    opacity: 0.7;
    z-index: 1;
}

#hero .container {
    position: relative;
    z-index: 10;
}

#hero h1 {
    color: #fff;
    margin: clamp(60px, 4.69vw, 90px) auto 0;
    max-width: clamp(660px, 51.56vw, 990px);
}

#hero h1 br {
    display: none;
}

#hero h1 + p {
    color: var(--light);
    max-width: clamp(533px, 41.67vw, 800px);
    margin: clamp(20px, 1.56vw, 30px) auto clamp(37px, 2.86vw, 55px);
}

#hero h1 span {
    font-weight: 100;
    display: block;
    font-size: 67%;
    margin: clamp(7px, 0.52vw, 10px) 0 0;
}

#hero .button + .button {
    margin: 0 0 0 clamp(10px, 0.78vw, 15px);
}

.pg-section p:not(:last-child) {
    margin: 0 0 clamp(23px, 1.82vw, 35px);
}

.pg-section h2 { margin: 0 0 clamp(17px, 1.30vw, 25px); }
.pg-section h3 { margin: 0 0 clamp(3px, 0.26vw, 5px); }
.pg-section h2:not(:first-child, :first-of-type),
.pg-section h3:not(:first-child, :first-of-type) { margin-top: clamp(33px, 2.60vw, 50px); }

.pg-section img {
    border-radius: var(--radius);
    box-shadow: clamp(0px, 0.00vw, 0px) clamp(12px, 0.94vw, 18px) clamp(12px, 0.94vw, 18px) rgba(0,0,0,0.1625);
    border: clamp(1px, 0.05vw, 1px) solid #fff;
}

.pg-section h2 {
    position: relative;
}

.pg-section h2:after {
    content: "";
    display: block;
    background-image: url(i/accent.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: clamp(15px, 1.15vw, 22px);
    height: clamp(15px, 1.15vw, 22px);
    position: absolute;
    top: 0;
    left: clamp(-6px, -0.31vw, -4px);
}

.text-image .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.text-image .container h2 {
    flex: 0 0 100%;
    max-width: 100%;
}

.text-image .container .text {
    flex: 0 0 45%;
    max-width: 45%;
    padding: 0 clamp(33px, 2.60vw, 50px) 0 0;
}

.text-image .container img {
    flex: 0 0 55%;
    max-width: 55%;
}

#about.pg-section h2:after {
    left: clamp(0px, 0.00vw, 0px);
}

#why-choose ul {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: clamp(43px, 3.39vw, 65px) 0 0;
}

#why-choose ul li {
    flex: 0 0 30%;
    max-width: 30%;
}

#why-choose ul li p {
    font-size: var(--font-size--small);
}

#why-choose ul li span {
    width: clamp(53px, 4.17vw, 80px);
    height: clamp(53px, 4.17vw, 80px);
    background: var(--blue);
    border-radius: calc(var(--radius) / 2);
    margin: 0 0 clamp(15px, 1.15vw, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#why-choose ul li span svg {
    max-width: 60%;
    max-height: 60%;
}

#how-works.text-image .container {
    align-items: center;
}

#how-works ol {list-style: none;position: relative;}

#how-works ol li:before {
    width: clamp(33px, 2.60vw, 50px);
    height: clamp(33px, 2.60vw, 50px);
    display: flex;
    content: "";
    align-items: center;
    border-radius: 100%;
    line-height: 1;
    text-align: center;
    justify-content: center;
    border: clamp(1px, 0.10vw, 2px) solid var(--blue);
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    color: var(--blue);
    font-family: var(--heading);
    font-weight: 700;
    font-size: clamp(17px, 1.35vw, 26px);
}

#how-works ol li {
    position: relative;
    padding-left: clamp(50px, 3.91vw, 75px);
    z-index: 2;
}

#how-works ol:before {
    z-index: 1;
    content: "";
    width: clamp(1px, 0.10vw, 2px);
    height: clamp(220px, 15.63vw, 300px);
    background: var(--blue);
    position: absolute;
    top: clamp(18px, 1.41vw, 27px);
    left: clamp(17px, 1.35vw, 26px);
}

#how-works ol li:nth-child(2) {
    margin: clamp(30px, 2.34vw, 45px) 0;
}

#how-works ol li:nth-child(1):before {
    content: "1";
}

#how-works ol li:nth-child(2):before {
    content: "2";
}

#how-works ol li:nth-child(3):before {
    content: "3";
}

#how-works ol li h3 {
    margin: 0;
}

.faq h3 {
    display: flex;
    align-items: center;
    margin: 0 0 clamp(7px, 0.52vw, 10px);
}

.faq h3 svg {
    width: clamp(23px, 1.82vw, 35px);
    height: clamp(23px, 1.82vw, 35px);
    margin: 0 clamp(7px, 0.52vw, 10px) 0 0;
}

.faq {
    border: clamp(1px, 0.05vw, 1px) solid #d0d0d0;
    border-radius: calc(var(--radius) / 2);
    padding: clamp(27px, 2.08vw, 40px);
    margin-top: clamp(17px, 1.30vw, 25px);
    background-color: #fff;
}

.faq p { 
    font-size: var(--font-size--small);
}

#faq h2 {
    margin: 0 0 clamp(30px, 2.34vw, 45px);
}

.simple a:not(.button),
#book .submit a,
.faq a {
    color: var(--blue);
    font-weight: 600;
}

.simple a:not(.button):hover,
.simple a:not(.button):focus,
#book .submit a:hover, 
#book .submit a:focus,
.faq a:hover, 
.faq a:focus {
    color: var(--dark);
}


#book form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: var(--radius);
    padding: clamp(20px, 2.60vw, 50px);
}

#book form .field, #book form .submit {
    max-width: 100%;
    flex: 0 0 100%;
}

@media (min-width: 801px) {
#book form .field.half {flex: 0 0 48%;max-width: 48%;}
}

#book form .field input {
    display: block;
    width: 100%;
    border: clamp(1px, 0.05vw, 1px) solid #aaa;
    font-family: var(--font);
    font-size: var(--font-size--small);
    border-radius: clamp(3px, 0.26vw, 5px);
    padding: clamp(11px, 0.89vw, 17px);
    transition: var(--transition);
    background: #fff;
}

#book form .field input:hover, #book form .field input:focus, #book form .field input:active {
    border-color: var(--blue);
}

#book form .field {
    margin: 0 0 clamp(20px, 1.56vw, 30px);
}

#book form .field label {
    display: block;
    font-size: var(--font-size--small);
    color: var(--dark);
    font-weight: 600;
    margin: 0 0 clamp(3px, 0.26vw, 5px);
}

#book form .field label span {
    color: red;
}

#book form .field input[type="file"] {
    cursor: pointer;
}

 #book form .submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: clamp(13px, 1.04vw, 20px) 0 0;
}

 #book form .submit p {
    font-size: var(--font-size--small);
    margin: 0;
 }

 footer {
    border-top: clamp(3px, 0.26vw, 5px) solid var(--blue);
 }

 footer svg {
    margin: 0 0 clamp(13px, 1.04vw, 20px);
    width: clamp(213px, 16.67vw, 320px);
    height: auto;
}

footer.pg-section p:not(:last-child) {
    margin: 0;
}

footer p a {color: #fff;}
 
footer p {
    color: #aaa;
}

footer p a:hover, footer p a:focus {
    color: #00A4FF;
}

.grecaptcha-badge {
    display: none;
}

.title h1 {
    color: #fff;
}

.title {
    padding: clamp(133.33333333333334px, 10.416666666666666vw, 200px) 0 clamp(46.666666666666664px, 3.6458333333333335vw, 70px);
    background: var(--dark);
}

.simple ul {
    margin-left: 25px;
    margin-bottom: 20px;
}

.simple ul li:not(:last-child) {
    margin-bottom: 12px;
}

footer ul {
    list-style: none;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: clamp(13px, 1.04vw, 20px) 0 clamp(33px, 2.60vw, 50px);
}

footer ul li a {
    color: #fff;
    text-decoration: underline;
    display: block;
}

footer ul li a:hover, footer ul li a:focus {
    color: #00A4FF;
}

footer ul li:first-child {
    margin-right: clamp(40px, 3.13vw, 60px);
}

footer ul li a:last-child {margin-top: clamp(3px, 0.26vw, 5px);}

footer ul li strong {
    color: #DDD;
        font-size: clamp(10px, 0.78vw, 15px);
    text-transform: uppercase;
}

#about h3 {
    margin: 0 0 clamp(10px, 0.78vw, 15px);
}

#about ul {
    list-style: none;
}

#about ul strong, #about ul a {
    display: block;
}

#about ul li:last-child {
    margin: clamp(13px, 1.04vw, 20px) 0 0;
}

#about ul strong {
    color: var(--dark);
}

#about ul a {
    color: var(--blue);
}

#about ul a:hover, #about ul a:focus {
    color: var(--text);
}

@media (max-width: 1200px) {

    #why-choose ul li:nth-child(1), #why-choose ul li:nth-child(2) {
        margin: 0 0 36px;
    }

}

@media (max-width: 1000px) {

    #how-works ol:before {
        height: calc(100% - 50px);
    }

    #hero {
        height: auto;
        padding: clamp(80px, 6.25vw, 120px) 0;
    }

    .text-image .container h2 {
        order: -1;
    }

    .text-image .container img {
        order: 1;
    }

    .text-image .container .text {
        order: 3;
    }
    
    #why-choose ul li,
    .text-image .container img, .text-image .container .text {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .text-image .container .text {
        padding: 0;
    }

    .text-image .container img {
        max-width: 70%;
        margin: 6px 0 50px;
    }    

    .faq h3, .faq h3 svg{
        display: block;
    }

    .faq h3 svg {
        margin: 0 0 9px;
        width: 30px;
        height: 30px;
    }

    #why-choose ul li:nth-child(3) {
        margin: 0 0 36px;
    }

    #why-choose ul li span {
        position: absolute;
        top: 0;
        left: 0;
    }

    #why-choose ul li {
        position: relative;
        padding-left: 70px;
    }

}

@media (max-width: 800px) {

    footer ul {
    display: block;
}

footer ul li strong {
    font-size: 14px;
}

footer ul li:first-child {
    margin: 0 0 30px;
}

    #hero h1 br {
        display: block;
    }

    #hero h1 span {
        font-size: 22px;
        letter-spacing: -1px;
    }

    #book form .submit {
        display: block;
        text-align: center;
    }

    #book form .submit p br {
        display: none;
    }

    #book form .submit button {
        width: 100%;
        margin: 20px 0 0;
    }


}

@media (max-width: 550px) {
    
    .text-image .container img {
        max-width: 100%;
    }

    header a.button span {
        display: none;
    }

    #hero .button {
        width: 170px;
    }

    #hero .button + .button {
        margin: 10px 0 0;
    }

    #hero {
        padding: 40px 0;
    }

    footer p {
        line-height: 1.3;
    }

    footer p a {
        display: block;
    }

    footer p:last-child {
        margin: 30px 0 0;
    }

    #how-works ol li {
        height: 95px;
    }

    #how-works ol:before {
        height: calc(100% - 93px);
    }

}


.notice {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: clamp(467px, 36.46vw, 700px) !important;
    text-align: center;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.5;
    background: #44bd32 !important;
    color: #fff !important;
    border: none !important;
    padding: clamp(13px, 1.04vw, 20px) !important;
    transition: all 0.4s;
}

.notice strong { 
    display: block;
} 

.notice.bye {
    bottom: -200px;
}

@media (max-width: 767px) {
.notice {
    max-width: 100% !important;
}
}