* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    width: 100%; /* Full width of the screen */
    min-height: 100vh; /* Full height of the viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('your-background-image.jpg'); /* Optional background image */
    background-size: cover;
}

.container {
    width: 100%; /* Full width of the screen */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align the content */
}

header {
    background-color: rgba(36, 101, 197, 0.9); /* Transparent background for header */
    padding: 20px;
    text-align: center;
    color: #fff;
    width: 100%;
    border-radius: 8px;
}

header .logo {
    width: 100px;
}

header h1 {
    margin-top: 10px;
    text-align: center; /* Centers the header text */
}

main {
    padding: 20px 0;
    flex-grow: 1; /* Ensures the main content grows and fills the available space */
    width: 100%;
}

h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #2c7a56;
    text-align: center; /* Centers the category headers */
}

/* Remove underline from links */
a {
    text-decoration: none !important; /* Removes the default underline from the link */
}

/* Make sure the icon and text within the tiles behave as a link */
a .tile {
    color: inherit; /* Ensure the color of the tile text and icon are consistent */
}

.info-systems {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.category {
    width: 100%;
    margin-bottom: 40px;
    text-align: center; /* Centers the category text */
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Ensure each tile is a minimum width of 250px */
    gap: 20px;
    width: 100%; /* Full width for the grid layout */
    justify-items: center; /* Center the items within the grid */
    max-width: 1200px; /* Optional, limits the grid's maximum width */
    margin: 0 auto; /* Ensures it is centered */
}

/* Glassmorphism effect with shine for the tiles, making the colors pop */
.tile {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background to keep colors vibrant */
    backdrop-filter: blur(15px); /* Frosted glass effect */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.2); /* Adding depth with shadow */
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Makes sure each tile takes full width within the grid */
    box-sizing: border-box; /* Ensures padding doesn't affect width calculation */
    position: relative; /* To position the shine effect */
}

/* Shine effect using a linear gradient */
.tile:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
    opacity: 0.5;
    border-radius: 15px;
    pointer-events: none; /* Prevent shine from interfering with interactions */
}

.tile i {
    font-size: 40px; /* Larger icons */
    margin-bottom: 10px; /* Space between the icon and text */
}

.tile.blue { background-color: rgba(30, 117, 193, 0.6); } /* Vibrant blue */
.tile.green { background-color: rgba(44, 160, 44, 0.6); } /* Vibrant green */
.tile.yellow { background-color: rgba(248, 194, 38, 0.6); } /* Vibrant yellow */
.tile.red { background-color: rgba(242, 76, 76, 0.6); } /* Vibrant red */
.tile.purple { background-color: rgba(126, 87, 194, 0.6); } /* Vibrant purple */
.tile.teal { background-color: rgba(77, 182, 172, 0.6); } /* Vibrant teal */
.tile.orange { background-color: rgba(255, 112, 67, 0.6); } /* Vibrant orange */
.tile.pink { background-color: rgba(233, 30, 99, 0.6); } /* Vibrant pink */
.tile.gray { background-color: rgba(158, 158, 158, 0.6); } /* Vibrant gray */

.tile:hover {
    background-color: rgba(51, 51, 51, 0.7); /* Darker shade on hover */
    backdrop-filter: blur(20px); /* Increase blur effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.3); /* Increase shadow on hover */
}

footer {
    background-color: rgba(44, 122, 86, 0.9); /* Transparent background for footer */
    color: #fff;
    padding: 10px;
    text-align: center;
    margin-top: 40px;
    border-radius: 8px;
}

/* Mobile and Tablet Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 20px;
    }

    .info-systems {
        flex-direction: column;
        align-items: center;
    }

    .tiles {
        grid-template-columns: 1fr 1fr;
    }

    .tile {
        font-size: 14px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 18px;
    }

    .tiles {
        grid-template-columns: 1fr;
    }

    .tile {
        font-size: 12px;
        padding: 12px;
    }

    footer {
        font-size: 12px;
    }
}