/* Background team image */
.bg-hero { 
  background-image: url('https://static.igem.wiki/teams/5253/home-page/logo.png');
  background-size: 15% auto;
  background-position: bottom right;
  background-repeat: no-repeat;
  height: 300px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .bg-hero {
      background-size: 20% auto; /* Make the image cover the full width */
      background-position: bottom right; /* Align to the bottom */
      height: 250px; /* Reduce height for smaller screens */
      padding-left: 0%;
  }
}

@media (max-width: 480px) {
  .bg-hero {
      background-size: 20% auto; /* Ensure the image fully covers smaller devices */
      background-position: right center; /* Keep it centered and aligned at the bottom */
      height: 200px; /* Further reduce the height */
  }
} 

/* CSS for the title block */
.title-block h1 {
  color: #25336b; /* Replace with your desired color */
  font-size: 60px; /* Adjust as needed */
  font-weight: bold; /* Adjust as needed */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.introduction {
  color: #25336b; /* Replace with your desired color */
  font-size: 45px; /* Adjust as needed */
  font-weight: normal; /* Adjust as needed */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}


/* Description styling */
.description {
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  color: #25336B;
  font-weight: bold;
  font-size: 40px;
}

/* Logo container */
.logo-container {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0px;
  width: 100%;
}

/* Logo image styling */
.logo-image {
  max-width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
.logo-image:hover {
  transform: scale(1.1);
}

/* Text box styling */
.text-box {
  position: absolute;
  text-align: left; /* Align text to the left */
  width: 200px; /* Adjust the width of the text box */
  background-color: #25336B; /* Light background for readability */
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  color: white; /* Custom text color */
  border-radius: 8px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Optional box shadow for effect */
  opacity: 0; /* Hide text box initially */
  visibility: hidden; /* Make it invisible initially */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Positioning for the left text box */
.left-box {
  left: -2%; /* Position to the left of the logo */
  top: 135%;
  transform: translateY(-50%);
}

/* Positioning for the right text box */
.right-box { /* Now it's the middle box*/
  right: 55%; /* Position to the right of the logo */
  top: 120%;
  transform: translateY(-50%);
}

/* Positioning for the bottom text box */
.bottom-box {
  right: -5%;
  top: 93%;
  transform: translateX(-50%);
  position: absolute;
  width: 200px;
  padding: 10px;
  overflow: hidden;
}

/* Positioning for the bottom-left text box */
.bottom-left-box {
  left: 65%;
  top: 93%;
  transform: translateX(-50%);
  position: absolute;
  width: 200px; /* Adjusted width */
  padding: 10px;
  overflow: hidden;
}


/* Positioning for the uterus image */
.uterus {
  position: absolute;
  top: 50%; /* Initially centered vertically */
  left: 50%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 210px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
  z-index: 10; /* Ensure it appears above other elements */
  transition: transform 2s ease; /* Transition duration for movement */
}

/* Positioning and transition for rectangle2 (ENDO) */
.rectangle2 {
  position: absolute;
  top: 50%; /* Initially centered vertically */
  left: 50%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 300px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
  transition: transform 2s ease; /* Transition duration for movement */
  z-index: 9; /* Ensure it appears below other elements */
}

/* Styling for the blue rectangle image */
.blue-rectangle {
  position: absolute;
  top: 50%; /* Initially centered vertically */
  left: 50%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 250px;
  height: auto;
  z-index: 8; /* Ensure it appears below other elements */
  transition: transform 2s ease; /* Transition duration for movement */
}

/* Move uterus to the left (480px from center) */
.move-left {
  transform: translate(calc(-50% - 480px), -50%);
}

/* Move blue rectangle (ERASE) 400px to the right */
.move-right {
  transform: translate(calc(-50% + 290px), -10%);
}

/* Move rectangle2 (ENDO) 100px to the left */
.move-left-small {
  transform: translate(calc(-50% - 180px), -30%);
}

/* Spacing before the footer */
.footer-spacing {
  height: 500px;
}

/* General styling for mobile devices */
@media only screen and (max-width: 800px) {

/* Reset default padding and margin for body */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensure padding/margin adjustments apply uniformly */
}

/* Description styling */
.description {
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  color: #25336B;
  font-weight: bold;
  font-size: 12px;
}

/* Logo container */
.logo-container {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0px;
  width: 100%;
}

/* Logo image styling */
.logo-image {
  max-width: 30%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
.logo-image:hover {
  transform: scale(1.1);
}

/* Text box styling */
.text-box {
  position: absolute;
  text-align: left; /* Align text to the left */
  font-size:10px;
  width: 100px; /* Adjust the width of the text box */
  background-color: #25336B; /* Light background for readability */
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  color: white; /* Custom text color */
  border-radius: 8px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Optional box shadow for effect */
  opacity: 0; /* Hide text box initially */
  visibility: hidden; /* Make it invisible initially */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Positioning for the left text box */
.left-box {
  left: 2%; /* Position to the left of the logo */
  top: 205%;
  width: 120px;
  transform: translateY(-50%);
}

/* Positioning for the uterus image */
.uterus {
  position: absolute; /* Absolute positioning relative to the parent container */
  top: 75%; /* Initially centered vertically */
  left: 50%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 90px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
  z-index: 10; /* Ensure it appears above other elements */
  transition: transform 2s ease; /* Transition duration for movement */
}

/* Positioning for the right text box */
.right-box {
  right: 48%; /* Position to the right of the logo */
  top: 170%;
  transform: translateY(-50%);
}

/* Positioning and transition for rectangle2 */
.rectangle2 { /* ENDO */
  position: absolute;
  top: 90%; /* Initially centered vertically */
  left: 40%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 110px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
  transition: transform 2s ease; /* Transition duration for movement */
  z-index: 9; /* Ensure it appears below other elements */
}

/* Positioning for the bottom text box */
.bottom-box {
  right: -18%;
  top: 121%;
  transform: translateX(-50%);
  position: absolute;
  width: 110px;
  padding: 10px;
  overflow: hidden;
}

/* Positioning for the bottom-left text box */
.bottom-left-box {
  left: 70%;
  top: 120%;
  transform: translateX(-50%);
  position: absolute;
  width: 100px; /* Adjusted width */
  padding: 10px;
  overflow: hidden;
}
/* Styling for the blue rectangle image */
.blue-rectangle { /* ERASE */
  position: absolute;
  top: 90%; /* Initially centered vertically */
  left: 47%; /* Initially centered horizontally */
  transform: translate(-50%, -50%);
  width: 100px;
  height: auto;
  z-index: 8; /* Ensure it appears below other elements */
  transition: transform 2s ease; /* Transition duration for movement */
}

/* Centered state for uterus and rectangles */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease; /* Smooth transition to the final position */
}

/* Move uterus to the left (80px from center) */
.move-left {
  transform: translate(calc(-50% - 180px), -50%);
}

/* Move rectangle2 (ENDO) 100px to the left */
.move-left-small {
  transform: translate(calc(-50% + 1px), -53%);
}

/* Move rectangle2 to the right (80px from center) */
.move-right {
  transform: translate(calc(-50% + 180px), -50%);
}

/* Spacing before the footer */
.footer-spacing {
  height: 400px !important;
}
}

/* For extra small screens (like very small phones) */
@media only screen and (max-width: 480px) {

  /* Further reduce description font size */
  .description {
    font-size: 16px;
  }

  /* Further reduce logo size */
  .logo-image {
    max-width: 40%;
  }

  /* Adjust text box sizes for smaller phones */
  .text-box {
    font-size: 14px; /* Smaller text for small screens */
    padding: 12px; /* Adjust padding */
  }

  /* Reduce footer spacing even more */
  .footer-spacing {
    height: 50px;
  }

  /* Further adjust movements for uterus and rectangles on very small screens */
  .move-left {
    transform: translate(calc(-50% - 144px), -50%); /* 60% less distance */
  }

  .move-down {
    transform: translate(-50%, calc(-50% + 81px)); /* 60% less distance */
  }

  .move-right {
    transform: translate(calc(-50% + 144px), -50%); /* 60% less distance */
  }
}