.player-banner {
    background-color: #ffffff;
    /* background-image: url(../images/quran2.jpg); */
    position: sticky !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: 50px;
  padding: 170px 0px 270px 0px;
  text-align: center;
  }

/* player */
.player{
    background: linear-gradient(to right, #665d65, #371d3a);
    opacity: calc(90%);
    /* to fixed */
    position: sticky !important;
    top: 50px;
    padding: 50px;
    margin: 10px 0;
    border-radius: 5px; 
    /* عشان نخلي البلاير فوق الصور أثناء النزول */
    z-index: 1;
}


.player .ayah{
    padding: 10px 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
}

.player audio{
    width: 100%;
    height: 40%;
    margin: 15px 0;
    
}

.player .buttons{
    display: flex;
    justify-content: space-around;
}

.buttons .iconRead{
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #23162f;
    font-size: 20px;
    cursor: pointer;
}


.surahsRead > div{
    
    color: #23162f;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    /* عشان الدويرة اللي فيها أرقام السور، بمعنى يظهر الصورة ورقمها قدامها */
    width: calc(100% - 90px);
    transition: .3s color ease;
    cursor: pointer;
    /* margin-top: 10px;
    top: 100px; */
    margin-bottom: 10px;
    padding: 10px 20px;
    position: relative;
    font-size: 20px;
    counter-increment: surah-counter;

}


.surahsRead > div::after {
    /* عشان يظهر أرقام السور */
    content: counter(surah-counter);
    position: absolute;
    height: 80px;
    width: 80px;
    /* line-height: 80px; */
    /* background-color: aqua; */
    left: -90px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 25px;
    line-height: 80px;
    text-align: center;
    background-color: #fff;
    transition: .3s color ease;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

}

/* عشان السهم الصغير اللي بين مربع اسم السورة ورقمها */
.surahsRead > div::before{
    content: "";
    position: absolute;
    border: 7px solid transparent;
    border-right-color: #23162f;
    top: 50%;
    transform: translateY(-50%);
    left: -14px;

}


/* يتغير لون الخلفية ولون النص */
.surahsRead > div:hover,
.surahsRead > div::after{
    background: linear-gradient(to bottom, #5f5858, #434343);
    color: #fff;
}