@font-face {
    font-family: "Antenna-Bold";
    src: url('../fonts/Antenna-Bold.ttf');
}

@font-face {
    font-family: "Antenna-Bold_ROS";
    src: url('../fonts/Antenna-Bold_ROS.ttf');
}

@font-face {
    font-family: "Antenna-ExtraLight";
    src: url('../fonts/Antenna-ExtraLight.ttf');
}

@font-face {
    font-family: "Antenna-ExtraLight_ROS";
    src: url('../fonts/Antenna-ExtraLight_ROS.ttf');
}

@font-face {
    font-family: "Antenna-Light";
    src: url('../fonts/Antenna-Light.ttf');
}

@font-face {
    font-family: "Antenna-Light_ROS";
    src: url('../fonts/Antenna-Light_ROS.ttf');
}

.bold {
    font-family: "Antenna-Bold", sans-serif;
}

.x-light {
    font-family: "Antenna-ExtraLight", sans-serif;
}

.d-none {
    display: none !important;
}

.nes {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    font-family: "Antenna-Light", sans-serif;
    background-image: url('../images/bg-home.png');
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: top left;
}

.nes .head-mb {
    display: none;
    visibility: hidden;
}

.nes .content {
    width: 55%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: center;
    justify-content: center;
    margin-left: auto;
    padding: 10% 4% 8%;
    height: 100%;
    min-height: 100%;
}

.nes .content .start,
.nes .content .end,
.nes .content .q-holder{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nes .content .main-title{
    font-size: clamp(1.75rem, 2.020vw, 3.750rem);
    margin-bottom: clamp(3.75rem, 6.061vw, 11.250rem);
}

.nes .content .text {
    font-size: clamp(1rem, 1.212vw, 2.250rem);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

.nes .content .start .text-1 {
    width: 70%;
    margin-bottom: clamp(1.75rem, 2.525vw, 4.688rem);
}

.nes .content .start .text-2 {
    width: 55%;
}

.nes .content .start .btn-start {
    font-size: clamp(1rem, 1.616vw, 3.000rem);
    color: white;
    background-color: #ed1b23;
    padding: clamp(0.75rem, 1.010vw, 1.875rem) clamp(2.75rem, 4.545vw, 8.438rem);
    border: none;
    line-height: 1;
    margin: auto auto 0;
    display: block;
    width: fit-content;
    outline: none;
}

.nes .content .end .main-title {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.nes .content .end .text-1 {
    width: 48%;
    margin-bottom: clamp(1.5rem, 1.717vw, 3.188rem);
}

.nes .content .end .text-2 {
    width: 66%;
    margin-bottom: clamp(1.5rem, 1.717vw, 3.188rem);
}

.nes .content .end .text-3 {
    text-align: center;
    margin-bottom: auto;
}

.nes .content .end .red-text {
    text-align: center;
    color: #ed1c24;
    font-size: clamp(1.75rem, 2.020vw, 3.750rem);
}

.nes .content .q-holder {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: start;
    text-align: left;
    gap: clamp(0.8rem, 1.313vw, 2.438rem);
    padding-left: clamp(1.875rem, 1.563vw, 2.813rem);
}

.nes .content .q-holder .main-title {
    margin-bottom: clamp(1.75rem, 2.020vw, 3.750rem);
}

.nes .content .q-holder .next-btn{
    font-size: clamp(1.2rem, 1.515vw, 2.813rem);
    color: white;
    background-color: #ed1b23;
    padding: clamp(0.75rem, 1.010vw, 1.875rem) clamp(2.75rem, 4.545vw, 8.438rem);
    border: none;
    line-height: 1;
    margin: auto auto 0;
    display: block;
    width: fit-content;
    outline: none;
}

.nes .content .q-holder button:not(.next-btn) {
    outline: none;
    border: none;
    background: transparent;
    font-size: clamp(1.250rem, 1.010vw, 1.875rem);
    line-height: 1;
    padding-left: clamp(5.000rem, 4.040vw, 7.500rem);
    text-align: left;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.nes .content .q-holder button.selected:not(.next-btn)::before {
    background-image: url('../images/checked.png');
}

.nes .content .q-holder button:not(.next-btn)::before {
    content: '';
    background-image: url('../images/unchecked.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: clamp(1.875rem, 1.515vw, 2.813rem);
    height: clamp(1.875rem, 1.515vw, 2.813rem);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(1.875rem, 1.515vw, 2.813rem);
}

.nes .content .q-holder small {
    font-size: clamp(0.875rem, 0.707vw, 1.313rem);
}

.nes .content .q-holder .q-scale {
    font-size: clamp(1.250rem, 1.010vw, 1.875rem);
    display: flex;
    flex-wrap: wrap;
}

.nes .content .q-holder .q-scale button{
    font-size: clamp(1.000rem, 0.808vw, 1.500rem);
    padding-left: clamp(3.750rem, 3.030vw, 5.625rem);
    margin-top: clamp(0.625rem, 0.505vw, 0.938rem);
}

.nes .content .q-holder .q-scale button:before {
    width: clamp(1.250rem, 1.010vw, 1.875rem);
    height: clamp(1.250rem, 1.010vw, 1.875rem);
}

.nes .content .q-holder .other-answer-label {
    margin-bottom: clamp(0.625rem, 0.521vw, 0.938rem);
}

.nes .content .q-holder .other-text {
    width: 100%;
    display: block;
}
.nes .other-answer {
    width: 90%;
    margin: 0 auto;
}
.nes .validator,
.nes .question-message {
    color: #b20d17;
    font-size: 1rem;
    line-height: 1.4;
}
.nes .validator:not(#validator_q2_text, #validator_q3_text, #validator_q4_1_text, 
#validator_q4_2_text,#validator_q5_1, #validator_q5_2, #validator_q5_3) {
    padding-left: clamp(5.000rem, 4.040vw, 7.500rem);
}
.nes .validator:empty,
.nes .question-message:empty {
    display: none;
}
.nes .q-scale .validator {
    width: 100%;
}
.nes button:disabled {
    cursor: wait;
    opacity: 0.65;
}
.nes button:focus-visible,
.nes input:focus-visible,
.nes textarea:focus-visible {
    outline: 2px solid #b20d17 !important;
    outline-offset: 4px;
}
.nes .q-holder .main-title:focus {
    outline: none;
}
.nes .content .q-holder .detailed-answer {
    display: block;
    padding: 0.2rem 0.3rem;
    width: 100%;
}
@media screen and (max-width: 1080px) {
    .nes {
        background-image: none;
    }

    .nes .head-mb {
        display: block;
        visibility: visible;
    }

    .nes .head-mb img{
        width: 100%;
        height: auto;
    }

    .nes .content {
        width: 100%;
        height: fit-content;
        min-height: fit-content;
    }

    .nes .content .start .text-1 {
        width: 90%;
        margin-bottom: clamp(1.75rem, 2.525vw, 4.688rem);
    }

    .nes .content .start .text-2 {
        width: 80%;
    }

    .nes .content .start .btn-start {
        margin-top: 12%;
    }
    
    .nes .content .q-holder {
        padding-left: 0
    }
    
    .nes .content .q-holder .main-title {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .nes .content .q-holder .next-btn{
        margin-top: 8%;
    }

    .nes .content .q-holder .detailed-answer{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .nes .content .q-holder label {
        line-height: 1;
        margin-bottom: 1%;
        width: 90%;
    }

    .nes .content .q-holder .q-scale {
        flex-direction: column;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .nes .content .end .text-1 {
        width: 70%;
    }

    .nes .content .end .text-2 {
        width: 90%;
    }

    .nes .content .end .text-3 {
        width: 70%;
    }

    .nes .content .end .red-text {
        margin-top: 15%;
    }

}