:root {
  --bs-primary: #7F56D9;
  --bs-secondary: #7F56D9;
  --bs-body-color: #7F56D9;
  --bs-secondary-rgb: 127, 86, 217;
  --bs-primary-rgb: 127, 86, 217;
  --bs-emphasis-color-rgb: 127, 86, 217;
}

.navigation .menuToggle::before,
.navigation .menuToggle::after {
  background: #7F56D9;
}

.navigation .menuToggle {
  color: #7F56D9 !important;
}

main {
  background-color: #FFFFFF;
}

.menu li a,
.navigation .userBx .nav_username,
.menuToggle,
.back-button i,
.navigation .menuToggle {
  color: #7F56D9;
}

div p,
.form-select {
  color: #000000;
}

.quote-card {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.quote-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

   .feedback-card {
      position: relative; 
      overflow: visible;
      border-radius: 1rem;
      overflow: hidden;
      margin: 2rem auto;
      max-width: 1000px;
      background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
      background-size: 20px 20px;
      display: flex;
      flex-wrap: wrap;
    }

    .feedback-left {
      padding: 3rem 2rem;
      flex: 1 1 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .feedback-title {
      font-size: 1.75rem;
      font-weight: 700;
    }

    .feedback-subtitle {
      font-size: 1rem;
      color: #6b7280;
    }

    .feedback-right {
      flex: 1 1 50%;
      min-height: 100%;
    }

    .feedback-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (max-width: 767.98px) {
      .feedback-card {
        flex-direction: column;
      }

      .feedback-left,
      .feedback-right {
        flex: 1 1 100%;
      }

      .feedback-left {
        padding: 2rem 1.5rem;
      }

      .feedback-image {
        height: auto;
      }
    }