html, body {
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333;
    text-align: center;
    color: white;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.25em;
    box-sizing: border-box;
    width: 100%;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.875em;
    width: 100%; /* Ensure header takes full width */
    padding: 0 1em; /* Add horizontal padding */
}

.logo-container {
    width: 80%;
    max-width: 44em;
    display: flex;
    justify-content: center; /* Center logo inside the container */
    margin: 0 auto; /* Center container itself */
}

.mainlogo, .sublogo {
    max-width: 100%; /* Scale down if necessary */
    height: auto;
}

h1 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: 0.1em;
}

h2 {
    font-size: 1.6em;
    margin-top: 1em;
    margin-bottom: 0.1em;
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
}

.app-icon-link {
    text-decoration: none;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.875em; /* 30px / 16px = 1.875em */
    border-radius: 0.9375em; /* 15px / 16px = 0.9375em */
    transition: transform 0.3s;
    width: 15em; /* 250px / 16px = 15.625em */
    height: 15em; /* 250px / 16px = 15.625em */
    color: white;
}

.app-icon img {
    width: 6.25em; /* 100px / 16px = 6.25em */
    height: 6.25em; /* 100px / 16px = 6.25em */
}

.app-icon p {
    margin-top: 1.25em; /* 20px / 16px = 1.25em */
    font-size: 1.5em;
}

.app-icon:hover {
    transform: scale(1.1);
}

.app-icon.red {
    background: linear-gradient(145deg, #f25555, #c91e1e);
}

.app-icon.orange {
    background: linear-gradient(145deg, #f2b06f, #fc771e);
}

.app-icon.blue {
    background: linear-gradient(145deg, #1a94b8, #2c67f2);
}

.app-icon.green {
    background: linear-gradient(145deg, #74D680, #378B29);
}

.app-icon.yellow {
    background: linear-gradient(145deg, #fcf06c, #fcea2a);
    color: black;
}

.app-icon.purple {
    background: linear-gradient(145deg, #c29ae0, #8459a5);
}

.app-icon.contact {
    background: linear-gradient(145deg, #ffffff, #dbdbdb);
    color: black;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .logo-container {
        width: 90%;
    }

    .mainlogo, .sublogo {
        max-width: 90%; /* Scale down logo */
    }
}

@media (max-width: 480px) {
    .logo-container {
        width: 95%;
    }

    .mainlogo, .sublogo {
        max-width: 80%; /* Scale down more for smaller screens */
    }
}