/* ==========================================
   Quran Home Theme
   Part 1 : Root + Reset + Header
========================================== */


:root {

    --primary: #0F4C3A;
    --primary-dark: #082D24;

    --gold: #D4AF37;
    --gold-light: #E8C76A;

    --bg: #F8F6F1;
    --surface: #FFFFFF;

    --text: #1C1C1C;
    --muted: #6B6B6B;

    --radius:24px;

    --shadow:
        0 20px 60px rgba(0,0,0,.12);

}



* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    direction:rtl;

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

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

}



a {

    text-decoration:none;

    color:inherit;

}



img {

    max-width:100%;

    display:block;

}



.container {

    width:min(1200px,92%);

    margin:auto;

}



/* ==========================================
   HEADER
========================================== */


.header {

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(248,246,241,.88);

    backdrop-filter:blur(15px);

    border-bottom:

    1px solid rgba(15,76,58,.08);

}



.header-inner {

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}



/* Logo */


.logo {

    display:flex;

    align-items:center;

    gap:14px;

}



.logo-image {

    width:58px;

    height:58px;

    border-radius:18px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

}



.logo-symbol {

    font-size:32px;

    color:var(--gold-light);

}



.logo-text {

    font-size:22px;

    font-weight:900;

    color:var(--primary-dark);

}



.logo-content small {

    display:block;

    font-size:12px;

    color:var(--muted);

}



/* Menu */


.nav {

    display:flex;

    align-items:center;

    gap:30px;

}



.nav a {

    color:var(--primary-dark);

    font-weight:500;

    position:relative;

    transition:.3s;

}



.nav a::after {

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s;

}



.nav a:hover {

    color:var(--primary);

}



.nav a:hover::after {

    width:100%;

}



/* Header Buttons */


.header-actions {

    display:flex;

    align-items:center;

    gap:15px;

}



.header-btn {

    background:var(--primary);

    color:#fff;

    padding:12px 25px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}



.header-btn:hover {

    background:var(--gold);

}



.menu-toggle {

    display:none;

    border:none;

    background:none;

    font-size:30px;

    color:var(--primary);

    cursor:pointer;

}

/* ==========================================
   HERO SECTION
========================================== */


.hero {

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:

    radial-gradient(
        circle at left,
        rgba(212,175,55,.25),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

}



.hero-wrapper {

    min-height:560px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}



.hero-content {

    max-width:650px;

}



.hero-badge {

    display:inline-flex;

    align-items:center;

    padding:8px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.2);

    color:var(--gold-light);

    font-size:14px;

}



.hero-title {

    font-size:52px;

    font-weight:900;

    line-height:1.4;

    margin-bottom:25px;

    color:#fff;

}



.hero-title span {

    color:var(--gold-light);

}



.hero-text {

    font-size:19px;

    line-height:2;

    color:rgba(255,255,255,.85);

    margin-bottom:35px;

}



.hero-actions {

    display:flex;

    gap:15px;

}



.hero-btn {

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}



.hero-btn.primary {

    background:var(--gold);

    color:#fff;

}



.hero-btn.primary:hover {

    background:var(--gold-light);

}



.hero-btn.secondary {

    border:1px solid rgba(255,255,255,.4);

    color:#fff;

    background:rgba(255,255,255,.08);

}



.hero-btn.secondary:hover {

    background:rgba(255,255,255,.18);

}





/* Hero Artwork */


.hero-image {

    width:360px;

    height:360px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.hero-quran-box {

    width:300px;

    height:300px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;


    background:

    radial-gradient(

        circle,

        rgba(212,175,55,.35),

        rgba(255,255,255,.05)

    );


    border:

    2px solid rgba(232,199,106,.5);

}



.hero-quran-box span {

    font-size:90px;

    color:var(--gold-light);

}

.hero-badge {

    display:inline-flex;

    padding:8px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.25);

    color:var(--gold-light);

    margin-bottom:25px;

    font-size:14px;

}



.hero-title span {

    display:block;

    color:var(--gold-light);

}



.quran-decoration {

    font-size:90px;

    color:var(--gold-light);

    text-shadow:

    0 10px 30px rgba(0,0,0,.3);

}

/* ==========================================
   Quran Search Glass Box
========================================== */


.search-section {

    position:relative;

    margin-top:-55px;

    z-index:20;

    padding-bottom:70px;

}



.search-box {


    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.75),
        rgba(255,255,255,.35)
    );



    backdrop-filter:

    blur(30px);



    -webkit-backdrop-filter:

    blur(30px);



    border:

    1px solid rgba(255,255,255,.8);



    border-radius:

    28px;



    padding:

    35px;



    box-shadow:

    0 25px 70px rgba(15,76,58,.18);



}



/* عنوان */


.search-header {

    text-align:center;

    margin-bottom:25px;

}



.search-header h2 {

    color:var(--primary-dark);

    font-size:28px;

    font-weight:900;

    margin-bottom:10px;

}



.search-header p {

    color:#666;

}





/* فرم */


.quran-search-form {

    display:flex;

    gap:15px;

}





.quran-search-input {


    flex:1;


    height:58px;



    border-radius:50px;



    border:

    1px solid rgba(15,76,58,.12);



    background:

    rgba(255,255,255,.45);



    backdrop-filter:

    blur(15px);



    -webkit-backdrop-filter:

    blur(15px);



    padding:

    0 25px;



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



    font-size:16px;



}



.quran-search-input::placeholder {

    color:#888;

}



.quran-search-input:focus {

    outline:none;

    border-color:var(--gold);

}





.quran-search-btn {


    width:160px;


    height:58px;



    border:none;



    border-radius:50px;



    background:

    linear-gradient(
        135deg,
        #0F4C3A,
        #082D24
    );



    color:#fff;



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



    font-weight:700;



    cursor:pointer;



    transition:.3s;



}



.quran-search-btn:hover {


    background:

    linear-gradient(
        135deg,
        #D4AF37,
        #E8C76A
    );


}





@media(max-width:768px){


    .quran-search-form {

        flex-direction:column;

    }



    .quran-search-btn {

        width:100%;

    }


}

/* ==========================================
   FEATURED SECTION
========================================== */


.featured-section {

    padding:90px 0;

}



.section-header {

    text-align:center;

    margin-bottom:50px;

}



.section-title {

    font-size:34px;

    font-weight:900;

    color:var(--primary-dark);

    margin-bottom:15px;

}



.section-description {

    max-width:700px;

    margin:auto;

    color:var(--muted);

}




.featured-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}





.featured-card {

    background:var(--surface);

    padding:35px 25px;

    border-radius:var(--radius);

    text-align:center;

    border:1px solid rgba(15,76,58,.08);

    box-shadow:

    0 15px 40px rgba(0,0,0,.06);

    transition:.3s;

}



.featured-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,76,58,.15);

}



.featured-icon {

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.15);

    color:var(--primary);

    font-size:36px;

}



.featured-card h3 {

    color:var(--primary);

    font-size:22px;

    margin-bottom:12px;

}



.featured-card p {

    color:var(--muted);

}


/* ==========================================
   RECITATIONS SECTION
========================================== */


.recitations-section {

    padding:90px 0;

    background:var(--bg);

}



.recitations-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}




.recitation-card {

    background:#ECE7DA;

    padding:30px;

    border-radius:var(--radius);

    border:1px solid rgba(15,76,58,.15);

    box-shadow:

    0 18px 45px rgba(15,76,58,.12);

    position:relative;

    overflow:hidden;

    transition:.3s;

}



.recitation-card::before {

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--gold);

}



.recitation-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 30px 65px rgba(15,76,58,.22);

}



.recitation-header {

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}



.recitation-icon {

    width:65px;

    height:65px;

    flex:none;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:var(--gold-light);

    font-size:30px;

}



.recitation-card h3 {

    color:var(--primary-dark);

    font-size:21px;

    font-weight:800;

}



.recitation-card span {

    color:#666;

    font-size:14px;

}



.recitation-card audio {

    width:100%;

    margin-top:15px;

}





/* ==========================================
   DOWNLOADS SECTION
========================================== */


.downloads-section {

    padding:90px 0;

    background:#fff;

}



.downloads-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.download-card {

    background:#F0EBDE;

    padding:35px 30px;

    border-radius:var(--radius);

    text-align:center;

    border:1px solid rgba(15,76,58,.12);

    box-shadow:

    0 15px 40px rgba(15,76,58,.1);

    transition:.3s;

}



.download-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,76,58,.2);

}



.download-icon {

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--primary);

    color:var(--gold-light);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    font-weight:900;

}



.download-title {

    color:var(--primary-dark);

    font-size:22px;

    font-weight:800;

    margin-bottom:15px;

}



.download-info {

    color:#666;

    font-size:14px;

    margin-bottom:25px;

}



.download-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 35px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}



.download-btn:hover {

    background:var(--gold);

}

/* ==========================================
   STATS SECTION
========================================== */


.stats-section {

    padding:90px 0;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}



.stats-wrapper {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.stat-item {

    text-align:center;

    padding:35px 20px;

    border-radius:var(--radius);

    background:rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

}



.stat-number {

    color:var(--gold-light);

    font-size:42px;

    font-weight:900;

    margin-bottom:10px;

}



.stat-title {

    color:#fff;

    font-size:18px;

}





/* ==========================================
   NEWSLETTER SECTION
========================================== */


.newsletter-section {

    padding:90px 0;

}



.newsletter-box {

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border-radius:32px;

    padding:55px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    box-shadow:var(--shadow);

}



.newsletter-content h2 {

    color:var(--gold-light);

    font-size:32px;

    font-weight:900;

    margin-bottom:15px;

}



.newsletter-content p {

    color:rgba(255,255,255,.85);

}



.newsletter-form {

    display:flex;

    background:#fff;

    padding:6px;

    border-radius:50px;

    min-width:420px;

}



.newsletter-form input {

    flex:1;

    border:none;

    outline:none;

    padding:0 20px;

    font-family:inherit;

}



.newsletter-form button {

    border:none;

    padding:0 35px;

    border-radius:50px;

    background:var(--gold);

    color:#fff;

    font-family:inherit;

    font-weight:700;

}





/* ==========================================
   FOOTER
========================================== */


.footer {

    background:

    #061F19;

    color:#fff;

    padding:70px 0 25px;

}



.footer-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.footer-logo {

    font-size:25px;

    font-weight:900;

    color:var(--gold-light);

    margin-bottom:15px;

}



.footer-text {

    color:rgba(255,255,255,.7);

}



.footer-title {

    color:var(--gold-light);

    margin-bottom:20px;

    font-size:18px;

}



.footer-links {

    list-style:none;

}



.footer-links li {

    margin-bottom:10px;

}



.footer-links a {

    color:rgba(255,255,255,.75);

    transition:.3s;

}



.footer-links a:hover {

    color:var(--gold);

}



.footer-bottom {

    margin-top:40px;

    padding-top:20px;

    border-top:

    1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    color:rgba(255,255,255,.6);

}



@media(max-width:768px){


    .container {

        width:92%;

    }




    /* Header */


    .header-inner {

        height:75px;

    }



    .nav {

        display:none;

        position:absolute;

        top:75px;

        right:0;

        left:0;

        background:#fff;

        padding:25px;

        flex-direction:column;

        gap:20px;

        box-shadow:var(--shadow);

    }



    .nav.active {

        display:flex;

    }



    .header-btn {

        display:none;

    }



    .menu-toggle {

        display:block;

    }





    /* Hero */


    .hero {

        padding:70px 0;

    }



    .hero-wrapper {

        flex-direction:column;

        text-align:center;

    }



    .hero-content {

        max-width:100%;

    }



    .hero-title {

        font-size:34px;

    }



    .hero-text {

        font-size:16px;

    }



    .hero-actions {

        flex-direction:column;

        align-items:center;

    }



    .hero-btn {

        width:100%;

        text-align:center;

    }



    .hero-image {

        width:260px;

        height:260px;

    }



    .hero-quran-box {

        width:220px;

        height:220px;

    }





    /* Search */


    .search-section {

        margin-top:-25px;

    }



    .search-box {

        padding:25px;

    }



    .quran-search-form {

        flex-direction:column;

    }



    .quran-search-btn {

        width:100%;

        height:55px;

    }





    /* Sections */


    .featured-grid,
    .surah-grid,
    .recitations-grid,
    .downloads-grid {

        grid-template-columns:1fr;

    }



    .section-title {

        font-size:28px;

    }





    /* Stats */


    .stats-wrapper {

        grid-template-columns:1fr;

    }





    /* Newsletter */


    .newsletter-box {

        padding:35px 20px;

        flex-direction:column;

        text-align:center;

    }



    .newsletter-form {

        width:100%;

        min-width:100%;

        flex-direction:column;

        background:transparent;

        gap:10px;

    }



    .newsletter-form input {

        height:55px;

        background:#fff;

        border-radius:50px;

    }



    .newsletter-form button {

        height:55px;

    }





    /* Footer */


    .footer-grid {

        grid-template-columns:1fr;

        text-align:center;

    }



    .footer-bottom {

        flex-direction:column;

        gap:15px;

        text-align:center;

    }


}


body {

    background-color: var(--bg);

    background-image: url('/image/6532135454.jpg');

    background-repeat: repeat;

    background-size: 300px 300px;

}


/*==================================================
  HOME - SURAHS
==================================================*/

.surahs-section{

    padding:90px 0;

}



/* Grid */

.surah-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:22px;

    margin-top:45px;

}



/* Card */

.surah-card{

    min-width:0;

    height:185px;

    padding:25px 12px;

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;


    border-radius:26px;


    background:

    linear-gradient(
        180deg,
        #FFFDF9,
        #F8F5EC
    );


    border:

    1px solid rgba(15,76,58,.10);


    box-shadow:

    0 12px 35px rgba(15,76,58,.08);


    transition:.35s ease;

}



/* Watermark */

.surah-card::before{

    content:"";

    position:absolute;

    inset:18px;

    opacity:.045;

    background-image:

    radial-gradient(
        circle,
        #D4AF37 2px,
        transparent 2px
    );


    background-size:36px 36px;

}



/* Number */

.surah-number{

    width:55px;

    height:55px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        #D4AF37,
        #E8C76A
    );


    color:#fff;

    font-size:19px;

    font-weight:900;


    margin-bottom:14px;

    z-index:2;

}



/* Title */

.surah-title{

    font-size:19px;

    font-weight:900;

    color:var(--primary-dark);

    white-space:nowrap;

    z-index:2;

}



/* Meta */

.surah-meta{

    font-size:13px;

    color:#777;

    z-index:2;

}



/* Hover */

.surah-card:hover{

    transform:translateY(-8px);

}


/*==================================================
  RESPONSIVE - SURAHS
==================================================*/


@media(max-width:1200px){

    .surah-grid{

        grid-template-columns:repeat(5,minmax(0,1fr));

    }

}


@media(max-width:1050px){

    .surah-grid{

        grid-template-columns:repeat(4,minmax(0,1fr));

    }

}


@media(max-width:850px){

    .surah-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}


@media(max-width:650px){

    .surah-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}


@media(max-width:420px){

    .surah-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
  SURAH FOOTER BUTTON
==================================================*/

.surahs-footer{

    display:flex;

    justify-content:center;

    margin-top:45px;

}



.btn-all-surahs{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 38px;

    border-radius:50px;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );


    color:#fff;


    font-size:16px;

    font-weight:700;


    border:1px solid rgba(212,175,55,.35);


    box-shadow:

    0 12px 30px rgba(15,76,58,.18);


    transition:.35s ease;

}



.btn-all-surahs:hover{

    background:

    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );


    color:#fff;


    transform:translateY(-4px);


    box-shadow:

    0 18px 35px rgba(212,175,55,.3);

}