body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background: #fff;
}

/* Existing CSS for header */
header {
    width: 100%;
    min-height: 100vh;
    background: url('Images/background.png') no-repeat center top;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    position: relative;
}


.name-box {
    position: absolute;
    top: 40%; /* Adjust as necessary */
    left: 10%; /* Adjust the left position to fit your design */
    background-color: rgba(0, 0, 0, 0.6); /* Mostly opaque black background */
    padding: 2%; /* Padding around the text */
	padding-right: 5%; /* Increased right padding */
    box-sizing: border-box;
    text-align: left; /* Align text to the left */
}

.name-box h1, .name-box h2, .name-box p {
    color: #fff; /* White text color */
    margin: 0; /* Remove default margin */
}

.name-box h1 {
    font-size: 5em; /* Larger font size for the first name */
}


.name-box p {
    font-size: 2em; /* Smaller font size for the additional text */
    opacity: 0.8; /* Adjust the opacity if you want it to be less prominent */
}

/* Add this media query for mobile devices */
@media (max-width: 768px) {
    header {
        width: 100%;
		/*min-height: 100vh;; /* Smaller height for mobile devices */
        background: url('Images/background-mobile.png') no-repeat center top; /* Optional: different background image for mobile */
        /* Add any other style changes you want for mobile here */
    }


	.name-box {
    position: absolute;
    top: 60%; /* Adjust as necessary */
    left: 0%; /* Adjust the left position to fit your design */
    background-color: rgba(0, 0, 0, 0.6); /* Mostly opaque black background */
    padding: 0%; /* Padding around the text */
	padding-right: 0%; /* Increased right padding */
    box-sizing: border-box;
    text-align: left; /* Align text to the left */
	}

    .name-box h1 {
        font-size: 1em; /* Smaller font size for mobile */
        /* Adjust other text styles if necessary */
    }

    .name-box p {
        font-size: 0.5em; /* Adjust text size for mobile */
    }
}


.top-nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease; /* Transition for the color property */
}

.top-nav a:hover {
    color: #808080; /* Replace with your desired hover color */
}


.top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2%; /* Adjust original padding */
    z-index: 1000;
    text-align: right;
    transition: padding 0.3s ease; /* Transition for padding change */
	text-align: right; // Align text to the right
}

.top-nav.shrink {
    padding: 1%; /* Reduced padding when scrolled */
}

.top-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* Change to inline-block for right alignment */
    margin-right: 4%; /* Adjust right margin for spacing */
	transition: color 0.3s ease;
}

.top-nav ul li {
    display: inline;
    margin-right: 10px; /* Adjust left margin for spacing between items */
}

.top-nav a {
    color: #fff;
    text-decoration: none;
}

.hamburger-menu {
    display: none; /* Initially hidden */
    cursor: pointer;
    font-size: 20px; /* Initial font size for desktop */
    /* Additional styling for the hamburger icon */
}

.hamburger-content {
    display: none; 
}

@media screen and (max-width: 768px) {
    .hamburger-menu {
        display: block; 
    }

    .hamburger-menu.active .hamburger-content {
        display: block;
    }
}



.white-bg { background-color: #fff; }
.blue-bg { background-color: #14274b; color: #fff; }

/* -------------------------- Back to top buttin section CSS ------------------------- */

.back-to-top {
    display: block; /* Change to block to allow it to float to the right */
    background-color: rgba(0, 0, 0, 0.7); /* Mostly opaque black */
    color: #fff; /* White text color */
    padding: 0.5em 1em; /* Adjust padding, using em for relative sizing */
    border-radius: 5px; /* Adjusted for pixel value, remove percentage */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    position: absolute; /* Use absolute positioning */
    right: 5%; /* Right align with some margin */
    top: auto; /* Position from the top, adjusted below */
    bottom: 2%; /* Position from the bottom of the section */
    font-family: Arial, sans-serif; /* Match the biography text font */
    font-size: 1em; /* Match the biography text size */
}


.back-to-top:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Lighter shade on hover */
    text-decoration: underline; /* Underline on hover */
}
/* -------------------------- Bio section CSS ------------------------- */

.bio-content {
    display: flex;
    align-items: center; /* Aligns the image and text vertically */
	padding-right: 10%;
}

.bio-image {
    max-width: 20%; /* Adjust the image size as needed */
	margin-left: 5%; /* Space to the left of the image */
    margin-right: 5%; /* Space between the image and the text */
    border-radius: 0%; /* Optional: creates a circular image */
}

.bio-text {
    flex-grow: 1; /* Allows the text section to take up the remaining space */
	 text-align: justify; 
}

@media screen and (max-width: 768px) {
    .bio-content {
       display: flex;
       flex-direction: column;
    }

    .bio-image {
		height: 60vw; /* Responsive height based on the width of the viewport */
		width: auto; /* Maintain aspect ratio */
		display: block; /* Block display to handle the size properly */
		margin: 0 auto; /* Center the image within its container */
		order: 2; /* Places the image after the text */
    }

    .bio-text {
        text-align: left;
		font-size: 0.7em; /* Adjust text size for mobile */
		order: 1; /* Ensures that the text comes first */
		margin-left: 1%
    }
}

/* -------------------------- Education section CSS ------------------------- */

.education-content {
    display: flex;
    justify-content: space-around; /* Distribute space evenly */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Wrap items to next line if not enough space */
}

.edu-item {
    flex-basis: 14.5%; /* Adjust the width of each .edu-item */
    margin: 1%; /* Give some space around the items */
    text-align: center; /* Center the content of each .edu-item */
}

.edu-logo {
    height: 10vw; /* Responsive height based on the width of the viewport */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Block display to handle the size properly */
    margin: 0 auto; /* Center the image within its container */
}


.edu-text p, .edu-item p {
    margin: 0.5rem 0; /* Space between paragraphs */
    color: inherit; /* Inherit text color from parent */
}

/* You may want to adjust the styles for responsive design */
@media (max-width: 768px) {
    .edu-item {
        flex-basis: 45%; /* Adjust to have two items per line on smaller screens */
        margin: 2% 2.5%; /* Increase margin on smaller screens */
    }
}

@media (max-width: 480px) {
    .edu-item {
        flex-basis: 90%; /* One item per line on very small screens */
        margin: 2% 5%; /* Increase margin on very small screens */
    }
}

/* Add media query for responsive adjustments if necessary */
@media (max-width: 768px) {
    .back-to-top {
        position: relative; /* Change to relative for mobile view */
        float: none; /* Remove float for mobile view */
        display: inline-block; /* Change back to inline-block for mobile */
        margin: 1em auto; /* Center it on mobile */
        right: 0; /* Reset right for mobile */
        bottom: 1em; /* Adjust bottom for mobile */
    }
}

@media screen and (max-width: 768px) {
    .education-content {
        flex-direction: column;
		align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
    }

    .edu-item {
        flex-basis: 100%;
        margin: 2%;
        text-align: left;
    }
	
	.edu-logo {
    height: 30vw; /* Responsive height based on the width of the viewport */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Block display to handle the size properly */
    margin: 0 auto; /* Center the image within its container */
	}
}

/* -------------------------- employment section CSS ------------------------- */

.employment-content {
    display: flex;
    justify-content: space-around; /* Distribute space evenly */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Wrap items to next line if not enough space */
}


.job-item {
    flex-basis: 14.5%; /* Adjust the width of each .job-item */
    margin: 1%; /* Give some space around the items */
    text-align: center; /* Center the content of each .job-item */
}

.job-logo {
    height: 10vw; /* Responsive height based on the width of the viewport */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Block display to handle the size properly */
    margin: 0 auto; /* Center the image within its container */
}


.job-text p, .job-item p {
    margin: 0.5rem 0; /* Space between paragraphs */
    color: inherit; /* Inherit text color from parent */
}

/* You may want to adjust the styles for responsive design */
@media (max-width: 768px) {
    .job-item {
        flex-basis: 45%; /* Adjust to have two items per line on smaller screens */
        margin: 2% 2.5%; /* Increase margin on smaller screens */
    }
}

@media (max-width: 480px) {
    .job-item {
        flex-basis: 90%; /* One item per line on very small screens */
        margin: 2% 5%; /* Increase margin on very small screens */
    }
}

/* Add media query for responsive adjustments if necessary */
@media (max-width: 768px) {
    .back-to-top {
        position: relative; /* Change to relative for mobile view */
        float: none; /* Remove float for mobile view */
        display: inline-block; /* Change back to inline-block for mobile */
        margin: 1em auto; /* Center it on mobile */
        right: 0; /* Reset right for mobile */
        bottom: 1em; /* Adjust bottom for mobile */
    }
}

@media screen and (max-width: 768px) {
    .employment-content {
        flex-direction: column;
		align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
    }

    .job-item {
        flex-basis: 100%;
        margin: 2%;
        text-align: left;
    }
	
	.job-logo {
    height: 30vw; /* Responsive height based on the width of the viewport */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Block display to handle the size properly */
    margin: 0 auto; /* Center the image within its container */
}
}

/* -------------------------- Publications section CSS ------------------------- */

.publications-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pub-item {
    display: flex;
    align-items: center;
    margin-bottom: 1%;
}

.pub-logo {
    max-width: 20%;
    height: auto;
    margin-right: 3%;
	margin-left: 3%;
}

.pub-text {
    flex-grow: 1;
    text-align: left;
    font-size: 1.5em; /* Increased font size, adjust as needed */
}

.pub-text h3 {
    font-size: 1.2em; /* Slightly larger size for publication titles */
}

.pub-text p {
    margin: 0.5em 0; /* Adjust margin for better spacing if needed */
}

/* -------------------------- contact section CSS ------------------------- */

.contact-card {
    display: flex;
    justify-content: center; /* Center the buttons within the card */
    align-items: center; /* Center the buttons vertically */
    flex-wrap: wrap; /* Allow the buttons to wrap to the next line if there is not enough space */
    max-width: 30%; /* Maximum width for the card container */
    margin: 0 auto; /* Center the card container horizontally */
}

.contact-button {
    padding: 1% 1.5%; /* Padding for the buttons */
    border-radius: 0.5%; /* Rounded corners */
	background-color: #fff;
    color: #000; /* Black text color */
    text-decoration: none; /* No underline */
    box-shadow: 0 0.2% 0.5% rgba(0,0,0,0.2); /* Optional shadow for depth */
    display: flex;
    align-items: center;
    width: 20%; /* Each button takes up 20% of the .contact-card container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.contact-button img {
    width: 1em; /* Fixed size for the icons */
    height: 1em; /* Fixed size for the icons */
    margin-right: 0.5%; /* Space between the icon and the text */
}

.contact-button:hover {
    background: #f0f0f0; /* Lighter background on hover */
}

@media screen and (max-width: 768px) {
    .contact-card {
        flex-direction: column;
        max-width: 100%;
    }

    .contact-button {
        width: 90%;
        margin: 10px 0;
        padding: 10px;
    }
}


/* -------------------------- contact section a (top in nav bar) CSS ------------------------- */

#contact-card-a {
    position: absolute;
    right: 0;
    min-width: 10%;
    z-index: 1;
    overflow: hidden;
    max-height: 0;  /* Initially no height */
    transition: max-height 0.3s ease-out; /* Smooth transition for max-height */
    margin-top: 1.9%;
}

/* CSS for when the menu is visible */
#contact-card-a.visible {
    max-height: 500%; /* Adjust as necessary for the content */
}

#contact-card-a a {
	min-width: 100%;
    font-size: 200%; /* Increase font size relative to parent */
    /*color: #fff; /* Ensuring link text is also white for better visibility */
}

#contact-card-a.shrink {
    margin-top: 1%; /* Reduced padding when scrolled */
}

.contact-card-a {
    display: flex;
    justify-content: center; /* Center the buttons within the card */
    align-items: center; /* Center the buttons vertically */
    flex-wrap: wrap; /* Allow the buttons to wrap to the next line if there is not enough space */
    max-width: 20%; /* Maximum width for the card container */
    margin: 0 auto; /* Center the card container horizontally */
}

.contact-button-a {
    padding: 1% 1.5%; /* Padding for the buttons */
    border-radius: 0.5%; /* Rounded corners */
	background-color: rgba(0, 0, 0, 0.7); /*
    color: #000; /* Black text color */
    text-decoration: none; /* No underline */
    box-shadow: 0 0.2% 0.5% rgba(0,0,0,0.2); /* Optional shadow for depth */
    display: flex;
    align-items: center;
    width: 20%; /* Each button takes up 50% of the .contact-card container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.contact-button-a img {
    width: 1em; /* Fixed size for the icons */
    height: 1em; /* Fixed size for the icons */
    margin-right: 0.5%; /* Space between the icon and the text */
}

.contact-button-a:hover {
    background: #f0f0f0; /* Lighter background on hover */
}

/* -------------------------- arxiv and paper button section CSS ------------------------- */

.arxiv-button {
    display: inline-flex; /* Aligns image and text side by side */
    align-items: center; /* Vertically centers the items in the button */
    padding: 5px 10px; /* Padding around the text and image */
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 15px; /* Rounded corners for the button */
    border: none; /* No border */
    text-decoration: none; /* No underline on the text */
    color: #000; /* Black text */
    font-family: Arial, sans-serif; /* Font of the text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.arxiv-logo {
    width: 20px; /* Width of the logo */
    height: auto; /* Auto height to maintain aspect ratio */
    margin-right: 5px; /* Space between the logo and text */
}

.arxiv-button:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
    text-decoration: none; /* Ensure text doesn't get underlined on hover */
}


.paper-button {
    display: inline-flex; /* Aligns image and text side by side */
    align-items: center; /* Vertically centers the items in the button */
    padding: 5px 10px; /* Padding around the text and image */
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 15px; /* Rounded corners for the button */
    border: none; /* No border */
    text-decoration: none; /* No underline on the text */
    color: #000; /* Black text */
    font-family: Arial, sans-serif; /* Font of the text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.paper-logo {
    width: 20px; /* Width of the logo */
    height: auto; /* Auto height to maintain aspect ratio */
    margin-right: 5px; /* Space between the logo and text */
}

.paper-button:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
    text-decoration: none; /* Ensure text doesn't get underlined on hover */
}

/* -------------------------- Mobile friendly stuff ------------------------- */
img {
    max-width: 100%;
    height: auto;
}



.section {
    display: flex;
    flex-direction: column;
	padding: 1%; /* Existing padding */
}

@media screen and (max-width: 768px) {
    .bio-content, .education-content, .employment-content, .publications-content {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .name-box h1 {
        font-size: 3em;
    }
    .name-box p {
        font-size: 1.5em;
    }
}