.frame-child51,
.offset-1097474-1-icon5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.offset-1097474-1-icon5 {
    object-fit: cover;
    z-index: 1;
}
.vector-parent7 {
    position: relative;
    background: url("../images/navicitifylog.jpg") no-repeat center;
    background-size: cover;
    height: 100vh;
    flex: 6 !important;
}
.log-in9 {
    position: relative;
    font-size: var(--font-size-base);
    line-height: 18px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-white);
    text-align: left;
    display: inline-block;
    min-width: 47px;
}
.login-label,
.sign-up-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.login-label {
    cursor: pointer;
    border: 1px solid var(--color-white);
    padding: var(--padding-5xs) var(--padding-10xl) var(--padding-3xs);
    background-color: transparent;
    align-self: stretch;
    border-radius: var(--br-9xs);
    overflow: hidden;
    flex-direction: row;
    white-space: nowrap;
}
.login-label:hover {
    background-color: var(--color-gainsboro-700);
    border: 1px solid var(--color-gainsboro-200);
    box-sizing: border-box;
}
.sign-up-button {
    width: 111px;
    flex-direction: column;
    padding: var(--padding-mini) 0 0;
    box-sizing: border-box;
}
.image-2-icon8 {
    height: 80px;
    width: 80px;
    position: relative;
    object-fit: cover;
}
.country-input {
    width: 283px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-xl);
}
.getting-started {
    margin: 0;
    font-size: inherit;
    letter-spacing: 0.02em;
    line-height: 43px;
    font-weight: 500;
    font-family: inherit;
}
.create-your-account,
.getting-started {
    position: relative;
}
.create-your-account-now-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-0xs) 0 var(--padding-3xl);
    text-align: left;
    font-size: var(--font-size-5xl);
    font-family: var(--font-baloo-paaji-2);
    margin-top: -10px;
}
.create-your-account-now-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-xl) 0 0;
    gap: var(--gap-3xs);
}
/* .form-group{
  margin-top: -12px;
} */
.create-your-account-now-button-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: -60px;
}
.age-input {
    width: 455px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 0 var(--padding-xl);
    box-sizing: border-box;
    gap: var(--gap-10xl);
    max-width: 100%;
}
.age-input-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    max-width: 100%;
}
.email2 {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-black);
    text-align: center;
    display: inline-block;
    min-width: 58px;
}
.email-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-7xl);
}
.frame-child52 {
    height: 72px;
    width: 407px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: none;
    max-width: 100%;
}
.enter-email2 {
    width: 113px;
    border: 0;
    outline: 0;
    font-weight: 300;
    font-family: var(--font-poppins);
    font-size: var(--font-size-xl);
    background-color: transparent;
    height: 24px;
    position: relative;
    letter-spacing: 0.02em;
    line-height: 119.1%;
    color: var(--color-darkslategray-200);
    text-align: center;
    display: inline-block;
    padding: 0;
    z-index: 1;
}
.frame-parent52,
.rectangle-parent26 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}
.rectangle-parent26 {
    align-self: stretch;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    flex-direction: row;
    padding: var(--padding-2xl) var(--padding-21xl);
}
.frame-parent52 {
    width: 407px;
    flex-direction: column;
    gap: var(--gap-2xs);
}
.full-name {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-black);
    text-align: left;
    display: inline-block;
    min-width: 104px;
}
.full-name-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-12xs);
}
.frame-child53 {
    height: 72px;
    width: 407px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: none;
    max-width: 100%;
}
.enter-full-name {
    width: 154px;
    border: 0;
    outline: 0;
    font-weight: 300;
    font-family: var(--font-poppins);
    font-size: var(--font-size-xl);
    background-color: transparent;
    height: 24px;
    position: relative;
    letter-spacing: 0.02em;
    line-height: 119.1%;
    color: var(--color-darkslategray-200);
    text-align: left;
    display: inline-block;
    padding: 0;
    z-index: 1;
}
.rectangle-parent27 {
    width: 407px;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-2xl) var(--padding-21xl);
    max-width: 100%;
}
.name-inputted-here,
.nb,
.span3 {
    font-family: var(--font-poppins);
}
.name-inputted-here {
    font-weight: 300;
}
.nb-name-inputted-container {
    flex: 1;
    position: relative;
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
    line-height: 119.1%;
    color: #79768c;
    text-align: left;
    display: inline-block;
    max-width: 100%;
}
.month-dropdown,
.password-field {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}
.month-dropdown {
    flex-direction: row;
    padding: 0 0 0 var(--padding-10xs);
    box-sizing: border-box;
}
.password-field {
    flex-direction: column;
    gap: var(--gap-6xs);
}
.password2 {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-black);
    text-align: left;
    display: inline-block;
    min-width: 101px;
}
.password-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-11xs);
}
.frame-child54 {
    height: 72px;
    width: 407px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: none;
    max-width: 100%;
}
.enter-password1 {
    width: 158px;
    border: 0;
    outline: 0;
    font-weight: 300;
    font-family: var(--font-poppins);
    font-size: var(--font-size-xl);
    background-color: transparent;
    height: 24px;
    position: relative;
    letter-spacing: 0.02em;
    line-height: 119.1%;
    color: var(--color-darkslategray-200);
    text-align: left;
    display: inline-block;
    padding: 0;
    z-index: 1;
}
.name-and-password-container,
.rectangle-parent28,
.sign-up-button-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}
.rectangle-parent28 {
    flex: 1;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    flex-direction: row;
    padding: var(--padding-2xl) var(--padding-21xl);
}
.name-and-password-container,
.sign-up-button-container {
    align-self: stretch;
}
.sign-up-button-container {
    flex-direction: row;
    padding: 0 var(--padding-4xs) 0 var(--padding-12xs);
    box-sizing: border-box;
}
.name-and-password-container {
    flex-direction: column;
    gap: 11.7px;
}
.age {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-black);
    text-align: left;
    display: inline-block;
    min-width: 42px;
}
.age-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-12xs);
}
.frame-child55 {
    height: 72px;
    width: 160px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: none;
}
.material-symbolscalendar-mont-icon {
    height: 55px;
    width: 55px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
}
.frame-parent54,
.rectangle-parent29 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.rectangle-parent29 {
    cursor: pointer;
    border: 2px solid var(--color-slateblue-300);
    padding: var(--padding-11xs) var(--padding-32xl) var(--padding-4xs)
        var(--padding-35xl);
    background-color: var(--color-ghostwhite-400);
    border-radius: var(--br-5xs);
    flex-direction: row;
}
.frame-parent54 {
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 160px;
}
.country {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-poppins);
    color: var(--color-black);
    text-align: left;
    display: inline-block;
    min-width: 84px;
}
.country-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-12xs);
}
.frame-child56 {
    height: 72px;
    width: 231px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    box-sizing: border-box;
    display: none;
}
.tunisia {
    position: relative;
    font-size: var(--font-size-5xl);
    letter-spacing: 0.02em;
    line-height: 29px;
    font-weight: 300;
    font-family: var(--font-poppins);
    color: #848484;
    text-align: left;
    display: inline-block;
    min-width: 86px;
    z-index: 1;
}
.name-and-password-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-6xs) 0 0;
}
.material-symbolskeyboard-arro-icon4 {
    height: 43px;
    width: 43px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
}
.rectangle-parent30 {
    align-self: stretch;
    border-radius: var(--br-5xs);
    background-color: var(--color-ghostwhite-400);
    border: 2px solid var(--color-slateblue-300);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--padding-xs) var(--padding-2xs) var(--padding-2xs)
        var(--padding-xl);
    gap: var(--gap-xl);
}
.email-input-area,
.frame-parent53 {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.email-input-area {
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 150px;
}
.frame-parent53 {
    flex-direction: row;
    gap: var(--gap-base);
    max-width: 100%;
}
.frame-child57,
.frame-wrapper39 {
    box-sizing: border-box;
    max-width: 100%;
}
.frame-wrapper39 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-4xs) var(--padding-base) var(--padding-12xs);
}
.frame-child57 {
    height: 72px;
    width: 407px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--color-slateblue-300);
    border: 2px solid var(--color-slateblue-300);
    display: none;
}
.signup1 {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    font-weight: 600;
    font-family: var(--font-poppins);
    color: var(--color-white);
    text-align: center;
    display: inline-block;
    min-width: 75px;
    z-index: 1;
}
.rectangle-parent31 {
    cursor: pointer;
    border: 2px solid var(--color-slateblue-300);
    padding: 10px;
    background-color: var(--color-slateblue-300);
    align-self: stretch;
    border-radius: var(--br-5xs);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
}
.rectangle-parent31:hover {
    background-color: var(--color-mediumslateblue-400);
    border: 2px solid var(--color-mediumslateblue-400);
    box-sizing: border-box;
}
.have-an-account1,
.span4 {
    font-family: var(--font-poppins);
}
.span4 {
    font-weight: 600;
}
.have-an-account {
    color: var(--color-black);
}
.login3 {
    color: var(--color-slateblue-300);
    text-decoration: none;
}
.login2 {
    font-weight: 600;
    font-family: var(--font-poppins);
}
.have-an-account-container {
    position: relative;
    font-size: var(--font-size-xl);
    letter-spacing: 0.02em;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    width: max-content;
}
.frame-parent51,
.frame-parent55,
.login-link {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.login-link {
    flex-direction: row;
    padding: 0 var(--padding-63xl) 0 var(--padding-55xl);
}
.frame-parent51,
.frame-parent55 {
    width: 407px;
    flex-direction: column;
    /* gap: var(--gap-6xl); */
    max-width: 100%;
}
.frame-parent51 {
    margin: 0;
    width: 437px;
    padding: 0 var(--padding-xl) 0 0;
    box-sizing: border-box;
    margin-top: -40px;
}
.myfg {
    background: #f2f1fb;
    border: 2px solid #251d50;
    padding: 10px;
    width: 400px;
}
.myfgs {
    background: #f2f1fb;
    border: 2px solid #251d50;
    padding: 10px;
    width: 188px;
}
.full-name-password-container {
    align-self: stretch;
    flex-direction: column;
    align-items: flex-end;
    /* gap: var(--gap-32xl); */
    max-width: 100%;
    gap: 4rem;
}
.email-input,
.full-name-password-container,
.signup {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.email-input {
    flex-direction: column;
    justify-content: center;
    /* padding: var(--padding-17xl) 0 0; */
    box-sizing: border-box;
    flex: 6 !important;
}
.top-logo {
    margin-left: 205px;
}
.signup {
    width: 100%;
    position: relative;
    background-color: var(--color-gray-200);
    overflow: hidden;
    flex-direction: row;
    gap: 130px;
    line-height: normal;
    letter-spacing: normal;
    /* text-align: right; */
    font-size: var(--font-size-17xl);
    color: var(--color-black);
    font-family: var(--font-poppins);
    margin-left: 0 !important;
}
.form-group {
    padding-block: 0.4rem;
}
.getting-started {
    text-align: center;
}
.create-your-account-now-wrapper {
    width: 100%;
}
.create-your-account {
    padding-top: 0.2rem;
    text-align: center;
    font-size: 1.2rem;
}

@media screen and (max-width: 1200px) {
    .signup {
        gap: 0.9rem !important;
    }
}
@media screen and (max-width: 800px) {
    .vector-parent7 {
        min-width: 100%;
        display: none;
    }
    .getting-started {
        font-size: var(--font-size-10xl);
        line-height: 34px;
    }
    .full-name-password-container {
        flex: 12 !important;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        padding-inline: 10% !important;
        margin-inline: 0 !important;
    }
    .signup {
        /* height: 100vh; */
        /* padding-top: 5%; */
    }

    .age_country_row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
    :is(.age_country_row) label {
        text-align: center !important;
    }
    form {
        padding-top: 2rem !important;
    }
}
@media screen and (max-width: 536px) {
    .create-your-account-now-button,
    .create-your-account-now-button-wrapper {
        justify-content: center !important;
        align-items: center !important;
    }
    .have-an-account {
        font-size: 1.2rem;
        text-align: center;
    }
    .full-name-password-container {
        padding-inline: 5% !important;
    }
}

@media screen and (max-width: 470px) {
    :is(.form-group) * {
        max-width: 350px !important;
    }
    .myfgs {
        width: 100%;
    }
    .login-link {
        justify-content: center !important;
        align-items: center !important;
        padding: 0;
    }
    .have-an-account-container {
        padding-bottom: 1rem;
    }
}
@media screen and (max-width: 400px) {
    :is(.form-group) * {
        max-width: 320px !important;
    }
}