@font-face {
  font-family: "Bricolage Grotesque Bold";
  src: url(https://static.igem.wiki/teams/5240/fonts/bricolagegrotesque-bold.ttf);
}

@font-face {
  font-family: "Bricolage Grotesque Medium";
  src: url(https://static.igem.wiki/teams/5240/fonts/bricolagegrotesque-medium.ttf);
}

@font-face {
  font-family: "Inter Semi Bold";
  src: url(https://static.igem.wiki/teams/5240/fonts/inter-28pt-semibold.ttf);
}

@font-face {
  font-family: "Inter";
  src: url(https://static.igem.wiki/teams/5240/fonts/inter-28pt-regular.ttf);
}

@font-face {
  font-family: "Inter Italics";
  src: url(https://static.igem.wiki/teams/5240/fonts/inter-28pt-italic.ttf);
}

/* end font */

/* Gradient BG */
@keyframes gradient-bg {
  0% {
    background-position: 0% 0%, 0% 50%;
  }
  50% {
    background-position: 0% 0%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 0% 50%;
  }
}

/* End gradient bg */

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 100%;
  }
}

html,
body {
  height: 100%;
  margin: 0;
  /* padding-left: 2%;
  padding-right: 2%; */
  background-color: #d2d8d5; /* This should ensure the entire background is #d2d8d5 */
  color: #212a31;
  font-family: "Inter", sans-serif;
}

.left-aligned {
  margin-left: auto;
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  position: relative;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fade-in.in-view {
  transform: translateY(0px);
  transform: none;
  opacity: 1;
}

/* End Fade-in animation */

.pdf-container {
  margin-bottom: 5rem;
  width: 100%;
  height: 50rem;
  border-radius: 1rem;
  padding-left: 10%;
  padding-right: 10%;
}

body {
  padding-top: 56px;
}

.left-aligned {
  margin-left: auto;
}

.bg-dark {
  background-color: #212a31 !important;
}

.bg-hero {
  margin-bottom: 3rem;
  font-family: "Bricolage Grotesque Bold";
  color: #212a31;
  text-shadow: 6px 6px #a4b7c6;
  text-align: center;
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://static.igem.wiki/teams/5240/untitled-design.svg");
}

.bg-hero h1 {
  font-size: 10vw;
}

.container {
  width: 100vw;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.menu-container {
  width: 100vw;
  margin-right: auto;
  margin-left: auto;
  padding-left: 2%;
  padding-right: 2%;
  display: inline-flex;
}

.sticky-top {
  top: 5rem;
}

.side-nav-item {
  font-family: "Inter";
  color: #212a31;
}

h3 {
  font-family: "Bricolage Grotesque Medium";
  font-size: 1.5rem;
  color: #124e66;
}

.side-nav-link {
  text-decoration: none;
  color: #fff;
}

.side-nav-link:hover {
  color: #748d92;
  cursor: pointer;
}

.side-nav-link.active {
  color: #748d92;
}

.competition-results {
  padding-left: 9vw;
}

.page-right {
  padding-left: 20vw;
}

.side-nav ul {
  padding-left: 3vw;
  margin-left: 0;
  padding-top: 1rem;
  /*   padding:15px; */
  overflow: hidden;
}

.side-nav li {
  list-style: bullet;
  padding: 4px;
}

.side-nav sub {
  color: #fff;
  padding-left: 4vw;
  margin-left: 0;
  padding: 15px;
  font-size: 1.4rem;
}

/* Hero Section */
@keyframes loadName {
  0% {
    color: #748d93;
    transform: translateY(100px);
  }
  100% {
    color: #181818;
    transform: translateY(0);
  }
}

#hero-section {
  height: 100vh;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #d3d9d4;
  position: relative;
}

#molecule-canvas {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 1;
}

#intro-name {
  text-align: center;
  font-size: 10rem;
  padding-top: 30vh;
  animation-name: loadName;
  animation-duration: 1s;
  z-index: 2;
  position: relative;
  font-family: "Bricolage Grotesque Bold", sans-serif;
}

#tag-line {
  font-family: "Bricolage Grotesque Medium", sans-serif;
  text-align: center;
  font-size: 3rem;
  z-index: 2;
  position: relative;
}

/* h2 heading style */
h2 {
  font-family: "Bricolage Grotesque Medium";
  color: #124e66;
}

h3 {
  padding-left: 5%;
  padding-right: 5%;
}

.subtext {
  margin-left: 25px;
}

.subtitle-line {
  display: flex;
  align-items: flex-start;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
}

.subtitle-line:after {
  content: "";
  flex-grow: 1;
  height: 0.4rem;
  background: #124e66;
  margin: auto;
  margin-left: 20px;
}

.middle-line {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.middle-line:before,
.middle-line:after {
  content: "";
  flex-grow: 1;
  height: 0.4rem;
  background: #124e66;
  margin: auto;
  margin-left: 20px;
  margin-right: 20px;
}

.center-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh; /* Adjust this to control vertical space */
  text-align: center;
  margin: 0 auto;
  padding: 0 20px; /* Adds some padding on the sides */
}

.center-content {
  max-width: 900px; /* Adjust the width if needed */
  margin: 0 auto;
}

.subtitle-line {
  text-align: center; /* Center-aligns the subtitle */
}

p {
  font-family: "Inter", sans-serif;
  line-height: 1.5; /* Adds spacing between lines */
  padding-left: 5%;
  padding-right: 5%;
}

.image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Images for Team Section */
.team-images {
  display: flex;
  flex-direction: column;
  width: 95vw; /* Makes the images fill more of the page horizontally */
  margin: 0 auto;
  gap: 20px;
  margin-top: 30px;
}

.team-images img {
  width: 100%; /* Take up full width of the container */
  height: auto;
  object-fit: cover;
  border-radius: 10px; /* Adds slight rounding to the corners */
}

/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #fff7f3;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}
.bd-callout h4 {
  margin-bottom: 0.25rem;
}
.bd-callout p:last-child {
  margin-bottom: 0;
}
.bd-callout code {
  border-radius: 0.25rem;
}
.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}
.bd-callout-info {
  border-left-color: #5bc0de;
}
.bd-callout-warning {
  border-left-color: #f0ad4e;
}
.bd-callout-danger {
  border-left-color: #d9534f;
}

/* footer */
.footer-format {
  padding: 10px 20px; /* More padding for better spacing */
  background-color: #212a31; /* Dark background as per your palette */
  color: #ffffff; /* Light text color */
}

.footer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 1200px; /* Restrict maximum width */
  margin: 0 auto;
}

.text-header {
  font-size: 28px; /* Slightly larger and bolder for clarity */
  font-family: "Bricolage Grotesque Medium";
  margin-bottom: 20px;
  color: #ffffff;
}

.socials-div {
  display: flex;
  gap: 25px; /* More space between social icons */
  justify-content: center;
  margin-bottom: 20px;
}

.socials {
  width: 60px; /* Slightly larger icons */
  height: 60px;
  transition: transform 0.3s ease-in-out;
}

.socials:hover {
  transform: scale(1.1); /* Enlarge icons on hover */
}

.footer-copyright {
  background-color: #1a1f24; /* Slightly darker for the bottom section */
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  font-weight: 700;
}

.copyright {
  font-family: "Inter";
  font-size: 0.85em; /* Small adjustment for readability */
  margin: 5px 0;
}

.subfoot {
  color: #5bc0de; /* Keeps the bright link color */
  text-decoration: none;
}

.subfoot:hover {
  text-decoration: underline;
}

/* end footer */

iframe {
  display: block;
  margin: 0px auto;
  padding-left: 5%;
  padding-right: 5%;
}

p.caption {
  text-align: center;
  font-family: "Inter Italics";
}

.wrapper {
  display: flex;
  padding: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.locobody {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
  background-color: #d3d9d4;
  color: #212a31;
  font-family: "Inter", sans-serif;
}

.content {
  position: relative;
  width: 100%;
}

.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d3d9d4;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.section-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Adjusted to 100% for full width */
  max-width: 1200px; /* Optional: limit max width */
}

.text-container {
  flex: 1; /* Allow the text container to take equal space */
  padding: 20px;
}

.image-container {
  flex: 1; /* Allow the image container to take equal space */
  text-align: center;
}

.image-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  transform: translateY(0); /* Start with no translation */
}

.image-container2 {
  flex: 1; /* Allow the image container to take equal space */
  text-align: center;
}

.image-container2 img {
  width: 150%;
  max-width: 600px;
  height: auto;
  display: block;
  transform: translateY(0); /* Start with no translation */
}

.image-long {
  flex: 1; /* Allow the image container to take equal space */
  text-align: center;
}

.image-long img {
  width: 100%;
  max-width: 2000px;
  height: auto;
  display: block;
  transform: translateY(0); /* Start with no translation */
}
/* Center layout for sections with no image */
.center-layout {
  flex-direction: column; /* Align items vertically */
  text-align: center; /* Center text */
}

/* Locomotive Scroll styles */
html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-smooth body {
  overflow: hidden;
}

html.has-scroll-smooth body [data-scroll-container] {
  min-height: 100vh;
  perspective: 1px;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}