/* Warna utama */
:root {
    --primary-green: #028552;  /* Hijau tua yang lebih soft */
    --gold-text: #D4B44C;      /* Emas lebih kalem */
    --nav-text: #ffffff;       /* Emas lebih lembut */
    --body-bg: #F9F5EC;        /* Putih kekuningan yang lebih soft */
    --body-text: #3A3A3A;      /* Hitam lebih abu untuk kenyamanan */
    --card-bg: #FFFFFF;        /* Putih bersih untuk card */
    --card-border: #028552;    /* Hijau soft */
    --card-shadow: rgba(0, 0, 0, 0.1); /* Shadow lebih halus */
}

/* Header */
nav {
    background-color: var(--primary-green);
    color: var(--nav-text);
    padding: 14px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid var(--gold-text);
}

/* Body */
body {
    background-color: var(--body-bg);
    color: var(--body-text);
    font-family: 'Arial', sans-serif;
}

/* Heading */
h1, h2 {
    color: var(--gold-text);
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Paragraf */
p {
    line-height: 1.7;
    font-size: 1rem;
}

/* Card Component */
.card {
    background-color: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px var(--card-shadow);
    padding: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--card-shadow);
}

/* Judul Card */
.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-green);
    text-align: center;
}

/* Isi Card */
.card-content {
    font-size: 0.95rem;
    color: var(--body-text);
}

/* Responsiveness */
@media (max-width: 768px) {
    nav {
        padding: 10px;
    }
    
    .card {
        padding: 15px;
    }
}

.btn-primary{
    background-color: var(--primary-green) !important;
    transition: transform 0.5s ease;
}

.btn-primary:hover{
    background-color: var(--card-border) !important;
    transform: scale(1.03) translateY(-2px);
}

.row .bg-primary{   
    border-color: var(--primary-green) !important;
    background-color: var(--primary-green) !important;
}

.row .border-primary{   
    border-color: var(--primary-green) !important;
}

.list-group-item:nth-child(odd) {
    background-color: #fffef8; 
}

.list-group-item:nth-child(even) {
    background-color: #f5f5f5; 
}

.menu-quran a{
    color: var(--card-bg);
    transition: transform 0.3s ease;
    font-size: 1.01rem;
    text-decoration: none;
    width: 100px;
    
}

.menu-quran a.active{
    border-bottom: 2px solid var(--card-bg);
}

footer{
    background-color: var(--primary-green);
    color: var(--card-bg);
    font-weight: 600;
}

@font-face {
    font-family: 'Scheherazade_New';
    src: url('../../font/Scheherazade_New/ScheherazadeNew-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.arabic-text {
    font-family: 'KFGQPC Uthman Taha Naskh', 'Scheherazade_New', Arial, sans-serif;
    line-height: 1.9;
    letter-spacing: 1px;
}

.z-10{
    z-index: 100 !important;
}