/*#region  **** General Var  ****/
:root {
  --faq-h-txt: #1a1a1a;
  --faq-p-txt: #1a1a1a99;
  --bs-accordion-btn-icon1: url(../image/accordionPlus.svg);
  --bs-accordion-btn-active-icon1: url(../image/accordionMainus.svg);
  --accordion-title-color: #1a1a1a;
  --accordion-body-font: (gray, rgba(56, 52, 52, 0.55));
}

html[data-bs-theme='dark'] {
  --faq-h-txt: #e0e0e0;
  --faq-p-txt: #e0e0e099;
  --bs-accordion-btn-icon1: url(../image/accordionPlus-white.svg);
  --bs-accordion-btn-active-icon1: url(../image/accordionMainus-white.svg);
  --accordion-title-color: #ffffff;
  --accordion-body-font: #e0e0e0;
}

#faq-about,
#faq-hero {
  padding: 0 30px;
}

/*#endregion*/

/*#region  **** faq Hero  ****/
#faq-hero {
  position: relative;
  height: 700px;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-copy);
  text-align: center;
  overflow: hidden;
  border: unset;
  box-shadow: unset;
}



.faq-hero-content {
  position: relative;
  z-index: 2;
  /* padding: 4rem 1rem 16px; */
  text-align: start;
  margin-top: 200px;
}

.faq-border {
  position: absolute;
  border-top: 1px solid var(--hero-rule);
  margin-right: 12px;
  width: 45px;
  top: 12px;
}

.faq-hero-eyebrow {
  position: relative;
  color: var(--hero-eyebrow);
  /* text-align: center; */
  /* font-family: "Ping AR + LT"; */
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-left: 65px;
}

.rtl .faq-hero-eyebrow {
  margin-left: unset;
  margin-right: 65px;
}

.faq-hero-title {
  color: var(--hero-copy);
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.faq-hero-desc {
  color: var(--hero-copy-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Colour only — box and centring come from css/buttons.css. */
.btn-faq-hero {
  color: #ffffff;
}

.faq-pic {
  background-image: url(../image/faq-pic.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
  width: 470px;
  margin: auto;
  margin-top: 200px;
}
/*#endregion*/

/*#region  **** faq About Paragrah  ****/
#faq-about {
  margin-bottom: 80px;
  margin-top: 80px;
}

.faq-h2-text,
.faq-h1-text {
  color: var(--faq-h-txt);
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -0.6px;
}

.faq-h2-text {
  font-size: 24px;
}

.faq-p-text-desc,
.faq-p-text {
  color: var(--faq-p-txt);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.108px;
  margin-bottom: 40px;
}

.faq-p-text-desc {
  display: list-item;
  margin-left: 22px;
}

.rtl .faq-p-text-desc {
  margin-left: unset;
  margin-right: 22px;
}
/*#endregion*/

/*#region  **** Faq Accordion  ****/

.accordion-button {
  background-color: unset !important;
  color: var(--accordion-title-color) !important;
}

.accordion-button-custom {
  color: var(--accordion-title-color) !important;
  /* font-feature-settings:
    'liga' off,
    'clig' off; */
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px;
}

.accordion-button:focus {
  box-shadow: unset;
  transform: 0.6;
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon1) !important;
}

.accordion-button::after {
  background-image: var(--bs-accordion-btn-icon1) !important;
}

.accordion .accordion-collapse {
  transition: height 0.6s ease !important; /* غيّر المدة حسب ما بدك */
}

.accordion-body {
  color: var(--accordion-body-font);
  /* font-feature-settings:
    'liga' off,
    'clig' off; */
  /* font-family: 'DM Sans'; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
}

.accordion-item {
  border-top: unset !important;
  border-left: unset !important;
  border-radius: unset !important;
  border-right: unset !important;
}

.accordion-body p {
  padding-right: 50px;
}

.rtl .accordion-body p {
  padding-right: unset;
  padding-left: 50px;
}

/*#endregion*/

/*#region  **** Responsiveness  ****/

@media (max-width: 991px) {
}

@media (max-width: 767px) {
  #faq-hero {
    min-height: unset;
    height: 600px;
  }

  .faq-hero-content {
    text-align: center;
    margin: auto;
  }

  .btn-faq-hero {
    margin: auto;
  }

  .faq-eyebrow {
    display: none;
  }

  .faq-hero-title {
    font-size: 25px;
    line-height: 35px;
    margin-top: 30px;
  }

  .faq-p-text-desc {
    display: unset;
    margin-left: unset !important;
    margin-right: unset !important;
  }
}

@media (max-width: 460px) {
  #faq-hero {
    height: 500px;
    min-height: unset;
  }

  #faq-about {
    margin-bottom: 30px;
    margin-top: 30px;
  }

  .faq-hero-title {
    font-size: 18px;
  }

  .faq-hero-desc {
    font-size: 12px;
  }

  .faq-h1-text {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 21px;
  }

  .faq-h2-text {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 16px;
  }

  .faq-p-text-desc,
  .faq-p-text {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 20px;
  }

  .accordion-button-custom {
    font-size: 14px;
  }

  .accordion-body {
    font-size: 12px;
  }
}

/*#endregion*/