@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/* global css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

.form-control,
.form-select {
  border-radius: 2px !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  -o-border-radius: 2px !important;
}

.form-control:focus,
.form-select:focus {
  box-shadow: none !important;
  border-color: var(--bs-primary-2) !important;
}

.btn {
  border-radius: 2px !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  -o-border-radius: 2px !important;
}

/* main-heading */
.main-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.main-heading h2 {
  margin: 0;
  font-weight: 600;
}

/* end-heading */
/* start-nav */
.top-header {
  background-color: var(--bs-primary-2);
  padding: .5rem 0;
}

.top-header ul {
  margin: 0;
  padding: 0;
  gap: 1rem;
  display: flex;
  list-style: none;
}

.top-header ul li a {
  color: rgb(255, 255, 255, 0.8);
  text-decoration: none;
}

.top-header ul li a i {
  color: var(--bs-primary);
}

.app-header {
  background-color: var(--bs-white);
  /* box-shadow: var(--bs-box-shadow); */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.app-header .navbar {
  padding: 0 !important;
  position: sticky;
  top: 0;
}

.app-header .navbar .navbar-brand img {
  height: 4rem;
}

.app-header .navbar .navbar-nav .nav-link {
  margin: 0rem .5rem;
  font-weight: 500;
}

.app-header .navbar .navbar-nav .nav-link:focus {
  color: var(--bs-primary);
}

.app-header .navbar .navbar-nav .nav-link:hover {
  color: var(--bs-primary-1);
}

.app-header .navbar .navbar-nav .dropdown-menu {
  border: 0;
  box-shadow: var(--bs-box-shadow-sm);
}

.app-header .navbar .navbar-nav .dropdown-menu .dropdown-item {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.app-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
  color: var(--bs-primary-1);
}

.app-header .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary-1) !important;
  color: var(--bs-white) !important;
}

.app-header .navbar .navbar-nav .dropdown-menu .dropdown-item:last-child {
  border: 0 !important;
}



.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item,
.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item span {
  display: flex;
  align-items: center;
  gap: 0.50rem;
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600 ;
  padding: 0.50rem 1rem;
  border-bottom: 1px solid #454545;
  background-color: var(--bs-white);
  backdrop-filter: blur(70px);
  color: var(--bs-primary-2);
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li {
  margin-bottom: 0.50rem;
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li:last-of-type {
  margin-bottom: 0;
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item i {
  font-size: 30px;
}

.app-header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item img {
  height: 1.50rem;
  width: 1.50rem;
}


/* end-nav */
/* app-hero */
.app-hero {
  padding: 3rem 0;
  background-color: rgb(237, 249, 249);
}
.app-hero  h6{
  color: var(--bs-primary);
}

.app-hero h1 {
  font-weight: 600;
  font-size: 54px;
  line-height: 1.4;
}

.app-hero .badge {
  background-color: var(--bs-white) !important;
  padding: 1.2rem;
  font-size: 1rem !important;
  border-radius: 30px !important;
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.app-hero .badge span {
  color: var(--bs-primary-1);
}

.app-hero h1 {
  margin: 1rem 0;
  text-transform: capitalize;
}

.app-hero h1 span {
  color: var(--bs-primary);
}

.app-hero p {
  color: var(--bs-secondary);
}

.app-hero ul {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.app-hero ul li p {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-primary-2);
}

.app-hero .action-btn {
  margin-top: 1.5rem;
}

.app-hero .action-btn .btn {
  padding: 10px 40px !important;
  border-radius: 8px !important;
}

.app-hero .action-btn .btn {
  border-width: 2px !important;
}
/* end hero */
/* counter-section */
.counter-section{
 margin-bottom: -90px;
 position: relative ;
 z-index: 100;
}
.counter-section .counter-text{
  background-color: var(--bs-primary);
  padding: 3rem;
  border-radius: 5px; 
}
.counter-section .counter-text h5{
  font-size: 2rem;
  color:var(--bs-white);
  font-weight: 700;
  font-family: "Barlow", serif !important;
}
.counter-section .counter-text  .card-text{
  color:var(--bs-white);
  font-size: 18px;
}
/* end counter-section */

/* how-we-works */
.how-we-works {
  padding: 3rem 0;
  background-color: var(--bs-light);
}
.how-we-works span{
  display: block;
  text-align: center;
  color: var(--bs-primary);
  font-weight: 500;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}
.how-we-works .card{
  border: 0;
  transition: all .5s;
}
.how-we-works .card:hover{
  background-color: var(--bs-primary);
}
.how-we-works .card:hover .card-body .card-title,
.how-we-works .card:hover .card-body .card-text{
  color: var(--bs-white);
}
.how-we-works .card .card-body img{
  height: 3rem;
}
.how-we-works .card .card-body .card-title {
  margin-top: .5rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.how-we-works .card .card-body .icon{
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}

.how-we-works .card .card-body .card-text {
  margin: 0px;
  color: var(--bs-secondary);
}

/* end how-we-works */

/* .recent-blog */
.recent-blog {
  padding: 3rem 0;
  /* background-color: var(--bs-light); */
}

.recent-blog .card {
  border: 0;
  box-shadow: var(--bs-box-shadow-sm);
}

/* end blog */

.social-links {
  margin: 0px 40px;
  background-color: var(--btn-color);
  color: #fff;
  padding: 30px 0px;
  border-radius: 10px;
  position: absolute;
  top: -60px;
  width: 90%;
  right: 30px;
  left: 30px;
}

.social-links ul {
  display: flex;
  margin: 0px;
}

.social-links p {
  margin: 0px;
}

.social-links ul li {
  list-style: none;
  margin: 0px 10px;
}

.social-links ul li a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #fff;
  text-decoration: none;
}

.social-links ul li a:hover {
  transition: all .5s;
}

.social-links ul li a i {
  font-size: 20px;
  color: var(--btn-color);
}


.span {
  color: var(--bs-primary);
}






.our-partners .partner-item img {
  height: 5rem;
}

.our-partner {
  padding: 3rem 0;
}

.partner-slider {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.owl-carousel .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.owl-carousel .item img {
  max-width: 100px;
  height: auto;
  margin: 0 15px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

.our-features .col-lg-4:last-child {
  border: none !important;
}

.our-features .feature-text .img-bg {
  width: 50px !important;
  background-color: rgb(201, 235, 223);
  border-radius: 5px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px auto;
}


.our-features img {
  width: 30px;
}

/* our-testimonials */
.our-testimonials{
  padding: 3rem 0;
  background-color: #f9f9f9 !important;
}
.our-testimonials span{
  display: block;
  text-align: center;
  color: var(--bs-primary);
  font-size: 18px;
  font-weight: 500;
}
.our-testimonials h2{
  text-align: center;
  font-weight: 700;
  margin-top: 1rem;
}
.our-testimonials .carousel .carousel-inner .carousel-item{
  text-align: center;
}
.our-testimonials .carousel .carousel-inner .carousel-item img{
  height: 3rem;
  margin: 1rem 0;
}
.our-testimonials .carousel .carousel-inner .carousel-item  .card{
  border: 0;
  margin-top: 1rem;
  display: inline-block;
  padding: 5px 30px;

}
.our-testimonials .carousel .carousel-inner .carousel-item  .card .card-body{
  display: flex;
  gap: 1rem;
  align-items: center;
}
.our-testimonials .carousel .carousel-inner .carousel-item  .card .card-body img{
  border-radius: 50%;
}
.our-testimonials .carousel .carousel-inner .carousel-item  .card .card-body .card-text{
  color: var(--bs-secondary);
}

/* footer */
.footer {
  padding: 2rem 0;
  background-color: var(--bs-primary-2);
}

.footer img {
  height: 4rem;
  margin-bottom: 1rem;
}

.footer p {
  color: var(--bs-white);
}

.footer h5 {
  color: var(--bs-white);
}

.footer ul li {
  margin: .5rem 0;
  color: var(--bs-white);
  font-size: 14px;
}

.footer ul li a {
  color: var(--bs-white);
  font-size: 14px;
  text-decoration: none;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
}

.footer ul li a:hover {
  color: var(--bs-primary);
}

.footer .footer-bottom p {
  font-size: 14px;
}

/* services-page */
.mobile-recharge {
  margin: 3rem 0;
}

.mobile-recharge h1 {
  font-weight: 600;
  margin-bottom: 1rem;
}

.mobile-recharge p {
  color: var(--bs-secondary);
}

.mobile-recharge .cta-btn .btn {
  padding: 0.75rem 3rem;
  font-weight: 500;
  text-transform: capitalize;
}

.mobile-recharge .cta-btn {
  display: flex;
  margin-top: 1.5rem;
  align-items: center;
  gap: 1rem;
  text-wrap: nowrap;
}

.mobile-recharge .cta-btn .btn:last-of-type {
  border-width: 2px;
}

.mobile-recharge .join-now-form {
  margin: 0 4rem;
  padding: 2rem;
  background-color: var(--bs-white);
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-sm);
  -webkit-border-radius: var(--bs-border-radius-sm);
  -moz-border-radius: var(--bs-border-radius-sm);
  -ms-border-radius: var(--bs-border-radius-sm);
  -o-border-radius: var(--bs-border-radius-sm);
}
.mobile-recharge .join-now-form h5{
  font-weight: 600;
}
.mobile-recharge .join-now-form form label {
  color: var(--bs-dark);
  font-weight: 600;
  font-size: 14px;
}

.mobile-recharge .join-now-form form label span {
  color: var(--bs-red);
}

.mobile-recharge .join-now-form form .btn {
  background-color: var(--bs-primary-2);
  border: none;
  width: 100%;
  color: var(--bs-white);
}

/* our-services */
.our-services {
  background-color: var(--bs-primary-2);
  padding: 9rem 0 3rem 0;
  position: relative;
  overflow: hidden;
}
.our-services .heading-section span{
  color: var(--bs-primary);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  display: block;
}

.our-services .heading-section .heading-title {
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 700;
  color: var(--bs-white);
}
.our-services .card{
  border: 0;
  background-color:#161942;
}
.our-services .card .card-body img{
  height: 4rem;
}
.our-services .card .card-body{
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
}
.our-services .card .card-body .card-title{
  color: var(--bs-white);
}
.our-services .card .card-body .card-text{
  color: var(--bs-white);
}
.our-services .btn{
  padding: 10px 30px;
  border-radius: 4px !important;
}
.about-recharge {
  margin: 3rem 0;
}
.about-recharge h2{
  font-weight: 600  ;
}
.about-recharge p {
  color: var(--bs-secondary);
}

.company-overview {
  padding: 3rem 0;
  background-color: var(--bs-light);
}
.company-overview h2{
  margin-bottom: 1rem;
  font-weight: 600;
}

.company-overview .card {
  border: 0;
  box-shadow: var(--bs-box-shadow-sm);
}

.company-overview .card .card-body img {
  margin-bottom: 1rem;
}

.company-overview .card .card-body ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.company-overview .card .card-body .card-text {
  color: var(--bs-secondary);
}

.activation-process {
  margin: 3rem 0;
}

.activation-process p {
  color: var(--bs-secondary);
}

.accordion-app {
  padding: 3rem 0;
  background-color: var(--bs-light);
}

.accordion-app h3 {
  margin-bottom: 1rem;
}

.accordion-app .accordion-button:focus {
  box-shadow: none !important;
  background-color: var(--bs-primary-2) !important;
  color: var(--bs-white);
}

.accordion-body {
  color: var(--bs-secondary);
}

/* contact-us */
.contact-us {
  padding: 3rem 0;
  background-color: rgb(242, 251, 250);
}

.contact-us h2 {
  font-weight: 700;
}

.contact-us .breadcrumb .breadcrumb-item a {
  text-decoration: none;
  color: var(--bs-secondary);
  font-weight: 600;
}

.contact-us .breadcrumb .breadcrumb-item.active {
  color: var(--bs-primary);
  font-weight: 600;
}

.contact-details {
  padding: 3rem 0;
}

.contact-details .card {
  border: 0;
  background-color: var(--bs-light);
  height: 100%;
  transition: .4s;
}
.contact-details .card:hover{
  background-color: var(--bs-primary);
}
.contact-details .card:hover .card-body ul li .card-title,
.contact-details .card:hover .card-body ul li .card-text
{
  color: var(--bs-white);
}
.contact-details .card:hover .card-body ul li .icon{
  background-color: var(--bs-white);
}
.contact-details .card:hover .card-body ul li .icon i{
  color: var(--bs-primary);
}
.contact-details .card .card-body img {
  height: 3rem;
}

.contact-details .card .card-body {
  padding: 1.5rem;
}

.contact-details .card .card-body ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-details .card .card-body ul li .icon {
  background-color: var(--bs-primary-2);
  padding: 1rem;
  display: flex !important;
  height: 50px;
  width: 50px;
  justify-content: center;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.contact-details .card .card-body ul li .icon i {
  color: var(--bs-white);
  font-size: 20px;

}

.contact-details .card .card-body ul li .card-title {
  font-weight: 600;
}

.contact-details .card .card-body ul li .card-text {
  color: var(--bs-secondary);
}
/* contact-form */
.contact-form{
  padding: 4rem 0;
  background-color: var(--bs-light);
}
.contact-form h5{
  color: var(--bs-primary);
  text-align: center;
}
.contact-form h2{  
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}
.contact-form form .form-control{
  padding: 1rem;
  border: var(--bs-white);
}
.contact-form form .form-control:focus{
  border: 1px solid var(--bs-primary) !important;
}
.contact-form form .btn{
  padding: 1rem;
  border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
}
/* why-us */
.why-us{
  margin: 3rem 0 6rem 0;
}
.why-us p:first-child{
  color: var(--bs-primary);
  font-weight: 500;
}
.why-us h2{
  line-height: 1.4;
  font-weight: 700;
}
.why-us p{
  color: var(--bs-secondary);
}
.why-us ul li{
  list-style: none;
  display: flex;
  gap: 1rem;
  margin-top: .5rem;
  align-items: start;
}
.why-us ul li img{
  height: 4rem;
}
.why-us ul li:hover h5{
  transition: all .5s;
  color: var(--bs-primary);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
}
.why-us ul li h5{
  font-weight: 600;
}
/* about-us */
.about-us{
  margin: 3rem 0;
}
.about-us span{
  color: var(--bs-primary);
  display: block;
  font-weight: 500;
}
.about-us h2{
  font-weight: 700;
  margin: 1rem 0;
}
.about-us p{
  color: var(--bs-secondary);
}
.about-us li{
  list-style: none;
  margin: .5rem 0;
  font-weight: 600;
}
.about-us li i{
  color: var(--bs-primary);
}
.about-us li{
  display: flex;
}
.about-us li span{
  display: inline-flex;
  width: 30px;
  margin-right:.5rem;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  height: 30px;
  background-color: rgba(0,169,164,.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
/* faqs */
.faqs{
  margin: 3rem 0;
}
.services-card{
  padding: 3rem 0;
}
.services-card .card{
  border: 0;
  height: 100%;
  transition: all .5s;
  box-shadow: var(--bs-box-shadow-sm);
}
.services-card .card .card-body ul{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 1rem;
  list-style: none;
  margin-bottom: 1rem;
}
.services-card .card:hover{
  background-color: var(--bs-primary-2);
}
.services-card .card:hover .card-body ul li .card-title,
.services-card .card:hover .card-body .card-text{
  color: var(--bs-white);
}
.services-card .card .card-body ul li img{
  height: 4rem;
}
.services-card .card .card-body ul li .card-title{
  font-weight: 700;
}
.services-card .card .card-body ul li .card-text{
  color: var(--bs-secondary);
}
.services-card .card .card-body a{
  color: var(--bs-primary);
  text-decoration: none;
}
.terms-content{
  margin: 3rem 0;
}
.terms-content .card{
  border: 0;
  box-shadow: var(--bs-box-shadow-sm);
}
.terms-content .card .card-title{
  font-weight: 600;
}
.terms-content .card .card-text{
  color: var(--bs-secondary);
}
.terms-content .card .card-body ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.terms-content .card .card-body ul li{
  color: var(--bs-secondary);
  margin: 1rem 0;
}
.our-vision{
  padding: 3rem 0;
  background-color: var(--bs-light);
}
.our-vision .card{
  border: 0;
   box-shadow: var(--bs-box-shadow-sm);
}
.our-vision .card .card-body .card-title{
  font-weight: 700;
}
.our-vision .card .card-body .card-text{
  color: var(--bs-secondaryservices-card);
}
.mobile-service{
  padding: 3rem 0 !important;
}
/* login */
.login-bg{
  background-color: var(--bs-light);
  height: 100vh;
}
/* admin-login */
.admin-login {
  position: relative; 
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: url(../img/login-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.admin-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1; 
}

.admin-login > * {
  position: relative; 
  z-index: 2;
}


.admin-login .card .card-body .admin-logo {
  text-align: center;
  margin-bottom: 1rem;
}

.admin-login .card {
  border: 0;
  border-radius: 0;
  box-shadow: var(--bs-box-shadow-sm);
}

.admin-login .card .card-body {
  padding: 2rem;
}

.admin-login .card .card-body .admin-logo img {
  height: 6rem;
}

.admin-login .card .card-body .card-title {
  text-transform: capitalize;
}

.admin-login .card .card-body .card-text {
  color: var(--bs-secondary);
}

.admin-login .card .card-body .form-group .btn {
  width: 100%;
}
.admin-login .card .card-body label{
  font-weight: 500;
}
.admin-login .card .card-body label span{
  color: var(--bs-red);
}