/*---------------------- callout-card-alt start ----------------------*/

.callout-card-alt {
  color: white;
}

.callout-card-alt .callout-wrap {
  padding: 3rem;
}

.callout-card-alt .xl-title {
  font-size: 4rem;
  font-weight: bold;
  line-height: 0.96;
}

.callout-card-alt .cen-title {
  font-size: clamp(1.44rem, 4vw, 1.83rem);
  line-height: 1.2;
  text-align: center;
  display: inline-block;
}

.callout-card-alt .btn-container {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}
.callout-card-alt .callout-wrap .title {
  margin-bottom: 1.1rem;
  display: block;
}

.callout-card-alt.bg-purple-dark .btn-container .btn,
.callout-card-alt.bg-purple-brite .btn-container .btn {
  border-color: white;
  color: white;
}

.callout-card-alt.bg-purple-dark .callout-wrap > *,
.callout-card-alt.bg-purple-base .callout-wrap > *,
.callout-card-alt.bg-purple-brite .callout-wrap > *,
.callout-card-alt.bg-red-base .callout-wrap > * {
  color: white;
}
.callout-card-alt.bg-purple-base .arrow-icon svg path,
.callout-card-alt.bg-purple-brite .arrow-icon svg path,
.callout-card-alt.bg-red-base .arrow-icon svg path {
  fill: white;
  stroke: white;
}

.callout-card-alt.bg-purple-base .btn,
.callout-card-alt.bg-purple-brite .btn,
.callout-card-alt.bg-red-base .btn {
  border-color: white;
  color: white;
}

.callout-card-alt.bg-purple-base .btn:hover,
.callout-card-alt.bg-purple-brite .btn:hover,
.callout-card-alt.bg-red-base .btn:hover {
  background-color: white;
  color: #3f1651;
  color: var(--purple-dark);
}

.callout-card-alt.bg-purple-dark .btn-container .btn:hover,
.callout-card-alt.bg-purple-dark .btn-container .btn:focus {
  background-color: white;
  color: #3f1651;
  color: var(--purple-dark);
}

/*---------------------- callout-card-alt end ----------------------*/

/*arrow links with buttons */
.callout-card-alt .arrow-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.callout-card-alt .arrow-links .arrowBefore {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*arrow links with buttons end*/
