html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

a, 
a.btn-link {
  color: #712cf9 !important; 
}

a:hover, 
a.btn-link:hover,
a.btn-link:active,
a.btn-link:focus {
  color: #712cf9; 
  opacity: 0.9; 
}
body .text-bg-dark a:not(.btn) {
  color: #DDD !important; 
}
body .text-bg-dark a:not(.btn):hover {
  color: #EEE !important; 
}

.container {
  max-width: 960px;
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
}

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
}

.text-bg-primary {
  background-color: #712cf9 !important; 
}

     .accordion-button:not(.collapsed) {
        color: #fff !important;
        background-color: #212529 !important;
      }


/* Pricing */
.pricing-header {
  max-width: 700px;
}
      .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      @media (min-width: 1080px) {
       .intro .intro--block {
        width: 747px !important; 
       }
       .intro .intro--block h2 {
        font-size: 2.625rem; 
       }
      }
      @media (min-width: 1181px) {
       .intro .intro--block h2 {
        font-size: 2.8rem; 
       }
      }
      @media (max-width: 767px) {
        h2.tagline {
          font-size: calc(1.825rem + 2.1vw) !important; 
        }
        .intro p.lead {
          font-size: calc(0.9rem + 2.1vw) !important;
        }
      }
      @media (min-width: 435px) and (max-width: 445px) {
        body .intro p.lead {
          font-size: 1.32rem !important;
        }
      }
      .bi {
      vertical-align: -0.125em;
      fill: currentColor;
      }

      .btn-bb-primary-gradient {
      background: linear-gradient(to bottom right, #5432f0, #ff3fa9) !important;
      color: #fff !important;
      border: none;
      border-radius: 0.375rem;
      transition: all 0.2s ease-in-out;
      box-shadow: 0 0.25rem 0.75rem rgba(255, 64, 170, 0.25);
      }
      .btn-bb-primary-gradient:hover,
      .btn-bb-primary-gradient:focus {
      background: linear-gradient(to bottom right, #6246f4, #ff64b9);
      transform: translateY(-1px);
      box-shadow: 0 0.5rem 1rem rgba(255, 64, 170, 0.35);
      color: #fff;
      }
      .btn-bb-primary-gradient:active {
      transform: translateY(0);
      box-shadow: 0 0.25rem 0.75rem rgba(255, 64, 170, 0.4);
      }
      .btn-outline-bb-primary {
      position: relative;
      background-color: transparent;
      color: #3807ea;
      border: 2px solid transparent;
      border-radius: 0.375rem;
      font-weight: 500;
      transition: all 0.25s ease-in-out;
      z-index: 1;
      }
      .btn-outline-bb-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(to bottom right, #5432f0, #ff3fa9);
      -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: -1;
      }
      .btn-outline-bb-primary:hover,
      .btn-outline-bb-primary:focus {
      background-color: rgba(228, 210, 255, 0.35);
      color: #3807ea;
      box-shadow: 0 0.25rem 0.5rem rgba(84, 50, 240, 0.15);
      }
      .btn-outline-bb-primary:active {
      transform: translateY(1px);
      background-color: rgba(228, 210, 255, 0.5);
      }
      .pricing-card-title {
      font-weight: 600;
      color: #1a093f;
      }
      .card {
      border: 1px solid rgba(84, 50, 240, 0.15);
      transition: all 0.25s ease-in-out;
      }
      .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 0.75rem 1.5rem rgba(84, 50, 240, 0.1);
      }
      .card-header {
      background: linear-gradient(to right, rgba(84, 50, 240, 0.05), rgba(255, 63, 169, 0.05));
      border-bottom: 1px solid rgba(84, 50, 240, 0.1);
      font-weight: 600;
      color: #3807ea;
      }
      .card:nth-child(2) {
      background-color: #fff;
      border: 1px solid rgba(84, 50, 240, 0.15);
      box-shadow: 0 0.5rem 1rem rgba(84, 50, 240, 0.08);
      }
      .card:nth-child(2):hover {
      transform: translateY(-2px);
      box-shadow: 0 0.75rem 1.5rem rgba(84, 50, 240, 0.12);
      }
      .card:nth-child(2) .card-header {
      background: linear-gradient(to right, rgba(84, 50, 240, 0.06), rgba(255, 63, 169, 0.06));
      border-bottom: 1px solid rgba(84, 50, 240, 0.12);
      color: #3807ea;
      }
      .card:nth-child(2) .card-title,
      .card:nth-child(2) ul li {
      color: #1a093f;
      }
      .card:nth-child(2) .text-body-secondary {
      color: rgba(26, 9, 63, 0.55) !important;
      }
      .card.border-primary {
      border-color: #712cf9 !important;
      }
      .card-body ul li {
      color: rgba(26, 9, 63, 0.85);
      }

      header .btn-outline-bb-primary:hover,
      header .btn-outline-bb-primary:focus,
      header .btn-outline-bb-primary:active, 
      header .btn-outline-bb-primary.btn:first-child:active {
    border-color: transparent !important;
    background-color: transparent;
}

header .btn-outline-bb-primary:hover::before,
header .btn-outline-bb-primary:focus::before,
header .btn-outline-bb-primary:active::before {
background: linear-gradient(to bottom right, #5432f0, #d476e0) !important; 
}

html {
  scroll-padding-top: 6.5rem;
}

@media (min-width: 768px) {
html {
  scroll-padding-top: 4.5rem;
}
}

.card--list ul.card--list---list li {
  line-height: 1.5rem;
  font-size: 1.3rem;
}

@media (min-width: 768px) {
  .card--list ul.card--list---list li {
    line-height: 1.3rem; 
    font-size: 1.08rem;
  }
}