@media (max-width: 480px) {

    .blue-section {
        display: flex;
        flex-direction: column; /* Stack text and image vertically */
        align-items: flex-start; /* Align everything to the left */
        padding: 20px; /* Adjust padding for smaller screens */
    }

    /* Ensure both text and image take full width on smaller screens */
    .blue-left, .blue-right {
        flex: none; /* Remove 50% width */
        width: 100%; /* Full width for both text and image */
    }

    .blue-right {
        order: -1; /* Move the image above the text */
        justify-content: center; /* Center the image horizontally */
    }

    .profile-image {
        width: 100%; /* Ensure the image scales to full width */
        max-width: 100%; /* Remove max-width constraint */
        height: auto; /* Maintain aspect ratio */
        object-fit: contain; /* Prevent image distortion */
    }
 
/* Small Screens (up to 480px) */

    .footer-container {
        position: fixed; /* Make it float at the bottom */
        bottom: 0;        
        left: 0; /* Align to the left */
        width: 100%; /* Ensure it spans the full width */
        padding: 0px 20px; /* Set overall padding to 0px above, 20px for sides */
        background-color: white; /* White background for visibility */
        display: grid; /* Use grid layout */
        grid-template-columns: 50px 190px auto; /* Define the grid structure */
        grid-template-rows: auto 70px; /* Two rows: first for menu, second for content */
        z-index: 100; /* Ensure it's above other elements */
        box-sizing: border-box; /* Ensure padding is included in the total size */
        transform: translateY(-20px); /* Move the footer up by 20px */
    }

    /* Logo styling */
    .footer-left img {
        max-height: 70px; /* Set the max logo height */
        width: auto; /* Maintain the aspect ratio */
        opacity: 0.6; /* Slight transparency */
        display: block;
        margin: 0; /* Remove any additional margin */
    }

    .footer-left {
        grid-column: 1 / 2; /* First column in the grid */
        grid-row: 2; /* Second row in the grid */
        text-align: left; /* Align logo flush to the left */
        display: flex;
        align-items: center; /* Vertically center the logo */
        justify-content: flex-start; /* Align logo flush left */
        height: 70px; /* Match the height of the row */
        padding-right: 0; /* Remove any padding on the right */
    }

    /* Contact info */
    .footer-middle {
        grid-column: 2 / 3; /* Second column */
        grid-row: 2; /* Second row */
        text-align: left;
        padding-left: 20px; /* Maintain padding to the left */
        padding-right: 0; /* Remove padding to the right */
        line-height: 1.2; /* Adjust line height */
        font-size: 14px; /* Ensure proper font size */
        color: var(--primary-color); /* Primary color for the text */
        height: 70px; /* Match row height */
    }

    .footer-middle .last-name {
        font-weight: 600;
        color: var(--secondary-color); /* Secondary color for last name */
    }

    .footer-middle a {
        color: var(--primary-color) !important;
        text-decoration: none; /* Remove underline by default */
    }

    /* Footer menu */
    .footer-right-menu {
        grid-column: 1 / span 3; /* Span across all three columns */
        grid-row: 1; /* First row in the grid */
        display: flex;
        justify-content: flex-end; /* Align to the right */
        padding-right: 0; /* Remove right padding */
        align-items: flex-start; /* Align menu items to the top */
        gap: 10px; /* Spacing between menu items */
        font-size: 0.9rem; /* Set the menu font size */
        margin-bottom: 3px; /* Set bottom margin to 3px */
        border-bottom: 1px solid var(--secondary-color); /* Add 1px border in secondary color */
    }

    /* Footer menu link styling */
    .footer-right-menu a {
        text-decoration: none; /* Remove underline by default */
        color: var(--primary-color); /* Primary color for links */
    }

    /* Hover effect for menu links */
    .footer-right-menu a:hover {
        text-decoration: underline; /* Add underline on hover */
    }

    /* Icon container */
    .footer-right {
        grid-column: 3 / 4; /* Third column */
        grid-row: 2; /* Second row */
        display: flex; /* Flexbox for alignment */
        justify-content: flex-end; /* Align icons to the right */
        align-items: center; /* Vertically center the icons */
        padding-right: 0; /* Remove right padding */
        padding-bottom: 5px; /* Maintain reduced bottom margin */
        gap: 10px; /* Spacing between icons */
    }

    /* Icon styling */
    .footer-right-icons a {
        font-size: 1.5rem; /* Set icon size */
        color: var(--primary-color); /* Set primary color for icons */
        text-decoration: none; /* Remove underline for icons */
    }

    .footer-right-icons a:hover {
        text-decoration: underline; /* Add underline on hover */
    }

}