/*==================================================
CTA
==================================================*/

.cta {
  position: relative;

  overflow: hidden;

  padding: var(--space-9) 0;

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

  color: var(--white);
}

/* ==========================================
   BACKGROUND GLOW
========================================== */

.cta::before {
  content: "";

  position: absolute;

  width: 550px;

  height: 550px;

  border-radius: var(--radius-round);

  background: var(--white-alpha-08);

  filter: blur(80px);

  top: -180px;

  right: -120px;
}

/* ==========================================
   CONTENT
========================================== */

.cta-box {
  position: relative;

  z-index: 2;

  max-width: 900px;

  margin: auto;

  text-align: center;
}

.cta .section-label {
  display: inline-block;

  color: var(--white-alpha-85);

  margin-bottom: var(--space-2);

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-size: 0.9rem;
}

.cta h2 {
  color: var(--white);

  margin-bottom: var(--space-3);
}

.cta > .container p,
.cta-box > p {
  max-width: 720px;

  margin: 0 auto var(--space-5);

  color: var(--white-alpha-92);
}

/* ==========================================
   BUTTONS
========================================== */

.cta-buttons {
  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

  margin-bottom: var(--space-6);
}

.cta .btn-outline {
  border-color: var(--white-alpha-70);

  color: var(--white);

  background: transparent;
}

.cta .btn-outline:hover {
  background: var(--white-alpha-12);
}

/* ==========================================
   QUOTE
========================================== */

.cta-quote {
  max-width: 760px;

  margin: auto;

  padding-top: var(--space-5);

  border-top: 1px solid var(--white-alpha-15);
}

.cta-quote .arabic {
  font-family: var(--arabic-font);

  font-size: 2rem;

  line-height: 2;

  margin-bottom: var(--space-3);

  color: var(--white);
}

.cta-quote p {
  margin-bottom: var(--space-2);
}

.cta-quote span {
  display: block;

  margin-top: var(--space-2);

  color: var(--white-alpha-80);

  font-weight: 600;
}