@charset "utf-8";
/* CSS Document */


body{ font-weight:300; overflow-x:hidden; font-family: 'LatoRegular';
transition:.3s all ease-in-out 0s; -moz-transition:.3s all ease-in-out 0s;-webkit-transition:.3s all ease-in-out 0s; -o-transition:.3s all ease-in-out 0s;}

a{outline:none!important;}
.anim{transition:.3s all ease-in-out 0s; -moz-transition:.3s all ease-in-out 0s;-webkit-transition:.3s all ease-in-out 0s; -o-transition:.3s all ease-in-out 0s;}





/* Begin Font  */

@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/LatoRegular.eot');
    src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
         url('../fonts/LatoRegular.woff2') format('woff2'),
         url('../fonts/LatoRegular.woff') format('woff'),
         url('../fonts/LatoRegular.ttf') format('truetype'),
         url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
}
@font-face {
    font-family: 'LatoBold';
    src: url('../fonts/LatoBold.eot');
    src: url('../fonts/LatoBold.eot') format('embedded-opentype'),
         url('../fonts/LatoBold.woff2') format('woff2'),
         url('../fonts/LatoBold.woff') format('woff'),
         url('../fonts/LatoBold.ttf') format('truetype'),
         url('../fonts/LatoBold.svg#LatoBold') format('svg');
}

/* End Font  */
.wrapper{}
p {font-size: 16px; color: #5d5c5c; line-height: 28px;}
header { position: fixed; width:100%; z-index: 10;}
.header { background:#fff; height: 100px; border-bottom: 6px solid #1b99a3;  box-shadow: 0px 1px 12px 3px #6b6b6b;}
.topNav { float: right; margin: 34px 0;}
.topNav ul { padding: 0; margin: 0; display: flex; display: -ms-flex; list-style: none;}
.topNav ul li { padding: 0 18px;}
.topNav ul li i{color:#e4840f;}
.topNav ul li:last-child { padding-right: 0;}
.topNav ul a { padding: 4px 0; font-size: 18px;font-family: 'LatoBold'; color: #1b99a3; border-bottom: 2px dotted;}
.topNav ul a:hover,.topNav ul a:focus{color:#e4840f; text-decoration:none;}
.logo img {margin: 10px 0 0 0;}
.homeBg {background: url(../images/homeBg.jpg) no-repeat center center;  background-size: cover;  background-attachment: fixed;}

.sideNav {box-shadow:-3px 3px 12px 3px #292929; width:300px; position: fixed; z-index:5; height: 100%;padding: 40px 10px 20px; background: rgba(255,255,255,1);    transform: translateX(-305px); transition:.3s linear 0s;}
.rightSideMenu{box-shadow:3px 3px 12px 3px #292929;}
.sideNav.active{transform: translateX(0); margin-left: 0; transition:.3s linear 0s;}
.overlay{}
.overlay::before {content: "";  position: fixed;  background: rgba(0,0,0,.5);  width: 100%;  height: 100%;  z-index: 2}
.overlay2{}
.overlay2::before {content: "";  position: fixed;  background: rgba(0,0,0,.5);  width: 100%;  height: 100%;  z-index: 2;}
.fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d" !important;}

.menuIcon span { font-size: 18px; position: absolute; top: 0px;  left: 55px; width: 0; height: 55px; background: rgba(255,255,255,.7);  border-radius: 0 5px 5px 0;  padding: 15px 12px;  color: #383837; overflow: hidden;  transition: .2s linear 0s;   opacity: 0;}
.menuIcon:hover span,.menuIcon:focus span{width: 80px; transition: .2s linear 0s; opacity: 1;}
.menuIcon:hover{border-radius:0!important;transition: .2s linear 0s;}
.menuIconRight span{right: 55px;left:auto;border-radius: 5px 0 0 5px;}

.rightSideMenu {right: 0; transform: translateX(305px);}
.rightSideMenu.active{ transform: translateX(0);transition:.3s linear 0s;}
.rightSideMenu .menuIcon { left: -60px;  right: auto; border-radius: 5px 0 0 5px;}
.innerBg .rightSideMenu .menuIcon{box-shadow: -1px 1px 1px 0px #bfbfbf;}
.rightSideMenu .sideMenu li a {padding: 8px; font-size: 16px;border:none;    border-bottom: 1px dashed #1b99a3; border-radius:0;}
.rightSideMenu .sideMenu li a:hover{background:none;}
.rightSideMenu:hover{border-radius:0;transition: .2s linear 0s;}

.sideNavInner{overflow-x:hidden; height:100%; padding-bottom: 60px;}
.sideNav h1 { text-transform: uppercase; font-size: 24px; text-align: center; color: #1b99a3; font-family: 'LatoBold'; position: relative; margin-top:10px;  padding-bottom: 10px;}
.sideNav h1::before { position: absolute;  content: "";  width: 100px; border-bottom: 2px dotted;  bottom: 0;  margin: 0px auto;  left: 0;  right: 0;}
ul.sideMenu {   list-style: none;   padding: 0; margin: 35px 0;}
.sideMenu li { margin: 15px 15px;}
.sideMenu li a { padding: 12px;  display: block;  text-align: center;  font-size: 20px;  border: 1px solid #1b99a3;  color: #1b99a3;  border-radius: 5px;}
.sideMenu li a small{color:#e4840f;}
.sideMenu li a:hover,.sideMenu li a :focus{background:#1b99a3; text-decoration:none; color:#fff;}
.menuIcon { background: rgba(255,255,255,1); width: 60px; text-align: center;  height: 55px;  font-size: 27px;  position: absolute;  right: -60px;  top: 50px;  padding: 9px 0px;  color: #383837; border-radius: 0 5px 5px 0;  cursor: pointer; }
.innerBg .menuIcon{box-shadow: 1px 1px 1px 0px #bfbfbf;}
.fLogo { margin: 70px 0 0; text-align: center;}
.sliderCaption{margin-top:40%;}
.sliderCaption h1 {font-family: 'LatoBold'; color: #fff; text-shadow: 1px 1px 1px #5d5d5d; font-size: 46px;}
.btnRow{margin-left:-10px; margin-right:-10px; margin-top:15px;}
.btn-default { padding:14px 50px 14px 30px;background: #ccc; margin: 10px; font-size: 20px; text-transform: uppercase; font-family: 'LatoBold'; color: #fff;    box-shadow: 0px 2px 0px 0px #333;}
.btn-default:hover,.btn-default:focus{color:#fff;    background: #383837; opacity:.8;}
.btnBlue { background: #1b99a3;}
.btnOrange { background: #e4840f;}
.homePageFooter {  width: 1140px;  margin: 0px auto; position: absolute; left: 0;  right: 0; bottom: 25px;}
.btnIcon { margin: 0 10px 0 0; display: inline-block;}

.copyRight p {color: #3c3c3c; text-align: left; margin: 5px 0 0; background: rgba(255,255,255,.7); padding:6px 10px; border-radius:3px; font-size: 14px;}
.copyRight p  a{ text-shadow:none;}
.menuSection{padding-top:95px;}

.mCSB_scrollTools{width:5px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;}
.mCSB_inside > .mCSB_container { margin-right: 0;}

.innerBg{background:#f1f1f1;}
.innerContent{ min-height:700px;padding: 50px 0 0;}
.welcomeName {}
.welcomeName h2 { font-size: 20px;  margin: 0 0 10px;}
.welcomeName h3 {font-size: 13px; margin: 0 0 5px;}
.welcomeName h3 span{color: #1b99a3;font-family: 'LatoBold';}
.welcomeName h2 span { color: #1b99a3; font-size: 19px; font-family: 'LatoBold';}
.welcomeName small { color: #e4840f; font-size: 13px; font-style: italic;}
.currentBal{font-size:21px;}
.box{border-radius:4px; margin-bottom:10px;background:#fff; padding:20px;}
.myAccBtn{float:right; margin:25px 0 0;}
.leftSide h4 { font-size: 20px;  border-bottom: 1px dashed #ddd; padding: 0 0 10px;}
.leftSide h4 i{color:#1b99a3;}
.packageBox {box-shadow: 0px 2px 0px -1px #b7b7b7; width: 22%; height: 100px; background: #ffffff; border: 1px solid #ddd;  padding: 10px;  text-align: center;  border-radius: 5px; margin: 10px; float: left; cursor:pointer;}
.packageBox.active{background: #1b99a3;box-shadow:0 0 0 0.2rem rgb(24, 200, 214); border-color: #1b99a3;}
.packageBox.active h2{color:#fff;}.packageBox.active p{color:#eee;}
.packageBox:hover,.packageBox:focus{ background: #1b99a3;box-shadow:0 0 0 0.2rem rgb(24, 200, 214); border-color: #1b99a3;}

.packageBox:hover h2,.packageBox:focus h2{color:#fff;}
.packageBox:hover p,.packageBox:focus p{color:#eee;}
.packageBox h2 {font-family: 'LatoBold'; color: #1b99a3; margin: 5px 0;}
.packageBox b{font-family: 'LatoBold';}
.packageBox p {font-size: 13px;margin: 0;  line-height: 25px;}
.rechargeDe { min-height: 500px;}
.innerFooter  p{text-align:center;}
.prevReHistory { float:left; width:100%; background: #b7d8fb;  padding: 15px; border-radius: 5px;  border: 1px solid #a1cbf7;}
.prevReHistory h3 { font-size: 21px;  margin: 0 0 10px;  border-bottom: 1px dashed #ffffff;  padding-bottom: 8px;}
.prevReHistory h3 i{color:#1b99a3; font-size:20px;}
.historyBox {border-left: 2px solid #4e8ed2; background:#ebf2f9; border-radius: 4px;  padding: 8px 10px;  margin: 0 0 5px;float:left; width:100%;}
.historyBox p {   margin: 0;  font-size: 13px;  color:#464646;  line-height: 23px;}
.historyBox p span {    width: 105px;display: inline-block;}
.historyBox p small {color: #888888;    padding-left: 5px;}
.preAmunt { font-family: 'LatoBold';}
.preAmunt span {font-family: 'LatoRegular';}
.reptBtn{padding:0 10px; float:right;}
.proceedRow{float:left; width:100%;margin: 60px 0 0;}
.proceedRow .btn { padding: 10px 83px;}
.newRec span { font-size: 27px !important;  margin: 0 5px 0;}
.newRec {  margin: 0 !important;}
.rechargeSummary p { margin: 8px 0; color: #484848;}
.rechargeSummary p span {width: 80px; display: inline-block;}
p.totalAmt { font-family: 'LatoBold'; font-size: 23px;color:#1daf3e; border-top: 1px solid #fff; padding: 9px 0 0;}
.paymentTabs{margin:20px 0 0;}
.paymentTabs .nav-link {background: #b7d8fb;  margin: 0 10px 0 0;}
.paymentTabs .nav-link.active{position:relative;}
.paymentTabs .nav-link.active::before { position: absolute; bottom: -25px; content: "\f0d7"; font-family: fontawesome; color: #007bff;  font-size: 30px; left: 0; right: 0;  text-align: center;}
.paymentTabs .tab-content{min-height:175px;margin: 30px 0 0;}
.paymentForm { width: 70%;}

.buyBlock { }
.buyLeft img{max-width:100%;}
.buyLeft figure{overflow:hidden;padding: 20px;}
.buyRight h1 {font-size: 32px; margin-bottom: 15px;}
.buyRight h3 { color: #e4840f;  font-family: 'LatoBold';}
.sizeBox {  width: 70%; background: #e1ebf7; padding: 15px;  margin: 15px 0;  border-radius: 3px;}
.buyBtn{width:100%; cursor:pointer;}
.buyRight h3 span { color: #777;  font-size: 16px;  padding: 0 5px;}
.buyRight h3 span.oldPrice { text-decoration: line-through;}
.sizeBox p { margin: 0; text-align: center; font-size: 13px; border-top: 1px dashed #b9b9b9;}
.buyRight { padding: 20px;}
.proMoreInfo h3 {font-size: 17px; color: #4c4c4c;}
.proMoreInfo p {color: #676666;  font-size: 14px;  line-height: 22px;}
.proMoreInfo table td {font-size: 15px;  padding: 10px 5px;}

.pageTitle {  font-size: 20px;  border-bottom: 1px dashed #ddd;  padding: 0 0 10px;}
.pageTitle i {color: #1b99a3;}
.forgotLink{float:right; cursor:pointer;margin: 8px 0 0;  color: #777;}
.forgotLink:hover,.forgotLink:focus{color:#007bff;}
.modal label {  margin: 0 0 4px;}
.modal{overflow:auto;}
.accountTab{min-height:450px;}
.accountTab .nav-link { color: #333;font-family: 'LatoBold';  padding: 15px;}
.accountTab .nav-link.active { background: #1b99a3;}
.accountTab .nav-pills{border-right: 1px dashed #c5c5c5;height: 100%; padding: 8px 15px 0 0;}
.tab-pane h2 {  font-size: 21px; font-family: 'LatoBold';  margin: 0 0 20px;}
.accountTab .tab-content {padding-top: 10px;}
.accountTab .btn-sm {  padding: 2px;  font-size: 12px;}

.faqBlock{margin-top:35px;}
.faqBlock,.faqList{}
.faqTitle { font-size: 18px; cursor:default;  border-bottom: 1px solid #ddd;  padding: 5px 0 20px;  margin: 5px 0 0;color:#1c99a3;}
.faqContent { background: #f4f4f4;  padding: 10px; display:none;}
.minHeight650 { min-height: 650px;}

.row-columns {  margin-top: 0em;  margin-bottom: 2em;   float: left;  width: 100%;}
.column {  margin-top: 3em;}
.contactBox .form-control, .contactBox textarea.form-control {  font-size: 1em;  color: #9F9F9F; background:#f4f4f4;  border-radius: 4px;  padding: 10px;  border-width: 0 0 1px 0;
-webkit-box-shadow: none;  box-shadow: none;  -webkit-transition: all .15s;  -o-transition: all .15s;  transition: all .15s;}
.contactBox textarea.form-control {   padding-top: 1em;  height: 7em;  resize: none;}
.contact-line {    padding: 0 0 0 20px; float:left; width:100%;  margin-bottom: 3em;   font-size: 0.9em;}
.contactBox .text-primary { color:#ce7b2d;}
.contact-line .icon {  font-size: 2.5em;}
.contactBox .form-control:focus { border-color: #1b99a3;  outline: 0;  -webkit-box-shadow: none;  box-shadow: none;}
.contactBox .btn {  font-weight: 400;  font-size: 0.85em;  letter-spacing: 0.1em;  line-height: 1;  position: relative;  display: inline-block;  background: #1b99a3;
border: 2px solid #1b99a3;  padding:15px;   border-radius: 4px;    text-decoration: none;
color: #fff; text-transform: uppercase;  -webkit-transition: background-color .3s ease-out;   -o-transition: background-color .3s ease-out;  transition: background-color .3s ease-out;}
.contactBox .btn:hover, .contactBox .btn:focus {  border-color: #1b99a3;  background-color: transparent;  color: #1b99a3;}
.contact-line h4 { font-family: 'LatoBold';     font-size: 17px; margin: 0 0 5px;}
.media-right {padding-left: 7px;font-size: 13px; float:left}
.contact-line  i { color: #e4840f; font-size: 2.2em;}
.media-left { float: left; padding: 0 10px 0 0;}

.featureList li { padding: 9px;}
.pricingBox ul{margin:0; padding:0; list-style:none;}
.deliveryBox figure { text-align: center; margin: 37px 0 10px;}
.deliveryBox p {  font-size: 20px; text-align: center;}
.deliveryBox span{color: #1b99a3;font-family: 'LatoBold';}
.pricingBox ul li {padding: 32px;font-family: 'LatoBold';border: 1px dashed #67d3dc;  margin: 10px 20px 10px 0;  background: #1b99a3;  display: inline-block;  color: #fff; 
 box-shadow: 1px 1px 1px 1px #888585;}
.pricingBox ul li:nth-child(odd) {  background: #e4840f;  border: 1px dashed #ffca8a;}

.simBox { background:#546d6f; padding: 10px; border-radius:5px;    margin: 0 0 20px; cursor:pointer;}
.simBox:hover,simBox:focus{background:#1b99a3;}
.simBox.disabled {  cursor: not-allowed;    background: #f1c8c8;}
.simBox h3 { color:#fff;  font-size: 16px; margin-bottom:0;    font-family: 'LatoBold';}
.simBox h4 {color:#fff;  font-size: 13px;}
.simBox h5 {color:#eee !important;  font-size: 12px;  color: #676767;}
.simBox small { font-family: 'LatoBold'; color: white;  background: #28a745;  font-size: 10px;  padding: 2px 6px;  margin: 0 0 3px;  display: inline-block;  border-radius: 25px;}
.simBox.disabled small {  background: #e88484;}
.simBox.active { background: #1b99a3;box-shadow: 0 0 0 0.2rem rgb(24, 200, 214);}


@media (max-width: 1199px) { 

.homePageFooter{width:960px;}
.btn-default{padding: 15px 35px 15px 30px;}
.sliderCaption h1{font-size:37px;}
.packageBox{width:25%;}
.prevReHistory{padding:10px;}
.historyBox{padding:8px;}
.historyBox p{font-size:12px;}
.rechargeSummary p{font-size:12px; margin:0;}
p.totalAmt{font-size:18px;}
.proceedRow{margin:10px 0 0;}
.paymentTabs .tab-content{min-height:100px;}
.sizeBox{width:80%;}
.buyRight h1{font-size:28px;}
.homePageFooter {bottom:10px;}

 }
 


 @media (max-width: 991px) {
.homePageFooter{width:720px;}
.btn-default{padding: 12px 16px; font-size: 18px;}
.sliderCaption h1{font-size:33px;}
.btn-default{font-size:15px;padding:10px 16px 10px;}
.packageBox {width: 45%;}
.prevReHistory h3,.leftSide h4{font-size:17px;}
.buyRight h1 { font-size: 20px;}
.buyRight h3{font-size:22px;}
.sizeBox {width: 100%;}
.proMoreInfo h3 { font-size: 17px !important;}
.buyLeft figure{padding:20px 10px;}
.accountTab .nav-link{padding:8px;font-size: 13px;}
.tab-pane h2{font-size:17px;}
.accountTab td,.accountTab th {  font-size: 13px;}
.minHeight650 { min-height: auto;}

	 
 }
 
@media (max-width: 767px) { 
.logo img{width:100px;}
.topNav {margin: 35px 0;}
.topNav ul li { padding: 0 10px;}
.topNav ul a{font-size:14px;}
.homePageFooter {width: 100%; padding-left: 15px; padding-right: 15px;}
.sliderCaption h1 { font-size: 22px;}
.btn-default { font-size: 12px; padding: 10px 9px 5px;margin: 10px 5px;}
.btnRow .btn-default {  width: 50%;}
.sliderCaption{display:none;}
.menuIcon span{display:none;}
.menuIcon{width:50px; height:45px;right:-50px;font-size: 20px;}
.rightSideMenu .menuIcon{left:-50px;}
.sideNav{width:250px;transform: translateX(-255px);}
.rightSideMenu { transform: translateX(255px);}
.menuIcon:hover { border-radius: 0 5px 5px 0!important; transition: .2s linear 0s;}
.rightSideMenu .menuIcon:hover{border-radius: 5px 0 0 5px!important;}
.sideNav h1{font-size:18px;}
.sideMenu li a{padding:7px; font-size:17px;}
.rightSideMenu .sideMenu li a {  font-size: 14px;}
.homeBg{background-size: cover; height:100%;}
.box{padding:10px;}
.welcomeName h2{font-size:17px;}
.proceedRow{margin:15px 0;}
.proceedRow .btn { padding: 5px 10px;  width: 100%;}
.innerContent{padding:20px 0 0;}
.copyRight p{font-size:12px; line-height:17px;}
.paymentForm { width: 100%;}
.buyLeft figure{margin:0;}
.mobHide{display:none;}
.buyRight { padding: 10px;}
.accountTab .nav-pills{border:0;padding: 5px;  background: #eee;}


 }
 
 @media (max-width: 575px) { 
 .welcomeName small{font-size:11px;}
 .packageBox { width: 46%; margin:5px;}
 .packageBox h2{font-size:21px;}
 .packageBox p{font-size:12px; line-height:17px;}
 .paymentTabs .nav-link{padding:10px; font-size:13px;}
 .form-group label{ font-size: 13px; margin-bottom:1px;}
.form-group .form-control{   font-size: 13px; padding:5px;}
.form-group select{  height: 31px !important;}
.form-group { margin-bottom: 6px;}

 }