/* General Styling */

/* General link styling */
a {
  color: blue; /* Set the link color to blue */
  text-decoration: none; /* Remove the underline (optional) */
}



/* Default styling for all devices */
body {
  margin: 0;
  padding: 0;
}

/* Add borders for larger screens (laptops and above) */
@media (min-width: 768px) {
  main {
    border-left: 20px ; /* Add left border */
    border-right: 20px ; /* Add right border */
    margin: 0 auto;
    max-width: 1200px; /* Optional: Limit the content width */
  }
}

/* Remove borders for smaller screens (phones) */
@media (max-width: 767px) {
  main {
    border: none;
    margin: 0;
  }
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
}

header {
  background: #154c79;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  text-decoration: underline;
}

main {
  padding: 20px;
}

footer {
  background: #154c79;
  color: white;
  text-align: center;
  padding: 0px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/*Home page*/
/* Full-page landscape image styling */
.hero-image {
  max-width: 100%; /* Limit the width to the container or page width */
  height: auto;    /* Maintain the aspect ratio */
  display: block;  /* Ensure proper block-level behavior */
  margin: 0 auto;  /* Center the image horizontally (optional) */
}

/* Container for the figure and text section */
.figure-text-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: #ffffff; /* Light background for contrast */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Figure (image) styling */
.figure-text-section img {
  width: 20%; /* Set width of the image */
  height: auto; /* Maintain aspect ratio */
  border-radius: 80%; /* Make the image oval */
  object-fit: cover; /* Ensure the image fits nicely in the oval frame */
  border: 3px solid #ddd; /* Optional: Add a border around the image */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for depth */
}

/* Text styling */
.figure-text-section .text-content {
  flex: 1; /* Take up remaining space */
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Responsive styling for smaller screens */
@media (max-width: 767px) {
  .figure-text-section {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align content */
    text-align: center; /* Center-align text */
  }

  .figure-text-section img {
    width: 50%; /* Adjust image size for smaller screens */
    margin-bottom: 0; /* Space between image and text */
  }

  .figure-text-section .text-content {
    width: 100%; /* Ensure text takes full width */
    font-size: 14px; /* Optional: Slightly smaller font size for readability */
  }
}

/* Container for the research boxes */
.research {
  display: flex;
  flex-wrap: wrap; /* Wrap to the next row if necessary */
  gap: 20px; /* Space between the boxes */
  justify-content: center; /* Center the boxes horizontally */
}

/* Individual research boxes */
.research-box {
  width: 200px; /* Fixed width for each box */
  text-align: center; /* Center align text */
  padding: 10px; /* Padding inside the box */
  background-color: #f9f9f9; /* Light background for the box */
  border: 1px solid #ddd; /* Border around the box */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Images inside the research boxes */
.research-box img {
  width: 100%; /* Full width of the box */
  height: auto; /* Maintain aspect ratio */
  border-radius: 4px; /* Rounded corners for the image */
  margin-bottom: 10px; /* Space between image and text */
}

/* Paragraph text inside the research boxes */
.research-box p {
  font-size: 14px; /* Adjust text size */
  color: #333; /* Text color */
  margin: 0; /* Remove default margin */
}

/* Specific Styling for Publications */
.publication {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.publication img {
  width: 300px;
  height: auto;
  border-radius: 8px;
}

.publication-text {
  flex: 1;
}

.publication-text h3 {
  margin: 0;
}

.publication-text p {
  margin: 5px 0;
}

.publication-text a {
  color:  blue;
  text-decoration: none;

}

.publication-text a:hover {
  text-decoration: underline;
}

/* Responsive styling for mobile devices */
@media (max-width: 767px) {
  .publication {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align content */
    text-align: center; /* Center-align text */
  }

  .publication img {
    width: 80%; /* Reduce image width to fit nicely on smaller screens */
    margin-bottom: 10px; /* Add spacing between image and text */
  }

  .publication-text {
    width: 100%; /* Ensure the text takes full width */
  }
}

body {
  scroll-behavior: smooth; /* Ensures smooth scrolling globally */
}