@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

* {
  font-family: "IBM Plex Sans", sans-serif;
}


:root {
  --primary-blue: #2367fa;
}

.bg-primary {
  background-color: var(--primary-blue);
}

.text-primary {
  color: var(--primary-blue);
}


.global-gradient {
  background: linear-gradient(90deg, #2367fa 0%, #738ecb 35%, #d9538a 75%, #f60f0b 100%);
}

.global-gradient i {
  transition: 0.3s;
}

.global-gradient:hover i {
  rotate: 45deg;
}



.hero-gradient-text {
  background: linear-gradient(90deg,
      #2367fa 0%,
      #356de7 35%,
      #ee2320 70%,
      #f60f0b 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* display: inline-block; */
}

.main-header {
  padding: 20px 50px;

}

.herosection {
  background: #010b28;
  background: url("./assets/images/hero.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position-x: 70%;
  background-position-y: 0%;
  padding: 60px 50px;
  padding-top: calc(50px + 80px);

}

.home-services .card {
  background-color: #f8f9fd;
  border: 1px solid white;
  color: #222222;
  border-radius: 28px;
}

.home-services .card:hover {
  background-color: #2367fa;
  border: 1px solid #2367fa;
  color: white;
  border-radius: 28px;
}


/* ---------------------- */
.all-hero-bg {
  background: #010b28;
  background: url("./assets/images/background-all-hero.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-x: 70%;
  background-position-y: 0%;
  padding: 60px 50px;
  padding-top: calc(50px + 80px);
}

.fixed-background-bg {
  background: #010b28;
  background: url("./assets/images/WhyChooseUs.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* ---------------------- */

.How-It-Works,
.testimonials,
footer {
  background: #010b28;
  background: url("./assets/images/How It Works overlay.png") center / cover no-repeat;


}



.WhyChooseUs {
  background: #010b28;
  background: url("./assets/images/WhyChooseUs.jpg") center / cover no-repeat;
}






/* right to left unlimited scroll */
.ticker-wrapper {
  background: #fff;

  overflow: hidden;
}

.ticker-slider .item {
  color: #0f2560;
  font-size: 36px;
  font-weight: 700;
  white-space: nowrap;
  display: flex !important;
  align-items: center;
  padding: 10px 0;
}

.ticker-slider .item::after {
  content: "*";
  margin-left: 15px;
  font-size: 36px;
  font-weight: 900;
}

.ticker-slider .slick-track {
  display: flex !important;
  align-items: center;
}

.ticker-slider .slick-slide {
  width: auto !important;
  margin: 0 10px;
}


/* testimonials */

.testimonial-slider .slick-slide {
  padding: 0 8px;
}

.testimonial-slider .slick-track {
  display: flex;
}

.testimonial-slider .slick-slide {
  height: inherit;
}

.testimonial-slider .slick-prev,
.testimonial-slider .slick-next {
  z-index: 10;
}

.testimonial-slider .slick-dots li button:before {
  color: #6366f1;
}

.testimonial-slider .slick-dots li.slick-active button:before {
  color: #6366f1;
}

.testimonial-slider .slick-next {
  right: 10px !important;
}

.testimonial-slider .slick-prev {
  left: -15px !important;
}

.testimonial-slider .slick-next:before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: url("assets/images/right-line-arrow.svg") center center no-repeat;
  background-size: 24px;
  background-color: #fff;
  border-radius: 50%;
  color: #0668fd;
}

.testimonial-slider .slick-prev:before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: url("assets/images/left-line-arrow.svg") center center no-repeat;
  background-size: 24px;
  background-color: #fff;
  border-radius: 50%;
  color: #0668fd;
}

.testimonial-slider .slick-dots li button:before {
  color: white !important;
  top: 10px !important;
  line-height: 15px !important;
}

.testimonial-slider .slick-dots li button:before {
  font-size: 9px !important;
  opacity: 100 !important;
}



.testimonial-slider .slick-dots li.slick-active button:before {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgb(255, 255, 255);
  color: #0668fd !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}


/* accordion------------------------- */


#accordion-flush>div {
  transition: all .3s ease;
}

/* Hover State */
#accordion-flush>div:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}

#accordion-flush>div:hover span,
#accordion-flush>div:hover p,
#accordion-flush>div:hover svg {
  color: #fff !important;
}

/* Active/Open State */
#accordion-flush button[aria-expanded="true"] {
  background: #222222;
}

#accordion-flush button[aria-expanded="true"] span,
#accordion-flush button[aria-expanded="true"] svg {
  color: #fff !important;
}

#accordion-flush button[aria-expanded="true"]+div p {
  color: #fff !important;
}

/* Parent Card Active */
#accordion-flush>div:has(button[aria-expanded="true"]) {
  background: #222222 !important;
  border-color: #222222 !important;
}

#accordion-flush button[aria-expanded="true"] {
  border-bottom: 0.5px solid rgb(214, 214, 214);
}

/* Smooth Icon Rotation */
#accordion-flush svg {
  transition: transform .3s ease, color .3s ease;
}

#accordion-flush button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}


/* --------------------------------- */
/* technology cards */
.tech-slider {
  overflow: hidden;
}

.tech-slider .slick-track {
  display: flex !important;
  align-items: center;
}

.tech-slider .slick-slide {
  width: auto !important;
  padding: 0 8px;
}

.tech-card {
  width: 140px;
  min-height: 110px;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;

}


.tech-slider {
  overflow: hidden;
}

.tech-slider .slick-track {
  display: flex !important;
  align-items: center;
}

.tech-slider .slick-slide {
  padding: 0 8px;
}



.tech-card-inner {
  width: 140px;
  min-height: 110px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;


}

.tech-card-inner svg,
.tech-card-inner span {

  transition: .3s;
}

.tech-card-inner:hover svg,
.tech-card-inner:hover span {
  transform: translateY(-4px);
}



/* ---------------------------------------------- */
/* affiliate cards */
.affiliate-slider {
  overflow: hidden;
}

.affiliate-slider .slick-track {
  display: flex !important;
  align-items: center;
}

.affiliate-slider .slick-slide {
  width: auto !important;
  padding: 0 8px;
}

.affiliate-card {
  width: 140px;
  min-height: 110px;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;

}


.affiliate-slider {
  overflow: hidden;
}

.affiliate-slider .slick-track {
  display: flex !important;
  align-items: center;
}

.affiliate-slider .slick-slide {
  padding: 0 8px;
}

.affiliate-card-inner {
  width: 140px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}

.affiliate-card-inner img {
  transition: .3s;
}

.affiliate-card-inner:hover img {
  transform: translateY(-4px);
}

/* ------------------------------- */
#reveal-text .char {
  color: #d1d5db;
  transition: color .2s linear;
}

/* ------------------------------- */
/* our services ------------------------------*/
.card-btn i {
  transition: .3s;
}

.card-btn:hover i {
  rotate: 45deg;
}