/* Index */
.index-icon-container {
  background: var(--primary-50);
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  color: var(--primary);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  border-radius: var(--border-radius);
  font-weight: 800;
}

[data-theme-style="dark"] .index-icon-container {
  background: var(--gray-100);
}

.index-background {
  /*background: linear-gradient(var(--body-bg) 0%, transparent 15%, transparent 85%, var(--body-bg) 100%), url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%20y%3D%221%22%20width%3D%2224%22%20height%3D%2223%22%2F%3E%3Cpath%20d%3D%22M19.87%208.6A1%201%200%200%200%2019%208h-4.58l1.27-4.74a1%201%200%200%200-.17-.87%201%201%200%200%200-.79-.39h-7a1%201%200%200%200-1%20.74l-2.68%2010a1%201%200%200%200%20.17.87c.191.248.487.392.8.39h3.87l-1.81%206.74a1.004%201.004%200%200%200%20.965%201.263%201%201%200%200%200%20.745-.333l10.9-12c.265-.29.335-.71.18-1.07m-9.79%208.68%201.07-4a1%201%200%200%200-.17-.87%201%201%200%200%200-.79-.39H6.35L8.49%204h4.93l-1.27%204.74a1.006%201.006%200%200%200%20.965%201.261L13.15%2010h3.57z%22%20style%3D%22fill%3A%23000%3Bfill-rule%3Anonzero%22%20fill-opacity%3D%220.025%22%2F%3E%3C%2Fsvg%3E');*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation: index-background 20s ease-in-out alternate infinite;
}

@keyframes index-background {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 125%;
  }
}

.index-background::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  left: -125px;
  top: -100px;
  filter: blur(100px);
  border-radius: 30%;
  background: rgba(50, 0, 255, 0.2);
  z-index: 0;
  transition: background 0.3s;
}

.index-background::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 500px;
  height: 500px;
  right: 0;
  filter: blur(100px);
  border-radius: 25%;
  top: 200px;
  background: rgba(167, 60, 255, 0.15);
  z-index: 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  .index-background::before {
    background: rgba(50, 0, 255, 0.2);
  }

  .index-background::after {
    background: rgba(167, 60, 255, 0.15);
  }
}

[data-theme-style="dark"] .index-background {
  background: linear-gradient(
      var(--body-bg) 0%,
      transparent 15%,
      transparent 85%,
      var(--body-bg) 100%
    ),
    url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%20y%3D%221%22%20width%3D%2224%22%20height%3D%2223%22%2F%3E%3Cpath%20d%3D%22M19.87%208.6A1%201%200%200%200%2019%208h-4.58l1.27-4.74a1%201%200%200%200-.17-.87%201%201%200%200%200-.79-.39h-7a1%201%200%200%200-1%20.74l-2.68%2010a1%201%200%200%200%20.17.87c.191.248.487.392.8.39h3.87l-1.81%206.74a1.004%201.004%200%200%200%20.965%201.263%201%201%200%200%200%20.745-.333l10.9-12c.265-.29.335-.71.18-1.07m-9.79%208.68%201.07-4a1%201%200%200%200-.17-.87%201%201%200%200%200-.79-.39H6.35L8.49%204h4.93l-1.27%204.74a1.006%201.006%200%200%200%20.965%201.261L13.15%2010h3.57z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Anonzero%22%20fill-opacity%3D%220.025%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.index-header {
  font-size: 3.75rem;
  font-weight: 700;
  color: var(--primary);
}

.index-subheader {
  font-size: 1.45rem;
  color: var(--gray-700);
}

.index-button {
  padding: 0.8rem 3.5rem;
  font-size: 1.1rem;
}

/* Index fade */
.index-fade {
  position: absolute;
  background: linear-gradient(
    0deg,
    var(--white),
    hsla(0, 0%, 100%, 0)
  ) !important;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

/* Index testimonial */
.index-testimonial-avatar {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  transform: translateY(-70%);
  border: 4px solid var(--white);
  background: var(--white);
  position: absolute;
  left: 50%;
  margin-left: -52px;
}

.index-testimonial-comment {
  margin-left: 18px;
}

/* Index FAQ */
.index-faq svg {
  transition: all 0.15s;
  color: var(--primary-800);
}

/* Timeline */
.index-timeline {
  position: relative;
}

.index-timeline::before {
  content: "";
  position: absolute;
  border-left: 2px solid var(--gray-200);
  height: 100%;
  left: calc(57px / 2);
}

/* Index call to action */
.index-cta {
  background: var(--primary-800);
  background-image: radial-gradient(#ffffff33 1px, var(--primary-800) 1px);
  background-size: 20px 20px;
  color: white !important;
}

.index-cta a.btn {
  color: white;
  border-color: white;
  padding: 1.2rem 4.2rem;
  font-size: 1.25rem;
}

.index-cta a.btn:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

[data-theme-style="dark"] .index-cta {
  background: var(--primary-200);
  background-image: radial-gradient(#ffffff33 1px, var(--primary-200) 1px);
  background-size: 20px 20px;
}