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

body {
    font-family: Arial, sans-serif;
    color: #20417E; /* Pantone blue text */
    background-color: #7991BF; /* Dark background */
}

.header {
    background-color: #20417E; /* Pantone Blue header */
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
}

/* Unvisited link */
a:link {
    color: white;
}

/* Visited link */
a:visited {
    color: #005A87;
}

/* Mouse over link */
a:hover {
    color: #3399CC;
}

/* Selected link */
a:active {
    color: #003D5B;
}


.topnav {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Align items vertically in the center, if needed */
    overflow: hidden;
    background-color: #7991BF; /* Darker purple for top navigation */
}

.topnav a {
    display: block;
    color: #20417E; /* Pantone blue text */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.topnav a:hover {
    background-color: white; /* Slightly lighter purple for hover effect */
}


.content {
    padding: 20px;
    background-color: #BEC0C0; /* Keep existing background color */
    text-align: center; /* Add this to center the content */
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #20417E; /* Pantone Blue footer */
    color: white;
    text-align: center;
    padding: 10px 0;
}


.profile-section {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Add space between image and text */
}

.profile-pic {
    max-width: 200px; /* Adjust size as needed */
    border-radius: 50%; /* Circular shape */
    border: 3px solid #20417E; /* blue border */
}

.profile-description {
    max-width: 400px; /* Adjust width as needed */
    text-align: left; /* Align text to the left */
}

.research-section {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Add space between image and text */
}

.research-pic {
    max-width: 400px; /* Adjust size as needed */
}

.research-description {
    max-width: 300px; /* Adjust width as needed */
    text-align: left; /* Align text to the left */
}


/* Base styles */
/* ... (your existing CSS) ... */

/* Media Queries */
@media screen and (max-width: 768px) {
    /* Adjustments for tablets and smaller devices */

    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    #profile {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    #profile img {
        margin-bottom: 20px;
    }

    #profile div p {
        max-width: 100%;
    }

    .research-section {
        flex-direction: column; /* Stack items vertically on smaller screens */
        padding: 10px 0; /* Add some padding for spacing */
    }

    .research-pic, .research-description {
        max-width: 100%; /* Allow each to fill the container */
        margin-bottom: 10px; /* Add space between the elements */
    }

    .research-description {
        text-align: center; /* Center-align the text for a better mobile experience */
    }


}

@media screen and (max-width: 480px) {
    /* Adjustments for small mobile devices */

    header {
        padding: 10px;
    }

    nav ul li {
        margin-right: 10px;
    }

    #profile {
        padding: 15px;
    }

    #profile img {
        width: 120px;
        height: 120px;
    }


.research-section {
        padding: 5px 0; /* Less padding on very small screens */
    }

    .research-pic {
        width: 80%; /* Adjust image width to be responsive within the container */
        margin: 0 auto; /* Center the image */
    }

    .research-description {
        /* Adjustments for text size or other styling could go here if needed */
    }

}


/* Additional styles can be added as needed */