* { margin:0px; padding:0px; }
body {box-sizing:border-box;    font-family: Calibri;     background-size: cover;
    -ms-overflow-style: none;
    -ms-background-size: cover;
    background-image: linear-gradient(to bottom, #450a2d, #450a2d, #3e1302);
    background-attachment: fixed;}
ul , li { text-decoration:none; list-style:none; }
<?php $backgroundimage =asset('/img/BG-02.jpg?v='.time()); ?>

.bg-epic {  background-size:cover; width:100%; }
img.uae-logo {
    position: absolute; width:74px; 
    right: 34px; bottom:17%;
}
input:focus {
    outline: none;
}
.thanks ul li:first-child .input_div {
    float: right;
}
.header-logo.logo {
    position:relative;
    text-align: center;
    padding: 25px 0px 25px 0;
    float: left;
    width: 100%;
    display:block;
    background: #0e5959;
}
.header-logo.logo img {
    width: 141px;
    height: auto;
    display: inline-block;
}
.language.uae-logo {
    cursor: pointer;
    display: block;
    font-size: 24px;
    position: absolute;
    right: 23px;
    color: white;
    top: 10px;
}
.language.uae-logo span {
    font-size: 20px;
    position: absolute;
    right: 0px;
    top: 10px;
    color: white;
}
.container {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;    
}
.dt-mobile {
    width: 100%;
    height: auto;
    float: left;
}
input#otp-input {
    background: #fff;
    height: 50px;
    border-radius: 5px;
    width: 30%;
    text-align: center;
    padding: 0px 18px;
    margin-bottom: -20px;
    margin-top: 30px;
}
.thanks {
    text-align: center;
    /*padding: 78px 0 0px 0;*/
}
.etisalad-js{
    padding-bottom: 30px;
    text-align: center;
    width: 100%;
    clear: both;
    float: left;
}
i.fa.fa-check {
    border-radius: 50%;
    color: #7a8281;
    background: #161a1b;
    width: 104px;
    height: 104px;
    text-align: center;
    line-height: 104px;
    font-size: 50px;
    /* font-weight: normal; */
}

.wrapper { position:relative; float:left; width:100%; background: #197778;}

input:focus {
    outline: none;
}
.thanks h1 {
    color: #fff;
    font-size: 60px;
    text-align: center;
    padding: 51px 0 69px 0;
    text-transform: uppercase;
}
.thanks p {
    color: #fff;
    padding: 0px 29%;
    text-align: center;
    font-size: 17px;
}
input.otp_input {
    background: none;
    border: none;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    padding: 0px 0 0px 85px;
    width: 100%;
    color: #000;
    font-size: 19px;
    text-align: left;
    height: 50px;
    line-height: 50px;
}

input.subscription {
    background: none;
    border: none;
    border-bottom: 1px solid #c0c2c1;
    padding: 20px 0 7px 0px;
    width: 100%;
    color: #fff; position:relative;
    font-size: 19px;
}

.subscription:before {
    content:"\f073";
    position:absolute; 
    top:0px; font-family: fontawesome;
    right:0px;
    color:#fff; 
}


/*input:placeholder { color:#fff;}*/
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #818a89;
  opacity: 1; /* Firefox */
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #818a89;
}

input::-ms-input-placeholder { /* Microsoft Edge */
  color: #818a89;
}


p.sub-text {
    padding: 50px 0 25px 0;
    color: #b9b9b9;
}

button.subscribe {
    background: #e40909;
    border: none;
    color: #fff;
    padding: 15px 100px;
    border-radius: 40px;
    font-size: 20px;
    margin-bottom: 29px;
}
button.subscribe:hover {
    background: #f33636;
}

button.close_button {
font-size: 21px;
    font-weight: 400;
    color: #fff;
    width: auto;
    height: auto;
    font-family: Calibri;
    cursor: pointer;
    line-height: 21px;
    border-radius: 32px;
    border: 2px solid transparent;

    /* background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); */
    background-origin: border-box;
    background: #fff;
    /* background-clip: content-box, border-box; */
    /* padding: 13px 32px!important; */
    box-shadow: none;
    font-weight: 600;

    /* background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(to left,#c15a2d,#c8265d); */
    /* background-origin: border-box; */
    /* background-clip: content-box,border-box; */
    text-transform: uppercase;
    display: inline-block;
    padding: 16px 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: auto;
    box-shadow: 2px 1000px 1px rgba(4,43,44,1) inset;
}

.end-content {
    width:calc(100% - 200px);
    padding-left: 100px;
    padding-right: 100px;
    margin-top:80px;
    margin-bottom: 50px;
    float:left;
}
.end-content h3 {
    padding-bottom: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Calibri;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 17px;
    letter-spacing: normal;
    text-align: center;
    color: #042b2c;
    position: relative;
}
.end-content h3:before {
    content: '';
    border-bottom: 1px solid #042b2c;
    margin: 0px auto;
    float: left;
    width: 612px;
    position: absolute;
    bottom: 30px;
}
.end-content ul li {
    color: #fff; position: relative;
    list-style: none;
    padding: 0px 0 20px 24px;
    font-family: Calibri;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;  
    width:100%;
    float:left;  
}

.end-content ul li:before {
    content: '';
    background: url(../img/tick-3.png);
    width: 15px;
    height: 12px;
    float: left;
    display: inline-block;
    padding: 0px 10px;
    background-repeat: no-repeat;
    top: 5px;
    left: 0px;
    position: absolute;
}

.end-content ul.arabic li::before {
    right: 0px;
}

.end-content h3.arabic {
    padding-bottom: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Calibri;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 17px;
    letter-spacing: normal;
    text-align: center;
    color: #042b2c;
    position: relative;;
}
.end-content h3.arabic:before{
    width: 374px;
}
.end-content ul.arabic li {
    padding: 0px 40px 20px 0px;
    text-align: right;
}

.input_div  {
    position: relative;
    margin-bottom:46px !important;
}
.du-js {
    padding-bottom: 30px;
    text-align: center;
    width: 100%;
    clear: both;
    float: left;
}
button.close_button:focus {
    outline: 0;
}
.input_div.subscribe {
    margin-bottom: 53px;
    position: relative;
}

.input_div span {
    position: absolute;
    top: 23px;
    color: #818a89;
    font-size: 18px;
    border-right: 1px solid #fff;
    padding-right: 9px;
    left: 0px;
}
.input_div.subscribe:before {
    content: "\f073";
    position: absolute;
    left: 67%;
    color: #fff;
    font-family: fontawesome;
    top: 27px;
}

.input_div.subscribe:before {
    content: "\f073";
    position: absolute;
    left: 67%;
    color: #fff;
    font-family: fontawesome;
    top: 27px;
}


.cd-popup-trigger {
  display: inline-block;
  padding-left:60px;
  padding-right:60px;
  height: 58px;
  line-height: 58px;
  margin: 1em auto;
  text-align: center;
  color: #FFF;
  font-size: 20px !important;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 50em;
  background: #e40909;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
  border: none;
}
.thanks ul{width:90%;margin:0px auto 15px auto;}
.thanks ul li {
    float: left;
    width: calc(50% - 40px);
    padding: 0px 20px;
}
.radio_section p {
    float: left;
    width: 33%;
    display: inline-block;
    padding: 0;
}
/* add for single plan */
/*.radio_section p {
    display: inline-block;
    padding: 0;
}*/
/* # add for single plan */
.radio_section {
    text-align:center;
    width: 100%;
}

p.dt-error-messgae {
    text-align: center;
    color: red;
}
#mobile_number-error {
    display: block;
    text-align: left;
    padding: 10px 0px 0px 0px;
    color: red;
    position: absolute;
}

#otp-error {
    display: block;
    padding: 10px 0;
    color: red;
    /* Page Disturb handled */
    position: absolute;
    left: auto;
    text-align: center;
    width: 100%;
    /* Page Disturb handled */
}
#otp-input-error {
    display: block;
    padding: 10px 0;
    color: red;
    position: absolute;
    left: auto;
    text-align: center;
    width: 100%;
}


/*radio button active */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    /*left: -9999px;*/
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: normal;    
}
label.input-label {
color: #fff;
font-weight: normal;
position: absolute;
}
/*[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    border-radius: 100%;
    background: #fff;
}*/

[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #e40909;
    border-radius: 100%;
    background: #fff;
    /* border: inset; */
    background: #000;
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #e40909;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.radio_section form {
    width: 45%;
    margin: 0 auto;
}
select#aioConceptName {
    outline: none;
    -moz-appearance: none; 
    appearance: none;    
    background: #000;
    border: none;
    color: #7d8888;
    width: 100%;
    padding: 10px 0 7px 10px;
    border-bottom: 1px solid #c0c2c1;
    margin-top: 11px;
    font-size: 18px;
    -webkit-margin-before: 16px;
}

.radio_section input[type="radio"] {
    visibility: visible;
    display: none;
    position: relative;
    z-index: 9999;
    opacity: 0;
    cursor: pointer;
    top: 21px;
    width: 100%;
}
form#dtotp .etisalad-js {
    margin-top: 60px;
}
input.otp_input::placeholder {
    font-size: 17px;
}
p.sub_p {
    font-family: Calibri;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 17px;
    letter-spacing: normal;
    text-align: center;
    color: #edcc3d;
    border: 1px dashed #edcc3d;
    clear: both;
    padding: 17px 23px;
    display:inline-block;
}
a.subscribe.cd-popup-trigger:hover {
    color: #000;
    text-decoration: none;
}
.sub{ margin:0px 8px;}
.sub_close {margin:0px 8px;}

.footer_text {
    float: left;
    width: 100%;
    text-align: center;
    /*padding: 20px 0;*/
}
#plans {
    margin: 0 auto;
}
@media  only screen and (max-width:1024px) { .thanks ul li { width:93%; }

.radio_section form { padding-left: 24px;  margin: 0 auto;}
}

@media  only screen and (max-width:768px) { .radio_section form {width:100%; padding-left: 0px;}
.thanks ul li { float: left;width: 100%; margin:0px;padding:0px;}

 }

@media  only screen and ( max-width:740px ) { img.uae-logo { top: 17px;}
#mobile_number-error {
    font-size: 12px;
    width: calc(100% + 60px);
    left: 0px;
    padding: 10px 0px 0px 5px;
}
.thanks p { padding:0px 2%;  }
.end-content-ar { margin-left: 0px; padding: 0px 15px;}
.end-content-ar ul li {text-align: right;margin-right: 29px;}
.end-content-ar h3 { padding-right: 0px;}
input.otp_input, .input_div.subscribe { width:100%; font-size:14px; margin:0 auto}
input.subscription{ width:100%; font-size:14px;}
.input_div.subscribe:before {left: 95%;}
p.sub-text {padding: 40px 10px 25px 10px; color: #b9b9b9; font-size:14px;}
.sub-text-top { padding: 0px 20px 0px 20px !important; }
.thanks ul{width:100%;margin:15px auto;}
.radio_section p{margin-bottom:0px;}
#plans {width: 100%;}
#plans li {
   display:inline-block;
}
#plans li p {
    padding: 0px 2px;
}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label{font-size:12px;padding-left:20px}
[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before{top: 2px;width: 14px;height: 14px;}
[type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after{ width: 14px;height: 14px;top: 8px;left: 8px;}
input.otp_input{    padding: 0px 0 0px 85px}

.input_div span{    top: 20px;    font-size: 14px;}
.input_div{margin-bottom: 35px !important;}
.end-content{margin-left:0px;padding:0px 12px;}
ul.input-field li:last-child .input_div {
    margin-bottom: 10px!important;
}
.cd-popup-trigger{height: 50px;line-height: 50px;font-size: 14px !important;}
input.input-control.otp_input {
    width: 90%!important;
}
.extra-space {
    padding-left: 60px;
    padding-right: 60px;
}
}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label{
    font-size: 21px;
}
[type="radio"]:checked + label {
    color: #fdd13a;
}
@media  only screen and (max-width:414px) { .radio_section label { font-size: 11px;}}

@media  only screen and (max-width:360px) { 
#mobile_number-error {
    font-size: 12px;
    width: calc(100% + 60px);
    left: 0px;
    padding: 10px 0px 0px 5px;
}
.cd-popup-trigger {
  padding-left:30px;
  padding-right:30px;
}
input.otp_input::placeholder {
    font-size: 13px;
}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label{font-size:11px;}
.radio_section label {font-size: 10px;  text-align: left; font-weight: 200; padding-left: 0px; } 

}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label{
    padding-left: 43px;
    line-height: 30px;
}
.extra-space {
    padding-left: 60px;
    padding-right: 60px;
}
.sub-text-top { padding: 0px 20px 0px 20px !important; }
#plans ul {
    width: 100%;
    float: left;
    margin: 0 auto;
    text-align: center;
}

.radio_section p {
    float: left;
    width: 100%;
    /* display: inline-block; */
    padding: 0 33px;
    margin-bottom: 35px;
}
.radio_section ul li {
    display: inline-block;
}
.radio_section ul {
    width: 100%;
    margin: 0 auto;
    float: left;
    text-align: center;
}

.radio_section {
    text-align: center;
    width: 100%;
    /* float: left; */
}

select#aioConceptName{background:transparent!important}
/*form#dtsubscription input.otp_input {
    padding: 21px 0 10px 71px;!important;
}*/
[type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after {
    background: #fdd13a;
    width: 14px;
    height: 14px;
    top: 8px;
    left: 8px;
}
[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {
    border: 2px solid #fff;
    background: transparent;
}
input.subscribe.cd-popup-trigger {
    border: solid 2px transparent;
    /* background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); */
    background-origin: border-box;
    /* background-clip: content-box, border-box; */
    /* padding: 13px 32px!important; */
    box-shadow: none;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    font-family: Calibri;
    font-size: 21px!important;
    /* font-weight: 400; */
    font-stretch: normal;
    font-style: normal;
    line-height: 0px;
    letter-spacing: normal;
    text-align: center;
     padding: 26.5px 34px;
    height: auto;
    background: #042b2c;
}

form#dtsubscription {
    margin-top: 0px;
    width: 100%;
    height: auto;
    float: left;    
}
.btn-grouping {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
form#dtsubscription input.otp_input::Placeholder {
    color: #a5a5a5;
}
form#dtsubscription input.subscription::Placeholder {
    color: #fff;
}
select#aioConceptName {
    color: #000;
    height: 50px;
    margin: 0px;
    padding: 0px 18px;
    line-height: 50px;
}
select#aioConceptName option {
    color: #000;
    font-size: 18px;
    height: 50px;
    margin: 0px;
    padding: 0px 17px;
}
.thanks ul .input_div span{
    color: #000000;
    font-size: 17px;
    height: 30px;
    line-height: 30px;
    padding: 0px 17px;
    top: 2px;
    /*border-right: 1px solid rgba(0,0,0,0.2);*/
}
form#dtotp input.otp_input::Placeholder {
    color: #a5a5a5;
}
.text-grey{
    color: #818a89 !important;
    padding-top: 10px;
}
#plan-amt-error{
    color: red;
}
p.web-para {
    font-family: Calibri;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.06;
    letter-spacing: normal;
    text-align: center;
    color: #edcc3d;
    border: 1px dashed #edcc3d;
    clear: both;
    width: auto;
    display:none!important;
}
form#dtsubscription .input_div {
    background: #fff;
    height: 50px;
    border-radius: 5px;
    max-width: 90%;
    width:90%;
    position:relative;
    }
    form#dtsubscription .input_div img.arrow-down {
    position: absolute;
    width: 15px;
    height: 9px;
    top: 20px;
    right: 20px;
}


form#dtsubscription .input_div input, form#dtsubscription .input_div select {
    border: none;
}   
.thanks ul li div#plan-amt {
    float: right;
} 
@media screen and (min-width: 1368px) {
    header.logo{ padding: 30px 0;}
    .thanks p,{font-size: 22px;}
    .end-content h3{font-size: 22px;}
    .end-content ul li{font-size: 18px;}
    [type="radio"]:checked + label, [type="radio"]:not(:checked) + label{font-size: 21px}
    p.sub_p{font-size: 18px;}
}
@media  only screen and ( max-width:740px ) {
    [type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after{ width: 8px;height: 8px;top: 5px;left: 3px;}
    .container {width:100%;padding-left:10px;padding-right: 10px; }
    form#dtsubscription .input_div{width:100%;max-width: 100%;}
    [type="radio"]:checked + label, [type="radio"]:not(:checked) + label{
        padding-left: 23px;
        line-height: 18px;
        font-size: 14px;
    }
    #plans li{    margin: 0px 10px;}
    #plans li p{margin-bottom: 5px;}
    .footer_text {margin-top: 15px;}
    .btn-grouping{    flex-direction: column;}
    .end-content{
        padding: 0px 10px;
        width: 100%;
        margin-top:40px;
        padding-bottom: 40px;
    }
    .end-content h3{text-align: left;line-height: 27px}
    .end-content h3:before{width:100%;}
    p.sub_p{    font-size: 13px;    line-height: 17px;    padding: 8px 8px;}
    .end-content ul li {
        width: calc(100% - 25px);
        padding: 0px 0px 0px 25px;
    }
    input.subscribe.cd-popup-trigger{font-size: 14px!important;    padding: 18px 22px;}  
    button.close_button{font-size: 14px;    padding: 18px 22px;    font-size: 14px!important;
    padding: 11px 28px;
    line-height: 14px;
    font-family: Calibri;} 
    .thanks ul .input_div span{font-size: 14px;padding: 0px 10px;}
    input.otp_input{padding: 0px 0 0px 60px} 
    select#aioConceptName{font-size: 14px;}
    .thanks ul li div#plan-amt{height:38px;}
    input.otp_input{height:38px;line-height: 38px;    width: 100%;
    float: left;
    max-width: 100%;}
    .thanks ul .input_div span{top:5px;}
    #mobile_number-error{top:30px;}
    select#aioConceptName{height:38px;line-height: 38px;font-size: 14px;padding:0px 10px;}
    form#dtsubscription .input_div{height:38px;}
    select#aioConceptName option{font-size: 14px;}
    form#dtsubscription .input_div img.arrow-down {
    position: absolute;
    width: 10px;
    height: 6px;
    top: 17px;
    right: 13px;}
    .thanks{padding-top: 0px}
   .header-logo.logo img{width:108px;} 
   .language.uae-logo span{font-size: 14px;}
   p.dt-error-messgae{margin-bottom: 10px;height:25px;    line-height: 30px}
   [type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before{
    border: 1px solid #fff;    width: 14px; height: 14px;
   }
   .radio_section p{padding: 0px 10px;margin-bottom: 10px;}
   form#dtotp input.input-control.otp_input{    width: calc(100% - 20px)!important;
    margin: 10px;}
    form#dtotp .etisalad-js {
    margin-top: 30px;
}
form#dtotp {
    position: relative;
}
input#otp-input {
    height: 38px;
}
label#otp-input-error {
    top: 40px;
}
input.otp_input::placeholder {
    font-size: 17px;
}
input.otp_input::placeholder {
    font-size: 13px;
}
}
@media  only screen and ( max-width:1024px ) {
.container{width:100%;}
}
@media  only screen and ( min-width:768px ) and ( max-width:1024px ){
    form#dtsubscription .input_div{ max-width: 100%;width: 100%;}
    .end-content {width: 100%;padding-left: 50px;padding-right: 50px;margin-top: 80px;margin-bottom: 50px;float: left;}
    .search-result-wrap .uk-width-1-4.eventtracker {width: 33.33%;}
}