/* External fonts */
@font-face {
  font-family: "New Rail Alphabet";
  src: url("../fonts/NewRailAlphabet-White.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "New Rail Alphabet";
  src: url("../fonts/NewRailAlphabet-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------- Basic css ------------------ */
:root {
  scroll-behavior: unset;
  --white: #ffffff;
  --black: #000000;
  --tp_0: #0c0020;
  --tp_1: #1c112f;
  --tp_3: #d0baf9;
  --tp_60: #736b7f;
  --tp_70: #4b415e;

  --white_img: brightness(0) saturate(100%) invert(99%) sepia(0%)
    saturate(7498%) hue-rotate(67deg) brightness(112%) contrast(100%);
  --black_img: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(16%);

  --primaryfont: "New Rail Alphabet";

  --menuHeight: 9.6rem;
}

img {
  width: 100%;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none !important;
  transition: 200ms;
  color: inherit;
}

.f-right {
  float: right;
}
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: none;
}

button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

/* body */
body {
  font-size: 1.8rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--tp_1);
  overflow-x: hidden;
  font-family: var(--primaryfont);
  background: var(--white);
  letter-spacing: -0.03em;
}

.container {
  padding-left: 0;
  padding-right: 0;
}

main {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.figure img,
.figure {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  font-family: var(--primaryfont);
  color: var(--tp_1);
}

/* image colros */
.white_img {
  -webkit-filter: brightness(0) saturate(100%) invert(99%) sepia(0%)
    saturate(7498%) hue-rotate(67deg) brightness(112%) contrast(100%);
  filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%)
    hue-rotate(67deg) brightness(112%) contrast(100%);
}
.black_img {
  -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
    saturate(16%) hue-rotate(309deg) brightness(93%) contrast(107%);
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(16%)
    hue-rotate(309deg) brightness(93%) contrast(107%);
}

/* Font Weights */
.f_300 {
  font-weight: 300 !important;
}
.f_400 {
  font-weight: 400 !important;
}
.f_500 {
  font-weight: 500 !important;
}
.f_600 {
  font-weight: 600 !important;
}
.f_700 {
  font-weight: 700 !important;
}
.f_800 {
  font-weight: 800 !important;
}
.f_900 {
  font-weight: 900 !important;
}

/* titles */
.title_56 {
  font-size: 5.6rem;
  line-height: 6.4rem;
  letter-spacing: -0.01em;
}

.title_48 {
  font-size: 4.8rem;
  line-height: 5rem;
  letter-spacing: -0.03em;
}

.title_28 {
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* texts */
.text_xl {
  font-size: 2rem;
}
.text_lg {
  font-size: 1.8rem;
}
.text_md {
  font-size: 1.6rem;
}
.text_sm {
  font-size: 1.4rem;
}
.text_xsm {
  font-size: 1.2rem;
}

/* title_sm  */
.title_sm {
  text-transform: uppercase;
}

.title_sm p {
  line-height: 1;
}

/* ========================= #Progress ======================= */
.progress-wrap {
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  height: 4.5rem;
  width: 4.5rem;
  cursor: pointer;
  display: block;
  border-radius: 5rem;
  box-shadow: inset 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  background: #ffffff;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.arrow_top {
  width: 2rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  filter: brightness(0) saturate(100%) invert(32%) sepia(91%) saturate(927%)
    hue-rotate(307deg) brightness(110%) contrast(80%);
}

.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: #e6517b; /* --- Lijn progres kleur --- */
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* ============= Buttons area ============== */
.button {
  height: 7.2rem;
  display: flex;
  align-items: center;
  padding: 0.8rem 0.8rem 0.8rem 2.6rem;
  background: var(--tp_1);
  gap: 4rem;
  border-radius: 1rem;
  font-size: 1.8rem;
  color: #fff;
  transition: 0.35s ease;
  width: fit-content;
  text-transform: uppercase;
}

.button_icon img {
  width: 2rem;
}

.button_icon {
  background: #b18cf5;
  width: 5.6rem;
  height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  transition: 0.35s ease;
}

/* button hover */
.button:hover {
  background: var(--tp_0);
}

.button:hover .button_icon {
  background: var(--white);
}

/* mx-auto */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* -------------- Header Styles by Sahriar --------------- */
.site_header {
  padding: 0;
  position: fixed;
  z-index: 999999;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background: transparent;
  height: var(--menuHeight);
  display: flex;
  align-items: center;
}

.site_header.sticky {
  height: 8.5rem;
  background: #ffffff80;
}

.navbar {
  margin: 0;
  padding: 0;
}

.main_menu {
  gap: 3.5rem;
}

.main_menu li a {
  font-size: 1.6rem;
  color: var(--tp_0);
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.003em;
}

.main_menu li a:hover,
.main_menu li a.active {
  color: var(--white);
}

.site_header.sticky .main_menu li a:hover,
.site_header.sticky .main_menu li a.active {
  color: #b18cf5;
}

.logo img {
  width: 18.2rem;
}

.site_header.sticky .logo img {
  filter: var(--black_img);
}

.icon_14 {
  width: 1.4rem;
}

.header_right .button,
.button.v2 {
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  gap: 2.2rem;
  height: 4.7rem;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 0.8rem;
}

.header_right .button .button_icon,
.button.v2 .button_icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.4rem;
}

.header_right .button .button_icon img,
.button.v2 .button_icon img {
  width: 1.4rem;
}

/* =============== hero_area =============== */
.hero_area {
  background: url(../img/hero_bg.png) no-repeat fixed center center / cover;
  height: 100vh;
  display: flex;
  align-items: end;
}

/* ============ brand_slider ============ */
.brand_slider img {
  width: 7.1rem;
  margin: 0 1.5rem;
}

.brand_slider .partner1 {
  width: 5.5rem;
}

.brand_slider .partner2 {
  width: 11.4rem;
}

.brand_slider .partner3 {
  width: 10.7rem;
}

.brand_slider .partner5 {
  width: 5.5rem;
}

.brand_slider .partner6 {
  width: 5.3rem;
}

.brand_icon {
  width: 1.6rem;
  height: 1.6rem;
  background: rgb(236, 225, 255, 0.4);
  border-radius: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand_icon span {
  width: 0.8rem;
  height: 0.8rem;
  background: #07ea71;
  border-radius: 10rem;
}

.brand_left {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.8rem;
  color: #ffffff;
  font-weight: 400;
}

.tp3_bg {
  background: var(--tp_3) !important;
}

.hero_right .button_icon {
  width: 4.2rem;
  height: 4.2rem;
}

.hero_right:hover .button_icon {
  background: var(--tp_1) !important;
}

.hero_right:hover .button_icon img {
  filter: var(--white_img);
}

.hero_right .button_icon img {
  width: 1.4rem;
}

.hero_right .text_xl {
  line-height: 1;
  font-weight: 400;
}

.hero_bottom {
  padding: 3.2rem 0;
}

/* js-marquee */
.js-marquee {
  display: flex;
  align-items: center;
}

.marquee {
  display: flex;
  align-items: center;
  gap: 0;
}

/* =================== payment_area ==================== */
.payment_area {
  padding: 8rem 0 7.2rem;
  margin-bottom: 8.7rem;
}

/* =================== solution_area =================== */
.solution_area {
  padding: 12rem 0 20.4rem;
  background: var(--white);
}

.solution_box {
  transition: 0.35s ease;
  height: 100%;
}

.solution_box:hover {
  background: #f0f0f0;
}

.icon_16 {
  width: 1.6rem;
}

.solution_icon img {
  width: 4.8rem;
}

.solution_box p {
  color: var(--tp_60);
  line-height: 2.8rem;
}

.solution_row {
  --bs-gutter-x: 0;
  border: 0.1rem solid var(--tp_60);
}

.solution_box {
  border-right: 0.1rem solid var(--tp_60);
  border-top: 0.1rem solid var(--tp_60);
}

.line1_lg {
  border-top: 0;
}

/* ================ expertize_area =================== */
.expertize_area {
  background: var(--tp_0);
  padding: 8.5rem 0 20.5rem;
}

.expertize_area .section_top {
  padding: 12rem 0 16rem;
}

.expertize_icon img {
  width: 5rem;
}

.expertize_icon .expertize1 {
  width: 7.2rem;
}

.expertize_icon .expertize2 {
  width: 5.2rem;
}

.expertize_icon .expertize3 {
  width: 6.6rem;
}

.expertize_icon .expertize4 {
  width: 7rem;
}

.expertize_icon .expertize8 {
  width: 6.8rem;
}

.expertize_box {
  padding: 4.8rem 4.8rem 5.6rem 4.8rem;
  width: 36.8rem;
  height: 31rem;
  border-right: 0.1rem solid var(--tp_70);
  transition: 0.35s;
}

.expertize_box:hover {
  background: #b18cf5;
}

.expertize_box:hover img {
  filter: var(--white_img);
}

.expertize_box:hover h2 {
  color: var(--white);
}

.expertize_row_wrap {
  border: 0.1rem solid var(--tp_70);
}

.marquee > div {
  display: flex;
}

.js-marquee {
  display: flex;
  align-items: center;
}

.expertize_icon {
  height: 7.2rem;
}

/* ======================== Triangle area ====================== */
.triangle_img {
  border: 0.1rem solid var(--tp_1);
  border-radius: 0.8rem;
  max-width: 53.8rem;
}

.triangle_area .content .title_56 {
  padding: 4.9rem 0 4rem;
}

.triangle_area {
  padding: 20.4rem 0 10.4rem;
  background: var(--tp_3);
}

.points_list {
  max-width: 53.8rem;
  display: grid;
  gap: 1.8rem;
  font-size: 2rem;
  line-height: 2.8rem;
}

.triangle_area .row {
  --bs-gutter-x: 0;
}

/* ==================== Result_area =================== */
.results_area {
  padding: 10.4rem 0 20.4rem;
  background: var(--tp_3);
}

.results_area .content .title_sm {
  margin-bottom: 4.8rem;
}

.results_area .row {
  --bs-gutter-x: 2.4rem;
}

.results_list li {
  padding: 5.2rem 0;
  border-top: 0.1rem solid var(--tp_1);
}

.results_list li:last-child {
  border-bottom: 0.1rem solid var(--tp_1);
}

/* ===================== testimonial_area ======================= */
.testimonial_area {
  padding: 20.4rem 0;
}

.testimonial_slider_wrap {
  padding: 0 14rem;
  position: relative;
}

.testimonial_slide a img {
  width: 5.6rem;
  height: 5.6rem;
  object-fit: cover;
  border-radius: 10rem;
}

.testimonial_slide a {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-size: 2rem;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.testimonial_slide a:hover {
  opacity: 0.75;
}

.testimonial_slider {
  overflow: hidden;
}

.swiper-pagination {
  position: relative;
  margin-top: 5rem;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 0.4rem;
}

.swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  border-radius: 10rem;
  transition: 0.25s;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 2rem;
  background: var(--tp_1);
}

/* ============== insights_area ============= */
.insights_area {
  padding: 0 3.2rem;
}

.icon_18 {
  width: 1.8rem;
}

.insights_inner_wrap {
  background: var(--tp_0);
  padding: 13.5rem 0 21.3rem;
  border-radius: 1rem;
  overflow: hidden;
}

.insights_area .swiper-slide {
  width: 39.8rem;
}

.insights_box {
  width: 100%;
  height: 39.8rem;
  display: block;
  border: 0.1rem solid var(--white);
  border-radius: 1rem;
  transition: 0.25s ease;
}

.insights_badge {
  font-size: 1.6rem;
  background: #fff;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 1.2rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.insights_top h2 {
  font-size: 3rem;
  color: #fff;
  font-weight: 400;
  line-height: 3.8rem;
  letter-spacing: 0.02em;
}

.insights_top > p {
  color: var(--tp_60);
}

.insights_bottom {
  color: var(--tp_0);
}

.insights_box:hover {
  background: #b18cf5;
  border: 0.1rem solid #b18cf5;
}

.insights_bottom > * {
  transition: 0.25s ease;
  filter: var(--white_img);
}

.insights_box:hover h2 {
  color: var(--tp_0);
}

.insights_box:hover .insights_bottom > * {
  transition: 0.25s ease;
  filter: brightness(0) saturate(100%) invert(6%) sepia(76%) saturate(3898%) hue-rotate(197deg) brightness(83%) contrast(136%);
}

.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid #b18cf5;
  border-radius: 0.5rem;
  background: #b18cf5;
  margin: 0;
}

.swiper-button-next:active,
.swiper-button-prev:active {
  background: var(--tp_3);
  border: var(--tp_3);
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  border: 0.1rem solid #736b7f;
  background: transparent;
  opacity: 1;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 1.4rem;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: var(--tp_0);
}

.swiper-button-next.swiper-button-disabled:after,
.swiper-button-prev.swiper-button-disabled:after {
  color: var(--tp_60);
}

.slider_navigation {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* ================== Faq area ================= */
.faq_area {
  padding: 20.4rem 0 12.8rem;
}

.accordion {
  padding: 5.6rem 0 12rem;
}

.plus_minus img {
  width: 3.2rem;
}

.minus {
  display: none;
}

.accordion_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4.8rem 0;
}

.accordion_item {
  border-top: 0.1rem solid var(--tp_1);
}

.accordion_item:last-child {
  border-bottom: 0.1rem solid var(--tp_1);
}

.accordion_button h4 {
  font-size: 2.4rem;
  font-weight: 400;
}

.accordion-body {
  padding: 0;
  font-size: 2rem;
  line-height: 3rem;
  color: var(--tp_60);
  padding-bottom: 5.6rem;
  opacity: 0;
  transform: translateY(-2rem);
  transition: 0.5s ease;
}

.accordion-collapse.show .accordion-body {
  opacity: 1;
  transform: translateY(0);
}

.accordion_button:not(.collapsed) .plus_minus .minus {
  display: block;
}

.accordion_button:not(.collapsed) .plus_minus .plus {
  display: none;
}

.section_bottom h3 {
  font-size: 3.4rem;
  line-height: 3.6rem;
  letter-spacing: -0.02em;
}

/* ====================== footer_section ======================= */
.footer_section {
  background: var(--tp_0);
}

.footer_logo img {
  width: 14.6rem;
}

.footer_box_left p {
  color: #736b7f;
  line-height: 2.4rem;
  font-size: 1.6rem;
  font-weight: 400;
}

.send_mail input {
  height: 7.2rem;
  width: 39.8rem;
  padding: 0 1.8rem;
  border-radius: 1rem;
  background: var(--tp_1);
  outline: none;
  padding-right: 10rem;
  border: 0.1rem solid var(--tp_1);
}

.send_mail input::placeholder,
.send_mail input {
  font-size: 1.8rem;
  color: var(--tp_60);
}

.send_mail {
  position: relative;
  width: fit-content;
}

.subscribe_later .button_icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.8rem;
}

.subscribe_later .button_icon:hover {
  background: #fff;
}

.footer_favicon {
  width: 8.4rem;
  margin-top: 12.6rem;
}

.send_mail input:focus {
  border: 0.1rem solid #b18cf5;
}

.footer_box_right .title_48 {
  font-size: 4.6rem;
  color: #fff;
  line-height: 5.4rem;
  letter-spacing: -0.01em;
}

.footer_box_right .title_48 span {
  color: #b18cf5;
}

.footer_links h3 {
  color: var(--tp_60);
  font-weight: 500;
  padding-bottom: 2rem;
}

.footer_links ul li a {
  color: #fff;
  line-height: 3.5rem;
}

.footer_links ul li a:hover {
  color: var(--tp_3);
}

.fbr_bottom {
  padding-top: 11.5rem;
}

.fbr_bottom p {
  font-size: 1.4rem;
  color: var(--tp_60);
  font-weight: 400;
}

.social_links a img {
  width: 1.5rem;
}

.social_links {
  gap: 3.2rem;
}

.social_links a:hover {
  opacity: 0.75;
}

.subscribe_later p {
  font-weight: 800;
}