/* Go to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #c38254fb;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: background-color 0.5s, transform 0.5s;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

.back-to-top:hover {
  background-color: #f09b5efb;
  transform: scale(1.1);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* ===================== Header ============ */

/* ============= Patron =========== */
.patron-section {
  margin-top: 0px; /* Space between navbar and patron section */
  box-shadow: none;
}

/* ============= Advisory Comittee =============== */
.advisory-committee-section {
  background: linear-gradient(135deg, #e0f7fa, #ffffff);
  padding: 60px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(3, 3, 3, 0.1); /* Subtle shadow for depth */
  margin-top: 20px;
  text-align: center; /* Center-align content */
}

/* Section Title */
.advisory-committee-section h3 {
  font-size: 2.2rem; /* Adjust title size */
  font-weight: 700; /* Bold for emphasis */
  color: #2c3e50; /* Dark color for text */
  margin-bottom: 40px; /* Space below title */
  text-transform: uppercase; /* Uppercase heading */
  letter-spacing: 1px; /* Slight letter spacing */
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Advisory Committee Grid */
.advisory-committee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns by default */
  gap: 30px; /* Spacing between cards */
  justify-items: center; /* Center the items in each cell */
  max-width: 1200px; /* Limiting the width */
  margin: 0 auto; /* Center the grid */
}

/* Committee Member */
.committee-member {
  display: flex; /* Flexbox for consistent size */
  flex-direction: column;
  justify-content: space-between;
  text-align: center; /* Center the content */
  padding: 10% 15px;
  background-color: #fff;
  border-radius: 10px; /* Rounded corners for each card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  height: 150px; /* Set height for consistent box size */
  width: 100%; /* Full width */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Name Styling */
.committee-member h4 {
  font-size: 1.25rem; /* Slightly larger font for the name */
  font-weight: bold; /* Bold name */
  color: #333; /* Dark color */
  margin-bottom: 5px; /* Reduced space below the name */
}

/* Position Styling */
.committee-member p {
  font-size: 1rem; /* Regular font size */
  color: #666; /* Grey text color */
  margin: 0; /* Remove default margin */
}

/* Hover Effect */
.committee-member:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-10px); /* Lift the card on hover */
}

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

/* ===================== Project Investigator/Directors ============ */
.project-investigator-section {
  background: linear-gradient(
    135deg,
    #f0f4f8,
    #ffffff
  ); /* Light gradient background */
  padding: 60px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(3, 3, 3, 0.1); /* Subtle shadow for depth */
  margin-top: 20px;
  text-align: center; /* Center-align content */
}

.project-investigator-section h3 {
  font-size: 2.2rem; /* Adjust title size for large screens */
  font-weight: 700; /* Bold for emphasis */
  color: #2c3e50; /* Dark color for text */
  margin-bottom: 40px; /* Space below title */
  text-transform: uppercase; /* Uppercase heading */
  letter-spacing: 1px; /* Slight letter spacing */
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
/* Grid Layout */
.project-investigator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns for larger screens */
  gap: 30px; /* Spacing between cards */
  max-width: 1200px; /* Limit the width */
  margin: 0 auto; /* Center the grid */
}

/* Project Card */
.project-card {
  display: flex; /* Flexbox for consistent size */
  flex-direction: column;
  justify-content: center;
  text-align: center; /* Center the content */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px; /* Rounded corners for each card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Consistent Card Size */
.project-card {
  min-height: 200px; /* Consistent height for all cards */
}

/* Name Styling */
.project-card h4 {
  font-size: 1.25rem; /* Slightly larger font for the name */
  font-weight: bold; /* Bold name */
  color: #333; /* Dark color */
  margin-bottom: 5px; /* Reduced space below the name */
}

/* Position Styling */
.project-card p {
  font-size: 1rem; /* Regular font size */
  color: #666; /* Grey text color */
  margin: 0; /* Remove default margin */
  line-height: 1.4; /* Improved line spacing */
}

/* Hover Effect */
.project-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-10px); /* Lift the card on hover */
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .project-investigator-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
  }
}

@media (max-width: 768px) {
  .project-investigator-grid {
    grid-template-columns: repeat(
      1,
      1fr
    ); /* Single column for smaller screens */
    gap: 20px; /* Adjust gap for smaller layouts */
  }
  .project-investigator-section h3 {
    font-size: 1.8rem; /* Slightly smaller for medium screens */
    margin-bottom: 30px; /* Adjust margin for balance */
  }

  .project-investigator-section {
    padding: 40px 15px; /* Reduce padding for smaller devices */
  }

  .project-card {
    padding: 15px; /* Adjust padding for smaller cards */
  }
}

@media (max-width: 480px) {
  .project-investigator-grid {
    gap: 15px; /* Reduce gap for very small screens */
  }
  .project-investigator-section h3 {
    font-size: 1.5rem; /* Smaller font size for small screens */
    margin-bottom: 20px; /* Reduce bottom spacing */
    padding-bottom: 5px; /* Adjust padding for small screens */
  }
  .project-card h4 {
    font-size: 1.1rem; /* Adjust title size for very small screens */
  }

  .project-card p {
    font-size: 0.9rem; /* Smaller text size for very small screens */
  }
}

/*================ Organising Secretary Section =============== */
.organising-secretary-section {
  background: linear-gradient(
    135deg,
    #fefefe,
    #f8f9fa
  ); /* Light gradient background */
  padding: 60px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(3, 3, 3, 0.1); /* Subtle shadow for depth */
  margin-top: 20px;
  text-align: center; /* Center-align content */
}

/* Section Title */
.organising-secretary-section h3 {
  font-size: 2.2rem; /* Adjust title size */
  font-weight: 700; /* Bold for emphasis */
  color: #2c3e50; /* Dark color for text */
  margin-bottom: 30px; /* Space below title */
  text-transform: uppercase; /* Uppercase heading */
  letter-spacing: 1px; /* Slight letter spacing */
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Grid for Cards */
.organising-secretary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns by default */
  gap: 30px; /* Spacing between cards */
  max-width: 800px; /* Limiting the width */
  margin: 0 auto; /* Center the grid */
}

/* Organising Card */
.organising-card {
  display: flex; /* Flexbox for consistent size */
  flex-direction: column;
  justify-content: center;
  text-align: center; /* Center the content */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px; /* Rounded corners for each card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  height: 150px; /* Fixed height for consistent box size */
  width: 100%; /* Full width */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Name Styling */
.organising-card h4 {
  font-size: 1.25rem; /* Slightly larger font for the name */
  font-weight: bold; /* Bold name */
  color: #333; /* Dark color */
  margin-bottom: 5px; /* Reduced space below the name */
}

/* Position Styling */
.organising-card p {
  font-size: 1rem; /* Regular font size */
  color: #666; /* Grey text color */
  margin: 0; /* Remove default margin */
}

/* Hover Effect */
.organising-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-10px); /* Lift the card on hover */
}

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

/* ========== Institutional Advisory Committee =========  */
/* Institutional Advisory Section */
.institutional-advisory-section {
  background: linear-gradient(
    135deg,
    #e8f0fe,
    #ffffff
  ); /* Light gradient background */
  padding: 60px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(3, 3, 3, 0.1); /* Subtle shadow for depth */
  margin-top: 20px;
  text-align: center; /* Center-align content */
}

/* Section Title */
.institutional-advisory-section h3 {
  font-size: 2.2rem; /* Adjust title size */
  font-weight: 700; /* Bold for emphasis */
  color: #2c3e50; /* Dark color for text */
  margin-bottom: 40px; /* Space below title */
  text-transform: uppercase; /* Uppercase heading */
  letter-spacing: 1px; /* Slight letter spacing */
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Advisory Committee Grid */
.institutional-advisory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns by default */
  gap: 30px; /* Spacing between cards */
  max-width: 1200px; /* Limiting the width */
  margin: 0 auto; /* Center the grid */
}

/* Institutional Card */
.institutional-card {
  display: flex; /* Flexbox for consistent size */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; /* Center the content */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px; /* Rounded corners for each card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  height: 120px; /* Fixed height for consistent box size */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Name Styling */
.institutional-card h4 {
  font-size: 1.25rem; /* Slightly larger font for the name */
  font-weight: bold; /* Bold name */
  color: #333; /* Dark color */
  margin: 0; /* Remove default margin */
}

/* Hover Effect */
.institutional-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-10px); /* Lift the card on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .institutional-advisory-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
  }
}

@media (max-width: 480px) {
  .institutional-advisory-grid {
    grid-template-columns: 1fr; /* Single column on very small screens */
  }
}

/* ========== Organizing Committee  ========= */
/* Organizing Committee Section */
.organizing-committee-section {
  background: linear-gradient(
    135deg,
    #f9f9f9,
    #ffffff
  ); /* Light gradient background */
  padding: 60px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(3, 3, 3, 0.1); /* Subtle shadow for depth */
  margin-top: 20px;
  text-align: center; /* Center-align content */
}

/* Section Title */
.organizing-committee-section h3 {
  font-size: 2.2rem; /* Adjust title size */
  font-weight: 700; /* Bold for emphasis */
  color: #2c3e50; /* Dark color for text */
  margin-bottom: 40px; /* Space below title */
  text-transform: uppercase; /* Uppercase heading */
  letter-spacing: 1px; /* Slight letter spacing */
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Committee Grid */
.organizing-committee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns by default */
  gap: 20px; /* Spacing between cards */
  max-width: 1200px; /* Limiting the width */
  margin: 0 auto; /* Center the grid */
}

/* Committee Card */
.committee-card {
  background-color: #fff;
  border-radius: 10px; /* Rounded corners for each card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Name Styling */
.committee-card h4 {
  font-size: 1.25rem; /* Slightly larger font for the name */
  font-weight: bold; /* Bold name */
  color: #333; /* Dark color */
  margin: 0; /* Remove default margin */
}

/* Hover Effect */
.committee-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-10px); /* Lift the card on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .organizing-committee-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
  }
}

@media (max-width: 480px) {
  .organizing-committee-grid {
    grid-template-columns: 1fr; /* Single column on very small screens */
  }
}