@media screen and (max-width: 768px) {
  .right {
  float:none;
  }
}

/* Add this to your custom CSS file (e.g., template-style.css) */

.page-audio-controls {
    display: flex; /* Arranges buttons side-by-side */
    gap: 15px; /* Space between buttons */
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center; /* Center the buttons */
}

.page-audio-controls button {
    padding: 12px 25px;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #007bff; /* A nice blue */
    color: white;
    transition: background-color 0.2s ease;
}

.page-audio-controls button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Optional: Styles for highlighting the current paragraph being read */
.highlight-text {
    background-color: #f0f8ff; /* Light azure */
    border-left: 5px solid #4CAF50; /* Green border */
    padding-left: 10px;
    margin-left: -5px; /* Adjust margin to keep alignment */
    transition: background-color 0.3s ease, border-left-color 0.3s ease;
}