@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
:root {
  --ltn__body-font:"Roboto", sans-serif;
  --font-fira:"Fira Sans", sans-serif;
  --font-lota:"Lato", sans-serif;
  --red:red;
  --black:#000;
  --white:#fff;
  --color-1:#5b6e88;
  --color-2:#242f48;
  --color-3:#353535;
  --color-4:#27807a;
  --color-5:#ff5e5e;
  --color-6:#7e859e;
  --background-1:#ecf0fa;
  --background-2:#b4bdce;
  --background-3:#424e79;
  --background-4:#ebeffa;
  --background-5:#bbe6e3;
  --background-6:#ffdede;
  --border-1:#eff0f6;
  --border-2:#d4d4d4;
  --transition:all 0.30s ease-in-out;
}

body {
  font-family: var(--ltn__body-font) !important;
  font-size: 14px;
  background: var(--background-4);
}

.padding20 {
  padding: 20px 0;
}

.padding30 {
  padding: 30px 0;
}

.padding40 {
  padding: 40px 0;
}

.padding60 {
  padding: 60px 0;
}

.padding80 {
  padding: 80px 0;
}

.padding100 {
  padding: 100px 0;
}

.padding120 {
  padding: 120px 0;
}

header {
  background: var(--white);
  padding-top: 20px;
}
header .logo {
  width: 150px;
}
header .search {
  position: relative;
}
header .search i {
  position: absolute;
  right: 20px;
  top: 13px;
  color: var(--background-2);
}
header .search input[type=text] {
  background: var(--background-1);
  width: 100%;
  padding: 0 40px 0 20px;
  border: none;
  border-radius: 30px;
  height: 43px;
  line-height: 43px;
  outline: none;
}
header .wallet {
  background: var(--background-3);
  border-radius: 30px;
  min-height: 35px;
  line-height: 35px;
  padding: 0 5px 0 15px;
  font-family: var(--font-fira);
  font-size: 17px;
  color: var(--white);
  font-weight: 700;
  display: table;
  margin-top: 3px;
  float: left;
}
header .wallet .fa-indian-rupee-sign {
  position: relative;
  top: 2px;
  margin: 0 2px 0 7px;
}
header .wallet .fa-circle-plus {
  font-size: 28px;
  color: var(--white);
  margin-left: 15px;
  position: relative;
  top: 4px;
}
header .time {
  float: left;
  margin: 10px;
  color: var(--color-1);
  font-size: 13px;
  font-weight: 500;
}
header .user {
  float: right;
  color: var(--color-1);
  font-size: 13px;
  font-weight: 500;
}
header .nav-bg {
  box-shadow: 0 10px 10px -6px #b0b8d6;
  border-top: solid 1px var(--border-1);
}
header .nav-item a {
  color: var(--color-1);
  font-size: 15px;
  padding: 4px 14px !important;
}

section .dashboard h3 {
  color: var(--color-2);
  font-size: 25px;
  font-weight: 700;
}
section .dashboard .item-bg-1 { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0866e8+0,7badf3+100 */
  background: #0866e8; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #0866e8 0%, #7badf3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0866e8", endColorstr="#7badf3",GradientType=1 ); /* IE6-9 */
}
section .dashboard .item-bg-2 { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f84e6a+0,f77389+100 */
  background: #f84e6a; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #f84e6a 0%, #f77389 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f84e6a", endColorstr="#f77389",GradientType=1 ); /* IE6-9 */
}
section .dashboard .item-bg-3 { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#049868+0,45d3a5+100 */
  background: #049868; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #049868 0%, #45d3a5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#049868", endColorstr="#45d3a5",GradientType=1 ); /* IE6-9 */
}
section .dashboard .item-bg-4 {
  background: #f76d2f;
  background: linear-gradient(to right, #f76d2f 0%, #efa45d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f76d2f", endColorstr="#efa45d",GradientType=1 );
}
section .dashboard .item {
  padding: 20px;
  border-radius: 5px;
  min-height: 134px;
  position: relative;
}
section .dashboard .item::before {
  content: "";
  position: absolute;
  background: url(../images/rupee.png) no-repeat;
  right: 10px;
  top: 14px;
  width: 102px;
  height: 101px;
}
section .dashboard .item .title {
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 10px;
}
section .dashboard .item .amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}
section .dashboard .item .amount i {
  font-size: 16px;
}
section .dashboard .item p {
  margin: 0px;
  color: var(--white);
  opacity: 0.45;
  font-size: 13px;
}
section .dashboard .services .box {
  background: var(--white);
  box-shadow: 0 0 10px #b0b8d6;
  padding: 20px 30px;
  border-radius: 5px;
}
section .dashboard .services .box .title {
  color: var(--color-2);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
}
section .dashboard .services .box .service-icon {
  border: solid 1px var(--border-2);
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}
section .dashboard .services .box .service-icon .text {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}
section .dashboard .services .box .owl-carousel img {
  width: auto;
  margin: 0 auto;
}
section .dashboard .services .box .owl-carousel .owl-nav {
  display: none;
}
section .dashboard .services .box .owl-carousel .owl-dots {
  margin-top: 20px;
}
section .dashboard .transactions {
  background: var(--white);
  box-shadow: 0 0 10px #b0b8d6;
  padding: 20px 30px;
  border-radius: 5px;
}
section .dashboard .transactions h3 {
  font-size: 18px;
  color: var(--color-2);
  font-weight: 700;
}
section .dashboard .transactions .table {
  color: var(--color-3);
  font-size: 14px;
  margin: 0;
}
section .dashboard .transactions .table tr {
  vertical-align: baseline;
}
section .dashboard .transactions .completed {
  background: var(--background-5);
  color: var(--color-4);
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-lota);
  padding: 5px 10px;
  position: relative;
}
section .dashboard .transactions .completed::before {
  width: auto;
  content: "";
  height: 0;
  border-top: 14px solid transparent;
  border-right: 20px solid var(--white);
  border-bottom: 12px solid transparent;
  position: absolute;
  right: 0px;
  top: 0px;
}
section .dashboard .transactions .pending {
  background: var(--background-6);
  color: var(--color-5);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-lota);
  padding: 5px 10px;
  position: relative;
}
section .dashboard .transactions .pending::before {
  width: auto;
  content: "";
  height: 0;
  border-top: 14px solid transparent;
  border-right: 20px solid var(--white);
  border-bottom: 12px solid transparent;
  position: absolute;
  right: 0px;
  top: 0px;
}
section .topup .item {
    background: var(--white);
    box-shadow: 0 0 10px #b0b8d6;
    padding: 20px 30px;
    border-radius: 5px;
}
section .topup .item .submit {
    background: var(--background-3);
    padding: 10px 20px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    color: var(--white);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    transition: var(--transition);
}
section .topup .item .cancel {
    border: solid 1px var(--background-10);
    background: none;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: var(--black);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    transition: var(--transition);
}
footer {
  background: var(--white);
  padding: 15px 0;
  color: var(--color-6);width: 100%;
  font-size: 13px;position:fixed;bottom: 0;text-align: center;
}/*# sourceMappingURL=stylesheet.css.map */