:root {
    --color-primary: #153e7f; /* Deeper, more formal Blue (Header Background) */
    --color-dark-primary: #0e2b5e; /* Darker Navy Blue */
    --color-accent: #ffc400; /* Richer Gold/Yellow */
    --color-red-accent: #dc2626; /* A strong red for the badge/active link */
    --color-light: #f1f5f9; /* Slate 100 for subtle background */
}

body {
    font-family: 'Inter', sans-serif; /* Inter for overall content */
    background-color: var(--color-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1; /* Ensures main content takes available space */
}


.font-lato { font-family: 'Lato', sans-serif; }
.font-oswald { font-family: 'Oswald', sans-serif; }

.urdu-text {
    font-family: 'Noto Nastaliq Urdu', serif;
    direction: rtl;
    text-align: right;
    line-height: 2.2; /* Better line spacing for Nastaliq */
}

.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.bg-dark-primary { background-color: var(--color-dark-primary); }
.bg-red-accent { background-color: var(--color-red-accent); }
.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }

/* Custom Card Hover Effect */
.info-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    border-color: var(--color-accent); /* Make sure border-color is set if needed */
}

.badge-outline { box-shadow: 0 0 0 2px white; }

/* Active Navigation Link */
nav a.active {
    background-color: var(--color-red-accent);
    font-weight: bold;
    color: white;
}
nav a:not(.active):hover {
     background-color: rgba(255, 255, 255, 0.2); /* white/20 */
}

/* Specific styling for category pages */
.content-section {
    background-color: white;
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-2xl */
    border-left: 8px solid rgba(21, 62, 127, 0.5); /* border-l-8 border-primary/50 */
    margin-bottom: 2rem; /* Add space between sections */
}
.content-section h2, .content-section h3 {
     border-bottom: 2px solid var(--color-accent);
     padding-bottom: 0.5rem; /* pb-2 */
     margin-bottom: 1rem; /* mb-4 */
     display: flex;
     align-items: center;
}
.content-section h2 i, .content-section h3 i {
    margin-right: 0.75rem; /* mr-3 */
    color: var(--color-accent);
}

/* Style for Quick Link buttons (pills) */
.quick-link-card { 
    transition: all 0.2s ease; 
}
/* Style for the active/selected quick link */
.quick-link-card.active-topic {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.quick-link-card.active-topic i { 
    color: white; /* Change icon color on active */
}

/* --- Marquee Animation (Left-to-Right) --- */
.marquee-container {
    overflow: hidden; /* Text ko box ke andar rakhega */
    white-space: nowrap; /* Text ko ek line mein rakhega */
    position: relative;
    width: 100%;
}

.marquee-text {
    /* Animation: naam, time, speed, kitni baar */
    animation: marquee-ltr 150s linear infinite; /* Left-to-Right */
    display: inline-block; /* Animation ke liye zaroori */
    padding-left: 100%; /* Taake text screen se bahar se (left se) start ho */
    direction: rtl; /* Ensures Nastaliq text renders correctly */
}

/* Animation definition (Left-to-Right) */
@keyframes marquee-ltr {
    0%   { transform: translateX(-100%); } /* Start off-screen left */
    100% { transform: translateX(100%); } /* End off-screen right (container width) */
}