body {
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  font-family: Verdana, sans-serif;
  color: #444444;
  padding-bottom: 0;
}

/*chat styles start*/
.floating-chat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  position: fixed;
  bottom: 25px;
  left: 20px;
  background-color: #25d366;
  box-shadow: 2px 2px 3px #999;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.floating-chat-icon:hover {
  transform: scale(1.1);
}

.chat-icons-container {
  position: fixed;
  bottom: 60px;
  left: 50px;
  display: none;
  flex-direction: column;
  align-items: center;
}

.chat-icon {
  background-color: #25d366;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-icon a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.chat-icon a:hover {
  color: #fff;
}

.chat-icon a i {
  font-size: 20px;
  margin-right: 10px;
}

.chat-icon a span {
  font-size: 14px;
}
/*chat styles end*/

/*Custom Notification Styles Start*/
#custom-notification-justice {
  margin-bottom:10px;
  border:1px solid grey;
  border-radius:5px;
}
#custom-notification-justice .header {
  padding:10px;
  background-color:#8E80B8;
  color:white;
}
#custom-notification-justice .body {
  padding:10px;
  background-color:#A69BD1;
  font-weight:400;
  color:white;
}
/*Custom Notification End*/

/*General Styles Start*/
.nav.nav-pills li a {
  border-radius: 100px;
 
}

.nav.nav-pills i {
  margin-right: 5px;
}

.nav.nav-pills i {
  border: 1px solid #ff772e;
  border-radius: 100px;
  height: 32px;
  width: 32px;
  line-height: 31px;
  padding: 0 !important;
  text-align: center;
  font-size: 14px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: ;
}

.nav-pills > li.active > a i, 
.nav-pills > li.active > a:hover i, 
.nav-pills > li.active > a:focus i,
.nav-pills > li > a:hover i {
  background-color: #630eac;
  border: 1px solid #630eac !important;
  color: #fff;
  transition: 0.5s linear;
}
/*General Styles End*/


/* Sign In Styles Start*/
.alert-danger{
  background-color: #f2dede;
  border-radius: 5px;
  color: #d58d64;
}

.navbar {
padding: 5px;
  margin-bottom:0px;
  background: linear-gradient(to right, #222654 47%, #cc00ff 85%);
}

.navbar li {
font-weight: ;
}

a {
color: #47b2e4;
text-decoration: none;
}

a:hover {
color: orange;
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Jost", sans-serif;
}

.section-padding {
padding: 30px 0px 30px 0px;
}

#signin-section {
margin: 0px;
border: 0px;
width: 100%;
background-color: #ffffff;
color: #271838;
}

#signin-section h1 {
margin: 0 0 10px 0;
font-size: 38px;
font-weight: 600;
line-height: 56px;
color: #2c1643;
}

.well{
background-color: inherit;
  border: 0px;
  padding: 0px;
}

#signin-form {
border:0px;
}

#signin-form  .form-group {
width:80%;
}

#signin-form .form-control {
border-radius:30px;
}

#signin-form .btn {
border-radius:20px;
  width:35%;
}

#signin-form .btn:hover, .btn:active {
background-color: #505596;
}

.formImage {height:100%; width:100%}


#features-section {
  background-color: #e3e7f6;
  color: #5a4b70;
}

.section-headers {
  margin: 0 0 20px 0;
  font-size: 45px;
  line-height: 55px;
  color: #2b1f62;
  font-weight: 600;
}

.title-row {
text-align:center;
}

.features-card-headers {
  margin: 0 0 20px 0;
  font-weight: 600;
}

#features-section .panel {
  padding: 30px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px grey;
  color: #2c1643;
}

#features-section .panel:hover {
  color: white;
  background: linear-gradient(to right, #222654 47%, #cc00ff 85%);
}

#get-started-section {
background-color: #ffffff;
  color: #5a4b70;
}

#get-started-section .row.work-wrap-row .col-sm-3 .work-top h3::after {
  width: 90px;
  left: 70px;
  display:none;
}
.row.work-wrap-row.work-wrap-row2 .work-top h4 {
font-weight: 400;
line-height: 22px;
}

#get-started-section .row.work-wrap-row .col-sm-3 {
width: 20%;
}
#get-started-section .row.work-wrap-row.work-wrap-row2 .col-sm-3 {
  width: 14.28%;
}
#get-started-section .row.work-wrap-row.work-wrap-row2 .col-sm-3 .work-top h3::after {
  width: 35px;
  left: 0;
  display: none;
}

.work-bottom p,
#get-started-section  p {
color: #3c4464 !important;
}
.work-wrap {
text-align: center;
}
.work-top h3 {
font-size: 50px;
font-weight: 700;
color: #000;
border-radius: 100px;
height: 100px;
width: 100px;
margin: auto;
margin-bottom: auto;
line-height: 100px;
box-shadow: 0px 0px 0px 11px #f4f5f7;
margin-bottom: 25px;
transition: 1.5s linear;
position: relative;
}
.work-top h3::after {
content: '';
position: absolute;
right: -159%;
width: 130px;
height: 3px;
border-top: 5px dotted #f4f5f7;
top: 0;
bottom: 0;
margin: auto;
}
.work-top h4 {
font-size: 16px;
font-weight: 700;
color: #000;
}
.work-bottom {
opacity: 0;
transition: 1.5s linear;
}	
.work-bottom p {
font-size: 16px;
line-height: 24px;
color: #000;
}
.work-wrap h3 {
box-shadow: 0px 0px 0px 11px #5c0faf;
transition: 1.5s linear;
background: linear-gradient(to right, rgba(245,62,49,1) 0%, rgba(235,22,97,1) 100%);
background-clip: border-box; 
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.work-wrap .work-bottom {
opacity: 1;
transition: 1.5s linear;
}

.title-bottom-txt {
padding: 15px 15px;
color: #000;
}
.work-top h3::after {
content: '';
position: absolute;
right: -159%;
width: 130px;
height: 3px;
border: 2px dashed #e7eaee;
top: 0;
bottom: 0;
margin: auto;
}
.noafter::after {
 display: none;
}
#get-started-section .row:last-child {
padding-top: 45px;
}

#testimonies-header {
color: #493b57;
  font-weight: 600px;
  font-size: 20px;
}

#testimonies .panel {
padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0.75rem 0.25rem rgb(68 83 100 / 10%);
  border: 1px solid #bcc0ea;
}

#testimonies #right-part {
padding: 25px;
}

#testimonies div p {
font-size: 14px;
  color: #2c1643;
}

#testimonies #testimonies-header {
font-weight: bold;
  font-size: 23px;
}

.testimonies-panel-footer {
color: #bfbfbf;
  font-size: 12px;
  font-style: normal;
}

#footer-top {
          background: linear-gradient(to right, #222654 47%, #cc00ff 85%);
          color: #ffffff;
          padding: 35px;
      }
#footer-top div .col-sm-3 {
     padding: 10px;
  }

      #footer-top h5 {
          font-size: larger;
          font-weight: bold;
      }

      #footer-top ul {
          list-style: none;
          padding: 0;
      }

      #footer-top ul li{
          margin-bottom: 5px;
      }

      #footer-top li a {
          text-decoration: none;
          color: white;
      }

      #footer-top li a i {
          text-decoration: none;
          color: white;
          font-weight: bold;
      }

      #footer-top li a:hover, #footer-top li a i:hover  {
          text-decoration: none;
          color: orange;
      }

      #footer-top li a i {
          font-size: 14px;
          color: white;
      }

      #footer-bottom {
          background: #fbfbff;
          color: #651f62;
          padding: 15px;
      }
/*Sign In Section End*/


/*New Order Styles Start*/
#neworder, #neworder .neworder-formfield, #neworder .select2, #neworder .select2:focus, #neworder input, #neworder input:focus {
background: #f5f8fb;
}

#neworder .panel-row {padding-bottom:20px;}

#neworder .panel-row .panel{
  border-radius: 5px;
  padding:15px;
  box-shadow: 5px 5px 5px grey;
  color: white;
  background: linear-gradient(to right, #222654 47%, #cc00ff 85%);
}

#neworder .panel-row .panel h4{
  font-size:25px;
  font-weight:600;
}

#neworder .well {
  padding: 20px;
  border-radius: 5px;
  background: #ffffff;
}
#neworder #updates h4{
	color: #ef5527;
  	font-weight:600;
}

#neworder #updates {
	color:#2c1643;
  	
}

/*New Order Styles End*/


/*Services Style Start*/
#services-page {
  background: #f5f8fb;
}

#services-page #search-and-filter {
  margin: 20px 0;
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
}

#services-page #search-and-filter .dropdown-menu {
  max-width: 400px !important;
  max-height: 500px !important;
  overflow-x: hidden;
  overflow-y: scroll;
}

#services-page #search-and-filter .dropdown-menu .dropdown-item {
  border-radius: 0px 0px;
}

@media (max-width: 620px) {
  #services-page #search-and-filter .dropdown-menu {
    max-width: 300px !important;
    max-height: 350px !important;
    overflow-wrap: break-word;  
    word-wrap: break-word; 
    word-break: break-word;
    overflow-y: scroll;
    font-size: 12px !important;
  }

  #services-page #search-and-filter .dropdown {
    width: 100%;
  }
}


#services-page .well {
padding: 20px;
  border-radius: 5px;
  background: #ffffff;
}

#services-page .description-button {
  background: linear-gradient(to right, #222654 47%, #cc00ff 85%);
  color: white;
  border-radius: 5px;
  font-weight: bold;
}
/*Services Style End*/

/*Orders Styles Start*/
#orders-page {
	background: #f5f8fb;
}

#orders-page #orders-table {
	overflow-x: auto;
}

#orders-page #orders-table .well{
	background:white; 
  	padding: 15px;
  	border-radius: 5px;
}

/*Orders Styles End*/

/*Refill Styles Start*/
#refill-page {
	background: #f5f8fb;
}

#refill-page #refill-table {
  	overflow-x: auto;
}

#refill-page #refill-table .well{
	background:white; 
  	padding: 15px;
  	border-radius: 5px;
}
/*Refill Styles End*/

/*Add Funds Style Start*/
#add-funds-page {
  background: #f5f8fb;
}

#add-funds-page .well {
  padding: 20px;
  border-radius: 5px;
  background: #ffffff;
}

#add-funds-page #bank-or-crypto {
	padding: 10px 30px 10px 30px;
  	color: #5a4b70;
  	font-weight: 500;
  	width: 70%;
}

#add-funds-page #bank-or-crypto p {
  	padding: 0px 15px 0px 15px;
	margin-left: auto;
    margin-right: auto;
  	font-size: 18px;
    width: 80%;
}

#add-funds-page #bank-or-crypto #bank-or-crypto-header {
  text-align: center;
  margin: 0 0 20px 0;
  font-size: 45px;
  line-height: 55px;
  color: #2b3362;
  font-weight: 600;
}

#add-funds-page #bank-or-crypto img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.pay-button{
  border-radius:6px;

}
/*Add Funds Styles End*/

/*Affiliates Style Start*/
#api-page {
  background: #f5f8fb;
}

#api-page .well {
padding: 20px;
  border-radius: 5px;
  background: #ffffff;
}

#api-page #api-table {
  overflow-x: auto;
}

/*Affiliates Styles End*/

/*Affiliates Style Start*/
#affiliates-page {
  background: #f5f8fb;
}

#affiliates-page .well {
padding: 20px;
  border-radius: 5px;
  background: #ffffff;
}
/*Affiliates Styles End*/


/*SignUp Styles Start*/
#signup-page {
	background: #f5f8fb;
}


#signup-page .well{
	background:white; 
  	padding: 25px;
  	border-radius: 5px;
}

#signup-page .well .form-control {
  	border-radius: 5px;
  	background: #f5f8fb;
  	box-shadow: 3px 3px 3px grey;
}

#signup-page .well .form-group {
	padding-bottom: 5px;
}
/*SignUp Styles End*/

/*Affiliates Styles Start*/
#affiliates-page {
	background: #f5f8fb;
}

#affiliates-page #affiliates-table {
	overflow-x: auto;
}

#affiliates-page #affiliates-table .well{
	background:white; 
  	padding: 15px;
}
/*Affiliates Styles End*/


@-webkit-keyframes hvr-bob {
0% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
50% {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
@keyframes hvr-bob {
0% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
50% {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
@-webkit-keyframes hvr-bob-float {
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
@keyframes hvr-bob-float {
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
.hvr-bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}

@media only screen and (max-width: 600px){
#signin-form .btn{
  width:80%;
  }

#signin-section h1 {
margin: 0 0 5px 0;
font-size: 30px;
font-weight: 600;
line-height: 36px;
color: #2c1643;
}

.section-headers {
  margin: 0 0 5px 0;
  font-size: 30px;
  line-height: 36px;
  color: #2b1f62;
  font-weight: 600;
}
#features-section #features-top-padding {
  padding-bottom: 15px;
}

}

@media only screen and (max-width: 768px){
  #get-started-section .work-wrap{
  		padding-bottom:15px;
  }
  #orders-page .stack-nav-pills > li, #refill-page .stack-nav-pills > li {
    float: none;
  }
  #orders-page .stack-nav-pills > li + li, #refill-page .stack-nav-pills > li +li {
    margin-top: 2px;
    margin-left: 0;
  }
  #signin-section #sign-up-ques {
    padding: 7px 30px 7px 0px;
    justify-content: center;
    text-align: center;
  }
  
  #add-funds-page #bank-or-crypto #bank-or-crypto-header {
  text-align: center;
  margin: 0 0 20px 0;
  font-size: 25px;
  line-height: 47px;
  color: #2b3362;
  font-weight: 600;
}

#add-funds-page #bank-or-crypto p {
  	padding: 0px 15px 0px 15px;
	margin-left: auto;
    margin-right: auto;
  	font-size: 15px;
  	width:100%;
}
#add-funds-page #bank-or-crypto {
	width:100%;
}
}
/* Ticket Styles Start */
.ticket-message-left .ticket-message {
    background: #383C63;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 12px;
    padding: 15px;
    color: #fff;
  font-weight: 500;
}

.row.ticket-message-block.ticket-message-right .ticket-message {
    background: #C03DF7;
    border-radius: 12px;
    color: #ffff;
  font-weight: 500;
}