/*========================

        CTA

=========================*/

.cta {
  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

  color: #fff;

  padding: 90px 0;
}

.cta::before {
  content: "";

  position: absolute;

  width: 350px;

  height: 350px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  top: -120px;

  left: -120px;
}

.cta::after {
  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.04);

  bottom: -90px;

  right: -90px;
}

.cta {
  overflow: hidden;
}
.cta .container {
  position: relative;

  z-index: 2;
}

.cta-badge {
  display: inline-block;

  padding: 10px 22px;

  background: rgba(255, 255, 255, 0.15);

  border-radius: 30px;

  font-weight: 600;

  margin-bottom: 25px;
}

.cta h2 {
  font-size: 3rem;

  font-weight: 700;

  margin-bottom: 25px;
}

.cta p {
  max-width: 700px;

  margin: auto;

  line-height: 1.9;

  opacity: 0.95;
}

.cta-buttons {
  margin-top: 40px;

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;
}

.btn-light-custom {
  background: #fff;

  color: var(--primary);

  padding: 15px 35px;

  border-radius: 40px;

  font-weight: 600;

  transition: 0.35s;
}

.btn-light-custom:hover {
  transform: translateY(-3px);
}

.btn-outline-light-custom {
  border: 2px solid #fff;

  color: #fff;

  padding: 15px 35px;

  border-radius: 40px;

  font-weight: 600;

  transition: 0.35s;
}

.btn-outline-light-custom:hover {
  background: #fff;

  color: var(--primary);
}