* {
    box-sizing: border-box;
}

:root {
    --color-white: #fff;
    --color-blue: #02359e;
    --fweight-semibold: 600;
    --fweight-bold: 700;
    --primary-font-color: #282828;
    --border-line: 1px solid #d8d8d8;
    --color-anchortext: #3d8ff2;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

a {
    color: #3d8ff2;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #3d8ff2;
    text-decoration: underline;
}

button {
    cursor: pointer;
    outline: none;
    border: none;
}

.formContainer {
    border: 1px solid #d8d8d8;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 4;
}

.leadFormDiv {
    width: 750px;
    margin: 10% auto;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
}

.leadFormDiv .headingDiv {
    border: 1px solid var(--color-blue);
    background: var(--color-blue);
    padding: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    text-align: center;
}

.leadFormDiv .headingDiv h2 {
    font-size: 28px;
    line-height: 38px;
    padding-bottom: 10px;
    color: #fff;
}

.leadFormDiv .headingDiv p {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.leadFormDiv .headingDiv .closeIcon {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}


.checkbox-group label {
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
}

.formSumbitDiv.row {
    margin: 0;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.otpSection {
    position: relative;
}

.otpSection .blackCloseIcon {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

.otpSection .headingText {
    font-size: 24px;
    line-height: 24px;
    padding-bottom: 10px;
    font-weight: var(--fweight-semibold);
    color: var(--primary-font-color);
    text-transform: capitalize;
}

.otpSection p {
    color: #787878;
    font-size: 16px;
    line-height: 28px;
    padding-bottom: 20px;
}

.otpSection .otp-error {
    padding: 0;
    padding-top: 5px;
    font-size: 12px;
}

.otpSection span {
    color: #787878;
}

.otpSection .numberInputs {
    padding-bottom: 30px;
}

.otpSection .numberInputs input {
    max-width: 50px;
    margin-right: 15px;
    border-radius: var(--border-line);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 12px;
    color: var(--primary-font-color);
    padding-left: 12px;
}

.otpSection .numberInputs input:last-child {
    margin-right: 0;
}

.otpSection .row {
    margin: 0;
    align-items: center;
}

.otpSection .row p {
    padding: 0;
    color: #787878;
}

.otpSection .row p .resendOtp {
    color: #ff615d;
    text-decoration: none;
    cursor: pointer;
}

.otpSection .cta_button {
    margin-right: 20px;
    font-size: 14px;
    line-height: 24px;
    padding: 8px 15px;
}

span.select2-dropdown.select2-dropdown--below,
span.select2-dropdown.select2-dropdown--above {
    width: 250px !important;
    outline: none;
}

.leadFormDiv .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url("/images/selectoption.png") no-repeat;
    height: 10px;
    position: absolute;
    top: 20px;
    right: 5px;
    width: 16px;
}

input.select2-search__field {
    font-size: 14px;
    line-height: 24px;
    border-radius: 3px;
}

.leadFormDiv .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.mobileNumber.row {
    margin: 0;
}

.mobileNumber .country_code {
    flex-basis: 100px;
    width: 100px;
}

.mobileNumber .country_code select {
    border-radius: 3px 0 0 3px;
    border-right: none;
}

.numberinputFiled {
    position: relative;
    flex-basis: calc(100% - 100px);
}

.numberinputFiled input {
    border-radius: 0 3px 3px 0;
    padding-left: 16px;
}

.passwordDiv {
    position: relative;
}

.passwordDiv .form-group {
    position: initial;
}

.passwordDiv input {
    padding-left: 16px;
}

.passwordDiv .eyeIcon {
    position: absolute;
    top: 13px;
    cursor: pointer;
    right: 20px;
}

.leadFormDiv .select2-container {
    width: 100px !important;
}

.leadFormDiv .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: center;
}


.leadFormHeader {
    display: none;
}

/* new styles added starts from here */
.headingDiv span {
    width: 148px;
    height: 24px;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.86;
    letter-spacing: normal;
    color: #fff;
}

.stepOne {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
}

.stepOne p {
    align-self: center;
    margin: 10px 0;
}

.formStepOne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.emailLoginInput {
    height: 46px;
    padding: 11px 12px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    font-size: 14px;
}

.passwordLoginInput {
    height: 46px;
    padding: 11px 12px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    font-size: 14px;
}

.phoneLoginInput {
    height: 46px;
    padding: 11px 12px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    font-size: 14px;
    text-indent: 100px;
}

.otpLoginInput {
    height: 46px;
    padding: 11px 12px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    font-size: 14px;
}

.emailContainer {
    width: 100%;
    position: relative;
}

.emailContainer .emailLoginInput {
    width: 100%;
}

.passwordContainer {
    width: 100%;
    position: relative;
}

.passwordContainer .passwordLoginInput {
    width: 100%;
}

.phoneContainer {
    width: 100%;
    position: relative;
}

.phoneContainer>* {
    width: 100%;
}

.otpContainer {
    width: 100%;
    position: relative;
    display: none;
}

.otpContainer>* {
    width: 100%;
}

.emailIcon {
    position: absolute;
    top: 12px;
    right: 13px;
    width: 20px;
    height: 20px;
    background-position: -315px -3477px;
}

.passwordIcon {
    position: absolute;
    top: 12px;
    left: calc(100% - 40px);
    width: 20px;
    height: 20px;
    background-position: -352px -3475px;
    z-index: 999;
}

.forgotPassword {
    position: absolute;
    top: 48px;
    left: calc(100% - 110px);
}

.forgotPassword a {
    font-size: 14px;
    color: #ff615d;
    text-decoration: none;
    white-space: nowrap;
}

.loginButtonOne {
    width: 100%;
    color: #fff;
    background-color: #ff615d;
    height: 48px;
    font-size: 16px;
    margin-top: 20px;
    font-weight: 600;
    border-radius: 4px;
}

button:disabled {
    background-color: rgba(255, 97, 93, 0.6) !important;
}

.loginButtonTwo {
    border-radius: 4px;
    border: solid 1px #ff615d;
    background-color: #fff;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    color: #282828;
}

.signUpLink {
    font-size: 16px;
    color: #ff615d;
    text-decoration: none;
}

.greenTickIcon {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 20px !important;
    height: 20px !important;
    background-position: -2px -1120px;
    display: none;
}

.countryInfo {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    border-right: 1px solid #eaeaea;
    top: 0;
    left: 14px;
}

#sendOtpSection {
    background-color: rgba(234, 234, 234, 0.5);
    border: solid 1px #d8d8d8;
    min-height: 48px;
    display: none;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
    line-height: 1.8;
    font-size: 14px;
    color: #686868;
}

#sendOtpSection a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.71;
    color: #1f86e6;
}

#sendOtpSection .enteredNumber {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.71;
    color: #686868;
}

.indiaIcon {
    width: 27px;
    height: 20px;
    background: url(../../images/version2/indianFlag.png);
    background-repeat: no-repeat;
}

.sendAgainAnchor {
    display: none;
}

.otpNotSent {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: end;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 10px;
}

.otpNotSent span {
    color: #ff615d;
}

.otpButtonLogin {
    display: none;
}

input:focus:invalid {
    border: 1px solid #ff615d;
}

.signupForm {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nameContainerSignup {
    width: calc(50% - 10px);
    position: relative;
}

.nameContainerSignup>* {
    width: 100%;
    height: 48px;
}

.emailContainerSignup {
    width: calc(50% - 10px);
    position: relative;
}

.emailContainerSignup>* {
    width: 100%;
    height: 48px;
}

.passwordContainerSignup {
    width: calc(50% - 10px);
    position: relative;
}

.passwordContainerSignup>* {
    width: 100%;
    height: 48px;
}

.examContainerSignup {
    width: calc(50% - 10px);
    position: relative;
}

.examContainerSignup>* {
    width: 100%;
    height: 48px;
}

.phoneContainerSignup {
    width: calc(50% - 10px);
    position: relative;
}

.phoneContainerSignup>* {
    width: 100%;
    height: 48px;
}

.otpContainerSignup {
    width: calc(50% - 10px);
    position: relative;
    display: none;
}

.otpContainerSignup>* {
    width: 100%;
    height: 48px;
}

.nameSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
}

.emailSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
}

.passwordSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
}

.examSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
}

.phoneSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    padding-left: 100px;
}

.otpSignupInput {
    padding: 12px;
    padding-left: 40px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    padding-left: 12px;
}

#phoneSignupCorrectIcon {
    display: none;
}

#sendOTPButton {
    display: none;
    position: absolute;
    top: 12px;
    right: 15px;
    width: fit-content;
}

.otpTimer {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.71;
    color: #ff615d;
    position: absolute;
    width: fit-content;
    top: 15px;
    right: 15px;
}

.signupIcon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 14px;
    left: 12px;
}

.examSignupIcon {
    background-position: -1px -914px;
    height: 22px;
    top: 13px;
}

.disclaimer {
    font-size: 12px;
    font-weight: normal;
    margin: 0px !important;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: left;
    color: #282828;
}

.disclaimer a {
    color: #1f86e6;
}

.accountExist {
    font-size: 16px;
    font-weight: 600;
    color: #282828;
    flex-basis: calc(50% - 10px);
}

.accountExist a {
    color: #ff615d;
}

.scheduleDemoSection {
    position: relative;
}

.scheduleDemoSection .enrolFormDiv {
    padding-top: 20px;
    padding: 0px;
    display: flex;
    max-width: 100%;
}

.closeDemoSectionIcon {
    position: absolute;
    top: 20px;
    right: 40px;
    background-position: -96px -886px;
    z-index: 5;
}

.demoSubmitIcon {
    width: 105px;
    height: 105px;
    background-position: -5px -1447px;
    margin-bottom: 20px;
}

.headerDemoSection {
    background-color: #02359e;
    height: 60px;
    position: relative;
}

.headerDemoSection a {
    position: absolute;
    top: 20px;
    left: 25%;
}

.headerDemoSection a img {
    height: 20px;
}

/* Self Test Changes for signup*/
.leadFormDiv.signup {
    width: 706px;
}

.leadFormDiv.signup .headingDiv span {
    line-height: 1.36;
}

.formContainer .indiaIcon {
    flex-shrink: 0;
}

.countryInfo {
    left: 0;
    padding-left: 12px;
    width: 98px;
}

.countryInfo .select2 {
    flex-grow: 1;
}

.countryInfo .select2 .select2-selection--single {
    border: none;
}

.countryInfo .select2 .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.countryInfo .select2 .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    font-weight: normal;
    color: #686868;
    padding-left: 0;
}

.stepOne .formSubmitRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stepOne .formSubmitRow button {
    background-color: #ff615d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    width: 125px;
    border-radius: 4px;
}

/* Self Test Changes for login popup*/
.leadFormDiv.login {
    width: 490px;
}

.leadFormDiv.login .headingDiv {
    padding: 25px;
}

.leadFormDiv.login .closeIcon {
    top: 25px;
}

.leadFormDiv.login .greenTickIcon {
    top: 12px;
}

.leadFormDiv.login .stepOne p:last-child {
    margin-bottom: 0;
    font-weight: 600;
}

.leadFormDiv.login .sendAgainAnchor {
    font-weight: 500;
    color: #ff615d;
}

.closeDemoSectionIcon {
    right: 20px;
}

.reviewScrollerList {
    margin-top: 30px;
}

.reviewScrollerList .reviewScrollerItem {
    padding: 10px;
}

.hexagon-gallery {
    margin-left: 8px;
    margin-right: 8px;
}

.leadFormDiv.scheduleDemoSection {
    height: 546px;
}

.scheduleDemoSection .enrolFormDiv {
    max-height: 100%;
}

.scheduleDemoSectionFormElement .form-group label {
    line-height: 20px;
}

.phoneContainerSignup input:-webkit-autofill,
.phoneContainerSignup input:-webkit-autofill:hover,
.phoneContainerSignup input:-webkit-autofill:focus,
.phoneContainerSignup input:-webkit-autofill:active,
.phoneContainer input:-webkit-autofill,
.phoneContainer input:-webkit-autofill:hover,
.phoneContainer input:-webkit-autofill:focus,
.phoneContainer input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fafbfc inset !important;
}

.phoneContainerSignup .select2-selection--single,
.phoneContainer .select2-selection--single {
    background-color: #fafbfc;
}

.phoneContainer .countryInfo {
    left: 0;
    padding-left: 20px;
    width: 110px;
}

.phoneContainer .countryInfo .select2 {
    flex-grow: 1;
}

.phoneContainer .countryInfo .select2 .select2-selection--single {
    border: none;
    display: flex;
    align-items: center;
    background-color: #fafbfc;
}

.phoneContainer .countryInfo .select2 .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.phoneContainer .countryInfo .select2 .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    font-weight: normal;
    color: #686868;
    padding-left: 0;
}

.phoneContainer .countryInfo .select2 input.select2-search__field {
    display: none !important;
}

.otpContainerSignup input {
    border-radius: 4px;
}

.authorDetails .authorName::after {
    content: "|";
    display: inline-block;
    margin-left: 3px;
    margin-right: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.67;
    color: #000;
}

.reviewScrollerList .reviewScrollerItem {
    margin-right: 5px;
}

.reviewScrollerList .reviewScrollerItem:last-child {
    margin-right: 0;
}

.ieltsAcademicOptions {
    display: none;
}

.scheduleDemoSectionFormElement button[type=submit] {
    margin-left: 0;
}

.detailsContainer select {
    padding-left: 40px;
}

.ieltsAcademicOptions .signupIcon {
    top: 10px;
}

.hexInside span.ieltsmaterialIcons {
    margin-bottom: 9px;
}

.timeDemoSection select {
    font-size: 14px;
}

.otpContainer input::-webkit-outer-spin-button,
.otpContainer input::-webkit-inner-spin-button,
.otpContainerSignup input::-webkit-outer-spin-button,
.otpContainerSignup input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otpContainer input[type=number],
.otpContainerSignup input[type=number] {
    -moz-appearance: textfield;
}

.visibleEyeIcon {
    background-position: no-repeat -34px -935px;
    width: 20px;
    height: 20px;
}

.hiddenEyeIcon {
    background-position: -352px -3475px !important;
    z-index: 5;
}


@media (max-width: 1023px) {

    .nameIcon,
    .mailIcon,
    .capIcon,
    .phoneIcon,
    .passwordIcon {
        left: 10px;
        top: 13px;
    }

    .leadFormDiv {
        margin: 0;
        width: 100%;
        box-shadow: none;
    }

    .leadFormDiv .headingDiv {
        border-radius: 0;
        padding: 16px 20px;
        margin-top: 0;
    }

    .leadFormDiv .headingDiv h2 {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 8px;
    }

    .leadFormDiv .headingDiv p {
        font-size: 13px;
    }

    .formContainer {
        background: var(--color-white);
    }

    .formSumbitDiv.row {
        display: block;
        padding: 0;
    }

    .passwordDiv .eyeIcon {
        top: 8px;
    }

    .passwordDiv .eyeIcon.eye-slash {
        top: 10px;
    }

    .leadFormDiv .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 15px;
    }

    .mobileNumber .country_code {
        flex-basis: 92px;
        width: 92px;
    }

    .numberinputFiled {
        flex-basis: calc(100% - 92px);
    }

    .leadFormDiv .select2-container {
        width: 92px !important;
    }

    .otpSection {
        margin-top: 50px;
    }

    .otpSection .blackCloseIcon {
        display: none;
    }

    .otpSection .cta_button {
        margin-right: 0;
        margin-bottom: 20px;
        display: block;
        width: 100%;
        text-align: center;
    }

    .otpSection p {
        font-size: 12px;
        line-height: 20px;
    }

    .otpSection .row {
        justify-content: center;
    }

    .otpSection .headingText {
        font-size: 16px;
        line-height: 24px;
    }

    .otpSection .numberInputs input {
        padding: 10px;
        max-width: 36px;
        margin-right: 10px;
    }

    .selectDetails div {
        flex-basis: 100%;
    }

    .nameContainerSignup,
    .emailContainerSignup,
    .passwordContainerSignup,
    .examContainerSignup,
    .phoneContainerSignup,
    .otpContainerSignup,
    .signupForm button {
        flex-basis: 100%;
    }

    .disclaimer {
        text-align: center;
    }

    .accountExist {
        order: 2;
        flex-basis: 100%;
        text-align: center;
    }

    .form-group label {
        font-size: 12px;
    }

    .form-group select {
        background-position: 95% 15px;
        font-size: 12px;
    }

    .passwordIcon {
        left: unset;
        right: 20px;
    }

    .countryInfo .select2 .select2-selection--single .select2-selection__arrow {
        top: 10px;
    }

    .leadFormDiv.signup {
        width: 100%;
    }

    .stepOne .formSubmitRow {
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .stepOne .formSubmitRow .accountExist {
        margin-top: 10px;
    }

    .stepOne .formSubmitRow button {
        width: 100%;
    }

    .leadFormDiv.login {
        width: 100%;
    }

    .leadFormDiv.login .headingDiv {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .leadFormDiv.login .headingDiv span {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
    }

    .leadFormDiv.login .closeIcon {
        top: 20px;
    }

    .leadFormDiv.login .stepOne p:last-child {
        font-weight: 600;
    }

    .leadFormDiv.login #sendOtpSection {
        align-items: flex-end;
    }

    .leadFormDiv.login #sendOtpSection .enteredNumber {
        max-width: 165px;
    }

    .stepOne {
        padding: 18px;
    }

    .passwordIcon {
        height: 24px;
        background-position: -352px -3471px;
    }

    .leadFormDiv.login .greenTickIcon {
        top: 13px;
    }

    .signupIcon {
        top: 10px;
    }

    .leadFormDiv.signup .headingDiv span {
        line-height: 38px;
    }

    .leadFormDiv .headingDiv {
        padding: 10px 18px;
    }

    .leadFormDiv.signup .headingDiv .closeIcon {
        top: 18px;
    }

    .otpLoginInput,
    .phoneLoginInput,
    .emailLoginInput,
    .passwordLoginInput {
        height: 48px;
    }
}

.main-container {
    overflow: hidden;
    height: 100vh;
    background: url(/images/bg.webp) no-repeat;
    background-size: cover;
}