<!DOCTYPE html>
<html lang="en">
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 15px;
    max-width: 1200px;
    width: 100%;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-header {
    padding: 15px;
    text-align: center;
    color: white;
}

.card-body {
    padding: 15px;
    text-align: center;
}

.card-image {
    width: 100%;
    border-radius: 5px;
}

.card-text {
    margin: 10px 0;
    color: #555;
}

.card-footer {
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
}

.btn {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #45a049;
}

/* Unique colors for each card */
.card-1 .card-header { background-color: #33b8ff; }
.card-2 .card-header { background-color: #32687b; }
.card-3 .card-header { background-color: #27d11f; }
.card-4 .card-header { background-color: #ef3222; }
.card-5 .card-header { background-color: #fae42a; }
.card-6 .card-header { background-color: #2ea6b0; }
.card-7 .card-header { background-color: #bba7df; }
.card-8 .card-header { background-color: #000000; }
.card-9 .card-header { background-color: #5c9ded; }

</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome To Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <!-- Card 1 -->
        <div class="card card-1">
            <div class="card-header" >
                <h2>Admin System</h2>
            </div>
            <div class="card-body">
                <img src="../logog.jpg" alt="Placeholder Image" class="card-image">
                <p class="card-text"></p>
            </div>
            <div class="card-footer">
                <a href="../sadmin/" class="btn">login admin</a>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="card card-2">
            <div class="card-header">
                <h2>Admin clerk</h2>
            </div>
            <div class="card-body">
                <img src="../logog.jpg" alt="Placeholder Image" class="card-image">
                <p class="card-text"></p>
            </div>
            <div class="card-footer">
                <a href="../officeclerk/" class="btn">Admin clerk login</a>
               
            </div>
        </div>
        <!-- Card 3 -->
        <div class="card card-3">
            <div class="card-header">
                <h2>Division System</h2>
            </div>
            <div class="card-body">
                <img src="../logog.jpg" alt="Placeholder Image" class="card-image">
                <p class="card-text"></p>
            </div>
            <div class="card-footer">
                 <a href="../division/" class="btn">Division login</a>
               
            </div>
        </div>
        
      
        
         <!-- Card 5 -->
        <div class="card card-5">
            <div class="card-header">
                <h2>MCO surveillance </h2>
            </div>
            <div class="card-body">
                <img src="../logog.jpg" alt="Placeholder Image" class="card-image">
                <p class="card-text"></p>
            </div>
            <div class="card-footer">
                <a href="../surveillance/" class="btn"> surveillance login</a>
               
            </div>
        </div>
        
        
       
        </div>
        