@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body,
.ko-landing{
    font-family:'Vazirmatn',sans-serif;
}
/*
==================================
Landing Page
==================================
*/

.ko-landing{

    background:#f7f9fb;

    min-height:100vh;

}

/*==================================
Container
==================================*/

.ko-container{

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}

/*==================================
Header
==================================*/

.ko-header{

    position:relative;

    background:linear-gradient(135deg,#0c8a4d,#08713f);

    color:#fff;

    text-align:center;

    padding:70px 20px 90px;

    overflow:hidden;

}

.ko-header-overlay{

    position:absolute;

    inset:0;

    opacity:.08;

    background:url("../images/pattern.svg");

    background-size:300px;

}

.ko-header>*{

    position:relative;

    z-index:2;

}

.ko-logo img{

    width:95px;

    margin-bottom:20px;

}

.ko-header h1{

    font-size:34px;

    margin:0;

    font-weight:800;

}

.ko-header p{

    margin-top:15px;

    font-size:18px;

    opacity:.9;

}

/*==================================
Stats
==================================*/

.ko-stats{

    margin-top:-45px;

    position:relative;

    z-index:20;

}

.ko-stats .ko-container{

    display:flex;

    gap:20px;

    justify-content:center;

}

.ko-stat-card{

    width:240px;

    background:#fff;

    border-radius:18px;

    padding:28px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.ko-stat-card .ko-number{

    display:block;

    font-size:34px;

    color:#0c8a4d;

    font-weight:800;

}

.ko-stat-card .ko-label{

    display:block;

    margin-top:10px;

    color:#666;

    font-size:15px;

}
/*==================================
Types
==================================*/

.ko-types{

    margin:70px 0;

}

.ko-types .ko-container{

    display:grid;

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

    gap:25px;

}

.ko-type-card{

    background:#fff;

    border-radius:22px;

    text-align:center;

    text-decoration:none;

    padding:35px 20px;

    transition:.35s;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

    border:2px solid transparent;

}

.ko-type-card img{

    width:72px;

    margin-bottom:20px;

}

.ko-type-card h3{

    color:#222;

    font-size:22px;

    margin-bottom:12px;

}

.ko-type-card p{

    color:#777;

    line-height:28px;

}

.ko-type-card:hover{

    transform:translateY(-8px);

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

    border-color:#0c8a4d;

}

.ko-type-card.active{

    background:#0c8a4d;

    color:#fff;

}

.ko-type-card.active h3,

.ko-type-card.active p{

    color:#fff;

}

/*==================================
Empty
==================================*/

.ko-empty{

    text-align:center;

    padding:80px 20px;

}

.ko-empty img{

    width:130px;

    opacity:.8;

    margin-bottom:25px;

}

.ko-empty h3{

    font-size:28px;

    color:#333;

    margin-bottom:10px;

}

.ko-empty p{

    color:#777;

    font-size:16px;

}
/*==================================
Message
==================================*/

.ko-message{

    margin:70px 0;

}

.ko-message blockquote{

    background:#fff;

    border-right:6px solid #0c8a4d;

    padding:35px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    line-height:38px;

    font-size:20px;

    color:#444;

}

/*==================================
Responsive
==================================*/

@media(max-width:991px){

    .ko-types .ko-container{

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

    }

    .ko-stats .ko-container{

        flex-direction:column;

        align-items:center;

    }

}

@media(max-width:768px){

    .ko-header{

        padding:50px 20px 70px;

    }

    .ko-header h1{

        font-size:26px;

    }

    .ko-types .ko-container{

        grid-template-columns:1fr;

    }

    .ko-stat-card{

        width:100%;

    }

}
/*==================================================
Hero Quote
==================================================*/

.ko-hero-quote{

    margin:55px 0;

}

.ko-quote-box{

    max-width:950px;

    margin:auto;

    padding:55px 45px;

    border-radius:26px;

    background:linear-gradient(135deg,#0c8a4d,#08713f);

    color:#fff;

    text-align:center;

    position:relative;

    overflow:hidden;

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

}

.ko-quote-box:before{

    content:"❁";

    position:absolute;

    top:-30px;

    left:-10px;

    font-size:160px;

    opacity:.06;

}

.ko-quote-box:after{

    content:"❁";

    position:absolute;

    bottom:-40px;

    right:-10px;

    font-size:160px;

    opacity:.06;

}

.ko-quote-badge{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

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

    font-size:14px;

    margin-bottom:25px;

}

.ko-quote-box h2{

    margin:0;

    font-size:30px;

    font-weight:700;

    line-height:1.9;

}

.ko-ayah{

    margin-top:35px;

    font-size:40px;

    font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;

    color:#FFD54F;

    line-height:2.1;

}

.ko-translation{

    margin-top:18px;

    font-size:21px;

    line-height:2;

}

.ko-reference{

    margin-top:18px;

    opacity:.9;

    font-size:16px;

    letter-spacing:.3px;

}