footer {
    margin-top: auto;
}

.profile-section {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Reduced space between text and image */
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
    max-width: 1200px; /* Ensure it matches the general container width */
    margin: 0 auto; /* Center the container horizontally */
}

/* Resume Summary Styles */
.profile-text {
    flex: 1; /* Allow text to take up remaining space */
    margin: -20px 0; /* Adjust top and bottom margins as needed */
    margin-left: -20px; /* Adjust for alignment */
    text-align: left; /* Ensure text is left-aligned on larger screens and smaller screens */
}

/* Resume Image Styles */
.profile-image {
    flex: 0 0 40%; /* Set the image width to 40% of the container width */
    max-width: 300px; /* Ensure the image doesn't exceed this width */
    align-self: flex-start; /* Align image to the start of the container */
    position: relative; /* Use relative positioning */
    margin-top: 0px; /* Move the image up significantly on larger screens */
    margin-bottom: -40px; /* Reduce gap to footer by using a negative margin */
}

.profile-image img {
    width: 100%; /* Set the image to take the full width of the container */
    height: auto; /* Allow height to adjust based on aspect ratio */
    aspect-ratio: 1 / 1.2; /* Make the image taller than it is wide */
    border-radius: 45%; /* Keep rounded edges for a circular look, but not a perfect circle */
    border: 3px solid #333; /* Add a border */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .profile-section {
        flex-direction: column; /* Stack content vertically on smaller screens */
        align-items: flex-start; /* Align items to the start (left) */
        gap: 15px; /* Adjust gap for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .profile-image {
        max-width: 90%; /* Adjust max-width for mobile screens */
        margin-top: -30px; /* Reduce margin-top on tablet screens */
        margin-bottom: -20px; /* Adjust negative margin-bottom on tablet screens */
    }

    .profile-text {
        margin-left: 0; /* Reset margin-left for smaller screens */
        margin-top: 0; /* Reset top margin for smaller screens */
        margin-bottom: 10px; /* Adjust bottom margin for smaller screens */
        text-align: left; /* Keep text left-aligned on smaller screens */
    }
}

@media (max-width: 480px) {
    .profile-image {
        max-width: 100%; /* Ensure image fits within very small screens */
        margin-top: 0; /* Reset margin-top for very small screens */
        margin-left: 0;
        margin-bottom: -10px; /* Adjust negative margin-bottom for very small screens */
    }

    .profile-text {
        margin-left: 0; /* Reset margin-left for very small screens */
        margin-top: 0; /* Reset top margin for very small screens */
        margin-bottom: 10px; /* Adjust bottom margin for very small screens */
        text-align: left; /* Keep text left-aligned for very small screens */
    }
}