:root {
        --primary: #4f234b;
        --secondary: #a4c29e;
        --secondary-se: #cca3c6;
        --tertiary: #cc8fe4;
        --lilac: #f0f2f5;
        --white: #FFFFFF;
        --gray: #4E4D4D;
        --dark-gray: #92929D;
    }

    body {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 400 !important;
         background-color: #f9f9f9;
    }

   :root {
  --tertiary: #cc8fe4;
  --secondary: #a4c29e;
}

.hero {
  background-color: #f9f9f9;
  color: #000;
  padding: 80px 15px;
  direction: rtl;
  text-align: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  max-width: 700px;
  margin: 0 auto;
}
.color-primary {
  color: var(--primary);
  margin: 0 5px;
}
.color-tertiary {
  color: var(--tertiary);
  font-weight: 700;
  margin: 0 5px;
}

.color-secondary {
  color: var(--secondary);
  margin: 0 5px;
}


.lead {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #7e7e7e;
  font-weight: 500;
}

.btn-group {
  display: inline-flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color:  var(--primary) !important;
    border-color: var(--bs-btn-active-border-color);
}
.btn-primary {
  background-color: var(--primary);
}
.cons{
  color: var(--secondary) !important;
}
.cons:hover{
  background-color: var(--secondary);
  color: var(--primary) !important;
}
.btn-primary:hover {
  background-color: var(--secondary);
}

.btn-outline-secondary-custom {
  border: 2px solid var(--primary);
  color: var(--primary);
  background-color: transparent;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-outline-secondary-custom:hover {
  background-color: var(--primary);
  color: white;
}

.btn-secondary {
  background-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: var(--primary);
}