:root {
        --doh-green: #035e35;
        --doh-light: rgba(3, 76, 43, 0.05);
    }
    
    .hero-guidelines { 
        background: linear-gradient(135deg, var(--doh-light) 0%, #ffffff 100%); 
        padding: 5rem 0; 
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
   .hero-title { 
    font-weight: 800; 
    color: #ffffff; /* This makes "Welcome to DOH GABAY" white */
    font-size: 2.75rem; 
    letter-spacing: -0.02em; 
}

.hero-subtitle { 
    color: rgba(255, 255, 255, 0.85); /* Making subtitle a soft white for better contrast on dark backgrounds */
    max-width: 700px; 
    font-size: 1.1rem; 
}
    
    /* Card Enhancements */
    .guideline-card { 
        transition: transform 0.2s ease, box-shadow 0.2s ease; 
        border: 1px solid rgba(0,0,0,0.08) !important;
    }
    .guideline-card:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 10px 20px rgba(0,0,0,0.06) !important;
        border-color: var(--doh-green) !important;
    }

    .badge-type { background: var(--doh-green); color: white; padding: 0.5em 1em; }
    .badge-topic { background: #f8f9fa; color: #495057; border: 1px solid #dee2e6; font-weight: 500; }
    .badge-active { background: #e6f4ea; color: #1e7e34; }
    .badge-archived { background: #f8d7da; color: #721c24; }
    
    .archived-card { background-color: #fafafa; border-left: 5px solid #dee2e6 !important; opacity: 0.85; }
    
    .guideline-title { font-size: 1.35rem; font-weight: 700; color: #2d3436; margin-bottom: 0.75rem; }
    .guideline-dev-name { color: var(--doh-green); font-weight: 600; }
    
    .btn-guideline { 
        background: var(--doh-green); 
        color: rgb(255, 255, 255); 
        border-radius: 50px; 
        padding: 0.6rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s;
    }
/* Specifically targeting the Library page title to be green */
.hero-guidelines .hero-title {
    color: var(--doh-green) !important;
}

/* Optional: making the subtitle a slightly darker grey for better readability against the light background */
.hero-guidelines .hero-subtitle {
    color: #4b5563; 
}
    
    .btn-guideline:hover { background: #02361e; color: white; box-shadow: 0 4px 12px rgba(3, 76, 43, 0.2); }

    .custom-range::-webkit-slider-thumb { background: var(--doh-green); }
    .results-bar { font-size: 0.95rem; color: #6c757d; margin-bottom: 1.5rem; padding-left: 0.5rem; }