/*Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
/*----Global----
----------------*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Inter", sans-serif;
}

a:hover {
  color: #1d71b8 !important ;
}

/*Button*/

.banner-btn {
  background: rgb(32, 14, 136);
  background: linear-gradient(
    90deg,
    rgba(32, 14, 136, 1) 38%,
    rgba(30, 4, 66, 1) 69%
  );
  color: #fff;
  border-radius: 20px;
  width: 10rem;
}

/*--NAV---
----------*/
#main-nav {
  background-color: #000;
}

/*----Banner--
--------------*/
#home {
  background-image: url(../img/banner-bg-test.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-main {
  height: 91vh;
}

/*----Overview---
-----------------*/
#overview {
  background-image: url(../img/overview-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

/*Carousel*/

.cards-wrapper {
  display: flex;
  justify-content: center;
}

.card-overview {
  background: rgb(206, 41, 188);
  background: linear-gradient(
    180deg,
    rgba(19, 124, 207, 1) 13%,
    rgba(80, 1, 139, 1) 74%,
    rgba(128, 1, 39, 1) 100%
  );
  margin: 0 1rem;
  border-radius: 10px !important;
  height: 19rem;
}

.card-overview img {
  width: 100px;
  margin: 0 auto;
  padding: 50px 0 25px;
}

.card-overview {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 0;
}
.carousel-inner {
  padding: 1em;
}

/*--Numbers----
--------------*/
#numbers {
  padding-bottom: 4rem;
}

svg.radial-progress {
  height: auto;
  max-width: 200px;
  padding: 1em;
  transform: rotate(-90deg);
  width: 100%;
}

svg.radial-progress circle {
  fill: rgba(0, 0, 0, 0);
  stroke: #fff;
  stroke-dashoffset: 219.91148575129;
  stroke-width: 10;
}

svg.radial-progress circle.incomplete {
  opacity: 0.25;
}

svg.radial-progress circle.complete {
  stroke-dasharray: 219.91148575129;
}

svg.radial-progress text {
  fill: #fff;
  text-anchor: middle;
}

svg.radial-progress circle {
  stroke: #500195;
}

.stats-first-sub,
.stats-second-sub,
.stats-third-sub,
.stats-fourth-sub {
  display: none;
}

.stats img {
  width: 150px;
}

/*--chargeback----
--------------*/
#chargeback-banner {
  background: rgb(174, 2, 32);
  background: linear-gradient(
    90deg,
    rgba(174, 2, 32, 1) 0%,
    rgba(80, 1, 139, 1) 30%,
    rgba(29, 113, 184, 1) 60%,
    rgba(206, 41, 188, 1) 90%
  );
}

#chargeback-banner img {
  width: 300px;
  top: -230px;
}

/*--Pros----
--------------*/
#pros {
  padding-top: 6rem;
}

#pros img {
  width: 120px;
}

/*--Formula---
--------------*/

#formula {
  padding-top: 5em;
  background-color: #000;
}

.formula-sm {
  width: 100%;
}

.form-bg {
  background-image: url(../img/formula-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

/*--Pyament-Fraud---
-----------------*/

#payment-fraud {
  padding-top: 4rem;
  background-image: url(../img/features-bg.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: bottom right;
}

/*--Features----
--------------*/

#features img {
  width: 100px;
}

.dark-grey {
  background-color: #161616;
  border-radius: 10px;
}

.light-grey {
  background-color: #212121;
  border-radius: 10px;
}

/*--How it works----
------------------*/
.works-numbers img {
  width: 120px;
}

.how-text-image img {
  width: 30px;
}

/*---Careers---
-------------*/
#careers {
  background: rgb(174, 2, 32);
  background: linear-gradient(
    90deg,
    rgba(174, 2, 32, 1) 0%,
    rgba(80, 1, 139, 1) 30%,
    rgba(29, 113, 184, 1) 60%,
    rgba(206, 41, 188, 1) 90%
  );
}

/* Forms */

.form-error {
  color: red;
}

.form-sucess {
  color: green;
}

.contact-btn {
  padding-left: 3em;
  padding-right: 3em;
  margin: 1.5em 0 3em;
}

form ::placeholder {
  color: #999999;
  padding-left: 0.5em;
}

form input,
form textarea {
  border-radius: 10px;
}

.full-width {
  width: 100%;
}

/* -----Contact-----
----------------- */

#contact {
  background-image: url(../img/contact-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#contact .pci-image {
  max-width: 12rem;
}

#footer {
  background: rgb(174, 2, 32);
  background: linear-gradient(
    90deg,
    rgba(174, 2, 32, 1) 0%,
    rgba(80, 1, 139, 1) 30%,
    rgba(29, 113, 184, 1) 60%,
    rgba(206, 41, 188, 1) 90%
  );
}

/*---------COMPLIANCE PAGE----------*/
.compliance-main {
  height: calc(100vh - 83px);
  background-color: #000;
  display: flex;
  flex-direction: column;
}
.compliance-main .compliance-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

/*-----MEDIA QUERIES---*/
/* Desktop */
@media only screen and (min-width: 1200px) {
  .form-bg {
    height: 90vh;
  }

  /*---Formula---*/
  .payments {
    background-image: url(../img/ring.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
  }

  .fraud {
    background-image: url(../img/ring.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
  }

  /*--Numbers----
    --------------*/
  .stats-first-sub,
  .stats-second-sub,
  .stats-third-sub,
  .stats-fourth-sub {
    display: block;
  }

  .stats-first-sub {
    top: 120px;
    left: 120px;
  }

  .stats-second-sub {
    left: 143px;
    top: 120px;
  }

  .stats-third-sub {
    top: 122px;
    left: 142px;
  }

  .stats-fourth-sub {
    top: 122px;
    left: 137px;
  }
}

@media only screen and (min-width: 1800px) {
  .form-bg {
    height: 60vh;
  }

  /*---Formula---*/
  .payments,
  .fraud {
    height: 60vh;
  }
}
@media (max-width: 575px) {
  .show-on-small {
    display: block !important;
  }
  .max-width-200 {
    max-width: 200px;
  }

  .hide-on-small {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .show-on-small {
    display: none !important;
  }

  .hide-on-small {
    display: block !important;
  }
}