 /* General Body Style */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f9f9f9;
        }

        /* Main Content Area */
        .content-area {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* NEW STYLES for Main Title */
        .main-title-container {
            margin-bottom: 25px;
        }

        .main-title {
            font-size: 2em;
            font-weight: bold;
            color: #005691; /* Warna biru sesuai gambar */
            border-left: 5px solid #005691;
            padding-left: 15px;
            margin: 0;
        }
        
        /* UPDATED STYLES for Filter Dropdown */
        .filter-container {
            margin-bottom: 40px;
        }

        #category-filter {
            width: 100%;
            padding: 12px 15px;
            font-size: 1em;
            color: #555;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: .65em auto;
        }

        /* Section and Card Styles */
        .category-section {
            margin-bottom: 60px;
        }

        .category-title {
            font-size: 1.8em;
            color: #333;
            border-bottom: 3px solid #007BFF;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }

        .software-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
        }

        .software-card {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .software-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .software-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background-color: #eee; /* Fallback color for missing images */
        }
        .card-content {
            padding: 20px;
            flex-grow: 1;
        }
        .software-card h3 {
            margin-top: 0;
            font-size: 1.1em;
            color: #333;
        }
        .software-card p, .software-card ul {
            margin: 0;
            color: #666;
            font-size: 0.9em;
            line-height: 1.5;
            padding-left: 0; 
        }
        .software-card ul {
            padding-left: 20px;
            margin-top: 10px;
        }

.request-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: linear-gradient(to right, #007BFF, #0056b3); /* Biru ke biru tua/hampir hitam */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Bentuk pill */
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: none;
}

.request-btn:hover {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Bayangan saat hover */
    background: linear-gradient(to right, #0069d9, #004080); /* Biru gelap saat hover */
}


