/* Background team image */
.bg-hero {
  background-image: url('https://static.igem.wiki/teams/5253/team-images/team-picture.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 615px;
  margin-top: 50px; /* Adds 10px of space above the container */
}

/* Header image container */
.header-image {
  display: flex;
  align-items: center; /* vertically centers the content */
}

.header-image img {
  width: 40%; /* adjust as needed */
  max-width: 100%;
  height: auto;
  padding-bottom: 50px;
}

.header-image-text {
  width: 50%; /* adjust as needed */
  padding-left: 30px; /* adds some space between the image and the text */
  padding-right: 60px;
  font-size: 20px; 
  text-align: center;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Text before slideshow */
.slideshow-text-description {
  text-align: center;
  font-size: 25px; 
  margin: 0;
  color: #25336b;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* --------------------- Slide show -------------------------- */
.slideshow-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto; /* Center horizontally */
  top: 50%;
}

.slideshow-container {
  position: relative;
  width: 85%;
  max-width: 1000px;
  margin: 0 auto; /* Center horizontally */
  top: 50%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 50px;
  border: 5px solid #FFDE5A; /* Border around the entire slideshow */
  background-color: #FFDE5A;
}

.slides-wrapper {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.slide {
  min-width: 33.3333%; /* 100% / 3 images */
  width: 33.3333%; /* Ensure each slide takes up one-third of the container */
  box-sizing: border-box;
  height: 510px; /* Changed from fixed height to accommodate description */
  display: flex;
  flex-direction: column; /* Allows image and description to stack */
  align-items: center;
  justify-content: flex-start; /* Align items to start to prevent overlap */
  border-right: 5px solid #FFDE5A; /* Border between images */
  border-radius: 10px; /* Rounded corners for slides */
}

/* Styling for images inside the slides */
.slide img {
  width: 100%;
  height: 220px; /* Fixed height for images */
  object-fit: cover; /* Maintain aspect ratio while covering the container */
  border-radius: 10px;
  display: block; /* Remove extra space below the image */
}

/* Description styling */
.description {
  text-align: center;
  font-size: 18px;
  padding: 10px 0;
  color: #25336b;
  background-color: #ffeeb3;
  border-radius: 10px; /* Rounded corners on all sides */
  width: 100%;
  height: 290px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  box-sizing: border-box;
  margin-bottom: 5px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Remove border from the last slide */
.slide:last-child {
  border-right: none;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: #25336b;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  font-size: 30px; /* Adjust size as needed */
  z-index: 10; /* Ensure it's above other content */
}

.prev {
  left: 10px; /* Position the left arrow outside the slideshow container */
  padding-left: 35px;
}

.next {
  right: 10px; /* Position the right arrow outside the slideshow container */
  padding-right: 35px;
}

.prev:hover, .next:hover {
  transform: translateY(-50%) scale(1.2); /* Scale up by 20% */
}


/* Header*/
.header {
  text-align: center;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Text click in cards */
.text-click-cards {
  text-align: center;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}


/* --------------------- Flip cards -------------------------- */

/* Container for the cards */
.card-container {
  display: flex;
  flex-direction: column; /* Stack card rows vertically */
  align-items: center; /* Center the rows horizontally */
  padding: 15px; /* Padding around the container */
  margin: 0 auto; /* Center the container itself on the page */
  gap: 20px; /* Space between rows */
}

/* Row for cards */
.card-row {
  display: flex;
  justify-content: center; /* Center the cards in the row */
  gap: 110px; /* Space between cards in the same row */
  margin-bottom: 50px; /* Space between rows */
  flex-wrap: wrap; /* Allow rows to wrap if there are more cards */
}

/* The flip card container */
.flip-card {
  background-color: transparent;
  width: 380px;
  height: 500px;
  perspective: 1000px; /* 3D effect */
  transition: transform 0.3s; /* Smooth transition for the scaling effect */
  cursor: pointer; /* Indicate the card is clickable */
}

/* Enlarge the card slightly when hovered */
.flip-card:hover {
  transform: scale(1.05);
}

/* Styles the card and add a pointer cursor, so the user knows that the content is clickable */
label {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 15px; /* Rounded corners for the card */
}

/* Do a horizontal flip when the flip-card-inner has the class 'flipped' */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 15px; /* Rounded corners for front and back */
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center;
  align-items: center;
  background-color: #25336b;
  color: black;
  border-radius: 15px; /* Rounded corners */
  padding: 20px; /* Padding to prevent content from touching edges */
  box-sizing: border-box; /* Ensure padding is included in width and height */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* square container for the image */
.flip-card-front .square {
  width: 300px; /* Diameter of the circle */
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* Optional: background color for the circle */
  margin-bottom: 20px; /* Space between the circle and text */
  border: 5px solid #FFDE5A; /* White border around the circle */
  border-radius: 15px; /* Rounded corners */
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Make sure the image covers the whole square */
}

/* Styling for h1 */
.flip-card-front h1 {
  font-size: 23px !important; /* Font size for the team member name */
  margin: 0;
  color: white;
}

/* Styling for p elements */
.flip-card-front p {
  font-size: 15px !important; /* Font size for subgroups */
  margin: 0;
  color: white;
}

/* Style the back side */
.flip-card-back {
  background-color: white; /* Default background color */
  transform: rotateY(180deg);
  border-radius: 15px; /* Rounded corners */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  overflow: hidden; /* Ensure content does not overflow */
}

/* Top section with blue background */
.top-section {
  background-color: #25336b;
  color: white;
  padding: 20px;
  border-bottom: 1px solid white; /* Optional: border to separate top section from bottom */
  border-radius: 15px; /* Rounded corners */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  width: 100%; /* Ensure it spans the full width */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Header on the back */
.flip-card-back h1 {
  margin-bottom: 15px; /* Space between the header and the image */
  font-size: 25px; /* Font size for the team member name */
}

/* Container for the image and text */
.back-details {
  display: flex;
  align-items: center; /* Center vertically */
  gap: 15px; /* Space between image and text */
}

/* Style for the small image on the back */
.back-image {
  width: 100px; /* Width of the small rectangle image */
  height: 100px; /* Height of the small rectangle image */
  overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
  border-radius: 10px; /* Adjust as needed for rounded corners */
  padding: 2px; /* Space between the image and the border */
  background-color: #FFDE5A; /* Color of the border */
  display: flex;
  justify-content: center; /* Center the image within the border */
  align-items: center; /* Center the image vertically */
}

/* Style for the image inside the back-image container */
.back-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the container */
  border-radius: 10px; /* Match the container’s border-radius */
}

/* Text content next to the image */
.back-text {
  flex: 1; /* Allow text to take the remaining space */
}

/* Style for the study subject text */
.study-subject {
  font-size: 15px; /* Font size for the study subject */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.bottom-section {
  text-align: center; 
  background-color: white; /* Ensure it's white */
  margin-top: 15px; /* Space between the text and top section */
  margin-bottom: 15px; /* Space between the text and bottom section */
  margin-left: 15px; /* Space between the text and sides */
  margin-right:  15px; /* Space between the text and sides */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}



/* --------------------- Static cards -------------------------- */

/* Container for cards */
.static-card-container {
  display: flex;
  flex-direction: column; /* Stack card rows vertically */
  align-items: center; /* Center the rows horizontally */
  padding: 15px; /* Padding around the container */
  margin: 0 auto; /* Center the container itself on the page */
  gap: 20px; /* Space between rows */
}

/* Row for cards */
.static-card-row {
  display: flex;
  justify-content: center; /* Center the cards in the row */
  gap: 110px; /* Space between cards in the same row */
  margin-bottom: 50px; /* Space between rows */
  flex-wrap: wrap; /* Allow rows to wrap if there are more cards */
}

/* Styling for the static card */
.static-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #25336b;
  color: white;
  width: 380px;
  height: 470px;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center; /* Center the text */
  cursor: default; /* Remove pointer cursor since it's not clickable */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* square container for the image */
.static-card .square {
  width: 300px;
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-bottom: 20px;
  border: 5px solid #FFDE5A;
  border-radius: 15px; /* Rounded corners */
}

.static-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Make sure the image covers the whole square */
}

/* Styling for h1 */
.static-card h1 {
  font-size: 23px;
  margin: 0;
  color: white;
}

/* Styling for p elements */
.static-card p {
  font-size: 15px;
  margin: 5px 0;
  color: white;
}