@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, h1, h2, p, a, ul, li {
    font-family: 'Montserrat', sans-serif;
}

body {
    background: #FBFADA; /* Off-white background */
    color: #12372A; /* Dark green for text */
    line-height: 1.6;
    padding: 20px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns by default */
    gap: 20px;
    align-items: center;
/*     align-items: left; */
}

/* .section-1, .section-2 {
    background: #ADBC9F;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
} */

.section-1, .section-2 {
    background: #ADBC9F; /* Light green background for sections */
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
/*     text-align: center; */
    /* Adding shadow */
    box-shadow: 0px 4px 8px #12372A; /* X-offset, Y-offset, Blur radius, Color */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.section-1 {
    text-align: center;
}

.section-2 {
    text-align: left;
}

.section-2 p {
    margin-bottom: 15px; /* Adjust this value as needed for desired spacing */
}

/* Hover effect to lift the section */
.section-1:hover, .section-2:hover {
    transform: translateY(-5px); /* Moves the section up slightly */
    box-shadow: 0px 8px 16px #12372A; /* Larger shadow for hover effect */
}

.profile-img {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    margin-bottom: 20px; /* Space between image and name */
    border: 4px solid #FBFADA; /* Border color adjusted to match the background */
}

h1, h2 {
    color: #436850; /* Medium green for headers */
    margin: 20px 0; /* Responsive spacing around headings */
}

a {
    color: #12372A; /* Dark green for links */
    text-decoration: underline; /* Underline links for clarity */
/*     margin: 0 10px; */
}

a:hover, a:focus {
    color: #436850; /* Medium green for hover/focus states */
    text-decoration: underline; /* Ensure underline persists on hover/focus for clarity */
}

.social-icons a {
    font-size: 2.5rem; /* Larger icons for better visibility */
    margin: 0 15px;
}

.logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 20px;
}

.logo-container {
    display: inline-flex; /* Keeps the container inline and flex for alignment */
    justify-content: center; /* Center logo horizontally */
    align-items: center; /* Center logo vertically */
    width: 100px; /* Or any fixed width you prefer */
    height: 100px; /* Height to maintain aspect ratio; adjust as needed */
}

.logo {
    max-width: 100%; /* Ensures logo doesn't exceed container's width */
    max-height: 100%; /* Ensures logo doesn't exceed container's height */
    object-fit: contain; /* Ensures logo scales properly within the container */
}

.projects-list {
    list-style-type: none; /* Remove bullet points */
    padding-left: 0; /* Adjust if necessary to align list items */
}

.projects-list a {
    display: block; /* Ensure links take up the full width of the list item */
    padding: 2px 8px; /* Padding for a button-like effect */
    border-radius: 4px; /* Rounded corners for aesthetics */
    transition: background-color 0.3s ease-out;
}

.projects-list a:hover {
    background-color: #436850; /* Medium green background for hover */
    color: #FBFADA; /* Off-white text color on hover */
    text-decoration: none; /* Remove underline on hover for a clean look */
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
    }

    .logo {
        max-width: 80px; /* Smaller logos on smaller screens */
    }
}