/* General Container Styles */
.project-container {
    display: flex;
    justify-content: center; /* Center buttons within the container */
    align-items: stretch; /* Ensure all buttons have the same height */
    padding: 2%; /* Add padding around the container */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    width: 100%; /* Ensure container takes full width of parent */
    max-width: 100%; /* Prevent overflow on the right side */
    box-sizing: border-box; /* Include padding in width calculations */
    overflow-x: hidden; /* Prevent horizontal scrolling when buttons wrap */
}

/* Button Styles */
.project-button, .resume-button {
    display: flex; /* Flex layout for button content */
    flex-direction: column; /* Stack content vertically */
    flex-grow: 1; /* Allow buttons to grow equally */
    flex-basis: 40%; /* Default button width */
    max-width: 40%; /* Limit button width */
    min-width: 200px; /* Prevent buttons from shrinking too much */
    padding: 20px; /* Space inside buttons */
    margin: 10px;
    background-color: #3F6CAD; /* Button background color */
    color: #DCEFFF; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Base font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    box-sizing: border-box; /* Include padding in width/height calculations */
    align-items: center; /* Center-align button content horizontally */
    text-align: center; /* Ensure text inside spans is center-aligned */
    pointer-events: auto;
}

/* Button Hover and Active States */
.project-button:hover, .resume-button:hover {
    background-color: #2F5C9A; /* Darken button on hover */
    cursor: pointer;
}

.project-button:active, .resume-button:active {
    background-color: #1F3C6A; /* Darker color on click */
    transform: scale(0.98); /* Slight scale-down effect on click */
}

/* Title Styles */
.button-title {
    font-size: 1.5rem; /* Larger text for the title */
    font-weight: bold; /* Bold font for emphasis */
    margin-bottom: 15px; /* Space below the title */
    text-align: center; /* Ensure the title is center-aligned */
}

/* Description Styles */
.button-description, .button-detail {
    font-size: 1rem; /* Standard font size for descriptions */
    margin-bottom: 10px; /* Space between description lines */
    text-align: center; /* Center-align descriptions */
}

.button-image {
    width: auto;
    height: 100px;
    margin-bottom: 15px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .project-container {
        flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    }

    .project-button, .resume-button {
        flex-basis: 100%; /* Buttons take full width in a single column */
        max-width: 100%; /* Prevent extra space on sides */
        margin-bottom: 10px; /* Add spacing between rows */
    }
}