:root{
    --img-bg: rgba(27,74,178,0.06);
    --black-color: #010409;
    --gray-color: #b9b9b9;
    --light-gray-color: rgba(107, 114, 128, 0.24);
    --primary-color: #1B4AB2;
    --secondary-color: #FEA004;
    --btn-color: #F6F8FE;
    --oil: #ABABAB;
    --red: #DF2040;
    --green: #31C76D;
}

.otp-wrapper{
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 24px;
    background: rgba(157, 157, 157, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 99;
}
.bg-element,
.bg-element-before,
.bg-element-after{
    position: relative;
    z-index: 1;
}
.bg-element:before{
    content: " ";
    width: 40%;
    aspect-ratio: 1 / 1;
    background: var(--secondary-color);
    opacity: 0.1;
    border-radius: 100%;
    filter: blur(100px);
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
}
.bg-element:after{
    content: " ";
    background-color: var(--primary-color);
    -webkit-mask-image: url(img/wave.svg);
    mask-image: url(img/wave.svg);
    width: 71px;
    height: 86px;
    position: absolute;
    top: 0;
    right: -20%;
    transform: translateY(50px);
    box-shadow: 0 4px 26px 0 color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.bg-element-after:before{
    content: " ";
    width: 40%;
    aspect-ratio: 1 / 1;
    background: var(--primary-color);
    opacity: 0.1;
    border-radius: 100%;
    filter: blur(100px);
    position: absolute;
    left: 0;
    transform: translateY(50%);
}
.bg-element-after:after{
    content: " ";
    background-color: var(--secondary-color);
    -webkit-mask-image: url(img/wave.svg);
    mask-image: url(img/wave.svg);
    width: 71px;
    height: 86px;
    position: absolute;
    top: -50px;
    left: calc((100% - 820px) / 2);
    transform: scale(1.2) scaleX(-1);
    box-shadow: 0 4px 26px 0 color-mix(in srgb, var(--secondary-color) 36%, transparent);
}
.bg-element-before:before{
    content: " ";
    background-color: var(--secondary-color);
    -webkit-mask-image: url(img/wave.svg);
    mask-image: url(img/wave.svg);
    width: 71px;
    height: 86px;
    position: absolute;
    top: -30px;
    right: 40%;
    transform: scale(1.2);
    box-shadow: 0 4px 26px 0 color-mix(in srgb, var(--secondary-color) 36%, transparent);
}
.bg-element-before:after{
    content: " ";
    background-color: var(--primary-color);
    -webkit-mask-image: url(img/wave.svg);
    mask-image: url(img/wave.svg);
    width: 71px;
    height: 86px;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1);
    box-shadow: 0 4px 26px 0 color-mix(in srgb, var(--primary-color) 36%, transparent);
}


.inner-wrapper{
    background: #ffffff;
    border-radius: 16px;
    z-index: 2;
}
.img-wrapper{
    background: var(--img-bg);
    border-radius: 16px;
    padding: 70px 10px 0;
}
.form-wrapper{
    padding: 47px 24px;
    position: relative;
}
.form-wrapper .btn-link i{
    font-size: 24px;
}
.form-wrapper .btn-link{
    text-decoration: none;
    color: var(--black-color);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
}
.form-wrapper .title{
    padding: 24px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--primary-color);
    margin: 0;
}
.form-wrapper .title span{
    font-weight: 500;
}
.form-wrapper .title span:nth-child(2){
    color: var(--secondary-color);
}
.dot-line-border{
    width: calc(100% - 6px);
    height: 1px;
    background: var(--light-gray-color);
    position: relative;
    margin: 0 auto 34px;
}
.dot-line-border:before{
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--light-gray-color);
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    left: -3px;
}
.dot-line-border:after{
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--light-gray-color);
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    right: -3px;
}
.form-body{
    padding: 0 21px;
    position: relative;
}
.form-input-box{
    border: 1px solid var(--oil);
    border-radius: 12px;
    height: 48px;
    padding: 12px;
    position: relative;
    display: flex;
    align-items: center;
}
.form-input-box.is-focused{
    border-color: var(--primary-color);
}
.form-body .warning .form-input-box{
    border-color: var(--secondary-color);
}
.form-body .danger .form-input-box{
    border-color: var(--red);
}
.form-body .is-focused .form-input-box label,
.form-input-box label{
    font-family: Peyda;
    background: #ffffff;
    font-size: 12px;
    line-height: 20px;
    color: var(--black-color);
    height: 20px;
    padding: 0 4px;
    position: absolute;
    top: -10px;
    right: 14px;
}
.form-body .is-focused .form-input-box label{
    color: var(--primary-color);
}
.form-body .is-focused .form-input-box input,
.form-input-box input{
    font-family: Peyda;
    border: 0;
    outline: none;
    background: #ffffff;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    height: 24px;
}
.form-body input::-webkit-outer-spin-button{
    visibility: hidden;
    opacity: 0;
}
.form-body .is-focused .form-input-box input::placeholder,
.form-input-box input::placeholder{
    font-family: Peyda;
    font-size: 14px;
    line-height: 1;
    color: var(--gray-color);
    text-align: right;
}
.form-body .btn{
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.form-body .btn span{
    font-size: 18px;
    font-weight: 400;
}
.form-body .otp-msg{
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--oil);
}
.form-body .danger .otp-msg{
    color: var(--red);
    padding-right: 18px;
    position: relative;
}
.form-body .danger .otp-msg:before{
    content: '\e908';
    font-family: iconsax;
    font-size: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 0;
}
.form-body .warning .otp-msg{
    color: var(--secondary-color);
    padding-right: 18px;
    position: relative;
}
.form-body .warning .otp-msg:before{
    content: '\e9ca';
    font-family: iconsax;
    font-size: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 0;
}
.form-body .otp-sent-to{
    text-align: center;
    margin-bottom: 24px;
}
.form-wrapper .btn-link.text-primary{
    font-size: 18px !important;
    color: var(--primary-color);
}
.form-wrapper .btn-link.text-secondary{
    font-size: 18px !important;
    color: var(--secondary-color) !important;
}
.otp-inputs{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.otp-field{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--oil);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.danger .otp-field{
    border-color: var(--red);
}
.otp-box-complete{
    padding: 52px;
    text-align: center;

}
.otp-box-complete .step-section{
    max-width: 262px;
    margin: 0 auto;
}
.otp-box-complete .step-section b{
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 24px;
    color: var(--green);
}
.entry-content .otp-box-complete p{
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
}
.otp-box-complete .btn span{
    font-size: 18px;
    font-weight: 500;
}
.otp-box-complete .btn{
    width: 215px;
    height: 56px;
}
.svg-container{
    margin: 0 auto 40px;
}
.otp-complete-form{
    max-width: 540px;
    margin: 0 auto;
}
.otp-complete-form .row{
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}
.otp-complete-form .row .form-input-box{
    margin-bottom: 24px;
    width: calc(50% - 16px);
}

@media (max-width: 767px) {
    .bg-element-after:after {
        left: 0;
    }

    .bg-element {
        display: none;
    }
    .otp-wrapper .d-flex{
        flex-direction: column-reverse;
    }
    .entry-content .img-wrapper img{
        width: 200px;
        margin: 0 auto;
    }
    .img-wrapper {
        padding: 10px 10px 0;
        text-align: center;
    }
    .otp-complete-form .row{
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .otp-complete-form .row .form-input-box{
        width: 100%;
        margin-bottom: 0;
    }

}