.ayah_arabic {
  color: hsl(54, 88%, 0%);
  line-height: 1.8;
  font-size: 1.8em;
  padding: 1% 5% 0%;
}

.ayah_translation {
  line-height: 1.3;
  font-size: 1.3em;
  font-family:'Georgia';
/* padding: 1% 5% 1%; */
  padding: 3% 2% 5% 2%; /* CSS for the checkbox */
  margin: 0 0 0 0; /* CSS for the checkbox */
}

.ayah_description {
  font-size: 0.8em;
  font-family:'Georgia';
}



/* CSS for the checkbox */
.ayah_arabic_checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ayah_arabic_text {
    line-height: 2.2;
    padding: 0;
    margin: 0;
}

.ayah_arabic_text-label {
    justify-content: center;
    padding: 5px 5px 0 5px; /* padding for clickable area */
    font-size: 1em;
    cursor: pointer;
}

.ayah_arabic_text-body {
    font-size: 1.7em;
    line-height: 2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.25s ease;
    padding: 0 0 0 0;
    margin: 0;
}

.ayah_arabic_text-body p {
    margin: 0;
    padding: 0;
}


.ayah_arabic_checkbox:checked ~ .ayah_arabic_text-body {
    height: auto;
    max-height: 1000px;
    padding: 0 2% 0 2%;
    margin: 0 0 3% 0;
    /* padding: 14px 20px 18px; */
}