@charset "UTF-8";


@font-face {
  font-family: 'Geologica';
  src: url('../fonts/Geologica-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geologica';
  src: url('../fonts/Geologica-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geologica';
  src: url('../fonts/Geologica-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geologica';
  src: url('../fonts/Geologica-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


.topSite{border: 1px solid rgba(255, 255, 255, 0.8);margin-top: 16px;     backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);border-radius: 18px;margin-bottom: 12px;
    background: rgba(14, 14, 14, 0.4);width: 100%;padding: 24px; }
.topSite .logo{display: block;margin: 0 auto 16px;}
.topSite h1{text-align: center;font-size: 32px;text-transform: uppercase;font-weight: 700;font-family: 'Geologica';color: #fff;margin-bottom: 0px;
line-height: 47px;}

.formTitle{text-align: center;color: #fff;font-size: 22px;line-height: 30px;display: block;margin: 0px auto 24px;max-width: 540px;font-weight: 700;}











.progress__line,.promo-video {
    position:relative;
}
.body {
    font-size:clamp(1rem, .94rem + .26vw, 1.25rem);
    line-height:normal
}
.main .container {
    width:100%;
    max-width:1120px;
    margin:0 auto 12px;
    padding:0 20px
}
* {
    padding:0;
    margin:0;
    border:none
}
*,::after,::before {
    box-sizing:border-box
}
aside,footer,header,legend,main,nav,section {
    display:block
}
h1,h2,h3,h4,h5,h6,p {
    font-size:inherit;font-family: 'Geologica';
    font-weight:inherit
}
ul,ul li {
    list-style:none
}
img {
    vertical-align:top
}
img,svg {
    max-width:100%;
    height:auto
}
address {
    font-style:normal
}
button,input,select,textarea {
    font-family:inherit;
    font-size:inherit;
    color:inherit;
    background-color:transparent
}
input::-ms-clear {
    display:none
}
button,input[type=submit] {
    display:inline-block;
    box-shadow:none;
    background:0 0;
    cursor:pointer
}
button:active,button:focus,input:active,input:focus {
    outline:0
}
button::-moz-focus-inner {
    padding:0;
    border:0
}
label {
    cursor:pointer
}
:root {
    --ff-inter:'Geologica';
    --white:#ffffff;
    --grey:#ccc;
    --dark-grey:#5a5a5a;
    --accent-blue:#2EB050;
    --border-radius:20px;
    --border:1px solid var(--dark-grey, #5a5a5a);
    --background-card:rgba(0, 0, 0, 0.4)
}
.promo-video,.promo-video .video-play {
   backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    background: rgba(14, 14, 14, 0.4);
}

.header .container {
    width:100%;
    max-width:1120px;
    margin:0 auto;padding-left: 20px;padding-right: 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}

/* .header .title {
    text-align:center;
    font-size:clamp(.875rem, .726rem + .65vw, 1.5rem);
    line-height:normal;
    margin-bottom:clamp(.625rem,.476rem + .65vw,1.25rem)
} */
.header .subtitle,.progress__text {
    font-family:var(--ff-inter);
    font-style:normal;
    font-weight:500;
    line-height:normal
}
.main-button,.min-max__text,.quiz__answers .label,.quiz__title,.rang__answer__text {
    font-weight:600;
    font-family:var(--ff-inter);
    font-style:normal
}
.header .subtitle {
    color:var(--white,#fff);
    text-align:center;
    font-size:clamp(1rem, .881rem + .52vw, 1.5rem)
}
@media (max-width:380px) {
    .header .mob-hide {
        display:none
    }
}
.promo-video {
    border-radius:20px;
    border:1px solid rgba(255, 255, 255, 0.8);
    height:auto;
    padding: 24px 24px 24px;
}
.promo-video .video {
    height:100%;
    width:100%;
    border-radius:10px;
    display:block
}
.promo-video .video-play {
    position:absolute;
    right:clamp(1.25rem,1.101rem + .65vw,1.875rem);
    bottom:clamp(1.25rem,1.101rem + .65vw,1.875rem);
    width:clamp(2.625rem,2.177rem + 1.94vw,4.5rem);
    height:clamp(2.625rem,2.177rem + 1.94vw,4.5rem);
    border-radius:50%;
    border:1px solid var(--dark-grey,#5a5a5a);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s,opacity .2s;
    animation:1.2s ease-in-out infinite pulse
}
@keyframes pulse {
    0%,100% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.1)
    }
}
.min-max,.progress {
    align-items:center
}
.promo-video .video-play:hover {
    opacity:.7;
    transform:scale(1.05)
}
.promo-video .video-play:active {
    opacity:.7;
    transform:scale(1)
}
.promo-video #sound img {
    object-fit:cover;
    width:58%;
    height:58%
}
.promo-video #replay img {
    object-fit:cover;
    width:60%;
    height:60%;
    margin-left:2px
}
.wrapper__quiz {
    /* border-radius:20px;
    border:1px solid var(--dark-grey,#5a5a5a);
    background:rgba(0,0,0,.5);
    padding:clamp(.625rem,.476rem + .65vw,1.25rem);
    padding-bottom:clamp(.938rem,.684rem + 1.1vw,2rem); */
    max-width: 680px;margin: 0 auto;
    min-height:388px
}
@media (max-width:600px) {
    .wrapper__quiz {
        min-height:auto
    }
}
@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes fadeOut {
    from {
        opacity:1;
        transform:translateY(0)
    }
    to {
        opacity:0;
        transform:translateY(-10px)
    }
}
.progress {
    display:flex;
    justify-content:center;
    gap:7px;flex-direction: column;
    margin-bottom:3px;margin-top: 35px;
    transition:opacity .3s ease-in-out
}
.progress.hidden,.quiz {
    display:none
}
.progress__text {
    color:var(--grey);
    font-size:clamp(.75rem, .69rem + .26vw, 1rem);
    text-transform:uppercase;
    white-space:nowrap
}
.quiz__answers .label,.quiz__title {
    color:var(--white,#fff)
}
.progress__text #percent {
    color:var(--white)!important;
    font-weight:400;font-size: 18px;line-height: 95%;
}
.progress__line {
    width:100%;
    height:6px;
    border-radius:100px;
    background:var(--grey,#ccc)
}
.progress__line::before {
    content:'';
    position:absolute;
    height:100%;
    width:1%;
    border-radius:100px;
    background:var(--accent-blue,#2EB050)
}
.quiz {
    opacity:0;
    transition:opacity .4s ease-in-out
}
.quiz.active {
    display:block;
    animation:.5s ease-in-out forwards fadeIn
}
.quiz.fadeOut {
    animation:.4s ease-in-out forwards fadeOut
}
.quiz__title {
    text-shadow:0 4px 4px rgba(0,0,0,.25);
    font-size: 32px;font-weight: 400;
    line-height: 95%;
    margin-bottom:27px
}
.quiz__title.lastTitle{font-weight: 700;text-align: center;font-size: 26px;text-transform: uppercase;line-height: 120%;}

.min-max__text,.rang__answer__text {
    color:var(--grey,#ccc);
    line-height:normal
}
.quiz__answers {
    display:flex;
    flex-direction:column
}
.quiz__answers .label {
    width:100%;
    border-radius:6px;
    border:1px solid #E9E9E9;background-color: #FFFFFF;
    padding:8px 10px 9px 60px;
    margin-bottom:16px;
    font-size: 26px;
    line-height:normal;color: #2B2B2B;
    transition:.2s;
    position:relative;
    cursor:pointer
}
.quiz__answers .label:hover {
    transform:scale(1.01);
}
.main-button:active,.quiz__answers .label:active {
    transform:scale(1)
}
.quiz__answers .input,.quiz__answers .label::after,.quiz__answers .label::before {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.quiz__answers .input {
    opacity:0;
    cursor:pointer;
    left:10px;
    width:20px;
    height:20px
}
.quiz__answers .label::before {
    content:'';
    left:24px;
    width:18px;
    height:18px;
    border-radius: 2px;
    border:2px solid #AEAEAE;
    background:0 0;
    transition:opacity .3s
}
.quiz__answers .label::after {
    content:'✓';
    left:25px;
    width:16px;
    height:16px;
    aspect-ratio:1/1;
    background:#4599C3;
    opacity:0;    color: #fff;
    font-size: 10px;
    text-align: center;
    transition:opacity .3s
}
.quiz__answers .label:hover:after{opacity: 1;transition:opacity .3s}
 .quiz__answers .label:hover:before{ border:2px solid #4599C3;transition:opacity .3s}

.progressSteps{display: flex;align-items: center;gap:8px;width: 100%;}
.progressSteps span{width: 20%;height: 7px;background-color: #fff;border-radius: 47px;display: block;}

.progressSteps span.active{transition: 0.3s;background-color: #4599C3;}


.quiz__answers .input:checked+.label::after,.quiz__answers .label:has(.input:checked)::after {
    opacity:1
}
.min-max {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px
}
.min-max__text {
    font-size:16px
}
.main-button,.rang__answer__text {
    font-size:clamp(1rem, .94rem + .26vw, 1.25rem)
}
.range__input {
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    height:6px;
    border-radius:100px;
    outline:0;
    margin-bottom:26px
}
.range__input::-webkit-slider-runnable-track {
    width:100%;
    height:6px;
    border-radius:100px
}
.range__input::-moz-range-track {
    width:100%;
    height:6px;
    border-radius:100px
}
.range__input::-moz-range-progress {
    height:6px;
    border-radius:100px;
    background:var(--accent-blue,#2EB050)
}
.range__input::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:40px;
    height:24px;
    border-radius:14px;
    border:1px solid var(--grey,#ccc);
    background:var(--white,#fff);
    background-image:url(../img/icon/dots.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.08);
    cursor:pointer;
    margin-top:-11px
}
.range__input::-moz-range-thumb {
    width:40px;
    height:24px;
    border-radius:14px;
    border:1px solid var(--grey,#ccc);
    background:var(--white,#fff);
    background-image:url(../img/icon/dots.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.08);
    cursor:pointer
}
.range__input::-ms-thumb {
    width:40px;
    height:24px;
    border-radius:14px;
    border:1px solid var(--grey,#ccc);
    background:var(--white,#fff);
    background-image:url(../img/icon/dots.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.08);
    cursor:pointer
}
.rang__answer {
    display:flex;
    align-items:center;
    gap:13px
}
.rang__answer-wrap {
    flex:1;
    padding:14px 10px;
    border-radius:6px;
    border:1px solid var(--dark-grey,#5a5a5a)
}
.footer__link,.main-button,.rang__answer__text #range__value {
    color:var(--white,#fff)
}
.main-button {
    display:flex;
    padding:14px 32px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:247px;
    border-radius:6px;
    background:var(--accent-blue,#2EB050);
    line-height:normal;
    transition:.2s
}
.footer .copyright,.footer .text,.footer__link {
    text-align:center;
    font-family:var(--ff-inter);
    font-size: 14px;
    font-style:normal;
    font-weight:300;
    line-height:normal
}
.main-button:hover {
    background:#0097bd;
    transform:scale(1.03)
}
.footer {
    padding:0 20px clamp(.625rem,.476rem + .65vw,1.25rem)
}
.footer .container {
    width:100%;
    max-width:1080px;border: 1px solid rgba(255, 255, 255, 0.8);
    margin:0 auto;
    border-radius: 18px;
  backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
        background: rgba(14, 14, 14, 0.4);
 
    padding:24px;
}
.footer .container p.text{margin: 0 auto 20px;color: rgba(255, 255, 255, 0.6);font-size: 16px;line-height: 24px;}
.footer .container p.text strong{font-weight: 700;}
@media (max-width:500px) {
    .rang__answer {
        flex-direction:column
    }
    .rang__answer-wrap {
        width:100%
    }
    .main-button {
        max-width:100%
    }
   
    /* .footer .container {
        border-radius:24px 24px 0 0;
        border-bottom:none
    } */
}
.footer .text {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom:10px
}
.footer .text .footer__link {
    text-decoration:none
}
.footer__list {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap: 24px;margin-top: 20px;
    margin-bottom:20px
}
.footerLine{display: block;width: 100%;max-width: 860px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.2);height: 1px;}
.footer__list a{text-decoration: underline;
background-color: rgba(255, 255, 255, 0.05);padding: 14px 16px;font-weight: 600;line-height: 24px;border-radius: 6px;text-decoration: none;
font-size: 16px;display: block;
}
.footer__list a:hover{text-decoration: underline;}
address .footer__link{font-weight: 400;}
.footer__link {
   text-decoration: none;font-weight: 700;
    transition:.2s
}
.footer__link:hover {
    text-decoration-line:underline;
    text-underline-offset:2px;
}
.footer .copyright {
    color: rgba(255, 255, 255, 0.6);font-size: 16px;line-height: 24px;
}
.footer .text .footer__link{color: rgba(255, 255, 255, 0.6);}
.footer .text > span{color: rgba(255, 255, 255, 0.6);}

.footer .text.addressText{max-width: 674px;margin: 20px auto 20px!important;font-size: 16px;line-height: 24px;}




@media(max-width:991px){
    .topSite h1{    font-size: 26px;line-height: 38px;}
}










@media(max-width: 767px){
.protectionInfo img{min-height: 44px;}
.topSite h1{    font-size: 20px;line-height: 30px;}
.topSite{padding: 12px;margin-bottom: 6px;}
.formTitle{margin-bottom: 32px;font-size: 16px;line-height: 22px;}
.main .container,.footer,.header .container{padding-left: 16px;padding-right: 16px;}
.footer .container{padding: 12px;}
.footer .container p.text,.footer .text.addressText,.footer .copyright{font-size: 14px;line-height: 22px;}
.footer__list a{width: 100%;text-align: center;display: block;}
.footer__item{width: 100%;}
.footer__list{gap:12px;}
.footer__list a{padding: 12px 16px;}
.protectionInfo p{line-height: 20px;}








}