/* ==========================================================================
   Vision Promise (CEO Testimonial & Quote Card) — Supports Both Variants
   ========================================================================== */

.vision-promise {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  align-items: center !important;
  gap: 50px !important;
  padding: 80px 70px !important;
  position: relative !important;
  background-color: var(--white, #ffffff) !important;
  box-sizing: border-box !important;
}

.vision-promise-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.vision-promise > *,
.vision-promise-inner > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ==========================================================================
   VARIANT 1: Classic Centered Quote Card (with Circular Avatar)
   ========================================================================== */

.vision-promise-centered .CEO-testimonial-card,
.vision-promise:not(:has(.rectangle)) .CEO-testimonial-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 36px !important;
  padding: 80px 100px 50px !important;
  position: relative !important;
  align-self: stretch !important;
  width: 100% !important;
  background-color: var(--bg-gray, #F7F8F8) !important;
  background-image: url('/wp-content/uploads/2026/08/union4.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: var(--radius-card, 20px) !important;
  overflow: hidden !important;
  border: 1px solid var(--stroke-dark-10, rgba(10, 27, 46, 0.1)) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Quote marks for Centered Variant */
.vision-promise-centered .CEO-testimonial-card::before,
.vision-promise:not(:has(.rectangle)) .CEO-testimonial-card::before {
  content: "" !important;
  position: absolute !important;
  top: 40px !important;
  left: 60px !important;
  width: 50px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 0C9.8 0 0 9.8 0 22v28h28V22H10c0-6.6 5.4-12 12-12V0zm36 0C45.8 0 36 9.8 36 22v28h28V22H46c0-6.6 5.4-12 12-12V0z' fill='%23FF5A5F'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.vision-promise-centered .CEO-testimonial-card::after,
.vision-promise:not(:has(.rectangle)) .CEO-testimonial-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: 40px !important;
  right: 60px !important;
  width: 50px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 50c12.2 0 22-9.8 22-22V0H36v28h18c0 6.6-5.4 12-12 12v10zm-36 0c12.2 0 22-9.8 22-22V0H0v28h18c0 6.6-5.4 12-12 12v10z' fill='%23FF5A5F'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.vision-promise-centered .text-wrapper,
.vision-promise:not(:has(.rectangle)) .text-wrapper {
  position: relative !important;
  max-width: 860px !important;
  font-family: var(--font-main, "Poppins", sans-serif) !important;
  font-weight: 400 !important;
  color: var(--dark, #0A1B2E) !important;
  font-size: 18px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  z-index: 3 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.vision-promise-centered .author-info,
.vision-promise:not(:has(.rectangle)) .author-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 3 !important;
  margin: 0 auto !important;
}

.vision-promise-centered figure.author-info-group,
.vision-promise-centered .author-info-group,
.vision-promise:not(:has(.rectangle)) figure.author-info-group,
.vision-promise:not(:has(.rectangle)) .author-info-group {
  position: relative !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
  border: 1px solid var(--red, #FF5A5F) !important;
  padding: 3px !important;
  background-color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.vision-promise-centered .author-info-group img,
.vision-promise:not(:has(.rectangle)) .author-info-group img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

.vision-promise-centered .nick-ganzha-content,
.vision-promise:not(:has(.rectangle)) .nick-ganzha-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.vision-promise-centered .author-name,
.vision-promise-centered .nick-ganzha-content .div,
.vision-promise:not(:has(.rectangle)) .author-name,
.vision-promise:not(:has(.rectangle)) .nick-ganzha-content .div {
  margin: 0 !important;
  font-family: var(--font-main, "Poppins", sans-serif) !important;
  font-weight: 600 !important;
  color: var(--dark, #0A1B2E) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.vision-promise-centered .author-role,
.vision-promise-centered .CEO-and-founder-at,
.vision-promise:not(:has(.rectangle)) .author-role,
.vision-promise:not(:has(.rectangle)) .CEO-and-founder-at {
  margin: 0 !important;
  font-family: var(--font-main, "Poppins", sans-serif) !important;
  font-weight: 400 !important;
  color: var(--text-gray, #475462) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* ==========================================================================
   VARIANT 2: Horizontal Photo Card Variant (New)
   ========================================================================== */

.vision-promise:has(.rectangle) .CEO-testimonial-card,
.vision-promise-card .CEO-testimonial-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 1300px !important;
  min-height: 525px !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  background-color: var(--bg-gray, #F7F8F8) !important;
  background-image: url('/wp-content/uploads/2026/08/union4.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--stroke-dark-10, rgba(10, 27, 46, 0.1)) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  text-align: left !important;
}

.vision-promise:has(.rectangle) .CEO-testimonial-card::before,
.vision-promise:has(.rectangle) .CEO-testimonial-card::after,
.vision-promise-card .CEO-testimonial-card::before,
.vision-promise-card .CEO-testimonial-card::after {
  display: none !important;
}

/* Left Column: Photo Rectangle */
.vision-promise .rectangle {
  position: relative !important;
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  height: 525px !important;
  min-height: 525px !important;
  flex: 0 0 460px !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: #E7E8EA !important;
}

.vision-promise .rectangle img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Right Column: Content Frame */
.vision-promise .frame {
  display: flex !important;
  justify-content: space-between !important;
  padding: 60px 80px !important;
  flex: 1 1 0 !important;
  align-self: stretch !important;
  flex-grow: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
  gap: 40px !important;
  box-sizing: border-box !important;
}

.vision-promise .div {
  display: flex !important;
  gap: 32px !important;
  align-self: stretch !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
}

/* Red Quote Icon */
.vision-promise .image.quote-icon,
.vision-promise .image {
  position: relative !important;
  width: 56px !important;
  height: 44px !important;
  aspect-ratio: 1.28 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.vision-promise .image.quote-icon img,
.vision-promise .image img {
  width: 56px !important;
  height: 44px !important;
  display: block !important;
}

/* Quote Paragraph in Horizontal Variant */
.vision-promise:has(.rectangle) .text-wrapper,
.vision-promise-card .text-wrapper {
  position: relative !important;
  align-self: stretch !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  color: var(--dark, #0A1B2E) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 100% !important;
}

/* Author Info with vertical accent line */
.vision-promise .global-employment {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.vision-promise .frame-2 {
  display: inline-flex !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
  padding-left: 18px !important;
  border-left: 3px solid var(--red, #FF5A5F) !important;
}

.vision-promise .text-wrapper-2 {
  position: relative !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dark, #0A1B2E) !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.vision-promise .p {
  position: relative !important;
  width: fit-content !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  color: var(--text-gray, #475462) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* ==========================================================================
   Responsive Styles for Both Variants
   ========================================================================== */

@media (max-width: 1100px) {
  .vision-promise {
    padding: 60px 40px !important;
  }

  .vision-promise-centered .CEO-testimonial-card,
  .vision-promise:not(:has(.rectangle)) .CEO-testimonial-card {
    padding: 60px 50px 40px !important;
    gap: 30px !important;
  }

  .vision-promise .rectangle {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    flex: 0 0 380px !important;
  }

  .vision-promise .frame {
    padding: 40px 40px !important;
    gap: 30px !important;
  }

  .vision-promise .text-wrapper {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 900px) {
  .vision-promise {
    padding: 50px 24px !important;
  }

  .vision-promise:has(.rectangle) .CEO-testimonial-card,
  .vision-promise-card .CEO-testimonial-card {
    flex-direction: column !important;
  }

  .vision-promise .rectangle {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 380px !important;
    flex: 0 0 auto !important;
  }

  .vision-promise .frame {
    padding: 40px 30px !important;
    gap: 28px !important;
  }

  .vision-promise .p {
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .vision-promise {
    padding: 40px 20px !important;
  }

  .vision-promise-centered .CEO-testimonial-card,
  .vision-promise:not(:has(.rectangle)) .CEO-testimonial-card {
    padding: 48px 20px 24px !important;
    gap: 24px !important;
    border-radius: 16px !important;
  }

  .vision-promise-centered .CEO-testimonial-card::before,
  .vision-promise:not(:has(.rectangle)) .CEO-testimonial-card::before {
    top: 16px !important;
    left: 16px !important;
    width: 28px !important;
    height: 22px !important;
  }

  .vision-promise-centered .CEO-testimonial-card::after,
  .vision-promise:not(:has(.rectangle)) .CEO-testimonial-card::after {
    bottom: 16px !important;
    right: 16px !important;
    width: 28px !important;
    height: 22px !important;
  }

  .vision-promise:has(.rectangle) .CEO-testimonial-card,
  .vision-promise-card .CEO-testimonial-card {
    border-radius: 16px !important;
  }

  .vision-promise .rectangle {
    height: 200px !important;
    min-height: 200px !important;
  }

  .vision-promise .frame {
    padding: 30px 20px !important;
    gap: 24px !important;
  }

  .vision-promise .image.quote-icon,
  .vision-promise .image {
    width: 44px !important;
    height: 34px !important;
  }

  .vision-promise .image.quote-icon img,
  .vision-promise .image img {
    width: 44px !important;
    height: 34px !important;
  }

  .vision-promise .text-wrapper {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}