.baas-bg {
  /* background: #020a22; 
  background: -webkit-linear-gradient(
    to right,
    #182848,
    #020a22
  ); 
  background: linear-gradient(
    to right,
    #182848,
    #020a22
  ); */
  background: url("../img/baas/banner-back.avif") no-repeat 100% 100%;
  background-size: cover;
  position: relative;
  z-index: 99;
}

.baas-bg::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(1deg, rgb(0 0 0 / 50%), transparent);
}

.why-choose-baas-sec {
  position: relative;
  z-index: 1;
}

.baas-main {
  background: #020a22;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right,
      #182848,
      #020a22);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right,
      #182848,
      #020a22);
}

.why-shap-flow {
  position: absolute;
  top: 0;
  transform: rotate(180deg);
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
}

.why-choose-baas-img-sec {
  margin-top: 2em;
}

/* .why-choose-baas-img {
  max-width: 30em;
} */

.why-choose-baas-box {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: 2em;
  margin-left: 2em;
}

.why-choose-baas-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border-radius: 20px;
}

.why-choose-baas-icon-sec {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0c152d;
  border-radius: 50%;
  padding: 2px;
  position: relative;
}

.why-choose-baas-icon-sec::after {
  content: ' ';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("../img/baas/noise-bg.png") no-repeat center;
  background-size: cover;
  opacity: 0.7;
}

.why-card-icpns-outer {
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #525253, #262626);
  width: 4.5em;
  height: 4.5em;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.why-choose-baas-info-sec h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--secondary-color);
  line-height: 1.4;
}

.why-choose-baas-info-sec p {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.baas-feature-box {
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  gap: 1.5em;
}

.baas-feature-card {
  padding: 1.5em;
  border-radius: 12px;
  /* background: url("../img/baas/metal_texture.avif") no-repeat center; */
  background-color: #131313;
  background-size: cover;
  /* border: 1px solid #EAEAEA; */
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  grid-template-columns: auto 150px;
  align-items: start;
  gap: 1.5em;
}

.baas-feature-img {
  height: auto;
  width: 4em;
  object-fit: contain;
  position: relative;
}

.baas-feature-img::after {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  background-color: #384c7a69;
  left: 0px;
  bottom: -16px;
  border-radius: 50%;
  z-index: -1;
}

.baas-feature-info-sec h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--secondary-color);
  line-height: 1.4;
}

.baas-feature-info-sec p {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.why-of-your-payment-title {
  margin-bottom: 4em;
}

.why-of-your-payment-title h2 {
  font-size: 2em;
  font-weight: 600;
  position: relative;
  margin-bottom: 0.5em;
  position: relative;
  z-index: 0;
  line-height: 1.5;
  color: var(--secondary-color);
  text-align: center;
}

.why-of-your-payment-title h2 span {
  color: var(--primary-color);
}

.why-of-your-payment-title p {
  text-align: center;
  font-size: 1em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.baas-feature-title p {
  font-size: 1em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}


.baas-feature-img-sec {
  position: relative;
}

.baas-feature-sec .section-title h3 {
  color: var(--secondary-color);
}

.industry-we-serve-img-sec {
  padding-right: 2em;
}

.industry-we-serve-baas-box {
  grid-template-columns: repeat(1, 1fr);
  display: grid;
  gap: 1.5em;
}

.industry-we-serve-baas-card {
  padding: 1.5em;
  border-radius: 12px;
  border: 1px solid #24366a;
  display: grid;
  justify-content: space-between;
  grid-template-columns: auto 160px;
  align-items: center;
  background-color: #ffffff05;
  border: 1px solid #ffffff1a;
  gap: 4em;
}

.industry-we-serve-baas-icon-sec {
  width: 10em;
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.industry-we-serve-baas-info-sec h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--secondary-color);
  line-height: 1.4;
}

.industry-we-serve-baas-info-sec p {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.what-sets-up-apart-sec {}

.whta-info-grid-card {
  display: grid;
  gap: 2em;
}

.what-flow-box {
  position: relative;
  z-index: 99;
}

.what-flow-box::after {
  content: '';
  position: absolute;
  background-image: linear-gradient(#866bf0, #030c24);
  width: 100%;
  max-width: 377px;
  height: 377px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.whta-info-flow-title {
  margin-bottom: 3em;
}

.whta-info-flow-title h2 {
  font-size: 2em;
  font-weight: 600;
  position: relative;
  margin-bottom: 0.5em;
  position: relative;
  z-index: 0;
  line-height: 1.5;
  color: var(--secondary-color);
}

.whta-info-flow-title p {
  font-size: 1em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.what-sets-up-apart-sec .section-title h3 {
  color: var(--secondary-color);
}

.what-sets-up-apart-box {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  gap: 1.5em;
}

.what-sets-up-apart-card {
  padding: 1.5em;
  background-color: var(--secondary-color);
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  transition: 1s all;
  background: url("../img/baas/banner-bg-black.avif") no-repeat center center;
  background-size: contain;
}

.what-sets-up-apart-bg {
  position: absolute;
  right: 0;
  top: 0;
}

.what-flow-card-one {
  padding: 1.5em;
  border-radius: 12px;
  background-color: #ffffff05;
  border: 1px solid #ffffff1a;
}

.what-flow-card-icons {
  font-size: 2em;
  font-weight: 600;
  color: var(--secondary-color);
  position: relative;
  margin-bottom: 1em;
  padding-left: 0.7em;
  z-index: 1;
}

.what-flow-card-icons::after {
  content: '';
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  background-color: #384c7a69;
  left: 0px;
  bottom: -16px;
  border-radius: 50%;
  z-index: -1;

}

.wht-top-space {
  margin-top: 4em;
}

.wht-top-two {
  margin-top: 2em;
}

.whta-info-flow-box {
  padding-left: 4em;
}

.whta-info-flow-title {}

.what-flow-card-info h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--secondary-color);
  line-height: 1.4;
}

.what-flow-card-info p {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.what-sets-up-apart-number {
  color: var(--primary-color);
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.baas-sm-margin-mb {
  margin-bottom: 2em;
}

.what-sets-up-apart-card:hover {
  background-color: var(--primary-color);
}

.what-sets-up-apart-card:hover .what-sets-up-apart-number {
  color: var(--secondary-color);
}

.what-sets-up-apart-card:hover .what-sets-up-apart-info-sec h4 {
  color: var(--secondary-color);
}

.what-sets-up-apart-card:hover .what-sets-up-apart-info-sec p {
  color: var(--secondary-color);
}

.transform-financial-services-card {
  position: relative;
  /* background:url("../img/baas/baas-shade.svg") no-repeat bottom #191d1b00; */
  background: #131313;
  background-size: cover;
  padding: 1.5em;
  border-radius: 12px;
  overflow: hidden;
  /* background-image: url(../img/baas/bg-noise.webp); */
  box-shadow: 0 4px 4px #00000040, inset 0 4px 4px #ffffff1f;
}

.financial-services-avater-img {
  width: 4em;
  height: 4em;
  object-fit: contain;
  position: relative;
  padding-left: 1.2em;
}

.financial-services-avater-img::after {
  content: '';
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #32384a;
  left: 0;
  bottom: -40px;
  border-radius: 50%;
}

.transform-financial-services-sec {
  background: linear-gradient(to right,
      #182848,
      #020a22);
  position: relative;
  /* padding: 6em 0; */
}

.transform-financial-services-sec .section-title h2 {
  color: var(--secondary-color);
}

.transform-financial-services-sec .section-title p {
  color: var(--secondary-color);
}

.contact-baas .section-title h2 {
  color: var(--secondary-color) !important;
}

.contact-baas .section-title p {
  color: var(--secondary-color) !important;
}

.contact-baas .cta-candly-wrapped {
  border-radius: 24px;
  padding: 4em;
  background: url("../img/baas/cta-card-pattern.png") no-repeat left bottom;
  background-size: cover;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #262e46;
  box-shadow: 0 4px 4px #00000040, inset 0 4px 4px #ffffff1f;
}

.contact-baas .make-apppointment-contact-form-sec {
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0px -1px 28px 0px rgba(7, 10, 24, 0.11);
  backdrop-filter: blur(6.5px);
}

.contact-baas .make-apppointment-contact-form-sec .form-control {
  background: #132342 !important;
  border: 1px solid #132342;
  color: var(--secondary-color);
}

.contact-baas .form-control::placeholder {
  color: #05A3DE !important;
  opacity: 1;
}

.contact-baas .country-selector input {
  background-color: transparent !important;
  color: #05A3DE !important;
}

.contact-baas .chosen-country {
  background: #132342 !important;
  border: 1px solid #132342;
  color: #05A3DE !important;
}

.transform-financial-services-avater {
  margin-bottom: 2em;
}

.transform-financial-services-card h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--secondary-color);
  line-height: 1.4;
  margin-bottom: 1em;
}

.transform-financial-services-card p {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--secondary-color);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 0em;
}

.transform-financial-services-box {
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  gap: 1em;
}

.baas-faq .section-title h3 {
  color: var(--secondary-color);
}

.baas-faq .faq-accordion .accordion-item .accordion-button {
  border-bottom: 0;
  font-size: .6em;
  background-color: transparent;
  font-weight: 600;
  color: var(--secondary-color);
  border: 1px solid #262e46;
}

.baas-faq .faq-accordion .accordion-item .accordion-body {
  background: url("../img/baas/count-back.png") no-repeat center var(--secondary-color);
  background-size: cover
}

.baas-faq .faq-accordion .accordion-button::after,
.baas-faq .faq-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(1);
}

/* Code Section style  */
.code-wrap {
  position: relative;
}

.code-wrap::after {
  content: '';
  position: absolute;
  background-image: linear-gradient(#866bf0, #030c24);
  width: 100%;
  max-width: 377px;
  height: 377px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.code-title {
  margin-bottom: 3em;
}

.code-title h2 {
  font-size: 2em;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.4;
  margin-bottom: 0.4em;
}

.code-title h2 span {
  color: var(--primary-color) !important;
}

.code-title p {
  font-size: 1em;
  font-weight: 500;
  color: var(--white-color);
  line-height: 1.8;
  margin-bottom: 0em;
}

.code-card-info h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.8;
  margin-bottom: 0.5em;
}

.code-card-info p {
  font-size: 1em;
  font-weight: 500;
  color: var(--secondary-color);
  line-height: 1.8;
  margin-bottom: 1em;
}

.code-card-icons {
  width: 4.5em;
  height: 4.5em;
  display: grid;
  place-items: center;
  margin-bottom: 0.5em;
}

.code-card-action a {
  font-size: 1em;
  font-weight: 500;
  color: var(--secondary-color);
}

.code-card {
  padding: 1.5em;
  border-radius: 12px;
  border: 1px solid #ffffff52;
}

.code-avater-title {
  margin-bottom: 4em;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.code-avater-title h2 {
  font-size: 2em;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.4;
  margin-bottom: 0em;
}

.code-avater-box {
  padding-left: 2em;
}

.code-avater-box img {
  border: 1px solid transparent;
  border-radius: 10px;
}

.code-avater-box:hover img {
  border: 1px solid #191756;
}

.mobile-titles {
  display: none;
}

.desktop-title {
  display: block;
}