/* Apply Montserrat font to specific <p> tags */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  height: 70vh;
  background: -webkit-linear-gradient(#8bedbb, #005c74);
  position: relative;
  overflow: hidden;
}

html {
  scroll-padding-top: 60px;
}

#shape {
  position: absolute;
  left: 0;
  bottom: -2vw;
}

@font-face {
  font-family: 'Sunborn';
  src: url('mit-mahe/static/Sunborn-SansOne.otf') format('otf'),
}

.banner-head {
  font-family: 'Sunborn', sans-serif;
}

.custom-banner {
  position: relative;
  height: 300px; /* Set the height of your banner */
  background-image: url('https://static.igem.wiki/teams/4641/wiki/newbanner.jpg'); /* Replace with your banner image URL */
  background-size: cover;
  background-position: center;
  color: #fff; /* Text color on the banner */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-banner img {
  width: 100%; /* Make the image cover the entire width of the banner */
  height: auto; /* Maintain the aspect ratio of the image */
}

header img:not(#shape) {
  position: absolute;
  left: 0;
}

header img:nth-child(1) {
  opacity: 0.4;
  bottom: -0.1vw;
  animation: move-1 5s infinite;
}

@keyframes move-1 {
  50% {
    transform: translateY(15px);
  }
}

header img:nth-child(2) {
  opacity: 0.3;
  bottom: 0.5vw;
  animation: move-2 4s infinite;
}

@keyframes move-2 {
  50% {
    transform: translateY(35px);
  }
}

header img:nth-child(3) {
  bottom: 0.3vw;
  opacity: 0.2;
  animation: move-3 3.5s infinite;
}

@keyframes move-3 {
  50% {
    transform: translateY(25px);
  }
}

header img:nth-child(4) {
  bottom: 0.1vw;
  opacity: 0.3;
  animation: move-4 3s infinite;
}

@keyframes move-4 {
  50% {
    transform: translateY(20px);
  }
}

header h1 {
  width: 100%;
  font-family: "Poppins", sans-serif;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  font-size: 8vmin;
  text-align: left;
  margin-left: 30px;
  color: #000000;
}

.sidebar {
  width: 210px;
  background-color: #000000;
  /* Bootstrap background color */
  padding: 20px;
  height: 100%;
  transition: top 0.3s;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #d4ffe9 line-height: 1.5;
}

.content {
  margin-left: 100px;
  /* Adjust margin to accommodate the sidebar width */
  padding: 0px;
}

.whole-thing {
  display: flex;
  margin: 0;
}

.content {
  flex: 1;
  padding: 1px;
}

p.MAIN-STUFF {
  font-family: 'Montserrat', sans-serif;
  /* Replace 'Your Main Font' with your preferred font */
  font-size: 27px;
  /* Adjust the font size as needed */
  font-weight: bold;
  /* Optional: Set the font weight */
  color: #333;
  /* Optional: Set the text color */
  background: -webkit-linear-gradient(#8bedbb, #005c74);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CSS Styles for paragraphs with class "sub-stuff" */
p.sub-stuff {
  font-family: 'Poppins', sans-serif;
  /* Replace 'Your Sub Font' with your preferred font */
  font-size: 20px;
  /* Adjust the font size as needed */
  color: #666;
  /* Optional: Set the text color */
}





.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: black;
  border-radius: 50%;
}