@font-face{

    font-family:'Quran';

    src:url('../assets/fonts/KFGQPCUthmanicHafs.woff2') format('woff2');

    font-weight:normal;

    font-style:normal;

}

.estekhare-box{

max-width:850px;

margin:auto;

background:#ffffff;

padding:35px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.15);

text-align:center;

}

.estekhare-box h1{

font-size:34px;

margin-bottom:20px;

}

.desc{

color:#777;

margin-bottom:30px;

}

#btnEstekhare{

background:#0b7c3e;

color:white;

border:none;

padding:16px 45px;

font-size:20px;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

#btnEstekhare:hover{

background:#086532;

}

#loading{

display:none;

margin-top:25px;

font-size:18px;

color:#0b7c3e;

}

.card{

margin-top:30px;

text-align:right;

background:#f8f8f8;

padding:25px;

border-radius:12px;

}

.section{

margin-top:20px;

padding:15px;

background:white;

border-right:5px solid #0b7c3e;

border-radius:8px;

}

.section h3{

margin-bottom:10px;

color:#0b7c3e;

}

.surah-title{

margin-top:35px;

padding:15px;

background:#edf8f0;

border-right:6px solid #0b7c3e;

font-size:26px;

font-weight:bold;

border-radius:8px;

color:#0b3d1f;

text-align:center;

}

.ayah-block{

margin-top:20px;

padding:20px;

background:#ffffff;

border:1px solid #dddddd;

border-radius:10px;

padding-bottom:35px;

margin-bottom:35px;

border-bottom:1px dashed #d8d8d8;
}

.ayah-block:last-child{

border-bottom:none;

margin-bottom:0;

}

.ayah-number{

font-size:18px;

color:#0b7c3e;

margin-bottom:15px;

font-weight:bold;

}

.ayah-text{

font-family:'Quran';

font-size:40px;

line-height:2.4;

direction:rtl;

text-align:justify;

color:#111;

margin-top:20px;

}

.ayah-translation{

    margin-top:20px;

    padding:22px 28px;

    background:#f8f8f8;

    border-right:5px solid #0b7c3e;

    border-radius:10px;

    color:#444;

    font-size:18px;

    line-height:2.6;

    text-align:justify;

    text-justify:inter-word;

    direction:rtl;

    word-spacing:1px;

    letter-spacing:0;

    text-indent:20px;
box-shadow:0 2px 8px rgba(0,0,0,.06);

border:1px solid #ececec;

}

.page-header{

display:flex;

justify-content:space-around;

align-items:center;

background:#0b7c3e;

color:white;

padding:18px;

margin:25px 0;

border-radius:12px;

font-size:22px;

font-weight:bold;

flex-wrap:wrap;

gap:10px;

}


.surah-state{

font-size:16px;

margin-top:8px;

color:#777;

font-weight:normal;

}

.ayah-number{

margin-top:20px;

color:#0b7c3e;

font-size:18px;

font-weight:bold;

}

.ayah-end{

font-family:'Quran';

font-size:30px;

color:#0b7c3e;

margin-right:8px;

display:inline-block;

}

.quran-section{

margin-top:40px;

}

.quran-title{

text-align:center;

font-size:30px;

color:#0b7c3e;

margin-bottom:25px;

font-weight:bold;

}

.quran-frame{

background:linear-gradient(#fffdf7,#faf6eb);
background-image:url(../images/paper.jpg);

border:8px solid #d4c18a;

border-radius:18px;

padding:35px;

box-shadow:0 10px 30px rgba(0,0,0,.12);

}

@media(max-width:768px){

.quran-frame{

padding:18px;

}

.quran-title{

font-size:22px;

}

.ayah-text{

font-size:28px;

line-height:2.2;

}

.ayah-translation{

font-size:16px;

}

.surah-title{

font-size:22px;

padding:14px;

}

}


.quran-animation{

text-align:center;

padding:40px 20px;

}

.niyat-text{

font-size:26px;

color:#0b7c3e;

font-weight:bold;

margin-bottom:30px;

animation:fadeIn 1.2s infinite alternate;

}

.quran-book{

position:relative;

width:220px;

height:300px;

margin:auto;

perspective:1200px;

transform-style:preserve-3d;
overflow: visible;
}

.quran-cover{

    position:absolute;

    width:100%;

    height:100%;

    background:#0b7c3e;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    transform-origin:left;

    animation:openBook 2s forwards;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;
box-shadow:12px 0 25px rgba(0,0,0,.30);
}

.cover-title{

    color:#d7b65a;

    font-size:34px;

    font-family:'Quran';

    direction:rtl;

    unicode-bidi:embed;

    text-align:center;

    line-height:1.5;

    letter-spacing:0;

    font-kerning:normal;

    font-feature-settings:"liga" 1, "calt" 1;

    z-index:30;
}

.page{

    position:absolute;

    width:100%;
    height:100%;

    left:0;
    top:0;
    background:#fff url('../images/paper.jpg') center center;
    background-size:cover;
    background:linear-gradient(to right,#f8f5eb,#fffdf8);
    border-left:4px solid #d8b64a;
    border:1px solid #d8cfb0;
    border-radius:6px;
    box-shadow:
        0 8px 20px rgba(0,0,0,.18),
        inset 0 0 15px rgba(0,0,0,.05);

}


.page1{

    top:0;
    left:0;

    z-index:1;

}

.page2{

    top:3px;
    left:3px;
    z-index:2;
}

.page3{

    top:6px;
    left:6px;

    z-index:3;
}


.opening-text{

margin-top:25px;

font-size:22px;

color:#555;

}

@keyframes openBook{

0%{

transform:rotateY(0deg);

}

100%{
    transform:rotateY(-100deg);
}

}

@keyframes flip1{

0%{

transform:rotateY(0deg);

}

100%{

transform:rotateY(-18deg);

}

}

@keyframes flip2{

0%{

transform:rotateY(0deg);

}

100%{

transform:rotateY(-12deg);

}

}

@keyframes flip3{

0%{

transform:rotateY(0deg);

}

100%{

transform:rotateY(-6deg);

}

}

@keyframes fadeIn{

from{

opacity:.4;

}

to{

opacity:1;

}

}

.ayah-no{

    font-family:Tahoma, Vazirmatn, sans-serif;

    font-size:22px;

    font-weight:bold;

    color:#0b7c3e;

}