.register-bg {
    background-image: url('../images/register/register-bg.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
}

.register-bg .register-form-wrapper {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.register-bg .register-page-content {
    width: 52%;
    height: 540px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.register-bg .register-page-content.page1 {
    background-image: url('../images/register/register-bg-1.png');
}

.register-bg .register-page-content.page2 {
    background-image: url('../images/register/register-bg-2.png');
}

.register-bg .reg-form-content {
    max-width: 400px;
    margin-right: 75px;
}

.reg-tagline {
    color: #053B7A;
    font-family: DinProMedium;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 2px;
}

.reg-headline {
    color: #053B7A;
    font-family: DinProBold;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 18px;
}

.reg-form-content {
    width: 374px;
}

.reg-form-input-wrap {
    width: 374px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: #FCFCFC;
}

.reg-form-input-wrap .form-icon {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-form-input-wrap .form-icon img {
    width: 32px;
    height: 32px;
}

.reg-form-input-wrap .form-divider {
    height: 25px;
    width: 0.5px;
    background-color: #a3a3a3;
    margin: 11px 0px;
}

.reg-form-input-wrap .input-wrap {
    margin-left: 2px;
}

.reg-form-input-wrap .input-wrap input {
    height: 46px;
    border: 0;
    outline: none;
    background-color: #FCFCFC;
    width: 307px;
    font-style: normal;
    font-family: DinProMedium;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 12px;
    margin-right: 0px;
    border-radius: 0px;
}

.reg-form-content .reg-err-red {
    color: red;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 4px;
}

.reg-form-content .cta-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.reg-form-content .primary-btn {
    border: 0;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #2A5C90 0%, #3998CF 51.56%, #3DA9E0 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    cursor: pointer;
    height: 32px;
    font-family: DinProMedium !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    margin: 0px !important;
}

.reg-form-content .secondary-btn {
    color: #fff;
    background: linear-gradient(180deg, #E5E5E5 0%, #BFBFBF 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    cursor: pointer;
    height: 32px;
    font-family: DinProMedium !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    margin: 0px !important;
    text-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.reg-form-content .cta-btn-row .primary-btn,
.reg-form-content .cta-btn-row .secondary-btn {
    width: 49% !important;
}

.reg-form-page {
    display: none;
}

.reg-form-page.active {
    display: block;
}

.reg-form-pagination-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.reg-form-pagination-wrap .pagination-bullet-wrap {
    height: 9px;
    width: 48%;
    background-color: #BFBFBF;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}

.reg-form-pagination-wrap .pagination-bullet-wrap .active {
    height: 9px;
    width: 100%;
    background-color: #053B7A;
    position: absolute;
}

.reg-form-pagination-wrap .pagination-bullet-wrap .slideInFromRight {
    animation: slideInFromRight 0.4s;
}

.reg-form-pagination-wrap .pagination-bullet-wrap .slideInFromLeft {
    animation: slideInFromLeft 0.4s;
}

@keyframes slideInFromLeft {
    from {
        left: -100%;
    }

    to {
        left: 0%;
    }
}

@keyframes slideInFromRight {
    from {
        right: -100%;
    }

    to {
        right: 0%;
    }
}

.register-page-content .inner-wrap {
    width: 450px;
}

.register-page-content .content-title {
    font-family: DinProBold;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 46px;
}

.register-page-content .content-gold-txt-wrap {
    font-family: DinProMedium;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    background: linear-gradient(105.49deg, #D7AC4C -0.31%, #FFFFB0 17.8%, #F4D174 32.9%, #DEB04D 42.96%, #F6DF86 71.13%, #D7AC4C 85.22%, #966424 100.31%);
    height: 32px;
    width: max-content;
    border-radius: 32px;
    color: #000;
    display: flex;
    align-items: center;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 40px;
}

.register-page-content .benefit-container {
    margin-top: 30px;
}

.benefit-container .benefit-title {
    font-family: DinProBold;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.benefit-container .benefit-point li {
    font-family: DinProMedium;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    line-height: 24px;
}

.benefit-container .benefit-point li img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.reg-form-remarks {
    text-align: center;
    color: #053B7A;
    margin-top: 24px;
    font-family: DinProMedium;
    font-weight: 500;
}

.reg-form-remarks span {
    font-family: DinProBold;
    font-weight: 700;
}

@media only screen and (max-width: 900px) {
    .register-bg .reg-form-content {
        margin: 0 auto;
    }
}