/* Basic Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%; /* Full viewport height */
}

/* Flexbox container for full height */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least the full viewport height */
}

/* Main content area */
main {
    flex: 1; /* Allow main content to grow and push the footer down */
}

/* Container styles */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal width columns */
    gap: 20px; /* Space between columns */
    padding: 20px;
    max-width: 1200px; /* Max width for better readability */
    margin: 0 auto; /* Center the container */
    align-items: start; /* Align items to the top */
}

/* Image styles */
.about-image {
    display: flex;
    align-items: start; /* Align image container to the top */
}

.about-image img {
    width: 100%; /* Full width of the column */
    height: auto; /* Maintain aspect ratio */
}

/* Text styles */
.about-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align text content to the top */
}

.about-text h1 {
    margin-top: 0;
    font-size: 2em;
    color: #333; /* Dark color for headings */
}

.about-text p {
    margin-bottom: 20px;
    line-height: 1.6; /* Better readability */
    color: #555; /* Lighter color for text */
    margin-top: 0;
}

/* Ensure footer is at the bottom on mobile */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Pushes footer to the bottom if content is short */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
        text-align: center; /* Center align text on small screens */
    }

    .about-image img {
        width: 80%; /* Adjust image size on smaller screens */
        margin: 0 auto; /* Center the image */
    }
}