/* Cover Image CSS */
.cover-image {
    /* The image used */
    background-image: url("images/cover1.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-top-layer {
    background-color: rgba(0, 0, 0, 0.4);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Surah List CSS */
.surah-list {
    display: flex;
    flex-wrap: wrap;
    text-align: justify;
    color: white;
    margin-top: 50px;
    width: 100%;
    justify-content: center; /* Center the content horizontally */
}

/* Divide into three columns */
.surah-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items horizontally */
    margin-left: 100px;
    margin-left: 100px;
    
}

.surah-column a {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    width: calc(33.33% - 10px); /* Calculate width for each link with 10px gap */
    margin-bottom: 20px; /* Adjust this value for the desired vertical gap */
}
.available{
    color:wheat !important;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .surah-list {
        width: 90%; /* Adjust the width for smaller screens */
    }

    .surah-column a {
        width: calc(50% - 10px); /* Two columns layout for medium screens */
    }
}

@media (max-width: 480px) {
    .surah-list {
        width: calc(100% - 40px); /* Full width minus left/right margin for small screens */
        padding: 0 20px; /* Equal left and right padding */
    }

    .surah-column {
        flex-direction: column;
        align-items: center;
    }

    .surah-column a {
        width: 100%; /* Full width for each link on small screens */
        margin: 10px 0; /* Adjust vertical margin for better spacing */
    }
}