.faq-item {
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Arabic-specific styles */
:lang(ar) body,
:lang(ar) .faq-container,
:lang(ar) details summary,
:lang(ar) p {
    direction: rtl;
    text-align: right;
    text-justify: inter-word;
    word-spacing: 0.1em; /* adjust as needed for Arabic spacing */
    line-height: 1.7;
}

/* English-specific styles */
:lang(en) body,
:lang(en) .faq-container,
:lang(en) details summary,
:lang(en) p {
    direction: ltr;
    text-align: left;
    word-spacing: none; /* default */
    line-height: 1.6;
}


details summary {
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative;
  padding-left: 25px; /* Space for the icon */
  direction: rtl;
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  /***content: "➕";****/
  position: absolute;
  right: 0; /* Move it to the right */
  top: 0;
  color: #888;
  font-size: 1.2rem;
}

details[open] summary::after {
 /* content: "➖";*/
}

.faq-body {
  margin-top: 10px;
  color: #333;
  line-height: 1.6;
}
details .faq-body {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
  .faq-item {
    padding: 15px;
  }

  details summary {
    font-size: 1rem;
  }
}