/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Styles specific to smartphones */
    /* Adjustments for smaller screens */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #f9f9f9;
    }

    header {
        display: flex; /* Make the header a flex container */
        justify-content: space-between; /* Align items with space between */
        align-items: center; /* Center items vertically */
        margin-top: 20px; /* Add margin to the top of the header */
        margin-bottom: 40px; /* Add margin to the bottom of the header */
        margin-left: 20px;
        margin-right: 180px;
    }

    section {
        width: 80%; /* Set width of sections to 80% */
        margin: 20px auto; /* Center sections and add margin */
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 20px; /* Add padding to sections */
    }

    h1 {
        margin: 0; /* Remove default margin */
        color: #003366;
        flex-grow: 1; /* Allow the title to grow and fill available space */
        text-align: center; /* Center the title */
        font-size: 48px;
    }

    h2 {
        color: #003366;
    }

    ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    footer {
        margin-top: 50px;
        text-align: center;
        color: #666;
    }

    .back-button {
        padding: 5px 10px;
        background-color: #fff;
        color: #333;
        text-decoration: none;
        border: 2px solid #ccc;
        border-radius: 20px; /* Increased border-radius for a rounder button */
        font-size: 14px;
        margin-right: 10px;
    }

    .back-button:hover {
        background-color: #f2f2f2;
    }
}

/* Desktops and laptops */
@media only screen and (min-width: 1224px) {
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #f9f9f9;
    }

    header {
        display: flex; /* Make the header a flex container */
        justify-content: space-between; /* Align items with space between */
        align-items: center; /* Center items vertically */
        margin-top: 20px; /* Add margin to the top of the header */
        margin-bottom: 40px; /* Add margin to the bottom of the header */
        margin-left: 20px;
        margin-right: 180px;
    }

    section {
        width: 80%; /* Set width of sections to 80% */
        margin: 20px auto; /* Center sections and add margin */
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 20px; /* Add padding to sections */
    }

    h1 {
        margin: 0; /* Remove default margin */
        color: #003366;
        flex-grow: 1; /* Allow the title to grow and fill available space */
        text-align: center; /* Center the title */
        font-size: 48px;
    }

    h2 {
        color: #003366;
    }

    ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    footer {
        margin-top: 50px;
        text-align: center;
        color: #666;
    }

    .back-button {
        padding: 10px 20px;
        background-color: #fff;
        color: #333;
        text-decoration: none;
        border: 2px solid #ccc;
        border-radius: 20px; /* Increased border-radius for a rounder button */
    }

    .back-button:hover {
        background-color: #f2f2f2;
    }
}