@font-face {font-family: 'guardian_sansbold';src: url('fonts/guardiansansbold.woff2') format('woff2'),url('fonts/guardiansansbold.woff') format('woff');font-weight: normal;font-style: normal}
@font-face {font-family: 'guardian_sansregular';src: url('fonts/guardiansansregular.woff2') format('woff2'),url('fonts/guardiansansregular.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'guardian_sansblack';src: url('fonts/guardiansansblack.woff2') format('woff2'),url('fonts/guardiansansblack.woff') format('woff');font-weight: normal;font-style: normal;}
*{box-sizing: border-box;}
body{margin: 0; font-family: 'guardian_sansbold'; background-color: #7386a3 ; background-image: url(../images/mobile_banner.png); background-repeat: no-repeat; background-size: cover;display: flex;justify-content: center;align-items: end; overflow: hidden ; height: 100vh; background-position: center center; align-items: flex-end;}
.rlf_row{ padding: 30px 30px 90px; border: 1px solid;width: 100%;position: relative;border-top: 1px solid #fff; border-bottom: 1px solid #fff;background:#1a000099;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.2px);
  -webkit-backdrop-filter: blur(9.2px);}
  img{max-width: 100%;}
.rlf_logo{position: absolute;top: 5%;left:40px; z-index: 999;width: 160px;}
.form-group{padding: 10px 0;}
.form-control{height: 45px;}
.form-control{padding: 15px 20px;background-color: #fff;border: 1px solid #ddd; border-radius: 5px;display: block; width: 100%;}
.boxBnt{ padding: 20px 0 10px;}
.boxBnt button{padding: 10px 20px;background-color: #e43516;border: 1px solid #ddd; border-radius: 5px;display: block; color: #fff;font-weight: normal; border-radius: 0;border: none; margin: auto;font-size: 16px;cursor: pointer; width:   100%; height: 45px;}
.boxBnt button:hover{background-color: #fff; color: #e43516;}
.formWrap{width: 100%;}
.formWrap h1{font-size: 40px; color: #fff;font-family: 'guardian_sansbold'; padding:0 40px 10px 40px; margin: auto;}
.formWrap h2{font-size: 30px; color: #fff;font-family: 'guardian_sansbold'; padding:0 40px 10px 40px; margin: auto; text-align: center;}
.otpsrc{padding: 30px 0;}
.btngroup{ display: flex; justify-content: space-between;gap: 20px;}

.btngroup button{padding: 10px 20px;background-color: #e43516;border: 1px solid #ddd; border-radius: 5px;display: block; color: #fff;font-weight: normal; border-radius: 0;border: none; margin: auto;font-size: 16px;cursor: pointer; width:   100%; height: 45px;}
.btngroup button:hover{background-color: #fff; color: #e43516;}

#otp-cooldown{color: #fff!important;font-family: 'guardian_sansregular';}
.magazine_response {font-family: 'guardian_sansregular';color: #38ff00 !important;font-size:17px; padding:20px 0 0; text-align:center!important}

.thankyou{background-color: #e43516;position: fixed;width: 100%;height: 100%;top: 0;left: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.thankyou h1{font-size: 40px; color: #fff;font-family: 'guardian_sansbold'; padding:0 40px 10px 40px; margin: auto; display: none;}
.thankyou p{font-size: 20px; color: #fff;font-family: 'guardian_sansbold'; padding:0 40px 10px 40px; margin: auto; display: none;}
.thankyou img{width: 100px;}
.thankyou h2{ font-size: 35px; padding: 20px; color: #fff; font-family: 'guardian_sansbold';}


@media screen and (max-width:40000px) and (min-width: 767px) {
html{width: 700px; margin: auto; position: relative;}
}