:root {
    --primary:#316FD7;
    --secondary: #95A3C8;
    --white:#fff;
    --font16:1.6rem;
    --font20:2rem;
    --font28:2.8rem;
    --font30:3rem;
    --font38:3.8rem;
}
html, body{
    font-size: 62.5%;
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    line-height: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFPRODISPLAYBOLD.OTF');
}
ul,h1,h2,h3,h4,h5,h6,p{
    margin: unset;
    padding: unset;
}
a ,a:hover{
    color: unset;
    text-decoration: none;
}
img{
    max-width: 100%;
}

.marg_bot_20{
    margin-bottom: 2rem;
}
.marg_bot_30{
    margin-bottom: 3rem;
}
.login_sec {
    background-color: #121829 ;
    height: 100vh;
    
}
.login_sec_top{
    background: url(../images/bg_img.svg) #121829;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 4rem 6rem 0; 
}
.banner_sec {
    display: flex;
    justify-content: space-between;
}
.left_side {
    max-width: 45rem;
}
.left_side h1 {
    font-size:var(--font38);
    color: var(--primary);
    text-transform: uppercase;
    font-family: SF Pro Display;
}
.left_side p{
    color: var(--secondary);
    font-size: var(--font20);
    font-family: SF Pro Display;
}
.btn_play_now {
    padding: 1.2rem 0px;
    display: inline-block;
    color: var(--white);
    font-size: var(--font30);
    font-family: SF Pro Display;
    border-radius: 10px;
    background: linear-gradient(315deg, #2D67CF 0%, #3E8CF1 100%);
    width: 20.6rem;
    text-align: center;
}
.btn_play_now:hover{
    color: var(--white);
}
.item_card {
    display: flex;
    border-radius: 10px;
    border: 0.6px solid #316FD7;
    background: rgba(36, 83, 188, 0.20);
    padding: 1rem 2rem;
    margin-bottom: 3rem;
    align-items: center;
    max-width: 28rem;
    background: #101F42;
}
.item_infos {
    margin-left: 1.6rem;
}
.item_infos h5 {
    font-family: SF Pro Display;
    font-size: var(--font28);
    color:var(--white);
}
.item_infos p{
    color: var(--secondary);
    font-family: SF Pro Display;
    font-size: var(--font16);
}
.item_one {
    margin-left: 3rem;
}
.item_two {
    margin-left: 9rem;
}
.item_three {
    margin-left: 15rem;
}
.left_side {
    margin-top: 6rem;
    margin-bottom: auto;
}
.middle_sec {
    text-align: center;
}
.order_one {
    margin-left: -2rem;
    margin-bottom: 2rem;
}
.footer_bot {
    background: #121829;
}
.three_imgs {
    max-width: 530px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    padding: 1.6rem 4rem;
    border-radius: 6px;
    background: #101F42;
    position: relative;
    top: -30px;
    border: 1px solid #316fd761;
    border-bottom: 0;
    border-image: linear-gradient(to bottom, rgba(49, 111, 215, 1) 0%, rgb(58 78 213 / 0%) 100%);
    border-image-slice: 1;
}
.footer_txts {
    padding: 0px 12rem 2rem;
}
.footer_txts p{
    font-family: 'Inter', sans-serif;
    color: var(--secondary);
    font-size: var(--font16);
    font-weight: 400;
}
.text-center{
    text-align: center;
}
.mar_20{
    margin: 2rem 0px;
}
.cent_img_wrpa img {
    filter: brightness(0.7);
}

/*signin form css*/
.sing_in_form_sec {
    border-radius: 1.6rem;
    border: 0.6px solid #316FD7;
    background: rgba(36, 83, 188, 0.20);
    padding: 3rem;
    width: 38rem;
}
.sign_form_heading h2{
    color: var(--white);
    text-align: center;
    font-family: SF Pro Display;
    font-size: var(--font38);
    margin-bottom: 3.2rem;
}
.sing_in_form_sec .form_row {
    position: relative;
    margin: 0 0 2rem 0;
}
.sing_in_form_sec .form_row input {
    width: 100%;
    height: 46px;
    padding: 0rem 1.6rem;
    background: #10182F;
    border-radius: 4px;
    border: 0;
    font-family: SF Pro Display;
    font-weight: 500;
    font-size: var(--font16);
    color: var(--white);
    border-radius: 8px;
    outline: transparent;
}
.sing_in_form_sec .form_row input::placeholder{
    color: var(--secondary);
}
.form_row .password_eye {
    width: 15px;
    position: absolute;
    right: 12px;
    cursor: pointer;
}
.form_row {
    display: flex;
    align-items: center;
}
.form_otp_sec {
    position: absolute;
    right: 1.2rem;
    border-radius: 6px;
    padding: 0.8rem;
    background: #2D67CF;
    top: 0.7rem;
}
.form_otp_sec.otp_disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.form_otp_sec{
    cursor: pointer;
}
.form_otp_sec p {
    color: #FFF;
    font-family: SF Pro Display;
    font-size: 1.4rem;
}
.form_sumbit_sec.form_sign_up_sec {
    padding-top: 1rem;
}
.sign_up_btn{
    width: 100%;
    height: 46px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(315deg, #2D67CF 0%, #3E8CF1 100%);
    border-radius:.8rem;
    border: 0;
    font-family: SF Pro Display;
    font-weight: 700;
    font-size:var(--font16);
    color: var(--white);
    cursor: pointer;
    padding: 0;
}
.sign_up_btn.btn-disabled{
    color: rgba(255, 255, 255, 0.20);
    background: linear-gradient(315deg, rgba(45, 103, 207, 0.50) 0%, rgba(62, 140, 241, 0.50) 100%);
}
.form_otp_sec.otp_send_sec{
    background: #1D9001;
    display: flex;
    align-items: center;
    height: 1.6rem;
}
.not_recieved_otp {
    position: relative;
    top: -8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.not_recieved_otp p{
    font-size: 1.4rem;
    font-family: SF Pro Display;
    color: var(--secondary);
}
.not_recieved_otp p a{
    color: #2D67CF;
}
.pad_top_120{
    padding-top: 12rem;
}
/*.sign_in_default_sec.less_mar .form_row{
    margin-bottom: 1.2rem;
}*/
.obj_fit .cent_img_wrpa {
    height: 100%;
}
.middle_sec.obj_fit .cent_img_wrpa img{
    object-fit: cover;
    height: 100%;
}
.form_sumbit_sec.form_sign_up_sec{
    padding-top: 0;
}
.middle_sec.obj_fit {
    width: 45rem;
}
.wrap_top_sec.full_hgt .left_side {
    margin-bottom: 6rem;
}
.left_side.mobile_only {
    display: none;
}
.shadow_one{
    filter: drop-shadow(0px 2px 43px rgba(42, 123, 176, .7));
}
.shadow_two {
    filter: drop-shadow(0px 2px 32px rgba(191, 78, 201, .7));
}
.shadow_three{
    filter: drop-shadow(0px 2px 32px rgba(130, 190, 97, .7));
}
.play_btn_wrap.item_middle.dm-block{
    display: none;
}

@media(min-width:992px){
    .item_card{
        width: 32rem;
    }
    .order_one{
        margin-left: -3rem;
    }
}

@media(min-width:1800px){
    .wrap_top_sec{
        max-width: 1600px;
        margin: 0px auto;
    }
}

@media(min-width:1200px) and (max-width:1325px){
    .left_side{
        flex: 0 0 30%;
    }
    .sing_in_form_sec{
        width: auto;
    }
    .pad_top_120 {
        padding-top: 6rem;
    }
}
@media(min-width:992px) and (max-width:1199px){
    .sing_in_form_sec{
        width: 100%;
    }
    .pad_top_120 {
        padding-top: 6rem;
    }
    .middle_sec {
        display: none;
    }
    .left_side{
        margin-top: 4rem;
    }
    .last_sec{
        margin-bottom: auto;
        margin-top: auto;
    }
    .wrap_top_sec {
        padding-bottom: 3rem;
    }
}

@media(min-width:900px) and (max-width:991px){
    .login_sec_top {
        height: calc(100% - 230px);
    }
}


@media(max-width:991px){
    :root {
        --font16:1.2rem;
        --font20:1.4rem;
        --font28:2rem;
        --font30:2rem;
        --font38:2.4rem;
    }
    .play_btn_wrap.dm-block{
        display:inline-block;
    }
    .play_btn_wrap.item_middle.dm-block .btn_play_now {
        width: 100%;
    }
    .login_sec_top{
        background: url(../images/bg_mobile.svg) #121829;
    }
    .form_otp_sec.otp_send_sec {
        height: 1.3rem;
    }
    .item_card svg{
        width: 30px;
        height: 30px;
    }
    .not_recieved_otp p{
        font-size: 1rem;
    }
    .left_side.mobile_only {
        display: block;
    }
    .logo_img {
        text-align: center;
        margin-bottom: 3rem;
    }
    .logo_img a img {
        height: 30px;
    }
    .logo_img a {
        display: inline-block;
    }
    .banner_sec{
        flex-direction: column;
    }
    .left_side {
        max-width: 100%;
        text-align: center;
        margin-top: auto;
    }
    .order_one.landing_mob {
        display: none;
    }
    .item_card {
        flex-direction: column;
    }
    .item_one{
        order: 1;
    }
    .item_three{
        order: 2;
    }
    .play_btn_wrap.item_middle.dm-block {
        order: 3;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
        display: inline-block;
    }
    .item_one, .item_three { 
        margin-left: 0px;
        width: 44%;
        margin-bottom: 1.6rem;
        text-align: center;
        padding: 1rem 2rem;
        max-width: 100%;
    }
    .list_three {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        position: relative;
        margin-top: -10.5rem;
    }
    .item_two{
        flex: 1;
        max-width: 100%;
        margin: 0;
        text-align: center;
        padding: 1rem 2rem;
        order: 4;
    }
    .three_imgs{
        margin-top: -2rem;
    }
    .footer_bot {
        padding-top: 2rem;
    }
    .cent_img_wrpa img {
        filter: brightness(0.7);
        width: 100%;
        margin-top: -6px;
    }
    .cent_img_wrpa {
        width: 300px;
        margin: 0px auto;
    }
    .item_card.item_three {
        margin-left: auto;
    }
    .item_infos h5 {
        margin-top: 1.6rem;
        margin-bottom: 0.5rem;
    }
    .left_side p , .play_btn_wrap{
        display: none;
    }
    .left_side.mobile_only p , .left_side.mobile_only .play_btn_wrap{
        display: block;
    }
    .not_recieved_otp p{
        display: block;
    }
    .left_side.mobile_only {
        margin-top: 2rem;
    }
    .left_side.mobile_only .marg_bot_20 {
        margin-bottom: 1rem;
    }
    .left_side.mobile_only .marg_bot_30 {
        margin-bottom: 1.6rem;
    }
    .btn_play_now{
        width: 16rem;
    }
    .wrap_top_sec {
        padding-bottom: 6rem;
    }
    .footer_txts {
        padding: 0px 2rem 2rem;
        text-align: center;
    }
    .login_sec_top{
        padding: 4rem 2rem 0;
    }
    .item_infos{
        margin-left: 0;
    }
    .three_imgs a {
        display: inline-block;
    }
    .three_imgs a {
        display: inline-block;
    }   
    .three_imgs a img{
        max-width: 100%;
    }
    .login_page .middle_sec, .login_page .list_three, .login_page .three_imgs{
        display: none;
    }
    .sing_in_form_sec{
        margin: 0px auto;
    }
    .login_page .last_sec {
        order: 1;
    }
    .login_page .left_side {
        order: 2;
        margin-top: 2rem;
    }
    .login_page .order_one {
        margin: 0px auto;
        text-align: center;
    }
    .login_page .pad_top_120 {
        padding-top: 0rem;
    }
    .login_page .form_otp_sec p{
        display: block;
        font-size: 1rem;
    }
    .item_card.item_two {
        flex-direction: unset;
        justify-content: center;
    }
    .item_two .item_infos h5{
        margin-top: 0;
    }
    .item_two .item_infos{
        margin-left: 1.6rem;
    }
    .login_sec.login_page .left_side {
        margin-bottom: 6rem;
    }
    .left_side p.marg_bot_30 {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .item_card.item_two .item_infos {
        text-align: left;
    }
    .shadow_one{
        filter: drop-shadow(0px 2px 43px rgba(42, 123, 176, 1));
        box-shadow:0px 2px 43px rgba(42, 123, 176, .4);
    }
    .shadow_two {
        filter: drop-shadow(0px 2px 32px rgba(191, 78, 201, 1));
        box-shadow: 0px 2px 32px rgba(191, 78, 201, .3);
    }
    .shadow_three{
        filter: drop-shadow(0px 2px 32px rgba(130, 190, 97, 1));
        box-shadow: 1px 27px 100px rgba(130, 190, 97, .4);
    }
}
@media screen and (max-height: 680px) {
    .list_three{
        margin-top: -22.5rem;
    }
}
@media(min-width:768px) and (max-width:850px){
    .item_one, .item_three {
        width: 43%;
    }
}

@media(max-width:767px){
    .item_one, .item_three{
        width: 41%;
        padding: 1rem;
    }
    .cent_img_wrpa {
        width: 100%;
    }
    .login_page .form_otp_sec{
        right: .8rem;
        top: 8px;
    }
    .ampay {
        max-width: 80px;
    }
     .gpay{
        width: 4rem;
    }
    .paytm {
        width: 50px;
    }
    .login_page .sing_in_form_sec{
        width: auto;
        padding: 2rem;
    }
    .login_page .order_one img {
        max-width: 100%;
    }
    .sign_form_heading h2{
        margin-bottom: 3rem;
    }
    .login_page .form_otp_sec.otp_send_sec svg{
        width: 1.4rem;
    }
    .login_page .form_otp_sec.otp_send_sec {
        height: 20px;
        padding: 4px;
    }
    .sign_up_btn{
        height: 3.6rem;
    }
    .login_sec_top {
       padding: 2rem 2rem 0;
    }
    .login_page .order_one{
        max-width: 280px;
    }
    .three_imgs {
        margin-left: 2rem;
        margin-right: 2rem;
        max-width: 100%;
    }
    .cent_img_wrpa {
        max-width: 330px;
    }
}

@media(max-width:329px){
    .item_one, .item_three{
        width: 39%;
    }
    .cent_img_wrpa {
        width: 100%;
    }
    .sing_in_form_sec{
        padding: 1.5rem;
    }
    .three_imgs{
        padding: 1.6rem;
    }
}
.login_page .form_otp_sec.otp_send_sec svg{
        width: 1.4rem;
}

@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
    .login_sec_top {
        height: calc(100% - 250px);
    }
}
@media all and (device-width: 820px) and (device-height: 1180px) and (orientation:portrait) {
    .login_sec_top {
        height: calc(100% - 200px);
    }
}