@font-face {
    font-family: "DelaGothicOne-Regular";
    font-style: normal;
    font-weight: 600;
    src: url("Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf") ;
}
@font-face {
    font-family: "Gilroy-Bold";
    font-style: normal;
    font-weight: 700;
    src: url("Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf") ;
}
@font-face {
    font-family: "Gilroy-Medium";
    font-style: normal;
    font-weight: 400;
    src: url("Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf") ;
}

html {
  overflow-x: hidden;
}
body{
    background: #191919;
    margin: 0px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.first-container{
    display: flex;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    --height: 1046;
    height: calc(var(--height) * var(--vw));

}
.second-container{
    display: flex;
    width: 100%;
    aspect-ratio: 2 / 1;
    position: relative;
    --height: 1220;
    height: calc(var(--height) * var(--vw));
}
.third-container{
    display: flex;
    width: 100%;
    --height: 990;
    height: calc(var(--height) * var(--vw));
    aspect-ratio: 2 / 1;
    position: relative;
    overflow: hidden;
}
.fourth-container{
    display: flex;
    width: 100%;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

.text1{
    position: absolute;
    --top: 378;
    top: calc(var(--top) * var(--vw));
    --font-size: 120;
    font-size: calc(var(--font-size) * var(--vw));
    line-height: 1.2;
    font-family: Gilroy-Bold;
    width: 100%;
    display: flex;
    justify-content: center;
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    z-index: -1;
    text-align: center;
}
.text1-2-container{
    position: absolute;
    --top: 501;
    --font-size: 92;
    top: calc(var(--top) * var(--vw));
    font-size: calc(var(--font-size) * var(--vw));
    font-family: Gilroy-Bold;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}
.text1-2-1{
    position: relative;
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text1-2-2{
    position: relative;
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text2{
    position: absolute;
    --top: 611;
    top: calc(var(--top) * var(--vw));
    left: 0;
    line-height: 1.3;
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: Gilroy-Medium;
    --font-size: 30;
    font-size: calc(var(--font-size) * var(--vw));
    color: #FFFFFFCC;
    text-align: center;
}

.button-1{
    position: absolute;
    width: auto;
    height: auto;
    --bottom: 200;
    bottom: calc(var(--bottom) * var(--vw));
    left: 50%;
    transform: translateX(-50%);
    font-family: "Gilroy-Medium";
    --font-size: 35;
    font-size: calc(var(--font-size) * var(--vw));
    color: white;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;

    padding: calc(10 * var(--vw)) calc(34 * var(--vw));
    z-index: 1;
    border-radius: calc(44.5 * var(--vw));
    background-clip: padding-box;
    box-shadow: 0 2px 4px rgb(226 37 37), 0px -2px 2px rgb(226 113 37);
}
.logo1{
    position: absolute;
    --with: 123;
    width: calc(var(--with) * var(--vw));
    height: auto;
    --top: 300;
    top: calc(var(--top) * var(--vw));
    left: 50%;
    transform: translateX(-50%);
}
.light{
    position: absolute;
    box-shadow: 0px 0px calc(var(--f-radius)* var(--vw)) calc(var(--f-stretching) * var(--vw)) var(--f-color),
    0px 0px calc(var(--s-radius)* var(--vw)) calc(var(--s-stretching) * var(--vw)) var(--s-color);
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    right: calc(var(--right) * var(--vw));
}
.light.pos1{
    --f-color: rgba(226, 37, 37, 1);
    --s-color: rgba(226, 113, 37, 1);
    --top: 643;
    --left: 357;
    --f-radius: 131;
    --s-radius: 138;
    --f-stretching: 78;
    --s-stretching: 90;
}
.light.pos2{
    --f-color: rgba(100, 37, 226, 1);
    --s-color: rgba(37, 53, 226, 1);
    --top: 643;
    --right: 343;
    --f-radius: 131;
    --s-radius: 138;
    --f-stretching: 78;
    --s-stretching: 90;
}
.light.pos3{
    --f-color: rgba(253, 253, 253, 1);
    --s-color: rgba(92, 92, 92, 1);
    --top: 438;
    --left: 981;
    --f-radius: 229;
    --s-radius: 0;
    --f-stretching: 97;
    --s-stretching: 0
}
.light.pos4{
    --f-color: rgba(253, 253, 253, 1);
    --s-color: rgba(92, 92, 92, 1);
    --top: 0;
    --left: 660;
    --f-radius: 229;
    --s-radius: 222;
    --f-stretching: 48;
    --s-stretching: 85;
}
.light.pos5{
    --f-color: rgba(253, 253, 253, 1);
    --s-color: rgba(92, 92, 92, 1);
    --top: 766;
    --left: 514;
    --f-radius: 235;
    --s-radius: 163;
    --f-stretching: 83;
    --s-stretching: 29;
}
.light.pos6{
    --f-color: rgba(253, 253, 253, 1);
    --s-color: rgba(92, 92, 92, 1);
    --top: 446;
    --right: 465;
    --f-radius: 62;
    --s-radius: 69;
    --f-stretching: 67;
    --s-stretching: 67;
}
.light.pos7{
    --f-color: rgba(140, 140, 140, 1);
    --s-color: rgba(140, 140, 140, 1);
    --top:2203;
    --left: -57;
    --f-radius: 229;
    --s-radius: 0;
    --f-stretching: 97;
    --s-stretching: 0
}
.text3{
    position: absolute;
    --top: 23;
    --left: 350;
    --width: 600;
    --font-size: 55;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    width: calc(var(--width) * var(--vw));
    font-family: "Gilroy-Bold";
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

}
.discription-container{
    position: absolute;
    --top: 285;
    --left: 350;
    --width: 480;
    --height: 762;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    display: flex;
    flex-direction: column;
    width: calc(var(--width) * var(--vw));
    height: calc(var(--height) * var(--vw));
    gap: calc(58 * var(--vw))
}
.discription-card{
    display: flex;
}
.paragraph-image{
    position: relative;
    --height: 46;
    height: calc(var(--height) * var(--vw));
}

.discription-card-text{
    display: flex;
    position: relative;
    margin-top: calc(10 * var(--vw));
    margin-left: calc(22 * var(--vw));
    flex-direction: column;
    gap: calc(21 * var(--vw));
}
.text4{
    width: 100%;
    font-family: "Gilroy-Bold";
    --font-size: 24;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text5{
    width: 100%;
    font-family: "Gilroy-Medium";
    --font-size: 20;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text6{
    width: 100%;
    font-family: "Gilroy-Bold";
    --font-size: 24;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text12{
    width: 100%;
    font-family: "Gilroy-Bold";
    --font-size: 24;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text7{
    width: 100%;
    font-family: "Gilroy-Medium";
    --font-size: 24;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text8{
    width: 100%;
    font-family: "Gilroy-Medium";
    --font-size: 24;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.form-container{
    overflow: hidden;
    position: absolute;
    --top: 206;
    --width: 956;
    --height: 578;
    top: calc(var(--top) * var(--vw));
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--width) * var(--vw));
    height: calc(var(--height) * var(--vw));
    color: #19191980;
    border-radius: calc(24 * var(--vw));
    backdrop-filter: blur(9px);
    box-shadow:
        2px -1px 1px rgba(253, 253, 253, 0.3),
        -2px 1px 1px rgba(92, 92, 92, 0.3);


}
.text9{
    position: absolute;
    --top: 83;
    --font-size: 32;
    top: calc(var(--top) * var(--vw));
    left: 50%;
    transform: translateX(-50%);
    font-family: Gilroy-Bold;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

}
.text10{
    position: absolute;
    --top: 175;
    --left: 216;
    --font-size: 20;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.input1{
    position: absolute;
    padding: 1%;
    --top: 219;
    --left: 216;
    --width: 524;
    --height: 48;
    --font-size: 20;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    width: calc(var(--width) * var(--vw));
    height: calc(var(--height) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    background: #D9D9D91A;
    color: #FFFFFF;
    border-radius: calc(16 * var(--vw));
    border: 0.5px solid #FFFFFF
}
.text11{
    position: absolute;
    --top: 307;
    --left: 216;
    --font-size: 20;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 33%, #5C5C5C 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.input2{
    position: absolute;
    padding: 1%;
    --top: 351;
    --left: 216;
    --width: 524;
    --height: 48;
    --font-size: 20;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    width: calc(var(--width) * var(--vw));
    height: calc(var(--height) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    background: #D9D9D91A;
    color: #FFFFFF;
    border-radius: calc(16 * var(--vw));
    border: 0.5px solid #FFFFFF
}
.button-2{
    position: absolute;
    width: auto;
    height: auto;
    --top: 449;
    --font-size: 24;
    top: calc(var(--top) * var(--vw));;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Gilroy-Medium";
    font-size: calc(var(--font-size) * var(--vw));;
    color: white;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: calc(8 * var(--vw)) calc(47 * var(--vw));
    z-index: 1;
    border-radius: calc(44.5 * var(--vw));
    background-clip: padding-box;
    box-shadow: 0 2px 4px rgb(226 37 37), 0px -2px 2px rgb(226 113 37);
}
.button-2:hover{
    transform: scale(1.05) translateX(-48%);
}
.button-2:active {
    transform: scale(0.95) translateX(-52%);
}

.switch {
    position: absolute;
    display: inline-block;
    width: calc(170 * var(--vw));
    aspect-ratio: 2 / 1;
    left: 6%;
    top: 2%;
    border-radius: calc(15 * var(--vw));
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: .4s;
    border-radius: calc(15 * var(--vw));;
}
.option {
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    transition: color 0.4s;
}
.option.selected {
    color: #FDFDFD;
}
.option.ru {
    font-family: "DelaGothicOne-Regular";
    left: 0;
    background-color: #5c5c5c;
    border-top-left-radius: calc(15 * var(--vw));
    border-bottom-left-radius: calc(15 * var(--vw));
    font-size: calc(0.4rem + 0.8vw);
}
.option.kz {
    font-family: "DelaGothicOne-Regular";
    right: 0;
    background-color: #FDFDFD;
    border-top-right-radius: calc(15 * var(--vw));
    border-bottom-right-radius: calc(15 * var(--vw));
    font-size: calc(0.4rem + 0.8vw);
}
.language_switch:checked + .slider .option.ru {
    background-color: #FDFDFD;
}
.language_switch:checked + .slider .option.kz {
    background-color: #5c5c5c;
    color: #FDFDFD;
}
.question-container{
    display: none;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    aspect-ratio: 1188 / 761;
    border-radius: calc(15 * var(--vw));;
    min-height: 360px;
    height: 50%;
}
.final-container{
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    aspect-ratio: 1188 / 549;
    border-radius: calc(15 * var(--vw));
}
.final-text{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    font-family: "DelaGothicOne-Regular";
    font-size: calc(4.7vw);
    color: white;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 4px 4px #00000040;
}
.info-final{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DelaGothicOne-Regular";
    font-size: calc(2vw);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 4px 4px #00000040;
    text-align: center;
}

.text-block{
    position: absolute;
    width: max-content;
    top: 23%;
    left: 13%;
    right: 13%;
    font-family: "DelaGothicOne-Regular";
    font-size: calc(2vw);
    color: #FD9C00;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 4px 4px #00000040;
}
.button-3{
    position: absolute;
    --top: 338;
    --left: 622;
    --font-size: 20;
    top: calc(var(--top) * var(--vw) + 46%);
    left: calc(var(--left) * var(--vw));
    font-family: Gilroy-Bold;
    font-size: calc(var(--font-size) * var(--vw));
    color: #ffffff;
    cursor: pointer;
    padding: calc(16.5 * var(--vw)) calc(76 * var(--vw));
    border-radius: calc(37.5 * var(--vw));
    box-shadow: -1px 0 0px calc(1 * var(--vw)) rgba(255, 255, 255, 1), 1px 0 1px calc(1 * var(--vw)) rgba(115, 115, 115, 1);
}
.button-4{
    position: absolute;
    --top: 338;
    --left: 936;
    --font-size: 20;
    top: calc(var(--top) * var(--vw) + 46%);
    left: calc(var(--left) * var(--vw));
    font-family: Gilroy-Bold;
    font-size: calc(var(--font-size) * var(--vw));
    color: #ffffff;
    cursor: pointer;
    padding: calc(16.5 * var(--vw)) calc(76 * var(--vw));
    border-radius: calc(37.5 * var(--vw));
    box-shadow: -1px 0 0px calc(1 * var(--vw)) rgba(255, 255, 255, 1), 1px 0 1px calc(1 * var(--vw)) rgba(115, 115, 115, 1);
}

.question-selection{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 15vb;
    bottom: 15vb;
    right: 4%;
    width: 7%;
    gap: 2%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 4px;
}
.question-selection::-webkit-scrollbar {
    display: none;
}
.question-selection {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.name-block{
    color: white;
    border-radius: 20%;
    box-shadow: 0 -1px 0px calc(1 * var(--vw)) rgba(255, 255, 255, 1), 0 1px 1px calc(1 * var(--vw)) rgba(115, 115, 115, 1);
    font-family: "DelaGothicOne-Regular";
    font-size: calc(2vw);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.num-question{
    color: white;
    border-radius: 20%;
    box-shadow: 0 -1px 0px calc(1 * var(--vw)) rgba(255, 255, 255, 1), 0 1px 1px calc(1 * var(--vw)) rgba(115, 115, 115, 1);
    font-family: "DelaGothicOne-Regular";
    font-size: calc(2vw);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}
.num-question.active{
    border: 0;
}
.num-question.done{

}
.name-block-static{
    color: white;
    background-color: #FD9C00;
    border-radius: 20%;
    box-shadow: 0 -1px 0px calc(1 * var(--vw)) rgba(255, 255, 255, 1), 0 1px 1px calc(1 * var(--vw)) rgba(115, 115, 115, 1);
    font-family: "DelaGothicOne-Regular";
    font-size: calc(2vw);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: sticky;
    top: 0;
    z-index: 1;
}
:root{
    --red-card: linear-gradient(to bottom, #E22525 27%, #E27125 65%);
    --red-card-border: 0 -1px 1px 1px #E22525, 0 1px 1px 1px #E27125;
    --purple-card: linear-gradient(to bottom, #6425E2 27%, #2535E2 65%);
    --purple-card-border: 0 -1px 1px 1px #6425E2, 0 1px 1px 1px #2535E2;
    --blue-card: linear-gradient(to bottom, #258DE2 27%, #254BE2 65%);
    --blue-card-border: 0 -1px 1px 1px #258DE2, 0 1px 1px 1px #254BE2;
    --pink-card: linear-gradient(180deg, #E225A9 0%, #2545E2 100%);
    --pink-card-border: 0 -1px 1px 1px #E225A9, 0 1px 1px 1px #2545E2;
    --green-card: linear-gradient(180deg, #79B458 0%, #005803 100%);
    --green-card-border: 0 -1px 1px 1px #79B458, 0 1px 1px 1px #005803;
    --ultrablue-card: linear-gradient(to bottom, #25E2D2 27%, #2593E2 65%);
    --ultrablue-card-border: 0 -1px 1px 1px #25E2D2, 0 1px 1px 1px #2593E2;
    --vw: calc(100vw / 1920);
    --yes: linear-gradient(to bottom, #CDFFB2 33%, #26D42C 94%);
    --no: linear-gradient(to bottom, #E22525 33%, #E27125 94%);


}
.card {
    position: relative;
    border-radius: calc(17 * var(--vw));
    display: flex;
    height: 100%;
    overflow: hidden;
}
.back-card.pos1{
    --top: 288;
    --left: 135;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    rotate: -15deg;
}
.back-card.pos2{
    --top: 342;
    --right: 163;
    top: calc(var(--top) * var(--vw));
    right: calc(var(--right) * var(--vw));
    rotate: 12deg;
}
.back-card.pos3{
    --top: 244;
    --left: 866;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    rotate: -15deg;
}
.back-card.pos4{
    --top: 426;
    --left: 1104;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    rotate: 12deg;
}
.back-card.pos5{
    --top: 24;
    --left: 411;
    --width: 177;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    rotate: 12deg;
    width: calc(var(--width) * var(--vw));
    filter: blur(1px);
}
.back-card.pos6{
    --top: 417;
    --left: 297;
    --width: 345;
    top: calc(var(--top) * var(--vw));
    left: calc(var(--left) * var(--vw));
    rotate: -15deg;
    width: calc(var(--width) * var(--vw));
    filter: blur(5px);
}
.back-card.pos7{
    --top: 301;
    --right: 366;
    --width: 201;
    top: calc(var(--top) * var(--vw));
    right: calc(var(--right) * var(--vw));
    rotate: 31deg;
    width: calc(var(--width) * var(--vw));
    filter: blur(3.5px);
}
.back-card {
    --width: 338;
    transition: all 0.5s ease;
    width: calc(var(--width) * var(--vw));
    aspect-ratio: 338/495;
    position: absolute;
    border-radius: calc(17 * var(--vw));
    background: linear-gradient(to bottom, #FDFDFD 27%, #5C5C5C 65%);
    padding: 0.87px;
    --factor: 1;
    opacity: 1;
}
.back-card.active{
    width: calc(var(--width) * var(--vw)) !important;
    height: calc(var(--width) * 495/338 * var(--vw)) !important; /* Фиксируем aspect-ratio */
    transform-origin: center !important; /* Центр трансформации */
    will-change: transform;
    --left: 700;
    top: 50%;
    left: calc(var(--left) * var(--vw));
    transform: translate(0, -60%);
    z-index: 2;
    opacity: 1;
}
.back-card.n1{
    --factor: calc(271 / 338);
    top: 50%;
    left: calc(985 * var(--vw));
    transform: translate(0, -60%);
    width: calc(271 * var(--vw));
    z-index: 1;
    filter: blur(3px);
    opacity: 1;
}
.back-card.n2{
    --factor: calc(212 / 338);
    top: 50%;
    left: calc(1216 * var(--vw));
    transform: translate(0, -60%);
    width: calc(212 * var(--vw));
    z-index: 0;
    filter: blur(6px);
    opacity: 1;
}
.back-card.n3{
    --factor: calc(212 / 338);
    top: 50%;
    left: calc(1216 * var(--vw));
    transform: translate(0, -60%);
    width: calc(212 * var(--vw));
    z-index: -1;
    filter: blur(6px);
    opacity: 0;
}
.back-card.p1{
    --factor: calc(271 / 338);
    top: 50%;
    left: calc(460 * var(--vw));
    transform: translate(0, -60%);
    width: calc(271 * var(--vw));
    z-index: 1;
    filter: blur(3px);
    opacity: 1;
}
.back-card.p2{
    --factor: calc(212 / 338);
    top: 50%;
    left: calc(269 * var(--vw));
    transform: translate(0, -60%);
    width: calc(212 * var(--vw));
    z-index: 0;
    filter: blur(6px);
    opacity: 1;
}
.back-card.p3{
    --factor: calc(212 / 338);
    top: 50%;
    left: calc(269 * var(--vw));
    transform: translate(0, -60%);
    width: calc(212 * var(--vw));
    z-index: -1;
    filter: blur(6px);
    opacity: 0;
}
.card-logo{
    position: absolute;
    left: 10%;
    top: 7%;
    width: 23%;
}
.card-under{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    border-radius: 0 0 calc(17 * var(--vw)) calc(17 * var(--vw));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4%;
    background: linear-gradient(to bottom, #fdfdfd4d 54%, #5c5c5c8c 109%);
}
.card-back-text{
    --top: -165;
    --right: -20;
    --font-size: 448;
    transition: all 0.5s ease;
    position: absolute;
    top: calc(var(--top) * var(--vw) * var(--factor));
    right: calc(var(--right) * var(--vw) * var(--factor));
    rotate: 23.43deg;
    font-weight: 700;
    font-family: Gilroy-Bold;
    color: #1919190d;
    font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
}
.card-back-text.s{
    font-size: calc(175 * 0.05208333vw);
    top: calc(-25 * 0.05208333vw);
    right: calc(21 * 0.05208333vw);
}
.card-text{
    position: absolute;
    bottom: 24%;
    left: 10%;
    right: 10%;
    flex-direction: column;
    display: flex;
    gap: 9%;
}
.card-text-title{
    --font-size: 15.7;
    transition: all 0.5s ease;
    font-family: Gilroy-Medium;
    font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    color: #FFFFFF;
    display: flex;
    line-height: 1.3;
}
.card-text-title.s{
    font-size: calc(8 * 0.05208333vw);
    color: black;
}
.card-text-question.s{
    font-size: calc(13 * 0.05208333vw);
    color: black;
}
.card-under-text.s{
    font-size: calc(11 * 0.0520833vw);
}
.card-under-title.s{
    font-size: calc(7 * 0.05208333vw);
}
.card-text-question{
    --font-size: 24.4;
    transition: all 0.5s ease;
    font-family: Gilroy-Bold;
    font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    color: #FFFFFF;
    display: flex;
}
.card-under-text{
    --font-size: 21;
    transition: all 0.5s ease;
    position: relative;
    display: flex;
    left: 10%;
    right: 10%;
    font-family: Gilroy-Medium;
    font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    color: #000000;
    align-items: flex-start;
}
.card-under-title{
    --font-size: 14;
    transition: all 0.5s ease;
    position: relative;
    display: flex;
    left: 10%;
    right: 10%;
    font-family: Gilroy-Bold;
    font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    color: #000000;
    align-self: flex-start;
}
.circular-container1{
    --width: 507;
    top: calc(var(--top) * var(--vw));
    bottom: calc(var(--bottom) * var(--vw));
    left: calc(var(--left) * var(--vw));
    right: calc(var(--right) * var(--vw));
    position: absolute;
    width: calc(var(--width) * var(--vw));
    aspect-ratio: 507/507;
    border-radius: 50%;
    box-shadow: -0.5px -0.5px 0px rgba(253, 253, 253, 1), 0.5px 0.5px 0px rgba(92, 92, 92, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.circular-container1.pos1{
    --top: 444;
    --left: 900;
}
.circular-container1.pos2{
    --bottom: -248;
    --left: -252
}
.circular-container1.pos3{
    --top: 2056;
    --right: -255;
}
.circular-container2{
    --width: 439;
    position: relative;
    width: calc(var(--width) * var(--vw));
    aspect-ratio: 439/439;
    border-radius: 50%;
    box-shadow: -0.5px -0.5px 0px rgba(253, 253, 253, 1), 0.5px 0.5px 0px rgba(92, 92, 92, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.circular-container3{
    --width: 356;
    position: relative;
    width: calc(var(--width) * var(--vw));
    aspect-ratio: 356/356;
    border-radius: 50%;
    box-shadow: -0.5px -0.5px 0px rgba(253, 253, 253, 1), 0.5px 0.5px 0px rgba(92, 92, 92, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.text-answer.yes{
    --font-size: 138;
    font-weight: 1000;
    right: calc(var(--right) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
    background: var(--yes);
    top: 17%;
    rotate: -30deg;
    left: 26%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-answer.no{
    --font-size: 138;
    font-weight: 1000;
    right: calc(var(--right) * var(--vw));
    font-family: Gilroy-Medium;
    font-size: calc(var(--font-size) * var(--vw));
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
    background: var(--no);
    top: 17%;
    rotate: 30deg;
    left: 38%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (max-width: 800px) {
    :root{
        --vw: calc(100vw / 800);
    }
    .first-container{
        height: 100dvh;
    }
    .second-container{
        height: 190dvh;
    }
    .third-container{
        height: 100dvh;
    }
    .logo1{
        --top: 130;
    }
    .text1{
        --top: 209;
        --font-size: 109;
    }
    .text1-2-container{
        flex-direction: column;
        --top: 470;
        --font-size: 70;
        gap: 0px;
    }
    .text2{
        --top: 670;
        --font-size: 19;
    }
    .button-1{
        bottom: 25vh;
        --font-size: 40;
    }
    .button-2{
        --font-size: 40;
    }
    .back-card{
        --width: 232;
        --factor: 0.7;
    }
    .back-card.pos1{
        --top: 439;
        --left: -35;
    }
    .back-card.pos2{
        --top: 325;
        --right: -76;
        z-index: -1;
    }
    .light.pos1{
        --top: 677;
        --left: 99;
    }
    .light.pos2{
        --top: 555;
        --right: 45;
        z-index: -2;
    }
    .text3{
        --left: 105;
        text-align: center;
    }
    .discription-container{
        --left: 165;
    }
    .back-card.pos3{
        --top: 1305;
        --left: 189;
    }
    .back-card.pos4{
        --top: 1404;
        --left: 388;
    }
    .light.pos3{
        --top: 1441;
        --left: 332;
    }
    .circular-container1.pos1{
        --top: 1278;
        --left: 144;
    }
    .back-card.pos7{
        display: none;
    }
    .form-container{
        --width: 700;
        --top: 200;
    }
    .light.pos4{
        --left: 9;
    }
    .text9{
        --top: 70;
    }
    .text10{
        --left: 87;
    }
    .input1{
        --left: 87;
    }
    .input2{
        --left: 87;
    }
    .text11{
        --left: 87;
    }
    .back-card.pos5{
        rotate: -16deg;
        --left: 60;
        --top: 78;
        --factor: 0.5;

    }
    .back-card.pos6{
        rotate: 30deg;
        --width: 177;
        --top: 639;
        --left: 535;
        --factor: 0.5;
    }
    .card-back-text.s{
        top: calc(var(--top) * var(--vw) * var(--factor));
        right: calc(var(--right) * var(--vw) * var(--factor));
        font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    }
    .card-text-title.s{
        font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    }
    .card-text-question.s{
        font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    }
    .card-under-text.s{
        font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    }
    .card-under-title{
        font-size: calc((var(--font-size) * var(--vw)) * var(--factor));
    }
    .circular-container1.pos2{
        --bottom: -256;
        --left: -256;
    }
    .light.pos5{
        display: none;
    }
    .light.pos6{
        display: none;
    }
    .light.pos7{
        display: none;
    }
    .circular-container1.pos3{
        top: 73%;
        z-index: -1;
    }
    .back-card.active{
        left: 50%;
        --width: 400;
        --factor: 1;
        transform: translate(-50%, -60%);
        transform-origin: center bottom !important;
    }
    .back-card.n1{
        left: 50%;
        transform: translate(-50%, -50%);
        top: 572px;
    }
    .back-card.n2{
        left: 50%;
        transform: translate(-50%, -50%);
        top: 670px;
    }
    .back-card.n3{
        left: 50%;
        transform: translate(-50%, -50%);
        top: 670px;
    }
    .back-card.yes{
        rotate: -15deg;
        left: 68%;/* Центр по X (50%), низ по Y (100%) */
        --width: 400;
        top: 25dvh;
        transform: rotate(-15deg) translateY(-43.74px);
    }
    .back-card.no{
        rotate: 15deg;
        --width: 400;
        left: -19%;
        top: 25dvh;
        transform: rotate(15deg) translateY(-43.74px);
    }
    .back-card.yes,
    .back-card.no {
        width: calc(var(--width) * var(--vw)) !important;
        height: calc(var(--width) * 495/338 * var(--vw)) !important; /* Фиксируем aspect-ratio */
        transform-origin: center bottom; !important; /* Центр трансформации */
        will-change: transform;
    }
    .back-card.no-p1{
        left: -50%;
        top: 50%;
        opacity: 0;
    }
    .back-card.yes-p1{
        left: 150%;
        top: 38%;
        opacity: 0;
    }

    .back-card.p3{
        left: 50%;
        --width: 400;
        --factor: 1;
        transform: translate(-50%, -60%);
        display: none;
        opacity: 0;
    }
    .button-3{
        display: none;
    }
    .button-4{
        display: none;
    }




}