body {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

html {
    scroll-behavior: smooth;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}

.first-page{
    display: none;
}

.landing-self-register {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 100%;
}

.column-form{
    width: 100%;
}

.columns{
    display: flex;
    gap: 100px;
    margin-top: 48px;
}

.introduction-text {
    display       : flex;
    padding       : 0px 12px;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
    align-self    : stretch;
}

.introduction-frame {
    display       : flex;
    width         : 600px;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 32px;
    z-index       : 2;
}

.button-join-us a{
    color: var(--Content-InversePrimary, #FFF);
    font-weight: 800;
    font-size: 18px;
    font-style: normal;
}

.text-esx {
    height         : 78px;
    flex-direction : column;
    justify-content: center;
    font-size      : 68px;
    font-style     : normal;
    font-weight    : 400;
    line-height    : normal;
    font-family    : 'Race Sport Free', sans-serif;
}

.rectangle {
    border-radius: 20px 0px;
    width        : 180px;
    height       : 40px;
    background   : #FCD447;
}

.quote {
    color        : #243434;
    font-size    : 32px;
    font-style   : normal;
    font-weight  : 400;
    font-family  : 'Avenir-Heavy', sans-serif;
    overflow-wrap: break-word;
    word-break   : break-word;
    width        : 450px;
}

.about-us {
    display         : flex;
    padding         : 32px;
    justify-content : center;
    align-items     : center;
    gap             : 10px;
    align-self      : stretch;
    border-radius   : 0px 32px 32px 32px;
    background-color: #243434c7;
    mix-blend-mode  : hard-light;
    width           : 100%;
    max-width       : 600px;
    color           : #FFF;
    justify-content : center;
    flex            : 1 0 0;
    font-family     : var(--Typography-Family);
    font-size       : 24px;
    font-style      : normal;
    font-weight     : 900;
    line-height     : 32px;
    z-index         : 1;
}

.gym-image {
    background-image   : url("../img/e23f330c794014786c0d94185414f29b.png");
    background-position: center;
    background-size    : cover;
    width              : 100%;
    max-width          : 620px;
    height             : 100%;
    max-height         : 880px;
    aspect-ratio       : 623/881;
    flex-shrink        : 0;
    margin-left        : -120px;
    z-index            : 1;
}

.yellow-frame {
    display        : flex;
    width          : 100%;
    max-width      : 780px;
    height         : 100%;
    max-height     : 284px;
    padding        : 62px 37px;
    flex-direction : column;
    justify-content: center;
    align-items    : flex-end;
    gap            : 10px;
    flex-shrink    : 0;
    border-radius  : 32px 0px 32px 32px;
    background     : #FCD447;
    margin-left    : -550px;
}

.text-join-us {
    max-width  : 200px;
    width      : 100%;
    color      : #243434;
    font-family: var(--Typography-Family);
    font-size  : 18px;
    font-style : normal;
    font-weight: 800;
    line-height: 24px;
}

.button-join-us {
    display        : flex;
    padding        : 16px;
    justify-content: center;
    align-items    : center;
    gap            : 8px;
    border-radius  : 99px;
    background     : #5337AE;
    border         : none;
    color          : white;
    font-family    : var(--Typography-Family);
    font-size      : 18px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 24px;
    max-width      : 180px;
    width          : 100%;
}

.button-join-us:hover {
    background : #5f2efd;
    transition: linear 0.5s;
}

.button-join-us a:hover{
    color:white;
}

.frame-join-us {
    display       : flex;
    width         : 200px;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
}

.white-fade {
    position   : absolute;
    top        : 700px;
    left       : 0;
    width      : 100%;
    height     : 320px;
    z-index    : 1;
    flex-shrink: 0;
    background : linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%);
}

.arrow-frame {
    display      : inline-flex;
    padding      : 10px;
    align-items  : center;
    gap          : 10px;
    border-radius: 8px;
    border       : 1px solid #D7D6D5;
    margin-left  : 50%;
    z-index      : 2;
    position     : absolute;
    top          : 80%;
}

.arrow-icon {
    display        : flex;
    width          : 24px;
    height         : 24px;
    padding        : 4px 4.987px 4.989px 4px;
    justify-content: center;
    align-items    : center;
}

.arrow {
    width      : 15.013px;
    height     : 15.011px;
    flex-shrink: 0;
}

.formular-1 {
    width      : 100%;
    height     : 100%;
    max-height : 820px;
    flex-shrink: 0;
    background : #EDEBF7;
}

.formular-1-onboarding{
    width      : 100%;
    height     : 100%;
    max-height : 820px;
    flex-shrink: 0;
}

.content-formular-1{
    display        : flex;
    width          : 100%;
    padding        : 120px 120px;
    justify-content: center;
    align-items    : flex-start;
    gap            :120px;
}

.formular-client {
    display        : flex;
    width          : 100%;
    padding: 200px 196px 192px 196px;
}

.formular-client h1{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 52px;
    font-style: normal;
    font-weight: 900;
    line-height: 64px;
}

.formular-client h6{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 32px;
}
.content-formular-1-onboarding {
    display        : flex;
    width          : 100%;
    padding: 120px 0 64px 0;
    justify-content: center;
    gap: 92px;
}

.informations-frame {
    display       : flex;
    max-width     : 540px;
    width         : 100%;
    flex-direction: column;
    align-items   : center;
    flex-shrink   : 0;
    gap           : 64px;
}

.informatii-despre-formular {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 32px;
    align-self    : stretch;
}

.progress-group {
    display   : flex;
    margin    : 64px 0px;
    max-width : 337px;
    max-height: 44px;
    width     : 100%;
    height    : 100%;
}

.arrow-progress-frame {
    display      : inline-flex;
    transform    : rotate(-90deg);
    padding      : 10px;
    align-items  : center;
    gap          : 10px;
    border-radius: 8px;
    border       : 1px solid #C1B7E2;
}

.progress-arrow {
    display        : flex;
    width          : 24px;
    height         : 24px;
    transform      : rotate(90deg);
    padding        : 4px 4.987px 4.989px 4px;
    justify-content: center;
    align-items    : center;
}

.progress-arrow-icon {
    width      : 15.013px;
    height     : 15.011px;
    flex-shrink: 0;
}

.progress-bar-section {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin-left    : 10px;
}

.rectangle-progress-bar-1,
.rectangle-progress-bar-2,
.rectangle-progress-bar-3 {
    width      : 80px;
    height     : 4px;
    flex-shrink: 0;
}

.circle-progress-bar-1,
.circle-progress-bar-2 {
    width        : 24px;
    height       : 24px;
    flex-shrink  : 0;
    border-radius: 12px;
    border       : 4px solid #7D5CE6;
}

.circle-progress-bar-2 {
    background: #7D5CE6;
}

.rectangle-progress-bar-1 {
    background: linear-gradient(90deg, rgba(111, 87, 187, 0.00) 0%, #7D5CE6 50.38%);
}

.rectangle-progress-bar-2 {
    background: #7D5CE6;
}

.rectangle-progress-bar-3 {
    background: linear-gradient(170deg, #C1B7E2 0%, rgba(193, 183, 226, 0.00) 100%);
}

.info {
    color      : #243434;
    text-align : center;
    font-family: var(--Typography-Family);
    font-size  : 18px;
    font-style : normal;
    font-weight: 400;
    line-height: 24px;
    max-width  : 540px;
    max-height : 72px;
    width      : 100%;
    height     : 100%;
}

.info-pers-juridica {
    color      : #243434;
    text-align : center;
    font-family: var(--Typography-Family);
    font-size  : 32px;
    font-style : normal;
    font-weight: 900;
    line-height: 40px;
}

.date-introductive, .date-onboarding {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    flex-shrink    : 0;
    max-width      : 540px;
    max-height     : 600px;
    width          : 100%;
    height         : 100%;
    gap: 48px;
}

.title-formular {
    color      : #243434;
    text-align : center;
    font-family: var(--Typography-Family);
    font-size  : 32px;
    font-style : normal;
    font-weight: 900;
    line-height: 40px;
}

.inputs-formular, .inputs-formular .columns .column-form {
    display        : flex;
    flex-direction : column;
    justify-content: flex-start;
    gap            : 16px;
    align-self     : stretch;
}

.input-date {
    display      : flex;
    align-items  : flex-start;
    gap          : 4px;
    align-self   : stretch;
    border-radius: 8px;
    border       : 1px solid #D7D6D5;
    background   : #FFF;
    width        : 100%;
}

::placeholder{
    padding: 12px 0 12px 0;
    align-self : stretch;
    color      : #91908E;
    font-family: var(--Typography-Family);
    font-size  : 16px;
    font-style : normal;
    font-weight: 400;
    line-height: 24px;
}

.continue-button, .continue-button-onboarding, .send-button {
    display        : flex;
    padding        : 16px 24px;
    justify-content: center;
    align-items    : center;
    gap            : 8px;
    border-radius  : 99px;
    border         : 1px solid rgba(0, 0, 0, 0.08);
    background     : #FCD447;
    color          : #243434;
    font-family    : var(--Typography-Family);
    font-size      : 18px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 24px;
}

.continue-button-onboarding{
    max-width: 1172px;
    justify-self: center;
}

.continue-arrow {
    display        : flex;
    width          : 24px;
    height         : 24px;
    padding        : 4px 4.987px 4.989px 4px;
    justify-content: center;
    align-items    : center;
}

.input-container {
    position: relative;
    width: 100%;
}

.input-container input {
    display      : flex;
    padding      : 12px;
    align-items  : flex-start;
    gap          : 8px;
    align-self   : stretch;
    border-radius: 8px;
    border       : 1px solid #D7D6D5;
    background   : #FFF;
    width        : 100%;
    height       : 48px;
    font-size    : 16px;
}

.input-container label {
    position        : absolute;
    left            : 12px;
    top             : 50%;
    transform       : translateY(-50%);
    background-color: transparent;
    color           : #757575;
    pointer-events  : none;
    transition      : 0.2s ease all;
}

.input-container input:focus ~ label,
.input-container input.has-value ~ label,
.input-container textarea:focus ~ label,
.input-container textarea.has-value ~ label
 {
    top             : 0;
    left            : 10px;
    font-size       : 12px;
    background-color: white;
    border-radius   : 4px;
    padding         : 0 10px;
    color           : #7D5CE6;
}

.input-container input:focus,
.input-container input:not(:placeholder-shown),
.input-container textarea:focus,
.input-container textarea:not(:placeholder-shown) {
    padding-top   : 10px;
    padding-bottom: 4px;
    padding-right: 12px;
    padding-left: 12px;
}

.input-container input:focus,
.input-container textarea:focus {
    border    : 1px solid #7D5CE6;
    outline   : none;
    box-shadow: 0 0 0 2px rgba(125, 92, 230, 0.2);
}

.input-container input:focus~label,
.input-container textarea:focus~label {
    color      : #7D5CE6;
    font-weight: 500;
}

.formular-2 {
    display: none;
}

.header-formular {
    display    : flex;
    width      : 100%;
    background : var(--colour-esxnew-purple-50, #EDEBF7);
    flex-shrink: 0;
    max-height : 400px;
    height     : 100%;
}

.content-header {
    display        : flex;
    width          : 100%;
    padding        : 200px 56px 30px 56px;
    justify-content: space-between;
    align-items    : flex-start;
}

.title-quote {
    display       : flex;
    padding       : 0px 32px;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
    max-width     : 475px;
    width         : 100%;
    max-height    : 168px;
    height        : 100%;
}

.text-esx-2 {
    display        : flex;
    height         : 78px;
    flex-direction : column;
    justify-content: center;
    align-self     : stretch;
    color          : var(--Content-Primary, #243434);
    font-family    : 'Race Sport Free', sans-serif;
    font-size      : 68px;
    font-style     : normal;
    font-weight    : 400;
    line-height    : normal;
}

.quote-2 {
    color      : var(--Content-Primary, #243434);
    font-family: 'Avenit-Heavy', sans-serif;
    font-size  : 30px;
    font-style : normal;
    font-weight: 400;
    line-height: 35px;
}

.details-centru {
    color      : var(--Content-Primary, #243434);
    text-align : center;
    font-family: var(--Typography-Family);
    font-size  : 32px;
    font-style : normal;
    font-weight: 900;
    line-height: 40px;
}

.rectangle-2 {
    width        : 180px;
    height       : 40px;
    border-radius: 20px 0px;
    background   : #FCD447;
}

.detalils-centru-sportiv {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
}

.form-2 {
    height        : 100%;
    display       : flex;
    width         : 100%;
    flex-direction: column;
    align-items   : center;
    gap           : 86px;
    margin-top: 16px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.content-formular-2 {
    display              : grid;
    gap                  : 50px;
    grid-template-columns: repeat(2, 1fr);
    padding              : 0px 120px;
    justify-content      : space-between;
    align-items          : start;
    width                : 100%;
    height               : 100%;
}

.form2-frame-1,
.form2-frame-2,
.form3-frame-3 {
    display       : flex;
    max-width     : 540px;
    width         : 100%;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
    margin-top: 16px;
}

.eticheta-atr-fiscal{
    margin-top: 16px;
}

.section-detalii-centru, .section-detalii-legale {
    margin-top : 64px;
    display    : flex;
    align-items: center;
    gap        : 16px;
    align-self : stretch;
    width      : 100%;
    padding    : 0px 120px;
}

.back-button {
    display      : flex;
    width        : 48px;
    height       : 48px;
    padding      : 10px;
    align-items  : center;
    gap          : 10px;
    border-radius: 999px;
    border       : none;
    background   : var(--Colour-Stroke-Transparent, rgba(71, 70, 66, 0.10));
}

.arrow-back {
    width      : 24px;
    height     : 24px;
    flex-shrink: 0;
}

.paragraph-details {
    color      : var(--Content-Primary, #243434);
    font-family: var(--Typography-Family);
    font-size  : 32px;
    font-style : normal;
    font-weight: 900;
    line-height: 60px;
    height     : 48px;
}

.eticheta {
    margin-bottom: 0;
    flex: 1 0 0;
    align-self: stretch;
    color: var(--Colour-Content-Tertiary, #000000);
    font-family: var(--Typography-Family);
    font-size  : 16px;
    font-style : normal;
    font-weight: 400;
    line-height: 24px;
}

.upload-container {
    cursor: pointer;
    position        : relative;
    width           : 100%;
    max-width: 300px;
    max-height      : 100px;
    height          : 100%;
    background-color: #ece9e9;
    border-radius   : 10px;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.upload-button {
    position        : absolute;
    bottom          : -5px;
    right           : 0;
    width           : 36px;
    height          : 36px;
    background-color: #ffd700;
    border-radius   : 99px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    cursor          : pointer;
    border          : none;
    color           : #333;
    font-size       : 24px;
    transition: transform 0.3s ease;

}

.upload-button.has-image {
    transform: rotate(45deg);
    background-color: #dc3545;
    color: white;
}

[id^="imagePreview"] {
    max-width : 100%;
    max-height: 100%;
    object-fit: cover;
}

input[type="file"][id^="fileInput"] {
    display: none;
}

.grid-incarcare-poze {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 12px;
    align-self    : stretch;
}

.grid-1,
.grid-2 {
    display    : flex;
    height     : 101px;
    align-items: flex-start;
    gap        : 12px;
    align-self : stretch;
}

.radio-group {
    display        : flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
    margin-bottom: 32px;
}

.radio-group-1,
.radio-group-2 {
    max-width: 270px;
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

.radio-option label {
    color      : var(--Colour-Content-Tertiary, #91908E);
    font-family: var(--Typography-Family);
    font-size  : 16px;
    font-style : normal;
    font-weight: 400;
    line-height: 24px;
    text-wrap: nowrap;
}

.radio-option {
    display    : flex;
    height     : 48px;
    align-items: center;
    gap        : 16px;
    flex       : 1 0 0;
}

.bottom-section {
    margin-bottom  : 50px;
    display        : flex;
    padding        : 0px 120px;
    justify-content: space-between;
    align-items    : center;
    align-self     : stretch;
}

.current-mobile {
    display: none;
}

.current-section {
    display      : flex;
    padding-right: 92px;
    align-items  : center;
    max-width    : 520px;
    width        : 100%;
}

.current {
    display        : flex;
    height         : 56px;
    justify-content: center;
    align-items    : center;
    gap            : 10px;
    border-radius  : 35px;
    border         : 1.5px solid var(--Colour-Brand-Secondary, #5337AE);
    background     : #FFF;
    color          : var(--Colour-Content-Primary, #2A2A27);
    font-family    : var(--Typography-Family);
    font-size      : 18px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 24px;
    max-width      : 289px;
    width          : 100%;
    padding: 16px;
    text-wrap: nowrap;
}

.termeni-si-conditii{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.section-number {
    display        : flex;
    height         : 56px;
    width          : 75px;
    padding        : 16px;
    justify-content: center;
    align-items    : center;
    gap            : 10px;
    border-radius  : 35px;
    border         : 1.5px solid var(--colour-esxnew-purple-50, #EDEBF7);
    background     : #FFF;
    color          : var(--Colour-Content-Tertiary, #91908E);
    text-align     : center;
    font-family    : var(--Typography-Family);
    font-size      : 18px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 24px;
    cursor: pointer;
}

.line {
    width     : 36px;
    height    : 1.5px;
    background: var(--colour-esxnew-purple-50, #EDEBF7);
}

.next-step {
    display        : flex;
    padding        : 16px;
    justify-content: center;
    align-items    : center;
    gap            : 8px;
    border-radius  : 99px;
    border         : 1px solid var(--Stroke-Transparent, rgba(0, 0, 0, 0.08));
    background     : var(--Brand-Primary, #FCD447);
    color          : var(--Content-Primary, #243434);
    font-family    : var(--Typography-Family);
    font-size      : 18px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 24px;
    max-width      : 214px;
    width          : 100%;
}

.margin-top{
    margin-top: -250px;
}

.input-container input.error {
    border: 1px solid #e65c5c;
    box-shadow: 0 0 0 2px rgba(230, 92, 92, 0.2);
}

.input-container input.error~label {
    color: red;
}

.pt-124{
    padding-top:124px;
}

.pt-200{
    padding-top:200px;
}


.start-text{
    width: 100%;
    background: var(--colour-esxnew-purple-50, #EDEBF7);
}

.start-text h1{
    max-width: 1048px;
    width: 100%;
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 52px;
    font-style: normal;
    font-weight: 900;
    line-height: 64px;
}
.start-text h4{
    margin-bottom: 96px;
    width: 100%;
    max-width: 1048px;
}

.margin-feedback, .beneficiile-colaborarii,.cum-functioneaza-title,.h1-footer{
    font-weight: 900;
}
[type="radio"] {
    width: 24px;
    height: 24px;
}

.form2-frame-2{
    justify-self: end;
}

/* facilitati */
.radio-group-facilities{
    align-self: stretch;
    align-items: flex-start;
}

.radio-facilities{
    display: flex;
    margin-bottom: 32px;
}

.radio-group-2{
    max-width: 270px;
    width: 100%;
}

/* landing page */

.landing-page{
    background-color: var(--colour-esxnew-purple-50, #EDEBF7);
}

.inscrie-sala{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 52px;
    font-style: normal;
    font-weight: 900;
    line-height: 64px;
    padding-top: 200px;
}

.inscrie-sala-introduction{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 32px;
}

.header-section{
    gap: 92px;
    padding: 48px 0px 74px 0px;
}

.first-header-content, .second-header-content{
    border-radius: 24px;
    border: 2px solid var(--colour-esxnew-purple-100, #D9D3ED);
    width: 480px;
    background-color: #FFF;
}

.second-header-content {
    position: relative;
    overflow: hidden;
}

.second-header-content::before {
    content: "";
    position: absolute;
    top: 41%;
    left: 50%;
    width: 100%;
    height: 29%;
    filter: blur(62px);
    background: radial-gradient(circle,rgba(83, 55, 174, 0.50) 0%, transparent 79%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translate(-50%, -100%) scale(0);
    z-index: 0;
    border-radius: 55% 55% 0 0;
}

.second-header-content:hover::before {
    transform: translate(-50%, -100%) scale(1);
}

.first-header-content {
    position: relative;
    overflow: hidden;
}

.first-header-content::before {
    content: "";
    position: absolute;
    top: 41%;
    left: 50%;
    width: 100%;
    height: 29%;
    background: radial-gradient(circle,rgba(83, 55, 174, 0.50) 0%, transparent 79%);
    filter: blur(62px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translate(-50%, -100%) scale(0);
    z-index: 0;
    border-radius: 55% 55% 0 0;
}

.first-header-content:hover::before {
    transform: translate(-50%, -100%) scale(1);
}

.header-section.hovering .first-header-content:not(:hover) img,
.header-section.hovering .second-header-content:not(:hover) img {
    opacity: 0.5;
    filter: blur(1px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.header-section.hovering .first-header-content:not(:hover) .button,
.header-section.hovering .second-header-content:not(:hover) .button {
    background-color: rgb(201, 201, 201);
    border: 1px solid white;
}

.first-header-content:hover img,
.second-header-content:hover img {
    opacity: 1;
    filter: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.image-1{
    display: flex;
    max-height: 240px;
    width: 100%;
    height:100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    object-fit:cover;
    margin-top: 20px;
}

.image-2{
    display: flex;
    max-height: 240px;
    width: 100%;
    height:100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    object-fit:cover;
    margin-top: 20px;
}

.image-1,.image-2{
    border-bottom: 2px solid  #D9D3ED;
    padding-left: 0px;
}
.text-content{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 32px 32px 32px;
    text-align: center;
}

.text-content p{
    color: var(--Content-Primary, #243434);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

h3{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 32px;
    font-style: normal;
    font-weight: 900 !important;
    line-height: 40px;
}

.button-recomanda-sala, .button-inscrie-sala{
    background: var(--Colour-Extension-Background-BrandPrimary, #FCD447);
    border-radius: var(--Radius-radii-button, 999px);
    border: 1px solid var(--Colour-Extension-Background-BrandPrimary, #FCD447);
    font-size: 18px;
    font-style: normal;
    line-height: 24px;
    font-weight: 700;
    padding: var(--Padding-paddi-16, 16px);
    width: 65%;
    align-self: center;
}

.mt-200{
    margin-top: 200px;
}

.mt-100{
    margin-top: 100px;
}

.mt-120{
    margin-top: 120px;
}

.mb-120{
    margin-bottom: 120px;
}

.mb-100{
    margin-bottom: 100px;
}

.mb-200{
    margin-bottom: 200px;
}

.gap-32{
    gap: 32px;
}

.color{
    background-color: var(--colour-esxnew-purple-50, #EDEBF7);
}

h1{
    color: var(--Content-Primary, #243434);
    font-family: var(--Typography-Family);
    font-size: 52px;
    font-style: normal;
    font-weight: 800;
    line-height: 64px;
}

.yellow-square{
    width: 280px;
    height: 280px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FEF6DA;
    border-radius: 24px;
}

.cyan-square{
    width: 280px;
    height: 280px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background-color: #E7F4F4;
    border-radius: 24px;
}

.title-benefits{
    color: var(--Content-Primary, #243434);
    font-family: var(--Typography-Family);
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 40px
}

.paragraph-benefits{
    color: var(--Content-Primary, #243434);
    font-family: var(--Typography-Family);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.how-it-works{
    max-width: 307px;
    max-height: 272px;
}

.gap-64{
    gap: 64px;
}

.how-it-works h3{
    color: var(--Content-Primary, #243434);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px;
    margin: 12px 0 12px 0;
}

.how-it-works p{
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.gray-container{
    background: var(--colour-esxnew-grey-50, #ECECEC);
    padding: 200px 120px;
    gap: 64px;
}

.send-button{
    align-self: center;
    width: 327px;
}

.h1-footer{
    max-width: 1048px;
    align-self: center;
}

#submitRegister.disabled, #add-gym-btn.disabled, .continue-button.disabled, .step-3.disabled, .step-4.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc !important;
    color: #666666 !important;
    border-color: #999999 !important;
    pointer-events: none;
}

#add-gym-btn{
    border-radius: 99px;
    border: 1px solid var(--Stroke-Transparent, rgba(0, 0, 0, 0.08));
    background: var(--Brand-Primary, #FCD447);
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    width: 100%;
    margin-top: 64px;
}

.overlay-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(36, 52, 52, 0.80);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none;
}

.overlay-popup.active {
    display: flex;
}

.thank-u-popup {
    position: relative;
    width: 90%;
    max-width: 600px;
    padding: 96px 40px 64px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    border-radius: 16px;
    background: var(--Background-Primary, #FFF);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.text-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.header-popup {
    color: var(--Content-Primary, #243434);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px;
    margin: 0;
}

.info-popup {
    color: var(--Content-Secondary, #505D5D);
    text-align: center;
    font-family: var(--Typography-Family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.button-popup {
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    border: 1px solid var(--Stroke-Transparent, rgba(0, 0, 0, 0.08));
    background: var(--Brand-Primary, #FCD447);
    cursor: pointer;
    font-family: var(--Typography-Family);
    font-weight: 600;
    transition: background-color 0.2s;
}

.button-popup:hover {
    background: #f0c835;
}

.close-popup {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    border: 1px solid var(--Stroke-Opaque, #E0E0E0);
    background: var(--Background-Primary, #FFF);
    cursor: pointer;
}

.faq-self{
    background: var(--colour-esxnew-yellow-50, #FEF6DA);
}
.accordion-button, .accordion-item, #faq{
    background-color: var(--colour-esxnew-yellow-50, #FFF);
}
#faq h1{
    color: var(--Content-Primary, #243434);
}

/*owl section*/
.video-box .owl-stage {
    display: flex;
    align-items: center;
}
.video-box {
    width: 100%;
    margin-top: 100px;
    padding: 0 0 0 56px;
}

.videos-container{
    padding-bottom: 200px;
}

.video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    height: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-card {
    padding: 10px;
}
.owl-carousel .item {
    display: inline-block;
    width: 100%;
    margin-right: 32px;
    box-sizing: border-box;
}
.owl-carousel {
    display: flex;
    justify-content: space-between;
}
.video-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 32px;
    border-radius: 0 0 16px 16px;
    background: #FFF;
    box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.12);
}
.video-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 80px;
    max-width: 100%;
    aspect-ratio: 1/1;
}
.video-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.video-role{
    color: var(--Colour-Content-Secondary, #656460);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-wrap: nowrap;
}
.video-text {
    min-width: 0;
}
.video-name,
.video-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-name{
    color: var(--Content-Primary, #243434);
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    margin-bottom: unset;
}

.onboarding{
    overflow-x: hidden;
}

.container-poza-button{
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;

}

.benefits-container-2{
    margin-bottom: 200px;
}

  .cum-functioneaza{
        padding-bottom: 200px;
    }

/* Tablets Large: 768px - 1250px */
@media screen and (min-width: 768px) and (max-width: 1250px) {
    /* Layout principal */
    .first-page {
        width: -webkit-fill-available;
        overflow-x: hidden;
    }

    /* Formulare */
    .content-formular-1,
    .content-formular-1-onboarding {
        padding: 50px 50px;
        align-items: center;
        flex-direction: column;
    }

    .formular-1 {
        max-height: unset;
    }

    .formular-client {
        padding: 96px 24px;
    }

    /* Progress și date */
    .progress-group {
        margin: 32px 0 0 0;
    }

    .date-introductive,
    .date-onboarding {
        max-height: unset;
    }

    .title-formular {
        margin-bottom: unset;
    }

    /* Introducere și imagini */
    .introduction-frame {
        width: 275px;
        gap: unset;
    }

    .gym-image {
        background-position: center;
        background-size: cover;
        width: 100%;
        max-width: 250px;
        height: 100%;
        max-height: 350px;
        aspect-ratio: 623 / 881;
        flex-shrink: 0;
        margin-left: -120px;
        z-index: 1;
    }

    /* Frame-uri colorate */
    .yellow-frame {
        position: absolute;
        bottom: 46%;
        margin-left: 50px;
        max-width: 162px;
        max-height: 138px;
        padding: 24px 12px;
        border-radius: 16px 0px 16px 16px;
        z-index: 2;
    }

    .about-us {
        padding: 16px 36px 16px 12px;
        border-radius: 0px 16px 16px 16px;
        max-width: 178px;
        font-size: 12px;
        font-weight: 800;
        line-height: 16px;
    }

    .white-fade {
        top: 363px;
        height: 100px;
    }

    /* Texte și butoane */
    .text-join-us {
        font-size: 12px;
        font-style: normal;
        font-weight: 800;
        line-height: 16px;
    }

    .button-join-us {
        padding: 8px;
    }

    .button-join-us a {
        font-size: 14px;
        font-style: normal;
    }

    .frame-join-us {
        display: flex;
        width: 138px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .quote {
        font-size: 11px;
        text-wrap: wrap;
        width: unset;
    }

    .rectangle {
        width: 45px;
        height: 10px;
        aspect-ratio: 9/2;
    }

    .text-esx {
        font-size: 24px;
        margin: 0;
    }

    /* Secțiuni specifice */
    .landing-self-register {
        margin-bottom: 100px;
    }

    .arrow-frame {
        display: none;
    }

    /* Start text */
    .start-text h1 {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-size: 35px;
        font-style: normal;
        font-weight: 800;
        line-height: 35px;
        max-width: 650px;
    }

    .start-text h4 {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        max-width: 600px;
    }
}

/* Tablets Medium: 768px - 1024px */
@media screen and (max-width: 1024px) {
    /* Formulare detalii */
    .content-formular-2 {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .content-formular-2 .form2-frame-2 {
        margin-top: 16px;
    }

    /* Etichete */
    .eticheta-durata-activ,
    .eticheta-incarcare-poze {
        padding: 12px 0px;
    }

    /* Radio groups */
    .radio-group {
        gap: unset;
    }

    /* Secțiuni */
    .current-section {
        padding-right: 0;
    }

    .bottom-section {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 0 24px;
        width: 100%;
        gap: 48px;
    }

    .margin-top {
        margin-top: unset;
    }

    .line {
        width: 175px;
    }

    .next-step {
        max-width: 70%;
    }

    .formular-2 .form-2 {
        flex-direction: column;
    }

    /* Current states */
    .current {
        display: none;
    }

    .current-mobile {
        display: flex;
        height: 56px;
        width: 75px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 35px;
        border: 1.5px solid var(--colour-esxnew-purple-50, #5337AE);
        background: #FFF;
        color: var(--Colour-Content-Tertiary, #2A2A27);
        text-align: center;
        font-family: var(--Typography-Family);
        font-size: 18px;
        font-style: normal;
        font-weight: 800;
        line-height: 24px;
    }
}

/* Tablets Small: 768px - 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Video info */
    .video-info {
        padding: 10px;
    }

    /* Header section */
    .header-section {
        flex-direction: column;
        gap: 40px;
        padding-top: 100px;
        align-items: stretch;
    }

    .first-header-content,
    .second-header-content {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: 575px;
        border-radius: 12px;
    }

    /* Content sections */
    .how-it-works {
        width: 100%;
        max-width: 400px;
        padding: 0 20px;
    }

    .video-box {
        padding: 0 20px;
    }

    /* Typography */
    h1 {
        font-size: 42px;
        line-height: 52px;
        text-align: center;
        padding: 0 20px;
    }

    /* Margins */
    .mt-200 {
        margin-top: 120px;
    }

    .mb-200 {
        margin-bottom: 120px;
    }

    /* Formulare onboarding */
    .content-formular-1-onboarding {
        flex-direction: column;
        padding: 0 20px;
    }

    .date-onboarding {
        width: 100%;
    }

    /* Squares */
    .yellow-square,
    .cyan-square {
        margin-bottom: 30px;
    }

    /* Benefits */
    .title-benefits,
    .paragraph-benefits {
        text-align: center;
        padding: 0 20px;
    }

    /* Text content */
    .text-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .text-content > div {
        flex-grow: 1;
    }
}

/* Mobile Large: max-width 768px */
@media screen and (max-width: 768px) {
    .termeni-si-conditii{
        font-size: 14px;
        margin-bottom: 80px;
    }
    .formular-client h1 {
        font-size: 24px;
    }

    .radio-group{
        margin-bottom: 0px;
    }

    .container-poza-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 250px;
    margin-bottom: 20px;
}

   .cum-functioneaza{
        padding-bottom: 100px;
    }

    #faq{
        padding: 100px 0px !important;
    }
.text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video
    .formular-client h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .formular-client h6 {
        font-size: 14px;
        line-height: 16px;
    }

    .formular-client {
        padding: 100px 24px;
    }

    /* Coloane */
    .columns {
        flex-direction: column;
        gap: 16px;
        margin-top: 0px;
    }

    /* Popup */
    .thank-u-popup {
        padding: 80px 24px 48px 24px;
    }

    .header-popup {
        font-size: 20px;
        line-height: 28px;
    }

    /* Introduction */
    .introduction-text {
        padding: 0 16px;
    }

    .landing-self-register {
        align-items: flex-start;
        padding: 55px 24px;
        position: relative;
        margin-bottom: 65px;
    }

    .header-gym-self-register {
        padding: 12px 24px;
        align-items: center;
        justify-content: space-between;
    }

    .introduction-frame {
        display: flex;
        width: 178px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 50px;
    }

    /* Text și rectangle */
    .text-esx {
        height: 28px;
        flex-direction: column;
        font-size: 24px;
    }

    .rectangle {
        border-radius: 16px 0px;
        width: 45px;
        height: 10px;
        aspect-ratio: 9/2;
    }

    .quote {
        font-size: 12px;
        width: 154px;
        padding-bottom: 0;
    }

    .about-us {
        padding: 16px 36px 16px 12px;
        border-radius: 0px 16px 16px 16px;
        max-width: 178px;
        font-size: 12px;
        font-weight: 800;
        line-height: 16px;
    }

    /* Secțiuni detalii */
    .section-detalii-centru,
    .section-detalii-legale {
        padding: 0px 0px 0px 24px;
        margin-top: 32px;
    }

    /* Gym image și yellow frame */
    .gym-image {
        max-width: 193px;
        max-height: 273px;
        aspect-ratio: 193/273;
        margin-left: -50px;
    }

    .yellow-frame {
        position: absolute;
        bottom: 10px;
        right: 10%;
        left: auto;
        margin-left: 0;
        max-width: 162px;
        max-height: 138px;
        padding: 24px 12px;
        border-radius: 16px 0px 16px 16px;
        z-index: 2;
    }

    /* Butoane join us */
    .text-join-us {
        max-width: 138px;
        font-size: 12px;
        line-height: 16px;
    }

    .button-join-us {
        padding: 6px 8px;
        font-size: 14px;
        line-height: 26px;
        max-width: 138px;
    }

    .button-join-us a {
        color: var(--Content-InversePrimary, #FFF);
        font-weight: 800;
        font-size: 14px;
        font-style: normal;
    }

    .frame-join-us {
        width: 138px;
        gap: 8px;
    }

    .white-fade {
        top: 300px;
        height: 100px;
    }

    .arrow-frame {
        display: none;
    }

    /* Formulare */
    .formular-1 {
        max-height: 983px;
    }

    .content-formular-1,
    .content-formular-1-onboarding {
        padding: 0px 24px;
        gap: 64px;
        flex-direction: column;
        align-items: center;
    }

    .progress-group {
        margin: 32px 0px;
        max-height: 44px;
    }

    /* Info text */
    .info {
        font-size: 14px;
        line-height: 20px;
        max-height: 80px;
    }

    .info-pers-juridica {
        font-size: 20px;
        line-height: 28px;
    }

    .date-introductive,
    .date-onboarding {
        gap: 0px;
    }

    .title-formular {
        font-size: 24px;
        line-height: 32px;
        max-height: 48px;
        height: 100%;
        margin-bottom: 16px;
    }

    .continue-button {
        margin: 48px 0px 24px 0px;
    }

    .section-number {
        width: 56px;
    }

    /* Header formular detalii sala */
    .header-formular {
        max-height: 264px;
        height: 100%;
        flex-shrink: 0;
    }

    .content-header {
        display: flex;
        flex-direction: column;
        padding: 104px 150px 38px 24px;
    }

    .title-quote {
        padding: 0;
        gap: 8px;
    }

    .margin-top {
        margin-top: 0px;
    }

    .text-esx-2 {
        font-size: 24px;
        height: unset;
        line-height: normal;
        margin-bottom: 0;
    }

    .quote-2 {
        font-size: 12px;
        text-wrap: wrap;
        font-style: normal;
        line-height: 100%;
        margin-bottom: 16px;
    }

    .details-centru {
        font-family: var(--Typography-Family);
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 28px;
        margin-bottom: 0px;
        text-wrap: nowrap;
    }

    .details-centru-sportiv,
    .details-centru-legale {
        gap: 4px;
    }

    .rectangle-2 {
        width: 90px;
        height: 20px;
    }

    /* Content formular 2 */
    .content-formular-2 {
        display: flex;
        flex-direction: column;
        padding: 0px 24px;
        max-height: 100%;
        gap: unset;
    }

    .paragraph-details {
        font-size: 20px;
    }

    .section-detalii-centru,
    .section-detalii-legale {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    /* Input containers */
    .input-container {
        margin-bottom: 0px;
    }

    .input-container p .eticheta {
        margin-bottom: 16px;
    }

    .radio-group {
        flex-direction: column;
    }

    .radio-facilities {
        flex-direction: column;
    }

    .form-2 {
        gap: 24px;
    }

    /* Etichete */
    .eticheta {
        margin-bottom: 0px;
        padding: 12px 0px 12px 0px;
    }

    #peste-10-ani {
        width: 20px;
        height: 20px;
    }

    .eticheta-incarcare-poze {
        margin-top: 16px;
    }

    .form2-frame-2 {
        margin-top: 16px;
        gap: 20px;
    }

    /* Bottom section */
    .bottom-section {
        display: flex;
        flex-direction: column;
        padding: 0 24px;
        width: 100%;
        gap: 48px;
    }

    .current-section {
        width: fit-content;
        padding: 24px 0 0 0;
    }

    .current {
        display: none;
    }

    .current-mobile {
        display: flex;
        height: 56px;
        width: 56px;
        padding: 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 35px;
        border: 1.5px solid var(--colour-esxnew-purple-50, #5337AE);
        background: #FFF;
        color: var(--Colour-Content-Tertiary, #2A2A27);
        text-align: center;
        font-family: var(--Typography-Family);
        font-size: 18px;
        font-style: normal;
        font-weight: 800;
        line-height: 24px;
    }

    .line {
        width: 75px;
    }

    .next-step {
        max-width: 100%;
    }

   .videos-container{
        padding-top: 100px !important;
        padding-bottom: 100px;
    }

    .start-text{
        padding-top: 100px !important;
    }

    .beneficiile-colaborarii{
        margin-top: 100px !important;
        margin-bottom: 50px !important;
    }
    /* Start text */
    .start-text h1 {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 800;
        line-height: 35px;
        max-width: 327px;
        margin-bottom: 16px;
    }

    .start-text h4 {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        max-width: 327px;
        margin-bottom: 32px;
    }

    #form-adauga-o-sala-client{
        padding-top: 26px;
    }
}

/* Mobile Standard: max-width 767px */
@media (max-width: 767px) {
    /* Container benefits */
    .benefits-container {
        flex-direction: column;
        align-items: center;
        padding: 16px 0 16px 0;
    }

    .benefits-container-2 {
        flex-direction: column-reverse;
        align-items: center;
        margin-bottom: 100px;
    }

    .cum-functioneaza-title{
        margin-top: 100px !important;
        margin-bottom: 50px !important;
    }

    .title-benefits {
        align-self: center;
        text-align: center;
    }

    .paragraph-benefits {
        text-align: center;
        align-self: center;
    }

    /* Video info */
    .video-info {
        padding: 20px;
    }

    .video-name {
        font-size: 25px;
        text-wrap: nowrap;
    }

    .video-role {
        font-size: 20px;
    }

    /* Formulare onboarding */
    .content-formular-1-onboarding {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .continue-button-onboarding {
        width: 90% !important;
        margin: 0 auto;
    }

    .input-date {
        width: 100% !important;
    }

    /* Header section */
    .header-section {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 26px;
        gap: 20px;
    }

    .first-header-content,
    .second-header-content {
        padding: 16px 0 16px 0;
        border-radius: 12px;
    }

    .text-content .button {
        margin-top: auto;
    }

    /* Squares */
    .yellow-square,
    .cyan-square {
        width: 200px;
        height: 200px;
    }

    /* How it works */
    .how-it-works {
        width: 100%;
        max-width: 280px;
    }

    /* Typography */
    h1 {
        font-size: 32px;
        line-height: 40px;
    }

    h3 {
        font-size: 24px;
        line-height: 32px;
        padding: 0 15px;
        text-align: center;
    }

    /* Video box */
    .video-box {
        margin-top: 50px;
        padding: 0 10px;
    }

    /* Gray container */
    .gray-container {
        padding: 100px 20px !important;
        gap: 24px;
    }

    /* Formulare */
    .formular-1-onboarding {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }

    .inputs-formular {
        width: 100%;
    }

    /* Complete titles */
    .title-complete {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-family: var(--Typography-Family);
        font-size: 24px;
        font-style: normal;
        font-weight: 800;
        line-height: 32px;
        margin-bottom: 16px;
    }

    .recommend {
        color: var(--Content-Primary, #243434);
        text-align: center;
        font-family: var(--Typography-Family);
        font-size: 14px;
        font-style: normal;
        font-weight: 800;
        line-height: 16px;
        margin-bottom: 16px;
    }

    /* Buttons */
    .continue-button-onboarding {
        width: 90% !important;
        margin: 20px auto 0 !important;
    }

    .send-button {
        margin: 0 auto;
    }

    .gray-container .send-button {
        width: 144px;
        font-size: 14px;
    }

    /* Footer */
    .h1-footer {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    /* QNA */
    #qna-container {
        padding: 0 15px;
    }

    .secondary-color.fw-bolder.fs-desktop-60.fw-800 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    /* Inscrie sala */
    .inscrie-sala {
        font-size: 26px;
        padding-top: 100px;
    }

    .inscrie-sala-introduction {
        font-size: 16px;
        line-height: 20px;
        padding: 0px 8px 0px 8px;
    }
}

@media (max-width: 480px) {
    /* Video info grid */
    .video-info-grid {
        padding: 12px 24px 12px 24px;
    }

    /* Benefits */
    .paragraph-benefits {
        font-size: 12px;
    }

    .title-benefits {
        font-size: 14px;
    }

    .mb-60 {
        margin-bottom: 60px;
    }

    /* Cum functioneaza *
    
    .text-content p {
        font-size: 12px;
        margin-bottom: 0;
    }

    /* Images */
    .image-2,
    .image-1 {
        max-height: 93px;
        padding-left: unset;
        margin-top: 0px;
    }

    .image-1 {
        padding-left: 10px;
    }

    /* Hover effects (disabled) */
    .first-header-content:hover::before,
    .second-header-content:hover::before {
        display: none;
    }

    .header-section.hovering .first-header-content:not(:hover) img,
    .header-section.hovering .second-header-content:not(:hover) img {
        opacity: 1;
        filter: none;
        transition: none;
    }

    .header-section.hovering .first-header-content:not(:hover) .button,
    .header-section.hovering .second-header-content:not(:hover) .button {
        background: var(--Colour-Extension-Background-BrandPrimary, #FCD447);
        border-radius: var(--Radius-radii-button, 999px);
        border: 1px solid var(--Colour-Extension-Background-BrandPrimary, #FCD447);
    }

    .first-header-content:hover img,
    .second-header-content:hover img {
        transition: none;
    }

    .first-header-content,
    .second-header-content {
        border-radius: 12px;
    }

    .first-header-content::before,
    .second-header-content::before {
        content: none !important;
        display: none !important;
        transform: unset !important;
        background: unset !important;
        transition: unset !important;
    }

    /* Video elements */
    .video-name {
        font-size: 20px;
    }

    .video-image {
        width: 60px;
        height: 60px;
    }

    .video-role {
        font-size: 12px;
    }

    /* Typography */
    h1 {
        font-size: 28px;
        line-height: 36px;
    }

    /* Text content */
    .text-content .button {
        text-wrap: nowrap;
        width: 130px;
        font-size: 14px;
        padding: 8px;
    }

    .text-content {
        padding: 30px 12px 0 12px;
        gap: 14px;
        margin-top: 10px;
    }

    .text-content h3 {
        align-self: center;
        text-wrap: nowrap;
        font-size: 18px;
        line-height: 28px;
        padding: unset;
    }

    /* Squares */
    .yellow-square,
    .cyan-square {
        width: 180px;
        height: 180px;
    }

    /* How it works */
    .how-it-works img {
        width: 80px !important;
        height: 80px !important;
    }

    .how-it-works h3 {
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 800;
        line-height: 16px;
    }

    .how-it-works p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .how-it-works-container {
        gap: 16px;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Gray container */
    .gray-container {
        padding: 100px 15px !important;
    }

    /* Buttons inscrie sala */
    .button-inscrie-sala,
    .button-recomanda-sala {
        margin-top: 20px;
        font-size: 12px;
        line-height: 6px;
        width: 90%;
        color: black;
    }
}

button.next-step[disabled],
button.next-step.disabled {
    background-color: #cccccc !important;
    color: #666 !important;
    border-color: #999 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}