.container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: calc(100% - 80px);
    height: 740px;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba(247, 247, 247, 1);
}

.test-wrapper {
    flex-grow: 1;
    display: flex; 
    position: relative; 
}

.step {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative; 
    background-color: transparent;
    flex-grow: 1;
}

.step.active {
    display: flex;
}

.instructions-content {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}



.start-test-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: transform 0.3s ease;
    margin-top: 100px;
}

.start-test-btn:hover {
    transform: scale(1.05);
}

.start-test-btn:active {
    transform: scale(0.95);
}


.test-content {
    display: none; 
    flex-direction: column;
    align-items: center;
    flex-grow: 1; 
    justify-content: center; 
    padding: 1px 40px 0; 
    box-sizing: border-box;
    gap: 20px;
}

.test-content.active {
    display: block;
}

.instructions-content.active {
    display: flex;
}


.step-header {
    position: absolute;
    top: 47px;
    left: 40px;
    right: 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.step-header .step-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step-header.centered .step-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar {
    width: 50px;
    height: 5px;
    background: #bbbbbb;
    border-radius: 300px;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #b21325;
    border-radius: 300px;
    width: 0%;
    transition: width 0.3s ease;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: #3B3B3B;
    letter-spacing: -0.14px;
    line-height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Manrope, sans-serif;
    font-style: normal;
    font-feature-settings: 'liga' off, 'clig' off;
    white-space:nowrap
}

.step-icon {
    width: 10px;
    height: 16px;
    flex-shrink: 0;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #3b3b3b;
    letter-spacing: -0.14px;
    font-family: Manrope,sans-serif;
}



.back-arrow {
    width: 7px;
    height: 7px;
    transform: rotate(180deg);
}

.test-back-btn {
    position: absolute;
    top: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: Manrope,sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3b3b3b;
    letter-spacing: -0.14px;
}

.test-progress {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}
.test-content .step-actions {
    margin-top: auto;
}

.test-progress-bar {
    width: 50px;
    height: 5px;
    background: #bbbbbb;
    border-radius: 300px;
    position: relative;
}

.test-progress-fill {
    width: 60%;
    height: 5px;
    background: #b21325;
    border-radius: 300px;
    position: absolute;
    top: 0;
    left: 0;
}

.test-progress-text {
    font-family: Manrope,sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3b3b3b;
    letter-spacing: -0.14px;
}

.oscilloscope-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

.oscilloscope-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.main-title {
    font-family: InterTight, sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center;
    line-height: 1;
    letter-spacing: -2px;
    max-width: 724px;
    margin-top: 95px;
    margin-bottom: 28px;
}
.main-title-step2{
    font-family: InterTight, sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center;
    line-height: 1;
    letter-spacing: -2px;
    max-width: 724px;
    margin-top: 95px;
    margin-bottom: 39px;
}
.main-title-step3{
    font-family: InterTight,sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center;
    line-height: 1;
    letter-spacing: -2px;
    max-width: 724px;
    margin-top: 95px;
    margin-bottom: 39px;
}
.recommendation-title{
    font-family: InterTight,sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center;
    line-height: 1;
    letter-spacing: -2px;
    margin-top: 95px;
}
.subtitle {
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Manrope,sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: rgba(59, 59, 59, 0.7);
    text-align: center;
    letter-spacing: -1px;
}
.subtitle-step3 {
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Manrope,sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: rgba(59, 59, 59, 0.7);
    text-align: center;
    letter-spacing: -1px;
    margin-top: 162px;
}

.btn {
    background: #b21325;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    margin-top: 94px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    min-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
}
.btn-2{
    background: #b21325;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    margin-top: 165px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    min-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope,sans-serif;
}

.btn-3 {
    background: #b21325;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    min-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope,sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
}
.btn-4 {
    background: #b21325;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    min-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope,sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
    gap: 10px;
    margin-top: 46px;
}
.btn-form {
    background: #b21325;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope,sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
    width: 260px;
}

.btn, .btn-1, .btn-2, .btn-3, .btn-4, .btn-form {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn:hover, 
.btn-1:hover, 
.btn-2:hover, 
.btn-3:hover,
.btn-4:hover,
.btn-form:hover {
    transform: translateY(-2px);
    filter: brightness(90%); 
}

.btn-secondary {
    background: #3d3d3d !important;
}

.btn-secondary:hover {
    background: #2a2a2a;
}

.btn-group {
    display: flex;
    gap: 10px;
}

.intro-content {
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.clock-text {
    color: rgba(59, 59, 59, 0.7);
    text-align: center;
    font-size: 20px;
    letter-spacing: -1px;
    font-weight: 600;
    position: relative;
    font-family: Manrope, sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
    font-style: normal;
    line-height: normal;
}

.intro-visual {
    position: relative;
    width: 100%;
    height: 200px;
    margin-top: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('data:image/svg+xml,<svg width="635" height="52" viewBox="0 0 635 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M191 0C191.552 0 192 0.447915 192 1V50.4307C192 50.9829 191.552 51.4307 191 51.4307C190.448 51.4307 190 50.9829 190 50.4307V1C190 0.447915 190.448 0 191 0ZM484 0C484.552 0 485 0.447915 485 1V50.4307C485 50.9829 484.552 51.4307 484 51.4307C483.448 51.4307 483 50.9829 483 50.4307V1C483 0.447915 483.448 0 484 0ZM201 4.70801C201.552 4.70801 202 5.15578 202 5.70801V45.7236C202 46.2758 201.552 46.7236 201 46.7236C200.448 46.7236 200 46.2758 200 45.7236V5.70801C200 5.15578 200.448 4.70801 201 4.70801ZM494 4.70801C494.552 4.70801 495 5.15578 495 5.70801V45.7236C495 46.2758 494.552 46.7236 494 46.7236C493.448 46.7236 493 46.2758 493 45.7236V5.70801C493 5.15578 493.448 4.70801 494 4.70801ZM141 7.84668C141.552 7.84668 142 8.29439 142 8.84668V42.585C142 43.1372 141.552 43.585 141 43.585C140.448 43.585 140 43.1372 140 42.585V8.84668C140 8.29439 140.448 7.84668 141 7.84668ZM181 7.84668C181.552 7.84668 182 8.29439 182 8.84668V42.585C182 43.1372 181.552 43.585 181 43.585C180.448 43.585 180 43.1372 180 42.585V8.84668C180 8.29439 180.448 7.84668 181 7.84668ZM434 7.84668C434.552 7.84668 435 8.29439 435 8.84668V42.585C435 43.1372 434.552 43.585 434 43.585C433.448 43.585 433 43.1372 433 42.585V8.84668C433 8.29439 433.448 7.84668 434 7.84668ZM474 7.84668C474.552 7.84668 475 8.29439 475 8.84668V42.585C475 43.1372 474.552 43.585 474 43.585C473.448 43.585 473 43.1372 473 42.585V8.84668C473 8.29439 473.448 7.84668 474 7.84668ZM31 8C31.5523 8 32 8.44771 32 9V42C32 42.5523 31.5523 43 31 43C30.4477 43 30 42.5523 30 42V9C30 8.44771 30.4477 8 31 8ZM554 8C554.552 8 555 8.44771 555 9V42C555 42.5523 554.552 43 554 43C553.448 43 553 42.5523 553 42V9C553 8.44771 553.448 8 554 8ZM211 10.2002C211.552 10.2002 212 10.648 212 11.2002V40.2314C212 40.7835 211.552 41.2314 211 41.2314C210.448 41.2314 210 40.7835 210 40.2314V11.2002C210 10.648 210.448 10.2002 211 10.2002ZM504 10.2002C504.552 10.2002 505 10.648 505 11.2002V40.2314C505 40.7835 504.552 41.2314 504 41.2314C503.448 41.2314 503 40.7835 503 40.2314V11.2002C503 10.648 503.448 10.2002 504 10.2002ZM11 13.3389C11.5523 13.3389 12 13.7866 12 14.3389V37.0928C12 37.645 11.5523 38.0928 11 38.0928C10.4477 38.0928 10 37.645 10 37.0928V14.3389C10 13.7866 10.4477 13.3389 11 13.3389ZM131 13.3389C131.552 13.3389 132 13.7866 132 14.3389V37.0928C132 37.645 131.552 38.0928 131 38.0928C130.448 38.0928 130 37.645 130 37.0928V14.3389C130 13.7866 130.448 13.3389 131 13.3389ZM424 13.3389C424.552 13.3389 425 13.7866 425 14.3389V37.0928C425 37.645 424.552 38.0928 424 38.0928C423.448 38.0928 423 37.645 423 37.0928V14.3389C423 13.7866 423.448 13.3389 424 13.3389ZM534 13.3389C534.552 13.3389 535 13.7866 535 14.3389V37.0928C535 37.645 534.552 38.0928 534 38.0928C533.448 38.0928 533 37.645 533 37.0928V14.3389C533 13.7866 533.448 13.3389 534 13.3389ZM91 13C91.5523 13 92 13.4477 92 14V37C92 37.5523 91.5523 38 91 38C90.4477 38 90 37.5523 90 37V14C90 13.4477 90.4477 13 91 13ZM111 13C111.552 13 112 13.4477 112 14V37C112 37.5523 111.552 38 111 38C110.448 38 110 37.5523 110 37V14C110 13.4477 110.448 13 111 13ZM614 13C614.552 13 615 13.4477 615 14V37C615 37.5523 614.552 38 614 38C613.448 38 613 37.5523 613 37V14C613 13.4477 613.448 13 614 13ZM634 13C634.552 13 635 13.4477 635 14V37C635 37.5523 634.552 38 634 38C633.448 38 633 37.5523 633 37V14C633 13.4477 633.448 13 634 13ZM61 14C61.5523 14 62 14.4477 62 15V36C62 36.5523 61.5523 37 61 37C60.4477 37 60 36.5523 60 36V15C60 14.4477 60.4477 14 61 14ZM584 14C584.552 14 585 14.4477 585 15V36C585 36.5523 584.552 37 584 37C583.448 37 583 36.5523 583 36V15C583 14.4477 583.448 14 584 14ZM21 16C21.5523 16 22 16.4477 22 17V34C22 34.5523 21.5523 35 21 35C20.4477 35 20 34.5523 20 34V17C20 16.4477 20.4477 16 21 16ZM71 16C71.5523 16 72 16.4477 72 17V34C72 34.5523 71.5523 35 71 35C70.4477 35 70 34.5523 70 34V17C70 16.4477 70.4477 16 71 16ZM544 16C544.552 16 545 16.4477 545 17V34C545 34.5523 544.552 35 544 35C543.448 35 543 34.5523 543 34V17C543 16.4477 543.448 16 544 16ZM594 16C594.552 16 595 16.4477 595 17V34C595 34.5523 594.552 35 594 35C593.448 35 593 34.5523 593 34V17C593 16.4477 593.448 16 594 16ZM101 17.2617C101.552 17.2617 102 17.7096 102 18.2617V33.1689L101.995 33.2715C101.944 33.7758 101.518 34.1689 101 34.1689C100.482 34.1689 100.056 33.7758 100.005 33.2715L100 33.1689V18.2617C100 17.7096 100.448 17.2617 101 17.2617ZM151 17.2617C151.552 17.2617 152 17.7096 152 18.2617V33.1689L151.995 33.2715C151.944 33.7758 151.518 34.1689 151 34.1689C150.482 34.1689 150.056 33.7758 150.005 33.2715L150 33.1689V18.2617C150 17.7096 150.448 17.2617 151 17.2617ZM221 17.2617C221.552 17.2617 222 17.7096 222 18.2617V33.1689L221.995 33.2715C221.944 33.7758 221.518 34.1689 221 34.1689C220.482 34.1689 220.056 33.7758 220.005 33.2715L220 33.1689V18.2617C220 17.7096 220.448 17.2617 221 17.2617ZM444 17.2617C444.552 17.2617 445 17.7096 445 18.2617V33.1689L444.995 33.2715C444.944 33.7758 444.518 34.1689 444 34.1689C443.482 34.1689 443.056 33.7758 443.005 33.2715L443 33.1689V18.2617C443 17.7096 443.448 17.2617 444 17.2617ZM514 17.2617C514.552 17.2617 515 17.7096 515 18.2617V33.1689L514.995 33.2715C514.944 33.7758 514.518 34.1689 514 34.1689C513.482 34.1689 513.056 33.7758 513.005 33.2715L513 33.1689V18.2617C513 17.7096 513.448 17.2617 514 17.2617ZM624 17.2617C624.552 17.2617 625 17.7096 625 18.2617V33.1689L624.995 33.2715C624.944 33.7758 624.518 34.1689 624 34.1689C623.482 34.1689 623.056 33.7758 623.005 33.2715L623 33.1689V18.2617C623 17.7096 623.448 17.2617 624 17.2617ZM51 18.8311C51.5522 18.8311 51.9999 19.2788 52 19.8311V31.6006L51.9951 31.7021C51.9441 32.2066 51.5179 32.6006 51 32.6006C50.4821 32.6006 50.0559 32.2066 50.0049 31.7021L50 31.6006V19.8311C50.0001 19.2788 50.4478 18.8311 51 18.8311ZM171 18.8311C171.552 18.8311 172 19.2788 172 19.8311V31.6006L171.995 31.7021C171.944 32.2066 171.518 32.6006 171 32.6006C170.482 32.6006 170.056 32.2066 170.005 31.7021L170 31.6006V19.8311C170 19.2788 170.448 18.8311 171 18.8311ZM464 18.8311C464.552 18.8311 465 19.2788 465 19.8311V31.6006L464.995 31.7021C464.944 32.2066 464.518 32.6006 464 32.6006C463.482 32.6006 463.056 32.2066 463.005 31.7021L463 31.6006V19.8311C463 19.2788 463.448 18.8311 464 18.8311ZM574 18.8311C574.552 18.8311 575 19.2788 575 19.8311V31.6006L574.995 31.7021C574.944 32.2066 574.518 32.6006 574 32.6006C573.482 32.6006 573.056 32.2066 573.005 31.7021L573 31.6006V19.8311C573 19.2788 573.448 18.8311 574 18.8311ZM1 20.0078C1.55218 20.0078 1.99983 20.4557 2 21.0078V30.4229C2 30.9751 1.55228 31.4229 1 31.4229C0.447715 31.4229 0 30.9751 0 30.4229V21.0078C0.000170045 20.4557 0.44782 20.0078 1 20.0078ZM121 20.0078C121.552 20.0078 122 20.4557 122 21.0078V30.4229C122 30.9751 121.552 31.4229 121 31.4229C120.448 31.4229 120 30.9751 120 30.4229V21.0078C120 20.4557 120.448 20.0078 121 20.0078ZM414 20.0078C414.552 20.0078 415 20.4557 415 21.0078V30.4229C415 30.9751 414.552 31.4229 414 31.4229C413.448 31.4229 413 30.9751 413 30.4229V21.0078C413 20.4557 413.448 20.0078 414 20.0078ZM524 20.0078C524.552 20.0078 525 20.4557 525 21.0078V30.4229C525 30.9751 524.552 31.4229 524 31.4229C523.448 31.4229 523 30.9751 523 30.4229V21.0078C523 20.4557 523.448 20.0078 524 20.0078ZM41 21.9697C41.5523 21.9697 42 22.4174 42 22.9697V28.4619C42 29.0142 41.5523 29.4619 41 29.4619C40.4477 29.4619 40 29.0142 40 28.4619V22.9697C40 22.4174 40.4477 21.9697 41 21.9697ZM161 21.9697C161.552 21.9697 162 22.4174 162 22.9697V28.4619C162 29.0142 161.552 29.4619 161 29.4619C160.448 29.4619 160 29.0142 160 28.4619V22.9697C160 22.4174 160.448 21.9697 161 21.9697ZM231 21.9697C231.552 21.9697 232 22.4174 232 22.9697V28.4619C232 29.0142 231.552 29.4619 231 29.4619C230.448 29.4619 230 29.0142 230 28.4619V22.9697C230 22.4174 230.448 21.9697 231 21.9697ZM454 21.9697C454.552 21.9697 455 22.4174 455 22.9697V28.4619C455 29.0142 454.552 29.4619 454 29.4619C453.448 29.4619 453 29.0142 453 28.4619V22.9697C453 22.4174 453.448 21.9697 454 21.9697ZM564 21.9697C564.552 21.9697 565 22.4174 565 22.9697V28.4619C565 29.0142 564.552 29.4619 564 29.4619C563.448 29.4619 563 29.0142 563 28.4619V22.9697C563 22.4174 563.448 21.9697 564 21.9697ZM81 22C81.5523 22 82 22.4477 82 23V28C82 28.5523 81.5523 29 81 29C80.4477 29 80 28.5523 80 28V23C80 22.4477 80.4477 22 81 22ZM604 22C604.552 22 605 22.4477 605 23V28C605 28.5523 604.552 29 604 29C603.448 29 603 28.5523 603 28V23C603 22.4477 603.448 22 604 22Z" fill="%233B3B3B" fill-opacity="0.4"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ear-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: relative;
}

.ear-icon svg {
    width: 142px;
    height: 200px;
}



@keyframes wave {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.welcome-content {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.welcome-icon {
    width: 160px;
    height: 160px;
    margin: 40px 0;
    background: linear-gradient(135deg, #b21325, #dc143c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.welcome-icon::before {
    content: '👂';
    font-size: 80px;
}

.volume-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 200px;
    width: 100%;
    max-width: 600px;
    pointer-events: none;
}

.volume-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b3b3b;
}

.volume-slider-container {
    flex: 1;
    max-width: 400px;
}

.volume-slider {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    touch-action: none;
}

.volume-track {
    width: 100%;
    height: 5px;
    background: #bbbbbb;
    border-radius: 300px;
    position: relative;
    cursor: pointer;
}

.volume-fill {
    height: 100%;
    background: #b21325;
    border-radius: 300px;
    width: 50% !important; 
    transition: width 0.2s ease;
}

.volume-thumb {
    position: absolute;
    top: 50%;
    left: 50% !important; 
    transform: translate(-50%, -50%);
    width: 48px;
    height: 49px;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; 
}

.volume-thumb svg {
    width: 100%;
    height: 100%;
}

.volume-thumb:hover {
    transform: translate(-50%, -50%);
    margin-top: 2px;
}

.volume-thumb:active {
    cursor: grabbing;
    transform: translate(-50%, -50%);
    margin-top: 2px;
}

.step-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.step1-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

.step1-background svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headphones-content {
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.headphones-image {
    height: 396.35px;
    transform: rotate(0.661deg);
    flex-shrink: 0;
}

.testing-content {
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sound-controls {
    display: none;
}

.sound-btn {
    background: #3d3d3d;
    color: white;
    border: none;
    border-radius: 400px;
    padding: 15px 30px;
    font-family: Manrope,sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    min-width: 140px;
    height: 50px;
    position: relative;
    z-index: 1;
    margin-top: -5px;
}

.sound-btn:hover {
    background: #B21325;
}

.sound-btn.active {
    background: #b21325;
}


.sound-visualizer {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
}

.sound-visualizer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


.frequency-info {
    font-size: 20px;
    font-weight: 600;
    color: rgba(59, 59, 59, 0.7);
    text-align: center;
    letter-spacing: -1px;
    position: absolute;
    bottom: 94px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    font-family: Manrope,sans-serif;
}

.frequency-info p {
    margin: 0;
    line-height: normal;
}
div.print-contact-info p a {
    text-decoration: none !important;
    color: #3b3b3b;
    font-size: 18px;
    font-weight: 600;
}
div.print-contact-info p{
    font-size: 18px;
    font-weight: 600;
}

div.print-contact-info p a:hover {
    text-decoration: none !important;
    color: #3b3b3b;
}

.db-level {
    font-size: 20px;
    font-weight: 600;
    color: #b21325;
    text-align: center;
    letter-spacing: -0.8px;
    line-height: 18.925px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Manrope,sans-serif;
}

.results-content {
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.audiogram-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
}

@media (max-width: 768px) {
    .audiogram-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.audiogram-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
}

.audiogram-container {
    width: 400px;
    height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.audiogram-title {
    font-weight: bold;
    font-size: 18px;
}

.audiogram-chart {
    width: 100%;
    height: 100%;
}


.chart-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, #dee2e6 1px, transparent 1px),
        linear-gradient(to bottom, #dee2e6 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
}

.chart-line {
    position: absolute;
    height: 2px; 
    background-color: #6c757d;
    transform-origin: 0 50%; 
}

.chart-point {
    position: absolute;
    width: 10px; 
    height: 10px; 
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.chart-point.left {
    background-color: transparent;
    border: 2px solid #007bff;
}

.chart-point.right {
    background-color: transparent;
    border: 2px solid #dc3545;
}

.chart-line.left {
    background-color: #007bff;
}

.chart-line.right {
    background-color: #dc3545; 
}

.frequency-label, .db-label {
    position: absolute;
    font-size: 14px;
    color: #6c757d;
    transform: translateX(-50%);
}

.db-label {
    transform: translateY(-50%);
}

.contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}


.form-group {
    position: relative;
}

.form-input {
    background: #eaeaea;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    width: 200px;
}

.form-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}
.btn-4 svg {
    width: 20px;
    height: 20px;
}
.form-input:focus {
    outline: none;
    background: #f0f0f0;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start; 
    width: 100%;
    margin-top: 16px;
    margin-left: -5px;
}

.checkbox {
    -webkit-appearance: none; 
    appearance: none;
    background-color: rgba(234, 234, 234, 1);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    position: relative; 
    transition: background-color 0.2s ease;
}
.checkbox:checked {
    background-color: #f0f0f0; 
}


.checkbox:checked::after {
    content: '';
    position: absolute;
    display: block;
    
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;

    border: solid #3b3b3b;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.checkbox-text {
    
    font-family: Manrope, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.checkbox-text a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: underline;
}

.checkbox-group.error .checkbox {
    background-color: #ffebee;
    border: 2px solid #FF8C00;
}

.checkbox-group.error .checkbox-text {
    color: #FF8C00;
}

.checkbox-error-message {
    color: #FF8C00;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 30px;
    display: none;
}

.checkbox-group.error .checkbox-error-message {
    display: block;
}

.privacyCheck {
    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-feature-settings: 'liga' off, 'clig' off;
    font-weight: 400;
    line-height: 120%;
    color: rgba(0, 0, 0, 0.70);
}

.ear-indicator {
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center;
    margin: 20px 0;
    letter-spacing: -0.5px;
}

.tone-transition {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(247, 247, 247, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1000;
    border-radius: 20px;
}

.tone-transition.show {
    opacity: 1;
    visibility: visible;
}

.transition-content {
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease-in-out;
}

.tone-transition.show .transition-content {
    transform: translateY(0);
}

.transition-icon {
    margin-bottom: 12px;
    animation: pulse 0.6s ease-in-out;
}

.transition-text {
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #3b3b3b;
    letter-spacing: -0.2px;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.print-page {
    display: none;
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    padding: 15mm;
    background: white;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.print-header {
    position: relative; 
    height: 60px;       
}

.print-logo {
    position: absolute;
    left: 0;
    top: 35%; 
    transform: translateY(-50%); 
    width: 200px; 
    height: 40px;
}

.print-title {
    position: absolute;
    right: 0;
    top: 10px; 
    margin: 0;
    color: #3B3B3B;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.print-date {
    position: absolute;
    right: 0;
    top: 45px; 
    margin: 0;
    font-size: 8px;
    color: #666;
    font-weight: 500;
    text-align: right;
}



.print-charts-area {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    justify-content: center;
    align-items: flex-start;
}

.print-chart-left,
.print-chart-right {
    flex: 1;
    max-width: 400px;
    text-align: center;
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: #3b3b3b;
    margin: 0 0 20px 0;
    letter-spacing: -0.3px;
}

.print-chart-left canvas,
.print-chart-right canvas {
    border: none;
    border-radius: 8px;
    background: #fafafa;
    padding: 10px;
    width: 100%;
    height: 375px;      
    max-width: 562px;    
    max-height: 375px;   
}

.print-recommendation {
    text-align: left;
}


.print-recommendation h3 {
    font-size: 32px; 
    font-weight: 700; 
    color: #3b3b3b;
    margin: 0;
    letter-spacing: -1px;
}

.print-contact {
    display: flex;
    align-items: center;
    gap: 40px; 
    margin-bottom: 15px;
}

.print-qr {
    flex-shrink: 0;
}

.qr-code {
    width: 240px;
    height: 240px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
}


.print-contact-info {
    flex: 1;
}

.print-contact-info p {
    margin: 8px 0;
    font-size: 12px;
    color: #3b3b3b;
    font-weight: 500;
    display: flex;   
    align-items: center; 
}

.print-contact-info p svg {
    width: 40px;  
    height: 40px; 
    flex-shrink: 0; 
    margin-right: 15px;
}

.print-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.print-actions a {
    text-decoration: none;
    background: #3d3d3d;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    height: auto;
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
    margin-top: 20px;
}

.print-footer {
    text-align: left;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    color: rgba(59, 59, 59, 0.40);
    padding-top: 20px;
    display: flex;
    align-items: center; 
}

.print-footer p {
    margin: 5px 0;
}
.print-footer svg {
    width: 20px;    
    height: 24px;   
    margin-left: auto; 
}
.print-page {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
}
@media print {
    body * {
        visibility: hidden;
    }
    
    .print-page,
    .print-page * {
        visibility: visible;
    }
    
    .print-page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 20mm;
        display: block !important;
        visibility: visible;
    }
    .print-logo {
        width: 150px !important;
        height: 30px !important;
    }
    
    .print-logo svg {
        shape-rendering: geometricPrecision; 
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .step5-foreground-svg,
    .step5-foreground-svg *,
    .step-background-svg,
    .step-background-svg *,
    .step1-background,
    .step1-background *,
    .step2-background,
    .step2-background * {
        display: none !important;
        visibility: hidden !important;
    }
    
    .print-charts-area {
        page-break-inside: avoid;
        display: flex;
        gap: 40px;
        margin-top: 35px;    
        margin-bottom: 20px;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .print-chart-left,
    .print-chart-right {
        width: 400px;
        height: 330px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .print-chart-left canvas,
    .print-chart-right canvas {
        width: 100%;
        height: 100%;
        display: block;
        border: none;
        border-radius: 8px;
        background: #fafafa;
        padding: 10px;
    }
    
    .print-chart-left .chart-title,
    .print-chart-right .chart-title {
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 18px;
        color: #3b3b3b;
    }
    
    .print-recommendation {
        page-break-inside: avoid;
        margin-bottom: 40px;
    }
    
    .print-contact {
        page-break-inside: avoid;
    }
    
    .print-actions {
        page-break-inside: avoid;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .print-actions a {
        text-decoration: none;
        background: #3d3d3d;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 15px 20px;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.5px;
        height: auto;
        width: 220px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: Manrope, sans-serif;
        font-feature-settings: 'liga' off, 'clig' off;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        margin-top: 20px;
    }
    
    .print-footer {
        page-break-inside: avoid;
    }
}

.test-interaction-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 93px;
}
.step-header.centered {
    text-align: center;
}

.step-background-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0; 
    pointer-events: none; 
    margin-top: 60px;
}

.step-background-svg svg {
    height: auto;
}

.main-title-step3-2 {
    font-family: InterTight,sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #3b3b3b;
    text-align: center; 
    width: 100%; 
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 20px; 
}
.step5-foreground-svg {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: auto; 
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    z-index: 999;
    pointer-events: none;
}

.step5-foreground-svg svg {
    width: 90%; 
    height: auto;
}

.form-container {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sub-title {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
    line-height: normal;
}

.disclaimer {
    color: rgba(59, 59, 59, 0.40);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.14px;
    position: absolute;
    bottom: 46px;
    left: 40px;
    max-width: 300px;
    text-align: left;
}
.disclaimer-img {
    margin-bottom: 16px;
}

.calibration-steps {
    display: flex;
    justify-content: space-between;
}

/* 1440px и меньше */
@media (max-width: 1440px) {
    .container {
        transform-origin: center;
    }

    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 54px;
    }

    .subtitle, .subtitle-step3, .clock-text {
        font-size: 18px;
    }

    .btn, .btn-2, .btn-3, .btn-4 {
        min-width: 180px;
        height: 50px;
        font-size: 16px;
    }
    
    .sound-btn {
        min-width: 120px;
        height: 45px;
        font-size: 14px;
        margin-top: 10px;
    }
    
    .sound-visualizer {
        width: 140px;
        height: 140px;
    }
    
    .audiogram-container {
        width: 360px;
        height: 300px;
    }
}

/* 1200px и меньше */
@media (max-width: 1200px) {
    .container {
        transform-origin: center;
    }
    
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 48px;
    }
    
    .subtitle, .subtitle-step3, .clock-text {
        font-size: 16px;
    }
    
    .btn, .btn-2, .btn-3, .btn-4 {
        min-width: 160px;
        height: 45px;
        font-size: 15px;
    }
    .btn{
        margin-top: 134px;
    }
    .btn-2{
        margin-top: 195px;
    }
    .btn-3{
        margin-top: 17px;
    }
    .btn-4{
        margin-top: 123px;
    }
    .sound-btn {
        min-width: 110px;
        font-size: 13px;
        margin-top: 20px;
    }
    
    .sound-visualizer {
        width: 130px;
        height: 130px;
        margin-top: 20px;
    }

    .audiogram-container {
        width: 320px;
        height: 270px;
    }
}

/* 960px и меньше */
@media (max-width: 960px) {
    .container {
        transform-origin: center;
    }
    
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 42px;
    }
    
    
    .btn, .btn-2, .btn-3, .btn-4 {
        min-width: 140px;
        height: 40px;
        font-size: 14px;
        margin-top: 200px;
    }
    .btn{
        margin-top: 150px;
    }
    .btn-2{
        margin-top: 210px;
    }
    .btn-3{
        margin-top: 32px;
    }
    .btn-4{
        margin-top: 164px;
    }
    .sound-btn {
        font-size: 12px;
        margin-top: 42px;
    }
    .form-input {
        width: 145px;
    }
    .contact-form{
        margin-top: 90px;
    }
    
    .sound-visualizer {
        width: 120px;
        height: 120px;
    }
    
    .audiogram-container {
        width: 280px;
        height: 240px;
    }
    .disclaimer {
        max-width: 165px;
    }
    .btn-form{
        width: 190px;
    }
    .contact-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .container {
        height: auto;
        min-height: 90vh;
    }
    
    .intro-visual{
        margin-top: 100px;
    }
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 32px;
        letter-spacing: -1.5px;
        margin-top: 75px;
    }

    .btn, .btn-2, .btn-3, .btn-4{
        min-width: 140px;
        height: 40px;
        font-size: 13px;
        margin-top: 30px;
    }
    .btn{
        margin-top: 175px;
    }
    .btn-2 {
        margin-top: 277px;
    }
    .btn-3{
        margin-top: 65px;
    }
    .btn-4{
        margin-top: 118px;
    }
    .subtitle-step3{
        margin-top: 217px;
    }
    .step-background-svg{
        margin-top: 0px;
    }
    .disclaimer {
        max-width: 200px;
    }

    .step-header {
        top: 20px;
        left: 20px;
        right: 20px;
    }

    .test-interaction-container {
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 40px;
    }
    .frequency-info{
        bottom: 96px;
    }
    #hearBtn, #notHearBtn {
        position: static;
        left: auto;
        width: 160px;
    }
    
    .sound-btn {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 117px;
    }
    

    .audiogram-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .audiogram-container {
        width: 90%;
        max-width: 400px;
        height: auto;
    }

    .contact-form {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .form-input {
        width: 250px;
    }

    .btn-form {
        width: 290px;
    }
    .sound-visualizer {
        margin-top: 110px;
    }
}

/* 640px и меньше */
@media (max-width: 640px) {    
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 36px;
    }

    .btn, .btn-2, .btn-3, .btn-4, .btn-form {
        min-width: 120px;
        height: 35px;
        font-size: 13px;
    }
    .btn {
        margin-top: 60px;
    }
    .btn-2 {
        margin-top: 200px;
    }
    .btn-3 {
        margin-top: 20px;
    }
    .subtitle-step3 {
        margin-top: 200px;
    }
    .btn-4 {
        margin-top: -25px;
    }
    .checkbox{
        width: 40px;
    }
    .sound-visualizer {
        height: 100px;
    }
    .frequency-info {
        bottom: 155px;
    }
    
    .audiogram-container {
        width: 240px;
        height: 200px;
    }
    
    .disclaimer {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
        text-align: center;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .disclaimer-img {
        flex-shrink: 0;
        margin-bottom: 39px;
    }
    
    .disclaimer-text {
        flex: 1;
        text-align: left;
    }
    
    .checkbox-group {
        justify-content: center;
        max-width: 300px;
        width: fit-content;
    }
    .step-title{
        margin-top: 30px;
    }
}

@media (max-height: 600px) {
    .container {
        top: 20px;
        transform: translateY(0);
        height: calc(100vh - 40px);
    }
}


@media (max-width: 640px) and (max-height: 640px) {
    .container {
        top: 10px;
        transform: translateY(0);
        height: calc(100vh - 10px);
    }
}

@media (max-width: 390px) and (max-height: 500px) {
    .container {
        top: 5px;
        transform: translateY(0);
        height: calc(100vh);
    }
}
@media (max-width: 430px){
    .container {
        width: calc(100% - 20px);
        left: 10px;
    }

    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        margin-top: 80px;
    }
    .disclaimer-text{
        width: 330px;
    }
    
    .test-back-btn {
        font-size: 0;
        padding: 8px;
        width: auto;
        height: auto;
        top: 20px;
        left: 20px;
        right: auto;
        display: none;
    }
    .test-progress{
        top: 28px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    
    .test-progress-bar {
        order: 1;
    }
    
    .test-progress-text {
        order: 2;
        text-align: left;
        white-space: nowrap;
    }
    .btn-4 {
        margin-top: 50px;
    }
    
    .test-back-btn svg {
        width: 12px;
        height: 12px;
    }    
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 30px;
    }
    
    .btn, .btn-2, .btn-3, .btn-4, .btn-form {
        min-width: 200px;
        height: 40px;
        font-size: 14px;
    }
    .btn-2 {
        margin-top: 140px;
    }
    
    .sound-btn {
        max-width: 20px;
        height: 30px;
        font-size: 10px;
        padding: 5px 10px;
    }

    .sound-visualizer {
        width: 140px;
    }
    .sound-btn{
        margin-top: 90px;
        height: 40px;
        font-size: 14px;
    }
    .btn-4{
        padding: 5px 10px;
        margin-top: 10px;
    }
    .main-title{
        margin-bottom: 10px;
    }
    .audiogram-container {
        width: 280px;
        height: 160px;
    }
    .db-level{
        font-size: 22px;
        top: 30%;
    }
    .headphones-image {
        height: 280px;
        margin-top: -40px;
        transform: scale(0.75) rotate(0.661deg);
    }
    .intro-visual{
        height: 170px;
    }
    .btn {
        margin-top: 120px;
    }
    .btn-3 {
        margin-top: 10px;
    }
    .volume-controls{
        margin-top: 250px;
    }
    .subtitle-step3 {
        margin-top: 30px;
    }
    .frequency-info{
        bottom: 150px;
    }
    .audiogram-grid{
        margin: 5px auto;
    }
    .contact-form {
        margin-top: 25px;
    }
    .print-logo{
        width: 100px;
    }
    .print-title{
        top: 0px;
        font-size: 10px;
    }
    .btn-group{
        flex-direction: column;
        gap: 0;
    }
    .main-title-step2{
        margin-bottom: 0;
    }
    .start-test-btn{
        margin-top: 60px;
    }
    .test-interaction-container {
        margin-top: 60px;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: auto auto !important;
		grid-template-areas:
			"viz viz"
			"left right" !important;
		gap: 12px !important;
		align-items: center !important;
		justify-items: center !important;
		width: 100% !important;
	}

	#soundVisualizer,
	.sound-visualizer {
		grid-area: viz !important;
		margin: 0 !important;
	}

	#hearBtn {
		grid-area: left !important;
		justify-self: start !important;
	}

	#notHearBtn {
		grid-area: right !important;
		justify-self: end !important;
	}

	.sound-btn {
		position: static !important;
		max-width: none !important;
        margin-top: 30px;
	}
    .recommendation-title{
        font-size: 23px;
    }
    .step5-foreground-svg {
        transform: translateY(0) scale(2);
        transform-origin: bottom center;
    }
    .step5-foreground-svg svg {
        width: 100% !important;
        height: auto !important;
    }
    .volume-controls{
        width: 85%;
    }
    .disclaimer{
        max-width: 400px;
    }
    .btn-4.btn-secondary{ display: none !important; }

}

@media (max-width: 375px) {
    .container {
        width: calc(100% - 20px);
        left: 10px;
    }

    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        margin-top: 80px;
    }
    .disclaimer-text{
        width: 330px;
    }
    .disclaimer{
        bottom: 0px;
    }
    .test-back-btn {
        font-size: 0;
        padding: 8px;
        width: auto;
        height: auto;
        top: 20px;
        left: 20px;
        right: auto;
        display: none;
    }
    .test-progress{
        top: 28px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    
    .test-progress-bar {
        order: 1;
    }
    
    .test-progress-text {
        order: 2;
        text-align: left;
        white-space: nowrap;
    }
    .btn-4 {
        margin-top: 50px;
    }
    
    .test-back-btn svg {
        width: 12px;
        height: 12px;
    }    
    .main-title, .main-title-step2, .main-title-step3, .recommendation-title, .main-title-step3-2 {
        font-size: 30px;
    }
    
    .btn, .btn-2, .btn-3, .btn-4, .btn-form {
        min-width: 200px;
        height: 40px;
        font-size: 14px;
    }
    .btn-2 {
        margin-top: 140px;
    }
    
    .sound-btn {
        max-width: 20px;
        height: 30px;
        font-size: 10px;
        padding: 5px 10px;
    }

    .sound-visualizer {
        width: 140px;
    }
    .sound-btn{
        margin-top: 90px;
        height: 40px;
        font-size: 14px;
    }
    .btn-4{
        padding: 5px 10px;
        margin-top: 5px;
    }
    .main-title{
        margin-bottom: 10px;
    }
    .audiogram-container {
        width: 280px;
        height: 141px;
    }
    .db-level{
        font-size: 22px;
        top: 30%;
    }
    .headphones-image {
        height: 280px;
        margin-top: -15px;
        transform: scale(0.75) rotate(0.661deg);
    }
    .intro-visual{
        height: 90px;
    }
    .btn {
        margin-top: 100px;
    }
    .btn-3 {
        margin-top: 10px;
    }
    .volume-controls{
        margin-top: 145px;
    }
    .subtitle-step3 {
        margin-top: 30px;
    }
    .frequency-info{
        bottom: 150px;
    }
    .audiogram-grid{
        margin: 5px auto;
    }
    .contact-form {
        margin-top: 25px;
    }
    .print-logo{
        width: 100px;
    }
    .print-title{
        top: 0px;
        font-size: 10px;
    }
    .btn-group{
        flex-direction: column;
        gap: 0;
    }
    .main-title-step2{
        margin-bottom: 0;
    }
    .start-test-btn{
        margin-top: 60px;
    }
    .test-interaction-container {
        margin-top: 60px;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: auto auto !important;
		grid-template-areas:
			"viz viz"
			"left right" !important;
		gap: 12px !important;
		align-items: center !important;
		justify-items: center !important;
		width: 100% !important;
	}

	#soundVisualizer,
	.sound-visualizer {
		grid-area: viz !important;
		margin: 0 !important;
	}

	#hearBtn {
		grid-area: left !important;
		justify-self: start !important;
	}

	#notHearBtn {
		grid-area: right !important;
		justify-self: end !important;
	}

	.sound-btn {
		position: static !important;
		max-width: none !important;
        margin-top: 30px;
	}
    .recommendation-title{
        font-size: 23px;
    }

}



@media print {
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: visible !important;
    }

    .container {
        display: none !important;
    }

    .print-page {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 20px !important; /* Side padding for desktop print */
        box-sizing: border-box; /* Include padding in width */
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        page-break-inside: avoid;
    }

    .print-page * {
        visibility: visible;
    }

    @media (max-width: 768px) {
        .print-page {
            padding: 0 10px !important; 
        }
        .print-charts-area {
            flex-direction: row;
            justify-content: space-between;
            gap: 10px;
        }
        .print-chart-left, .print-chart-right {
            width: 48%; 
        }
    }
}