/* --- General Container Styling --- */
.quran-verses-section {
    max-width: 900px; /* Wider container than the previous page for the large text */
    margin: 80px auto;
    padding: 20px;
}

/* --- Verse Block Styling --- */
.verse-block {
    /* Adds a border and padding for visual separation between verses */
    border: 1px solid #333333; 
    border-radius: 8px; /* Slightly rounded corners */
    padding: 20px;
    margin-bottom: 40px; /* Space between different verse blocks */
    background-color: #222222; /* Slightly different dark shade */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle depth */
    text-align: center; /* Center everything inside the block */
}

/* --- Verse Number Styling --- */
.verse-number {
    /* Highlighting the verse information */
    color: #90ee90; /* Use your green highlight color */
    font-size: 1.5em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #333333;
    padding-bottom: 10px;
}

/* --- Image Styling (Crucial for Responsiveness) --- */
.quran-image {
    /* 1. Responsiveness: Image will always take up 100% of its parent (.verse-block) width */
    width: 100%;
    /* 2. Scalability: Image will never exceed its original size */
    max-width: 100%; 
    /* 3. Clarity: Ensure smooth scaling */
    height: auto; 
    /* 4. Presentation: Adds a small margin around the image */
    margin-top: 15px;
    margin-bottom: 15px;
    /* Optional: Small border/shadow to define the screenshot boundary */
    border: 1px solid #444444; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Translation Text Styling (Optional) --- */
.translation-text {
    /* Separates the translation from the image */
    text-align: center; 
    font-size: 1.1em;
    color: #dddddd; /* Slightly lighter than the body text */
    padding-top: 15px;
    border-top: 1px dashed #333333;
}