@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Black.eot');
    src: url('Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('Gotham-Black.woff2') format('woff2'),
        url('Gotham-Black.woff') format('woff'),
        url('Gotham-Black.ttf') format('truetype'),
        url('Gotham-Black.svg#Gotham-Black') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Medium.eot');
    src: url('Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('Gotham-Medium.woff2') format('woff2'),
        url('Gotham-Medium.woff') format('woff'),
        url('Gotham-Medium.ttf') format('truetype'),
        url('Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

html,body{position:relative;font-family: 'Gotham';margin: 0px;padding: 0px; width: 600px; max-width: 100%; margin: 0 auto;}

    img{max-width:100%;height: auto;display: inline-block;line-height: 0px;}

    /*---banner---start---here---*/
    section.banner{    background: url(https://blackberry.lyxelandflamingotech.in/assets/images/banner-mobile.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;}
    /* .banner-text{position: absolute;top: 50%;left: 0px;right: 0px;padding: 0px 30px; text-align: center;z-index: 3;transform: translate(0px, -40%);} */
    .banner-text{text-align: center; width: 100%;}
    .banner-min-title{font-size: 32px;color: #fff; text-transform: uppercase; margin-bottom: 0; font-style: normal; font-family: 'Gotham'; font-weight: 600;}
    .banner-center-title{font-size: 17px; color: #fff; margin: 5px 0; font-weight: 300; font-family: 'Gotham';}
    .banner-bottom-title{font-size: 50px; letter-spacing: 2px; color: #fff; text-transform: uppercase; font-weight: 600; font-family: 'Gotham';} 
    .form-group input{border: 1px solid #fff; color: #fff; opacity: 1; background-color: transparent; border-radius: 30px; padding: 20px 24px; width: 82%; font-size: 16px;}
    /* .banner-text{right: auto; left: 50%; transform: translate(-50%, -50%); padding: 0; width: 100%;} */
    .form-wrapper{padding: 20px 0 0;}
    .image-border-box:after{display: none;}
    .form-group label{color: #fff; margin-bottom: 10px; text-align: left; margin-left: 24px; font-size: 15px;}
    .form-group{padding: 0 20px 20px;}
    .form-group input::placeholder{color:#fff; padding: 0px; opacity: 0.4; font-size: 16px; letter-spacing: 1px;}
    .btn-submit{display: inline-block;
        padding: 10px 18px;
        text-align: center;
        color: #56483b;
        font-size: 20px;
        border-radius: 35px;
        text-decoration: none;
        cursor: pointer;
        min-width: 180px;
        font-weight: 700;
        border: 0;
        outline: 0;
        background-color: #fff;
        border: 1px solid #56483b;
        margin-top: 24px;}
    .image-border-box .picture-tag{display: block; object-fit: cover; display: none;}
    /* .form-wrapper .form-group:first-child{text-align: left;} */
    .form-wrapper .form-group:first-child label{display: block;}


    /*OTP CSS*/
    .otp-input-fields {
        margin: auto;
        width: auto;
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0px 0 20px 0;
      }
      .otp-input-fields input {
        height: 48px;
        width: 48px;
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #fff;
        text-align: center;
        outline: none;
        font-size: 16px;
        /* Firefox */
      }
      .form-wrapper.otp-page .disabled-number input::placeholder{color: #fff !important; opacity: 0.9; }
      .edit-number{text-align: left;
    color: #fff;
    margin-left: 0;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 44%;
    right: 60px;
    transform: translate(-0, -100%);
    z-index: 123;}
    .edit-btn.edit-number{top: 50%;}


      /*Thankyou page*/
      .thankyou-page p{color: #fff; font-size: 16px; margin: 40px 0 10px; }
      .thankyou-page .btn-submit{margin-top: 0; }
      .thankyou-page .banner-min-title, .thankyou-page .banner-bottom-title.end-title{font-size: 38px;}
      .thankyou-page .banner-bottom-title{font-size: 60px; padding: 10px 0;}
      .editable-wrap .btn-submit{font-size: 14px; padding: 0;}
      .editable-wrap{ 
        margin-bottom: 30px;
        margin-top: 20px;
        gap: 20px;}
        .editable-wrap .btn-submit {
            font-size: 14px;
            padding: 10px;
            min-width: 100px;
            display: none;
            margin-left: 30px;
        }

        #resend_otp{
            font-size: 15px;
        }

.flex-container{position: relative;}
.edit-btn.edit-number{    
    margin-top: 4px;
    min-width: 70px;
    right: 40px;
    color: #56483b;
    font-size: 14px;
}
.main-logo{width:100%;}
.main-logo a.logo{width: 140px; display: inline-block;}
.image-border-box{display: grid;}



@media screen and (min-width: 768px){
    .edit-btn.edit-number{right: 60px;}
    
}
@media screen and (max-width: 767px){
    .edit-btn.edit-number{right: 60px;}
    .error{font-size: 12px; display: block;}
}
@media screen and (max-width: 440px){
    .edit-btn.edit-number{right: 40px; top: 50%;}
}

@media screen and (max-width: 400px){
    /* .edit-number{right: 40px;} */
    .otp-input-fields input{width: 32px; height: 32px;}
}