/* General styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Heading styling */
h2 {
  font-size: 32px; /* Increase font size */
  text-decoration: underline; /* Add underline */
  margin-bottom: 40px; /* Increased spacing below */
  text-align: center; /* Center-align for uniformity */
}


body {
  font-family: 'Nunito', sans-serif;
  background-color: #ffffff;
  color: #000000;
}

/* Header styling */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #86d3ff;
  padding: 10px 120px;
}

.header a {
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 24px;
  line-height: 25px;
  border-radius: 4px;
}

.header a:hover {
  color: grey;
}

.logo-image {
  width: 80px;
  height: auto;
  margin-right: 30px;
  margin-left: 30px;
}

.header-right {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

.header-right a {
  margin: 0 20px;
}

/* Intro Section */
.intro {
  margin: 40px 120px;
}

.text-content {
  width: 100%;
  text-align: left;
  padding-left: 120px; /* Align with other text */
}

.intro h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.intro .subheading {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Projects Section */
.projects {
  max-width: 1200px;
  margin: 0 auto;
}

/* Two-column layout for research and hackathon projects */
.research-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 50px;
}

.research-item {
  flex: 0 1 48%; /* Half width for two items per row */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

/* Project image styling */
.project-image img,
.research-item .project-image img {
  width: 500px; /* Fixed width */
  height: 300px; /* Fixed height */
  object-fit: cover; /* Maintain aspect ratio and cover the area */
  margin-bottom: 10px;
  border-radius: 15px;
}

/* Description styling */
.project-description,
.research-item .project-description {
  text-align: left;
  font-size: 16px;
  width: 100%;
}

.project-description h3,
.research-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.project-description p,
.research-item p {
  font-size: 16px;
  line-height: 1.6;
}

/* Single-column layout for project items */
.column-layout {
  display: flex;
  flex-direction: row; /* Set image and description side by side */
  align-items: center;
  margin-bottom: 50px;
}

.column-layout .project-image {
  margin-right: 20px; /* Space between image and description */
  flex: 0 1 50%; /* Limit the image to half of the container width */
}

.column-layout .project-description {
  flex: 1; /* Let the description take up remaining space */
  text-align: left; /* Align text to the left */
}

/* Responsive styling */
@media screen and (max-width: 768px) {
  .research-content {
    flex-direction: column; /* Stack items vertically on small screens */
  }

  .research-item {
    flex: 1 1 100%; /* Full width on smaller screens */
  }

  .project-image img,
  .research-item .project-image img {
    width: 100%;
    height: auto;
  }

  .column-layout {
    flex-direction: column; /* Stack image and text vertically on smaller screens */
  }

  .project-description,
  .research-item .project-description {
    width: 100%;
    text-align: center;
  }

  .research-item {
    margin-bottom: 40px;
  }
}
/* Responsive styling for mobile */
@media screen and (max-width: 768px) {
  .intro h1 {
    font-size: 32px; /* Adjust font size for smaller screens */
    margin-bottom: 8px; /* Reduce margin */
    text-align: center; /* Center-align for mobile */
  }

  .intro .subheading {
    font-size: 24px; /* Adjust font size for smaller screens */
    font-weight: bold;
    margin-bottom: 16px; /* Adjust spacing for smaller screens */
    text-align: center; /* Center-align for mobile */
  }

  .text-content {
    padding-left: 0; /* Remove padding on smaller screens */
  }
}