/************* START OF STYLE.CSS FILE OF VS CODE ************ */

 @font-face {
    font-family: 'Orbitron';
    src: url(https://static.igem.wiki/teams/5108/fonts/orbitron.woff) format('woff');
 }

 @font-face {
    font-family: 'Oxanium';
    src: url(https://static.igem.wiki/teams/5108/fonts/oxanium-2.woff) format('woff');
 }


:root {
    --orbitron: 'Orbitron', serif;
    --oxanium: 'Oxanium', serif;
    --white: #42b761;
    --white: #fff;
    --dark-blue: #b3429f;
    --purple: #b3429f;
    --blue: #5acddb;
    --card-height: 30rem;
    --card-width: calc(var(--card-height) / 1.35);
  }
  

  
.-home {
  text-align: center;
  margin: auto;
  color: white!important;
}

  /* Pour empêcher le scroll horizontal */
  html, body {
    max-width: 100%;
    /* height: 100%; */
    cursor: url(https://static.igem.wiki/teams/6029/common/cursor.webp) ,auto;
}

sup {
  cursor: pointer;
  color: var(--white) !important;
}

.index-body {
  overflow-x: hidden;
  position: relative;
}

.material_body, .safety_body, .communication_body, entrep_body {
  overflow-x: hidden;
}

@media (max-width: 600px) {
  html, body {
    overflow-x: hidden;
  }
}

#preloader {
  background-color: #0f0d29;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  }


#loader-gif {
  filter:drop-shadow(1rem 1rem 0.75rem  #000000);
}

@media (max-width: 780px) {
  #loader-gif {
    width: 15rem;
    height: auto;
  }

}
@media (min-width: 780px) {
  #loader-gif {
    width: 30rem;
    height: auto;
  }
}

figcaption {
  font-family: var(--oxanium);
  font-size: 0.75rem;
}
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

  }


a {
    text-decoration: none;
  }
ul, li {
  /* list-style: none; */
  font-family: var(--oxanium);
}
  
  p {
    font-family: var(--oxanium);
    color: var(--dark-blue);
    }
h1, h2, h3, h4 {
      font-family: var(--orbitron);
      color: var(--dark-blue);
  }

  hr {
   
    color: rgb(104, 155, 117)
  }
  
  .go-top_container {
    /* visibility: hidden; */
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 5;
    vertical-align: top;
  }

  .back-top {
    max-width: 15rem;
    max-height: 6.5rem;
  }
  .back-top:hover {
    cursor: pointer;
  }

 
  .body_team {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  

#canva_container {
  min-width: 30vw; /* Adjust as needed */
  min-height: 60vh; /* Adjust as needed */
  margin: auto;
  position: relative; /* Ensure container has relative positioning */
}

canvas {
  display: block; /* Ensure canvas is treated as a block-level element */
z-index: 0;
}





.member-title {
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-family: var(--oxanium);
    width: 320px;
    transition: transform 0.5s;
    align-self: flex-end;
    margin-bottom: 8px;
}



/* ************ PDF ************ */
.pdf {
  width: 80%;
  aspect-ratio: 4 / 3;
  margin: auto;
  padding: 0;
  display: flex;
}

/************* END OF STYLE.CSS FILE OF VS CODE *************/

/************* START OF NAV ARROWS *************/

.navigation-arrows {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    padding: 2rem 0;
}

.btn-container-nav-arrows {
    display: flex;
    justify-content: center;
    --color-text: var(--white);
    --color-background: var(--purple);
    --color-outline: var(--dark-blue);
    --color-shadow: #0b0b0b80;
  }
  
  .btn-content-nav-arrows {
    display: flex;
    align-items: center;
    padding: 5px 30px;
    text-decoration: none;
    font-family: var(--oxanium);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--white) !important;
    background: var(--color-background);
    transition: 1s;
    border-radius: 100px;
    box-shadow: 0 0 0.2em 0 var(--color-background);
  }
  .btn-title {
    color: var(--white);
  }

  .btn-content-nav-arrows:hover, .btn-content-nav-arrows:focus {
    transition: 0.5s;
    -webkit-animation: btn-content-nav-arrows 1s;
    animation: btn-content-nav-arrows 1s;
    outline: 0.1em solid transparent;
    outline-offset: 0.2em;
    box-shadow: 0 0 0.4em 0 var(--color-background);
  }
  
  .btn-content-nav-arrows .icon-arrow-nav {
    transition: 0.5s;
    margin-right: 0px;
    transform: scale(0.6);
  }
  
  .btn-content-nav-arrows:hover .icon-arrow-nav {
    transition: 0.5s;
    margin-right: 25px;
  }
  
  .icon-arrow-nav {
    width: 20px;
    margin-left: 15px;
    position: relative;
    top: 6%;
  }
    
  /* SVG */
  #arrow-icon-one {
    transition: 0.4s;
    transform: translateX(-60%);
  }
  
  #arrow-icon-two {
    transition: 0.5s;
    transform: translateX(-30%);
  }
  
  .btn-content-nav-arrows:hover #arrow-icon-three {
    animation: color_anim 1s infinite 0.2s;
  }
  
  .btn-content-nav-arrows:hover #arrow-icon-one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
  }
  
  .btn-content-nav-arrows:hover #arrow-icon-two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
  }
  
  /* SVG animations */
  @keyframes color_anim {
    0% {
      fill: var(--white);
    }
  
    50% {
      fill: var(--color-background);
    }
  
    100% {
      fill: var(--white);
    }
  }
  
  /* Button animations */
  @-webkit-keyframes btn-content-nav-arrows {
    0% {
      outline: 0.2em solid var(--color-background);
      outline-offset: 0;
    }
  }
  
  @keyframes btn-content-nav-arrows {
    0% {
      outline: 0.2em solid var(--color-background);
      outline-offset: 0;
    }
  }

  .btn-container2 {
    transform: rotate(180deg);
  }

  .btn-container2 .btn-title {
    transform: rotate(180deg);
  }
/************* END OF NAV ARROWS *************/



/************ FRACTION ************/

.fract_container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.fract_container p {
 padding: 0 0.4rem;
}

.frac {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  letter-spacing: 0.001em;
  text-align: center;
}
.frac > span {
  display: block;
  padding: 0.1em;
}
.frac span.bottom {
  border-top: thin solid black;
}
.frac span.symbol {
  display: none;
} 



/************* START OF STAR FIELD *************/

#star-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.star,
.mid-star,
.bg-star {
  width: 4px;
  height: 4px;
  background: #fff;
  position: absolute;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 5px 0 black;
  margin: 0;
}

.mid-star {
  background: #999;
  width: 2px;
  height: 2px;
}
.mid-star.up-left {
  animation: upLeft 10000s linear infinite;
}
.mid-star.up-right {
  animation: upRight 10000s linear infinite;
}
.mid-star.down-left {
  animation: downLeft 10000s linear infinite;
}
.mid-star.down-right {
  animation: downRight 10000s linear infinite;
}

.bg-star {
  background: #333;
  width: 1px;
  height: 1px;
}

.star.up-left {
  animation: upLeft 1000s linear infinite;
}

.star.up-right {
  animation: upRight 1000s linear infinite;
}

.star.down-left {
  animation: downLeft 1000s linear infinite;
}

.star.down-right {
  animation: downRight 1000s linear infinite;
}

/************* END OF STAR FIELD *************/

/* ************ START HEADER + NAVBAR ************ */

.header {
  display: flex;
  align-items: center;
  padding: 0 4rem;
  background-color: var(--dark-blue);
  height: 70px;
  box-shadow: 0 1px 5px rgba(0, 0, 0,0.5);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar .logo a {
    font-size: 1.3rem;
  text-decoration: none;
}

.navbar h1 {
  color: white;
}

.navbar .links ul {
  display: flex;
  list-style: none;
  column-gap: 1rem;
  margin-bottom: 1rem; /*Last added*/
}


.links ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-size: 1.1rem;
  text-decoration: none;
  list-style: none;
  padding: 1rem;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.3s ease;
}



.links > ul > li > a:hover {
  border-radius: 5px;
  color: var(--white);
}

.links ul li a .icon {
  margin-left: 10px;
}

.parent-menu {
position: relative;
}

.parent-menu ul {
  display: none !important;
  position: absolute;
  flex-direction: column;
  width: fit-content;
  top: 65px;
  left: 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  background-color: #08032f79;
  backdrop-filter: blur(9.2px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}


.parent-menu ul li a:hover {
  color: var(--white);
}


.parent-menu a.toggled + ul {
  display: flex !important;
}

.parent-menu a.toggled .icon {
  transform: rotate(180deg);
}


#burger, #cross {
  height: 30px;
  width: 30px;
}

#arrow_icon {
  position: relative;
}
#arrow_icon img {
  position: absolute;
}

#arrow {
  height: 20px;
  width: 20px;
  padding-left: 0.3rem;
  margin-top: -0.6rem ;
  z-index: 3;
}

.parent-menu:hover #arrow {
  opacity: 0;
  z-index: -1;
  color: var(--white);
}


.parent-menu:hover #arrow_green {
  opacity: 1;
  color: var(--white);
}

#arrow_green {
  height: 20px;
  width: 20px;
  padding-left: 0.3rem;
  margin-top: -0.6rem ;
  opacity: 0;
} 

.parent-menu:hover ul {
  color: var(--white);
}

.parent-menu:hover li {
  color: var(--white);
}


@media (min-width: 1500px) {
  .burger {
    display: none;
  }

  .links {
    margin-top: 1.5rem;
  }
  
#modeling {
  padding-left: 1rem;
}
}

@media (max-width: 1500px) {
  .header {
    padding: 0 2rem;
  }

.navbar {
  max-width: 100%;
}
  .navbar .links {
    position: fixed;
    left: -350px;
    top: 72px;
    min-width: 270px;
    max-width: 350px;
    width: 100%;
    transition: all 0.3s ease;
  }

  .navbar .links > ul {
    flex-direction: column;
    padding: 1rem;
    
    background-color: #08032f79;
    backdrop-filter: blur(6.2px);
    -webkit-backdrop-filter: blur(5px);
    height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .navbar .links > ul li a {
    margin: 5px 0;
  }

  .parent-menu ul {
    position: static;
    box-shadow: none;
    padding-left: 1.5rem;
    background-color: #1d1a3d91;
    border-radius: 0.5rem;
    backdrop-filter: blur(6.2px);
    -webkit-backdrop-filter: blur(5px);
    width: 100%;
  }

  .parent-menu ul li {
    text-align: center;
    justify-content: center;
  }

  .navbar .links.active {
    left: 0;
  }

  
.burger_container {
  position: relative;
  padding: 1.5rem;
}

.burger_container:hover {
  cursor: pointer;
}

.menu-toggle {
  position: absolute;
  right: 1.5rem;
  top: 49%;
  transform: translate(0, -50%);
  height: 26px;
  width: 29px;

  &, &:hover {
    color: #000;
  }
}

.menu-toggle-bar {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  transition: all 0.3s ease;

  &.menu-toggle-bar--top {
    transform: translate(0, -8px);
  }
  &.menu-toggle-bar--bottom {
    transform: translate(0, 8px);
  }

  .nav-open & {
    &.menu-toggle-bar--top {
      transform: translate(0, 0) rotate(45deg);
    }
    &.menu-toggle-bar--middle {
      opacity: 0;
    }
    &.menu-toggle-bar--bottom {
      transform: translate(0, 0) rotate(-45deg);
    }
  }
}
}

.bs_title {
  width: 15rem;
  height: auto;
}

/* ************ END HEADER + NAVBAR ************ */



/* ************ START VIDEO + LOGO ************ */

.landing h1 {
  font-family: var(--orbitron);
  font-size: 3rem;
  color: #fff;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 24rem;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#video_bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.logofit {
  margin-top: 2rem;
}

.logo_img {
  max-width: 100%;
  height: auto;
}

.typing-demo {
  z-index: 1;
  text-align: center;
  padding: 1rem;
}



@media (max-width: 600px) {
  .header {
    max-width: 100vw;
  }
}


/* ************ END VIDEO + LOGO ************ */






/************* START PROGRESS BAR *************/
/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 0.45rem;
  background: transparent;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 0.45rem;
  background-image: linear-gradient(to right, #211b45, #28214e, #2f2756, #2c366a, #21457d, #00558f, #0072a4, #008da1, #00a488, #42b761);
  width: 0%;
}

.header_2 {
  position: fixed;
  top: 4rem;
  z-index: 100;
  width: 100%;
  background-color: #131035;
}

/************* END OF PROGRESS BAR *************/





/************* START OF PROJECT.CSS FILE OF VS CODE *************/


  /* PROJECT DESCRIPTION PAGE TITLE */
    #project-description-gif{
      width: 100%;
      height: auto;
    }

    #project_description_gif {
      width: 100%;
      height: auto;
    }

    .project_description_gif_img {
      width: 100%;
      height: auto;
    }

    .final_gif {
      width: 100%;
      height: auto;
    }


  .moon_gradient {
    height:2rem;
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.scroll_icon {
  height: 2rem;
  width: auto;
  margin-top: -6.8rem;
  z-index: 11;
}

#mouse_icon {
  height: 2.3rem;
  width: auto;
}

#scoll_icon:hover {
  content: url(/project.html/#main_title);
}

.under_moon_gradient {
  
  width: 35%;
  background-color: white;
  border-radius: 35% 38% 10% 10% / 36% 34% 1% 2% ;
  z-index: 10;
}

@media (min-width: 900px) {
.under_moon_gradient {
  margin-top: -5.5rem;
  height: 7rem;
  border-top: 3px solid #c5c5c5;
}

.overview h1 {
  z-index: 12;
  text-align: center;
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
}
}

@media (max-width: 900px) {
  .under_moon_gradient, #mouse_icon, .scroll_icon {
   display: none;
  }
}

.overview h1 {
  position: relative;
  z-index: 12;
  text-align: center;
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
}

/* END OF PROJECT DESCRIPTION TITLE */

sup, sub, .ref_toggle, figcaption {
  color: var(--dark-blue);
}

.sub_green {
  color: var(--white) !important;
}

#overview h2 {
  margin: 0 0 2rem 0;
}


 .text h2 {  
  text-align: center;
  font-size: 1.7rem;
}

.text p {
  margin: 0 1.5%;
}
.overview h3 {
  font-size: 2.5rem;
  text-align: center;
  color: var(--white);
  padding: 2rem 0 5rem 0;
  text-transform: capitalize
  ;
}

.text_center p {
  text-align: center;
  font-size: 1.15rem;
  color: var(--white);
  font-weight: 500;
}
.main-content h2 {
  font-size: 1.8rem;
  border-left: 10px solid var(--white);
  border-right: 10px solid var(--white);
  border-top: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  border-radius: 0.7rem;
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.main-content h3 {
  box-shadow: 0px 2px var(--white);
  border-style:groove;
  margin-bottom: 0.3rem ;
  border-color: transparent;
}

.main-content h4 {
  margin-top: 1rem;
  color: var(--white);
}

.main-content h2, .main-content h3, .main-content h4 {
  /* text-transform: uppercase; */
  font-weight: 700;
}

.h1-style {
  background-image: linear-gradient(to right, #131035, #0b2449, #00375b, #004a69, #005e75, #006c7d, #007b81, #008982, #009581, #00a17b, #1ead70, #42b761);
  /* background-image: linear-gradient(to right, #42b761, #1ead70, #00a17b, #009581, #008982, #007b81, #006c7d, #005e75, #004a69, #00375b, #0b2449, #131035); */
  background-size: cover;
  background-position: center ;
  background-color: #f0f0f0;
  width: 70%;
  border-bottom-right-radius: 5rem;
  border-top-right-radius: 5rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  text-align: left;
}




.sketch-description {
  height: 33rem;
  width: auto;
  max-width: 100%;
  max-height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  padding-top: 2rem;
}

.lunar_base_img {
  height: 20rem;
  width: auto;
  max-width: 100%;
  max-height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}


.project_description_caption {
  text-align: center;
  margin-bottom: 5rem;
  font-family: var(--oxanium);
  font-size: 0.8rem;
  margin-top: 1rem;
}



.main-content {
    /* display: flex;
    flex-direction: row; */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    justify-items: center;
    margin-top: -1rem;
    
    /* background-image: linear-gradient(to bottom, #6a6d65, #808783, #9aa2a1, #b7bdbe, #d6d8da, #e4e5e6, #f2f2f3, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff); */
   
} 

.col-3 {
    position: sticky ;
    top: 0;
}

.text {
   /* gap: 3rem; */
 
   /* padding: 10rem 3rem 0 2rem; */
   grid-column: 4 / span 6;
   text-align: justify;
   place-self: center stretch;
   overflow: hidden;
   }

.main-content {
  padding-bottom: 10rem;  
}


@media (max-width: 870px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 0 0.5rem 0 0.5rem;
  }

  .text{
    grid-column: auto;
   
  }


}




/* START OF Module Presentation */

#module_presentation{
  padding-top: 1rem;
  padding-bottom: 3rem;
  overflow-x: hidden;
}

.hide {
  display: none;
}

 
.polygon {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.polygon2 {
   display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}

/* Module 1 Large Image */
.module1_large {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.module1_large_text {
  align-self: center;
}

.module_large_img {
  height: auto;
  width: 20rem;
  min-width: 20rem;
  border: 0;
  align-self: center;
}


/* Module 2 Large Image */
.module2_large {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}


.module2_large_img {
  height: 24rem;
  min-height: 24rem;
  width: auto;
  border: 0;
}


.module_text {
  padding-top: 2rem;
  margin-left: 5%;
  margin-right: 5%;
}

/* Module 3 Large Image */
.module3_large {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}


.module3_large_img {
  height: 20rem;
  min-height: 20rem;
  width: auto;
  border: 0;
}


/* Module 4 Large Image*/
/* Module 3 Large Image */
.module4_large {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}


.module4_large_img {
  height: 15rem;
  min-height: 15rem;
  width: auto;
  border: 0;
}


.module_fig_cap {
  font-family: var(--oxanium);
  text-align: center;
  font-size: 0.8rem;
  padding-top: 0.5rem;
}



#module_full_img {
  height: auto;
  width: 22rem;
  min-width: 22rem;
  border: 0;
}

@media (max-width: 1200px) {
  .polygon {
    justify-content: center;
  }
  .polygon2 {
    justify-content: center;
  }
}

@media (max-width: 890px) {
  .polygon {
    justify-content: center;
    flex-wrap: wrap;
  }
  .polygon2 {
    justify-content: center;
    flex-wrap: wrap;
  }

  .module_text p {
    padding-left: 1rem;
  }
}


.module_title {
  align-self: center; 
}

.module_title h4 {
padding-bottom: 1.5rem;
}




.btn_module_container {
  display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1.5rem;
  align-items: center;
  text-align:start;
  padding: 1rem 0 1rem 0;
}

.btn_module {
height: 13.1rem;
width: 10.8rem;
border-radius: 1.5rem;
border: none;
  outline: 3px solid #42b761;
  outline-offset: 1.5px;
}


.btn_module:hover {
cursor: pointer;
border: none;
scale: 1.03;
}




  .btn_module1 {
    background-image: url(https://static.igem.wiki/teams/5108/project-description/module1-image-v2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  
  .btn_module2 {
    background-image: url(https://static.igem.wiki/teams/5108/project-description/module2-image-button.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .btn_module3 {
    background-image: url(https://static.igem.wiki/teams/5108/project-description/module3-img-btn.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .btn_module4 {
    background-image: url(https://static.igem.wiki/teams/5108/project-description/module4-image-button.png);
    background-repeat: no-repeat;
    background-size: contain;
  }



/************* End of Module Presentation *************/


/************* START OF REF ACCORDION *************/


.ref_wrapper {
    background: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    border: 3px solid var(--white);
    position: relative;
    overflow: hidden;
    width: 85%;
    margin: auto auto 20px auto !important;
}

.ref_toggle {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--dark-blue);
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
    font-family: var(--oxanium);
}

  .ref_toggle p {
    /* width: 100%; */
    font-size: 1.25rem;
    color: var(--dark-blue);
    font-weight: 700;
    font-family: var(--orbitron);
  }

.ref_content {
    font-size: 15px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: auto;
    transition: height 0.5s ease-in-out; /* Ensures smooth expansion */
    font-family: var(--oxanium);
    color: var(--dar-blue);
}

.icon-container {
    display: flex;
    align-items: center;
}

.icon {
    width: 1.5rem;
    height: auto;
}

.icon img {
    width: 100%;
}

.plus {
    display: inline;
}

.minus {
    display: none;
}
/************* END OF REF ACCORDION *************/




   /************* END OF PROJECT.CSS FILE OF VS CODE *************/


   /************** START OF FOOTER **/
footer{
    position: absolute;
    /* background-image: linear-gradient(to bottom, #00b78d, #01a57f, #029372, #028264, #037157); */
    width: 100%;
    /* background-image: linear-gradient(to bottom, #00b78d, #00bd91, #00c396, #00ca9a, #00d09e, #00d09e, #00d09e, #00d09e, #00ca9a, #00c396, #00bd91, #00b78d); */
background-color: var(--blue);
  }

.footer-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.ctn-rs a{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 0.5rem;
    margin-top: -5rem;
}


.logo-moon {
   width: 15em;
   height: auto;
   margin-left: 1rem;
}



.scroller {
    max-width: 900px;  
}
  
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width:max-content ;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 35s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 40s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}


/* for testing purposed to ensure the animation lined up correctly */
/* .test {
  background: rgb(255, 0, 0) !important;
} */

.scroller img{
    max-width: 10rem;
}

#adisseo {
    padding-top: 1.5rem;
}
  
.repository {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1rem;
  align-items: center;
  padding: 0 1rem 0 1rem;
}

.footer_media {
  height: 35px;
  width: 35px;
}

.index-body > .menu-footer  {
  background-color: #00b78d;
}

.logo_space_ressource {
  border-radius: 0.7rem;
}

 /************** END OF FOOTER *************/

 /************** START OF PROVISORY *************/


 
.winners {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 1.5rem;
}
.winners h3 {
    font-family: var(--orbitron);
    font-size: 2rem;
    letter-spacing: 2px;
    text-align: center;
}


.winners p {
 max-width: 69%;
 text-align: justify;
}

.winners img {
    border-radius: 1rem;
    border: 7px solid var(--purple);
    padding: 0.3rem;
    max-width: 50%;
    max-height: 50%;
    height: auto;
}


.main_medal_container h2 {
    font-size: 3.7rem;
    letter-spacing: 3px;
    border-left: 20px solid var(--white);
    border-right: 20px solid var(--white);
    border-top: 6px solid var(--white);
    border-bottom: 6px solid var(--white);
    border-radius: 0.7rem;
    margin: 3rem 0 4.5rem 0;
}

.prizes_hr {
    color: var(--purple);
    background-color: var(--purple);
    height: 0.5px;
    margin: 4rem auto;
    width: 80%;
}


.gm_container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.gm_container img {
    max-width: 12%;
    max-height: 12%;
    height: auto;
    filter: drop-shadow(0 0 0.2rem #fffcfc);
}

.village_container {
    background-color: var(--dark-blue);
    margin: 0 !important;
    width: 100%;
}

.village_container h4 {
    color: white;
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: center;
    padding: 3rem 0;
    font-size: 3rem;
    text-align: center;
}

.village_container p {
    color: white;
    align-items: center;
    margin: auto;
    justify-content: center;
    padding: 3rem 0;
    font-size: 1.125rem;
    width: 80%;
    text-align: justify;
}

.moon__plant {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; 
}

.moon__plant img{
 max-width: 50%;
 max-height: 50%;
 height: auto;
 filter: drop-shadow(3px 1px 4px #b5b2b2);
}

.blog_div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    gap: 7rem;
    
}

.blog_left {
    margin: 3rem auto 3rem 5%;
}

.blog_right {
    margin: 3rem 5% 3rem auto;
}

@media (max-width: 800px) {
    .rowleft, .rowright {
        gap:2rem;
    }
    .main_medal_container h2 {
        padding: 0.5rem 1.5rem;
        font-size: 3rem;

    }
  }

  @media (min-width: 800px) {
    .rowleft, .rowright {
        gap: 5rem;
    }
    .main_medal_container h2 {
        padding: 0.5rem 5rem;

    }
  }

.rowleft {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;
    border: 7px solid var(--white);
    border-radius: 1rem;
    background-image: linear-gradient(to right top, #131035, #3e3761, #6c6290);
}

.rowright {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 2rem 0;
    border: 7px solid var(--purple);
    border-radius: 1rem;
    background-image: linear-gradient(to left top, #007020, #079340, #42b761);
}

.blog_text {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 1rem;
}

.blog_text p {
    color: white;
    text-align: justify;
}

.blog_text h4 {
    color: white;
    font-size: 1.6rem;
    font-weight: 600;
}

.rowleft img, .rowright img {
    max-width: 15%;
    max-height: 15%;
    height: auto;
    filter: drop-shadow(0 0 0.15rem #fffcfc);

}

.nomination_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 6rem;
    padding-top: 2rem;
    margin:  auto auto 7rem auto;
}

.nomination_container .card_nomi {
    position: relative;
    width: 300px;
    height: 400px;
    background: var(--clr);
    border-radius: 20px;
    border-top-left-radius: 70px;
    overflow: hidden;
}

.nomination_container .card_nomi .box_nomi {
    position: absolute;
    inset: 10px;
    background: #ffffff;
    border-radius: 10px;
}

.nomination_container .card_nomi .box_nomi .icon_nomi {
    position: absolute;
    width: 140px;
    height: 140px;
    background: var(--clr);
    border-bottom-right-radius: 50%;
    transition: 0.5s;
}

.nomination_container .card_nomi .box_nomi .icon_nomi::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 30px;
    height: 30px;
    background: transparent;
    border-top-left-radius: 30px;
    box-shadow: -5px -5px 0 5px var(--clr);
}

.nomination_container .card_nomi .box_nomi .icon_nomi::after {
    content: '';
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-top-left-radius: 30px;
    box-shadow: -5px -5px 0 5px var(--clr);
}

.nomination_container .card_nomi .box_nomi .icon_nomi .iconbox_nomi {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.nomination_container .card_nomi .box_nomi .icon_nomi .iconbox_nomi {
    font-size: 4rem;
    color: var(--clr);
}

.iconbox_nomi img {
    max-width: 5rem;
    height: auto;
}

.nomination_container .card_nomi .box_nomi .content_nomi {
    position: absolute;
    top: 150px;
    padding: 20px 0;
    text-align: center;
}

.nomination_container .card_nomi .box_nomi .content_nomi h3 {
    color: var(--clr);
    /* font-size: 1.35rem; */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    box-shadow: none !important;
}

.nomination_container .card_nomi .box_nomi .content_nomi p {
    font-size: 0.95rem;
    opacity: 0.75;
    margin: 10px 0.5rem 10px 0.5rem;
}

.nomination_container .card_nomi .box_nomi .content_nomi a {
    background: var(--clr);
    display: inline-block;
    padding: 10px 25px;
    text-decoration: none;
    color: #efe6e6;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 30px;
    transition: 0.5s;
    font-family: --oxanium;
}

.nomination_container .card_nomi .box_nomi .content_nomi a:hover {
    letter-spacing: 0.2rem;
}

@media only screen and (max-width: 1080px) {
    .nomination_container {
        padding: 2rem 1rem;
    }
}




.shooting_stars{
    position: absolute;
    width: 100%;
    height: 100vh;
    top:0;
    left:0;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
    animation: animate 3s linear infinite;
}
.shooting_stars::before{
    content:'';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
}
@keyframes animate
{
    0%
    {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    70%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
}
.shooting_stars:nth-child(1){
    top: 120rem;
    right: 0;
    left: initial;
    animation-delay: 0s;
    animation-duration: 1s;
}
.shooting_stars:nth-child(2){
    top: 120rem;
    right: 80px;
    left: initial;
    animation-delay: 0.2s;
    animation-duration: 3s;
}
.shooting_stars:nth-child(3){
    top: 120rem;
    right: 0px;
    left: initial;
    animation-delay: 0.4s;
    animation-duration: 2s;
}
.shooting_stars:nth-child(4){
    top: 120rem;
    right: 180px;
    left: initial;  
    animation-delay: 0.6s;
    animation-duration: 1.5s;
}
.shooting_stars:nth-child(5){
    top: 120rem;
    right: 400px;
    left: initial;
    animation-delay: 0.8s;
    animation-duration: 2.5s;
}
.shooting_stars:nth-child(6){
    top: 120rem;
    right: 600px;
    left: initial;
    animation-delay: 1s;
    animation-duration: 3s;
}
.shooting_stars:nth-child(7){
    top: 120rem;
    right: 0px;
    left: initial;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}
.shooting_stars:nth-child(8){
    top: 120rem;
    right: 700px;
    left: initial;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}
.shooting_stars:nth-child(9){
    top: 120rem;
    right: 1000px;
    left: initial;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}
.shooting_stars:nth-child(9){
    top: 120rem;
    right: 450px;
    left: initial;
    animation-delay: 2.75s;
    animation-duration: 2.75s;
}    
    
    
  /************* END OF PROVISORY *************/

  /************* START OF MEMBERS *************/

/************ TITLE SCI-FI STYLE ************/
.title-body {
    background:  linear-gradient(to right, rgba(19, 16, 53, 0.6), rgba(11, 36, 73, 0.60), rgba(0, 55, 91, 0.6), rgba(0, 74, 105, 0.6), rgba(0, 94, 117, 0.6), rgba(0, 108, 125, 0.6), rgba(0, 123, 129, 0.6), rgba(0, 137, 130, 0.6), rgba(0, 149, 129, 0.6), hsla(166, 100%, 32%, 0.6), rgba(30, 173, 111, 0.6), rgba(66, 183, 97, 0.6));
        background-repeat: no-repeat;
    background-position: left;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .main-title-svg {
    height: 25rem;
    width: 50rem;
    align-items: center;
    padding: 5rem 1rem 0  1rem;
  }
  
  ::selection {
    background: transparent;
  }
  svg {
    cursor: pointer;
  }
  
  input[type="checkbox"],
  #containerLeftBottom,
  #detailsContainer,
  #rdj {
    display: none;
    transition: 0.5s;
  }
  
  #titleContent,
  #detailsContent {
    stroke: #f1efc1;
    fill: #f1efc1;
    font-family: "Orbitron", sans-serif;
    pointer-events: none;
  }
  
  #gif-logo{
    height:18rem;
    width: auto;
    margin-top: 5rem;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #42b761}
  }
  
  #detailsContent {
    color: hsl(0deg 0% 100%);
      font-size: 20px;
      font-family: 'Orbitron';
      letter-spacing: 2px;
      text-align: justify;
      margin: 0 auto;
      animation: 
        typing 0.5s steps(30, end),
        blink-caret .5s step-end;
  }
  
  #containerBox,
  #containerRightBottom,
  #loadingLights {
    transition: 0.5s;
  }
  
  #fireCircles,
  #innerCircle,
  #outerCircle,
  #middleCircle {
    transition: 1s transform;
    transform-origin: center;
    transform-box: fill-box;
    pointer-events: bounding-box;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles #outerCircle {
    transform: rotate(360deg);
  }
  
  input[type="checkbox"]:checked
    + svg
    #fireCircles
    + #container
    #containerLeftBottom {
    display: block;
  }
  
  input[type="checkbox"]:checked + svg #detailsContainer {
    display: block;
  }
  
  input[type="checkbox"]:checked + svg #rdj {
    display: block;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles #innerCircle {
    transform: rotate(-120deg);
  }
  
  input[type="checkbox"]:checked
    + svg
    #fireCircles
    + #container
    #containerRightBottom {
    transform: translate(0px, 164px);
    transition: 0s;
    position: relative;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles + #container #containerBox {
    d: path(
      "M250,449.999998c19.64.515,28.781-.462,41.5-12l11.5-12c9.98-7.571,16.62-9.831,30.5-10h127.5c11.484-.409,17.715,1.899,28.5,10l13,12c9.098,9.05,15.207,11.924,27.5,14h327.5v0l62.5-2c11.148-3.896,20.243-6.824,28.5-14l72.5-72.5c5.15-7.217,7.68-11.513,11-20L1032.5,108h2v-41h-1.5v-25.25-25.25c.04-9.12834-2.76-12.34415-13-14.5h-53-793.5l-7.529-.63164C227.189,8.8461,272.536,56.6375,285,116.5l-2.75.5c12.64,101.955-49.038,162.651-139.75,166c0,0,0,.500001,0,.500001v-2.000001C72.263372,288.877571,9.87479,229.139162,5.49988,172.499999v279.499999l189.50012-2h55"
    );
  }
  
  input[type="checkbox"]:checked + svg #fireCircles + #container #loadingLights {
    transform: translate(0px, 169px);
    transition: 0.5s;
    position: relative;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles #middleCircle {
    transform: rotate(250deg);
    transition: 0.5s;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles + #container #firstLight {
    fill: #131035;
    transition: 0.2s;
    transition-delay: 0s;
    transform-origin: left;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles + #container #secondLight {
    fill: #823bd0;
    transition: 0.2s;
    transition-delay: 0.2s;
    transform-origin: left;
  }
  
  input[type="checkbox"]:checked + svg #fireCircles + #container #thirdLight {
    fill: #42b761;
    transition: 0.2s;
    transition-delay: 0.4s;
    transform-origin: left;
  }
  
  #firstLight {
    fill: #131035;
    transition: 0.2s fill;
    transition-delay: 0.4s;
    transform-origin: right;
  }
  
  #secondLight {
    fill: #823bd0;
    transition: 0.2s fill;
    transition-delay: 0.2s;
    transform-origin: right;
  }
  
  #thirdLight {
    fill: #1e9545;
    transition: 0.2s fill;
    transition-delay: 0s;
    transform-origin: right;
  }
  
  /************ END OF TITLE SCI-FI STYLE ************/

.flexbox_title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.team_title {
  font-size: 2.5rem;
  /* border-left: 10px solid var(--white);
  border-right: 10px solid var(--white);
  border-top: 3px solid var(--white); */
  border-bottom: 2px solid var(--dark-blue);
  /* border-radius: 0.7rem; */
  text-align: center;
  margin: 4rem 1rem 0 1rem;
  /* padding: 0 1rem; */
  color: var(--white);
  /* width: fit-content; */
  position: relative;
}



.main_team {
  height: 100%;
  width: 100%;
  display: flex;
  /* flex-direction: row; */
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  column-gap: 2rem;
  row-gap: 10rem ;
  padding: 8rem 5rem;
  background-color: #fff9e9;
}

.card_team {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

.card_team_advisors {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}


.card_team p, .card_team h2, .card_team h3, .card_team h4, .card_team_advisors p, .card_team_advisors h2, .card_team_advisors h3, .card_team_advisors h4  {
  color: white;
}
.card_team h4 {
  font-weight: 300;
}

.card_team_advisors h4 {
  font-weight: 300;
}

.cover-image {
  width: var(--card-width);
  height: var(--card-height);
  object-fit: cover;
  border-radius: 1rem;
}

.wrapper_team {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
  border-radius: 1rem;
}

.card_team:hover {
  cursor: pointer;
}



.wrapper_team::before,
.wrapper_team::after {
  content: "";
  opacity: 0;
  width: var(--card-width);
  height: var(--card-height);
  transition: all 0.5s;
  position: absolute;
  left: 0;
  border-radius: 1rem;
}

.wrapper_team::before {
  top: 0;
  width: var(--card-width);
  height: var(--card-height);
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
  border-radius: 1rem;
}
.wrapper_team::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
  border-radius: 1rem;
}


.title {
  width: 320px;
  transition: transform 0.5s;
  align-self: flex-end;
}



.character {
  width: 90%;
  height: auto;
  opacity: 0;
  top:3rem;
  left: 2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_Yohann {
  width: 78%;
  height: auto;
  opacity: 0;
  top:3rem;
  left: 1rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;

}

.member_b_{
    width: 100%;
    height: auto;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
  }

.member_b_1{
  width: 200%;
  height: auto;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  top: 20%;
}

.member_b_2{
  width: 105%;
  top: 10%;
  left: 5%;
}
.member_b_3{
  width: 168%;
  top: 26%;
  left: 5%;
}
.member_b_4{
  width: 117%;
  top: 10%;
  left: -4%;
}
.member_b_5{
  width: 105%;
  top: 10%;
  left: 0%;
}
.member_b_6{
  width: 136%;
  top: -15%;
  left: -24%;
}
.member_b_7{
  width: 166%;
  top: -10%;
  left: -30%;
}
.member_b_8{
  width: 97%;
  top: 27%;
  left: 1%;
}
.member_b_9{
  width: 95%;
  top: 2%;
  left: 5%;
}
.member_b_10{
  width: 100%;
  top: -8%;
  left: -3%;
}
.member_b_11{
  width: 100%;
  top: 9%;
  left: 0%;
}
.member_b_12{
  width: 177%;
  top: 16%;
  left: -40%;
}
.member_b_13{
  width: 148%;
  top: 5%;
  left: -50%;
}
.member_b_14{
  width: 224%;
  top: -2%;
  left: -88%;
}
.member_b_15{
  width: 178%;
  top: -39%;
  left: -32%;
}
.member_b_16{
  width: 108%;
  top: 10%;
  left: -2%;
}
.member_b_17{
  width: 135%;
  top: -15%;
  left: -39%;
}





.character_Laura{
  width: 115%;
  height: auto;
  opacity: 0;
  top:6rem;
  right: 1rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_Matthieu{
  width: 115%;
  height: auto;
  opacity: 0;
  top:6rem;
  left: -3.2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_LS{
  width: 105%;
  height: auto;
  opacity: 0;
  top:2rem;
  left: -3.2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_rebs{
  width: 95%;
  height: auto;
  opacity: 0;
  top:2rem;
  left: -1.2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_Nathan{
  width: 135%;
  height: auto;
  opacity: 0;
  top:6rem;
  left: -1.2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}

.character_LUPSO{
  width: 135%;
  height: auto;
  opacity: 0;
  top:6rem;
  left: -5.2rem;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  margin-left: 2rem;
}



@media (min-width:800px) {
  .card_team.no-hover:hover .character {
    opacity: initial;
    transform: initial;
  }

.team_title::after {
  content: '';
  background-image: url(https://static.igem.wiki/teams/5108/general/mini-leaf-2.png);
  transform: rotate(90deg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3rem; /* Adjust width as per your image size */
  height: 3rem; /* Adjust height as per your image size */
  position: absolute;
  left: -2.6rem; /* Adjust to position the image to the right of the border */
  bottom: -2.7rem; /* Adjust to align with the bottom border */
}

.card_team:hover .wrapper_team::before,
.wrapper_team::after {
  opacity: 1;
  border-radius: 1rem;
}

.card_team:hover .wrapper_team::after {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1rem;
}

.card_team:hover .member-title {
  transform: translate3d(0%, -25px, 100px);
}

.card_team:hover .wrapper_team {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  border-radius: 1rem;
}

.front_team:hover .member_b_  {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}
}

.front_team,
.back_team {
  position: absolute;
  width: var(--card-width);
  height: var(--card-height);
  backface-visibility: hidden;
  transition: transform 0.7s;
  border-radius: 1rem;
}


.back_team {
  /* background-image: linear-gradient(to bottom, #42b761, #4bb668, #54b66e, #5cb574, #64b47a, #6bb880, #73bc87, #7ac08d, #83ca96, #8bd39f, #94dda8, #9de7b1); */
  transform: rotateY(180deg);
}

.someone_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/lea-background-2.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.emma_back {
  /* background-image: url();
  background-size: cover;
  background-repeat: no-repeat; */
  background-color: #791c68;
}

.yohann_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/yohann-background-3.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.laura_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-b.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.lea_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/lea-background-2.webp);
  background-size: cover;
  background-repeat: no-repeat;
}
.ls_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/milky-way-2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.matt_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-c.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.nathan_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-blueish.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.rebs_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/space-purple.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.others_back {
  background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-d.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}


.card_team_back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}


.profile_pic {
  height: 5.5rem;
  width: auto;
  margin-top: 0.5rem;
}

.emma_pp {
  border-radius: 30% 70% 56% 44% / 30% 40% 60% 70% ;
}

.laura_pp {
  border-radius: 39% 61% 26% 74% / 53% 42% 58% 47%  ;
}

.lea_pp {
  border-radius: 39% 61% 26% 74% / 53% 42% 58% 47%  ;
}

.ls_pp {
  border-radius: 30% 70% 56% 44% / 30% 40% 60% 70% 
}

.matt_pp {
  border-radius: 39% 61% 26% 74% / 53% 42% 58% 47% ; 
}

.nathan_pp {
  border-radius: 30% 70% 56% 44% / 30% 40% 60% 70% ;
}

.yohann_pp {
  border-radius: 39% 61% 26% 74% / 53% 42% 58% 47% ; 
}

.flip .front_team {
   transform: rotateY(180deg);
}

.flip .back_team {
  transform: rotateY(0);
}

.cards_team {
  width: var(--card-width);
  height: var(--card-height);
  /* position: relative; */
}

.cards_team_advisors {
  width: var(--card-width);
  height: var(--card-height);
  /* position: relative; */
}

.card_team_hover {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: var(--card-width);
  height: var(--card-height);
}

/* LUPSO on the left */

.LUPSO_wetlab {
  width: 5.5rem;
  height: auto;
  align-self: start;
}
.LUPSO_entrep {
  width: 4.6rem;
  height: auto;
  align-self: start;
  }

/* LUPSO on the right */
.LUPSO_orga {
  width: 5rem;
  height: auto;
  align-self: start;
}

.LUPSO_com {
  width: 4.5rem;
  height: auto;
  margin-left: -0.7rem;
  margin-right: 0.4rem;
}

.LUPSO_wiki {
  width: auto;
  height: 4rem;
  margin-left: -0.7rem;
  margin-right: 0.4rem;
}

.LUPSO_finance {
  width: 4.5rem;
  height: auto;
}

.LUPSO_HP {
  width: 5.5rem;
  height: auto;
  margin-left: -0.7rem;
  margin-right: 0.4rem;
  margin-top: 0.4rem;
}

.p_lea {
  text-align: justify;
  padding: 1rem;
  font-size: 0.86rem;
  color: white;
}

.p_team_lea_1, .p_team_lea_2, .p_team_lea_3 {
  padding-top: 0.8rem;
}

.card_bottom {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  align-items: center;
  text-align: justify;
  color: white;
}

.card_bottom_2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  align-items: center;
  text-align: justify;
  color: white;
}

.linkedin_card {
  height: 1rem;
  width: auto;
  margin-top: 0.4rem;
  margin-bottom: -0.7rem;
}

.sup_main_team_text {
  margin: 3rem auto 0 auto;
  text-align: center;
  font-size: 1.4rem;
  width: 50%;
  color: var(--white);
  font-weight: 600;
}

.team_leaf {
  height: 1.5rem;
  width: auto;
  padding: 0 0.1rem;
}

.team_leafa {
  height: 1.5rem;
  width: auto;
  transform: rotate(-90deg);
  margin-bottom: -0.2rem;
  margin-left: 0.2rem;
}

.team_hr {
  width: 65%;
  margin: 0 auto;
  margin-top: 1rem;
  height: 2px;
  color: var(--white);
  background-color: var(--white);
  border: none
}


.card_team.no-hover .character,
.card_team.no-hover .character_Emma,
.card_team.no-hover .character_Yohann,
.card_team.no-hover .character_LUPSO,
.card_team.no-hover.character_rebs,
.card_team.no-hover .character_Nathan,
.card_team.no-hover .character_LS,
.card_team.no-hover .character_Matthieu,
.card_team.no-hover .character_Laura {
  opacity: 0; 
  transform: none;
}


.card_team.no-hover .wrapper_team {
  transform: none;
  box-shadow: none;
}

.card_team.no-hover .wrapper_team::before,
.card_team.no-hover .wrapper_team::after {
  opacity: 0;
}

.card_team.no-hover .wrapper_team::after {
  width: 0;
  height: 0;
}

.card_team.no-hover .title {
  transform: none;
}

  /************* END OF MEMBERS *************/


  /************* START OF NOTEBOOK *************/

.time_line_body{
  padding:0;
  margin:0;
  font-family: 'Montserrat', sans-serif;
  background: #010622;
  overflow-x: hidden; 
  margin-top: 5rem;
}
  /************* END OF MEMBERS *************/

  .flexbox_title_material {
    display: flex;
}


  /************* START OF Material *************/
.material_title {
    font-size: 2.3rem;
    border-bottom: 3px solid var(--dark-blue);
    font-family: var(--orbitron);
    text-align: center;
    margin: auto;
    color: var(--white);
    position: relative;
    margin-bottom: 3rem;
  }
  
  .material_title::after {
    content: '';
    background-image: url(https://static.igem.wiki/teams/5108/general/mini-leaf-2.png);
    transform: rotate(90deg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 3rem; /* Adjust width as per your image size */
    height: 3rem; /* Adjust height as per your image size */
    position: absolute;
    left: -2.6rem; /* Adjust to position the image to the right of the border */
    bottom: -2.7rem; /* Adjust to align with the bottom border */
  }

  .material_flexbox_1 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 1.5rem 2rem 0 2rem;
  }


.underlined_link {
  text-decoration: none;
  position: relative;
  transition: color 0.3s cubic-bezier(.2, 0, 0, 1);
  z-index: 1;
}

a, a:visited, a:active {
  color: inherit;
}

.underlined_link::after {
  content: '';
  display: block;
  height: 2.5px;
  width: 80%;
  margin: auto;
  position: absolute;
  bottom: -0.2rem;
  right: 0;
  left: 0;
  background-color: #42b761;
  border-radius: 0.5rem;
  transition: all 0.3s cubic-bezier(.2, 0, 0, 1);
  transform-origin: bottom center;
  z-index: -1;
}

.underlined_link:hover {
  color: white;

}

.underlined_link:hover::after {
  right:-0.2rem;
  left: -0.2rem;
  width: 100%;
  height: 130%;
}

/************* END OF Material *************/

.full_container_project {
    display: flex;
    flex-direction: row;
}

.description-img3 {
    margin-bottom: -5rem;
}


/* PROJECT DESCRIPTION PAGE TITLE */
#project-description-gif{
    width: 100%;
    height: auto;
  }


.moon_gradient {
  height:2rem;
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scroll_icon {
height: 2rem;
width: auto;
margin-top: -6.8rem;
z-index: 11;
}

#mouse_icon {
height: 2.3rem;
width: auto;
}

#scoll_icon:hover {
content: url(/project.html/#main_title);
}

.under_moon_gradient {

width: 35%;
background-color: white;
border-radius: 35% 38% 10% 10% / 36% 34% 1% 2% ;
z-index: 10;
}

@media (min-width: 900px) {
.under_moon_gradient {
margin-top: -5.5rem;
height: 7rem;
border-top: 3px solid #c5c5c5;
}

.overview h1 {
z-index: 12;
text-align: center;
font-size: 3.5rem;
text-transform: uppercase;
font-weight: 700;
}
}

@media (max-width: 900px) {
.under_moon_gradient, #mouse_icon, .scroll_icon {
 display: none;
}
}

.overview h1 {
position: relative;
z-index: 12;
text-align: center;
font-size: 3.5rem;
text-transform: uppercase;
font-weight: 700;
}

/* END OF PROJECT DESCRIPTION TITLE */


  /************* START OF REAL PROJECT *************/

sup, sub, .ref_toggle, figcaption {
    color: var(--dark-blue);
  }
  
  #overview h2 {
    margin: 0 0 2rem 0;
  }

  .aside_project {
    min-width: 20rem;
    margin-left: 1.5rem;
}




@media (max-width:800px) {
    .aside_project {
        display: none;
    }

    .main_content_project {
      padding: 0 1.5rem;
    }
}

@media (min-width:800px) {
    .aside_project {
        flex: 1;
    }
    .main_content_project {
        flex: 4;
        margin: 0 5.5rem;
    }
}

.overview h3 {
    font-size: 2.5rem;
    text-align: center;
    color: var(--white);
    padding: 2rem 0 5rem 0;
    text-transform: capitalize
    ;
  }
  
  .text_center p {
    text-align: center;
    font-size: 1.15rem;
    color: var(--white);
    font-weight: 500;
  }
  .main_content_project h2 {
    font-size: 1.8rem;
    border-left: 10px solid var(--white);
    border-right: 10px solid var(--white);
    border-top: 3px solid var(--white);
    border-bottom: 3px solid var(--white);
    border-radius: 0.7rem;
    text-align: center;
    margin: 4rem 0 2rem 0;
    text-align: center;
    font-size: 1.7rem;
    color: var(--dark-blue);
    padding-bottom: 0.2rem;
  }
  
  .main_content_project h3 {
    box-shadow: 0px 2px var(--white);
    border-style:groove;
    margin-bottom: 0.3rem ;
    border-color: transparent;
    color: var(--dark-blue);
  }
  
  .main_content_project h4 {
    margin-top: 1rem;
    color: var(--white);
  }
  
  .main_content_project h2, .main_content_project h3, .main_content_project h4 {
    /* text-transform: uppercase; */
    font-weight: 700;
  }

  .main_content_project ol, .main_content_project ul {
    text-align: justify;
    font-size: 1rem;
    font-family: var(--oxanium);
    padding: 0 2rem 0 4rem;
    color: var(--dark-blue);
  }
  
  .h1-style {
    background-image: linear-gradient(to right, #131035, #0b2449, #00375b, #004a69, #005e75, #006c7d, #007b81, #008982, #009581, #00a17b, #1ead70, #42b761);
    /* background-image: linear-gradient(to right, #42b761, #1ead70, #00a17b, #009581, #008982, #007b81, #006c7d, #005e75, #004a69, #00375b, #0b2449, #131035); */
    background-size: cover;
    background-position: center ;
    background-color: #f0f0f0;
    width: 70%;
    border-bottom-right-radius: 5rem;
    border-top-right-radius: 5rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    text-align: left;
    padding-left: 10%;
  }
  
  
  
  
  .sketch-description {
    height: 33rem;
    width: auto;
    max-width: 100%;
    max-height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
    padding-top: 2rem;
  }
  
  .lunar_base_img {
    height: 20rem;
    width: auto;
    max-width: 100%;
    max-height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
  }
  
  
  .project_description_caption {
    text-align: center;
    margin-bottom: 5rem;
    font-family: var(--oxanium);
    font-size: 0.8rem;
    margin-top: 1rem;
  }
  
  
  
  
  .col-3 {
      position: sticky ;
      top: 5rem;
  }

  
.main_content_project {
    /* gap: 3rem; */
  
    /* padding: 10rem 3rem 0 2rem; */
    grid-column: 4 / span 6;
    text-align: justify;
    place-self: center stretch;
    overflow: hidden;
    }


/* START OF Module Presentation */

#module_presentation{
    padding-top: 1rem;
    padding-bottom: 3rem;
    overflow-x: hidden;
  }
  
  
   
  .polygon {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
  
  .polygon2 {
     display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
  }
  
  /* Module 1 Large Image */
  .module1_large {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  
  .module1_large_text {
    align-self: center;
  }
  
  .module_large_img {
    height: auto;
    width: 20rem;
    min-width: 20rem;
    border: 0;
    align-self: center;
  }
  
  
  /* Module 2 Large Image */
  .module2_large {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  
  .module2_large_img {
    height: 24rem;
    min-height: 24rem;
    width: auto;
    border: 0;
  }
  
  
  .module_text {
    padding-top: 2rem;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  /* Module 3 Large Image */
  .module3_large {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  
  .module3_large_img {
    height: 22rem;
    min-height: 22rem;
    width: auto;
    border: 0;
  }
  
  
  /* Module 4 Large Image*/
  /* Module 3 Large Image */
  .module4_large {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  
  .module4_large_img {
    height: 15rem;
    min-height: 15rem;
    width: auto;
    border: 0;
  }
  
  
  .module_fig_cap {
    font-family: var(--oxanium);
    text-align: center;
    font-size: 0.8rem;
    padding-top: 0.5rem;
  }
  
  
  
  #module_full_img {
    height: auto;
    width: 22rem;
    min-width: 22rem;
    border: 0;
  }
  
  @media (max-width: 1200px) {
    .polygon {
      justify-content: center;
    }
    .polygon2 {
      justify-content: center;
    }
  }
  
  @media (max-width: 890px) {
    .polygon {
      justify-content: center;
      flex-wrap: wrap;
    }
    .polygon2 {
      justify-content: center;
      flex-wrap: wrap;
    }
  
    .module_text p {
      padding-left: 1rem;
    }
  }
  
  
  .module_title {
    align-self: center; 
  }
  
  .module_title h4 {
  padding-bottom: 1.5rem;
  }
  
  
  
  
  .btn_module_container {
    display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      gap: 1.5rem;
    align-items: center;
    text-align:start;
    padding: 1rem 0 1rem 0;
  }
  
  .btn_module {
  height: 13.1rem;
  width: 10.8rem;
  border-radius: 1.5rem;
  border: none;
    outline: 3px solid #42b761;
    outline-offset: 1.5px;
  }
  
  
  .btn_module:hover {
  cursor: pointer;
  border: none;
  scale: 1.03;
  }
  
  
  
  
    .btn_module1 {
      background-image: url(/assets/module1_image_v2.jpg);
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    
    .btn_module2 {
      background-image: url(/assets/module2_image_button.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .btn_module3 {
      background-image: url(/assets/module3_image_button.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .btn_module4 {
      background-image: url(/assets/module4_image_button.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  
  
  
  /************* End of Module Presentation *************/

  /************* START OF REF ACCORDION *************/

.ref_wrapper {
    background: #fff;;
    padding: 15px 40px;
    border-radius: 5px;
    border: 3px solid var(--white);
    position: relative;
    overflow: hidden;
    width: 85%;
    margin: auto auto 20px auto !important;
}

  .ref_toggle p {
    /* width: 100%; */
    font-size: 1.25rem;
    color: var(--dark-blue);
    font-weight: 700;
    font-family: var(--orbitron);
  }

.ref_toggle {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--dark-blue);
    font-weight: 600;
    font-family: var(--oxanium);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
}

.ref_content {
    font-size: 15px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: auto;
    transition: height 0.5s ease-in-out; /* Ensures smooth expansion */
    font-family: var(--oxanium);
      color: var(--dar-blue);
}

.icon-container {
    display: flex;
    align-items: center;
}

.icon {
    width: 1.5rem;
    height: auto;
}

.icon img {
    width: 100%;
}

.plus {
    display: inline;
}

.minus {
    display: none;
}
  /************* END OF REF ACCORDION *************/

  /************* START OF SIDE NAV *************/

  #sidenav {
    list-style: none;
  }
  
  #sidenav-header {
    font-size: 1.6em;
    color: var(--dark-blue);
    padding-left:0.75rem ;
    text-align: center;
  }
  
  .sidenav li a {
    display: block;
    padding: 0.3rem 0 0 1rem;
    color: var(--dark-blue);
    transition: all 0.3s ease-out;
    text-decoration: none;
    font-family: oxanium;
    font-size: 0.95rem;
  }
  
  .sidenav li a:hover {
    background-color: transparent;
    padding-left: 1.8rem;
    color: var(--white);
  }

  .text ol, .text ul {
  text-align: justify;
  font-size: 1rem;
  font-family: var(--oxanium);
  padding: 0 2rem 0 4rem;
    }
  
  .sidenav li a.active {
    background-color: transparent;
    padding-left: 1.8rem;
    font-size: 1rem;
    color: var(--white);
  }
  
  .sidenav li a.active > .moon-icon-menu {
    filter: drop-shadow(2px 2px 1px rgba(61, 60, 60, 0.521));
      -webkit-filter: drop-shadow(2px 2px 1px rgba(61, 60, 60, 0.521));
    }
 
  
  @media (min-width: 576px) {
    .sticky-sm-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
  }
  @media (min-width: 768px) {
    .sticky-md-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
  }

  /************ End of Side Nav ************/


  .content_project {
    box-shadow: 0px 2px var(--white);
  border-style: groove;
  margin-bottom: 0.3rem;
  border-color: transparent;
}



.nav-item-short:hover::before {
    margin: 0 0 0 0.5rem;
    transition: all 0.3s ease;
    transform: scale(1.08);
} 

.nav-item-long:hover::before {
    margin: 0 0 0 0.5rem;
    transition: all 0.3s ease;
    transform: scale(1.08);
}

.nav-item-short::before {
    content: "";
        position: absolute;
        top: 0;
        left: -17px;
        width: 28px;
        height: 28px;
        background-image: url(https://static.igem.wiki/teams/5108/general/moon-aside.svg);
}

.nav-item-long:before {
    content: "";
        position: absolute;
        left: -17px;
        width: 28px;
        height: 28px;
        background-image: url(https://static.igem.wiki/teams/5108/general/moon-aside.svg);
}

.nav-item {
   position: relative;
   margin-top: 1rem;
   color: var(--dark-blue);
}

.nav-item:hover {
   transform: scale(1.05);
    transition: all 0.3s ease-out;
    margin-left: 0.3rem;
    font-weight: 500;
 }

 /* Button For Layout Switch*/

/* SVG Hover Effect */
.button_layout_switch:hover svg {
  transform: translateX(5px) rotate(90deg); /* Adjusted for hover effect */
}

#toggleButton_template {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  background-image: linear-gradient(50deg, #392f62, #392f62, #42b76b);
  color: white;
  border: none;
  border-radius: 16px;
  width: 9.8rem;
  overflow: hidden; /* To hide overflowing text during transitions */
  font-family: var(--oxanium);
}

.button_layout_switch svg {
  margin-right: 6rem; /* Space between SVG and text */
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.text_btn_lt_switch  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.current-text {
  opacity: 1;
  z-index: 2; /* Ensure it is above the next-text */
}

.next-text {
  opacity: 0;
  z-index: 1; /* Behind the current-text */
  transform: translateY(100%); /* Start below the current-text */
}

.button_layout_switch.clicked .current-text {
  opacity: 0;
  transform: translateY(-100%); /* Move up */
}

.button_layout_switch.clicked .next-text {
  opacity: 1;
  transform: translate(-2rem, -0.7rem);
}

/* Tooltip styles if needed */
.highlight {
  color: var(--white);
  font-weight: bold;
  position: relative; /* Required to position the tooltip relative to the word */
}

.tooltip {
  visibility: hidden;
  color: var(--dark-blue);
  font-family: var(--oxanium);
  font-size: 0.9rem;
  font-weight: 400;
  border-radius: 5px;
  padding: 10px; /* Increase padding for better readability */
  position: absolute;
  z-index: 1000;
  bottom: 125%; /* Position tooltip above the word */
  left: 50%;
  transform: translateX(-50%);
  width: 12rem; /* Set a fixed width for the tooltip box */
  white-space: normal; /* Allow the text to wrap to multiple lines */
  text-align: justify;
  /* From https://css.glass */
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--white)
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow points down */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--white) transparent transparent transparent;
}

.highlight:hover .tooltip {
  visibility: visible;
}
/************* END OF REAL PROJECT *************/

/************* TABLE *************/
  table {
    border-collapse: collapse;
    overflow-x: scroll !important;
  }


.container_table th h1 {
	  font-weight: bold;
	  font-size: 0.9rem;
  text-align: center;
  color: var(--white);
  padding-bottom: 5px;
}

tr {
  font-family: var(--oxanium);
}

.container_table td {
	  font-weight: normal;
    text-align: center;
	  font-size: 0.9rem;       
    color: var(--dark-blue);
    padding: 0.7rem 0;
}

.container_table thead {
border-bottom: 1.5px solid var(--dark-blue);
}

.container_table {
	  text-align: center;
	  width: 100%;
	  margin: 0 0;
  display: table;
  padding: 0;
  max-height: fit-content;
  overflow-x: auto;
}

.container_table thead, .container_table tbody {
  overflow: auto !important;
}

/* .container td, .container th {
	  padding-bottom: 2%;
	  padding-top: 2%;
  padding-left:2%;  
} */

/* Background-color of the odd rows */
.container_table tbody tr:nth-child(odd) {
	  background-color: #def4c6;
}

/* Background-color of the even rows */
.container_table tbody tr:nth-child(even) {
	  background-color: #faf3dd;
}

tbody {
  color: var(--dark-blue);
}

@media screen and (max-width: 840px) {
  thead, th {
    display: none;
  }
  tr, td {
    display: block;
    
  }
  tr {
    border: 1px solid rgba(0, 0 , 0 ,.15);
    margin-bottom: 2rem;
  }
  tr:last-child {
    margin-bottom: 0;
  }
  tr:nth-child(even) td {
    background-color: transparent;
  }
  td {
    clear: both;
    text-align: right;
      word-wrap: break-word;
    overflow-wrap: break-word;
     max-width: 200px;
  }
  td:before {
    content: attr(data-label)': ';
    float: left;
    font-weight: bold;
    margin-right: 1rem;
    margin-left: 0.2rem;
  }
}



/* .container tr:hover {
   background-color: var(--dark-blue);
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
	   -moz-box-shadow: 0 6px 6px -6px #0E1119;
	        box-shadow: 0 6px 6px -6px #0E1119;
          border-radius: 1rem;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  
  transition-delay: 0s;
	  transition-duration: 0.4s;
	  transition-property: all;
  transition-timing-function: line;
} */

/* @media (max-width: 800px) {
.container_table td:nth-child(4),
.container_table th:nth-child(4) { display: none; }
} */


.consumables ul {
  /* font-family: var(--oxanium); */
  padding-left: 2rem;
  color: var(--dark-blue);
}

.consumables h4 {
font-size: 1.2rem;
  color: var(--dark-blue);
}

.consumables h5 {
  font-size: 0.95rem;
  font-weight: 600;
    color: var(--dark-blue);
  }

.consumables ol {
  padding-left: 2rem;
    color: var(--dark-blue);
}

.consumables ul li {
  list-style:disc;
    color: var(--dark-blue);
}
.protocol_hr {
  color: var(--white);
}

.microbiology h1 {
  margin: 0 auto;
  padding: 6rem 0 2rem 5rem;
  text-align:start;
}

.protocole_title {
  margin-top: -6rem;
}
/************* END OF TABLE *************/

/************* START OF SAFETY *************/
.safety_title {
    min-width: 20rem;
    height: 6rem;
    align-content: center;
    margin: auto;
    text-align: center;
    border-radius: 30px 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(0.5px);
    border: 1px solid rgba(255, 255, 255, 0.84);
    position: relative;
    color: var(--dark-blue);
    font-size: 3rem;
    }
    
    
    
    @media (max-width: 750px) {
        .safety_title {
            min-width: 20rem;
        }
        .tab_buttonContainer{
          height: 7rem;
          min-width: 250px;
      }
      .tab_buttonContainer .tab_button{
        font-size: 0.8rem;
        min-width: 40px;
        padding: 0;
    }

    .last_pannel img {
      max-width: 19rem;
      height: auto;
      display: flex;
      margin: auto;
      border-radius: 0.9rem;
    }
    }  
    
      
    @media (max-width: 1000px) {
  
    .last_pannel img {
      max-width: 10rem;
      height: auto;
      display: flex;
      margin: auto;
      border-radius: 0.9rem;
    }
  } 
    
    @media (min-width: 750px) {
        .safety_title {
            min-width: 30rem;
        }
        .tab_buttonContainer{
          height: 3rem;
          min-width: 250px;
      }

      .last_pannel img {
        max-width: 25rem;
        height: auto;
        display: flex;
        margin: auto;
        border-radius: 0.9rem;
      }
    } 
    
    
    
    
    .safety_title::before {
        content: '';
        height: 7rem; /* Set a specific height */
        width: 7rem;  /* Set a specific width */
        position: absolute;
        top: 0rem; /* Position vertically center */
        left: -3rem; /* Position a little to the left of the h1 element */
        transform: translateY(-50%); /* Center vertically */
        background-size: contain;
        background-repeat: no-repeat; 
      }
  
 
  .safety_introduction {
   margin: 10rem 5rem 5rem 5rem;
  }

  .safety_introduction h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--white);
  }

  .safety_introduction h3 {
    text-align: center;
    margin: 3rem 0;
    color: var(--white);
    font-size: 1.4rem;
  }

  .safety_introduction p {
    text-align: center;
    margin-bottom: 3rem;
  }


  .table_safety1 {
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 3rem;
  }

 .tabContainer{
      width: 100%;
      height: fit-content;
      padding: 0 2rem 6rem 2rem;
  }


    .tab_container_main_title {
    text-align: center;
    margin: 2rem 0 3rem 0;
    font-size: 1.7rem;
    color: var(--white);
    }
  
  
  .tab_buttonContainer button{
      width: 25%;
      height: 100%;
      float: left;
      border: none;
      outline:none;
      cursor: pointer;
      padding: 10px;
      font-size: 18px;
      background-color: #eee;
      border-radius: 15px 15px 0 0;
      font-family: var(--oxanium);
      color: var(--dark-blue);
  }
  .tabContainer .tab_buttonContainer button:hover{
      background-color: #d7d4d4;
  }
  .tabContainer .tabPanel{
      height: 85%;
      background-color: gray;
      color: white;
      text-align: center;
      padding-top: 3rem;
      box-sizing: border-box;
      font-size: 22px;
      display: none;
      border-radius: 0 0 15px 15px;
      min-width: 250px;
  }


  .tabPanel1 {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 90%;
    margin: auto;
    text-align: justify;
    font-family: var(--oxanium);
    font-size: 1rem;
    padding-bottom: 5rem;
  }

  .tabPanel2 {
    display: flex;
    width: 90%;
    text-align: justify;
    margin: auto;
    font-family: var(--oxanium);
    font-size: 1rem;
    padding-bottom: 5rem;
    list-style-position: inside;
    color: var(--dark-blue);
  }

  .tabPanel2 li {
    margin-top: 0.45rem;
    margin-left: 3rem;
  }

  .tabPanel3, .tabPanel4 {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 2rem;
    width: 90%;
    text-align: justify;
    margin: auto;
    font-family: var(--oxanium);
    font-size: 1rem;
    padding-bottom: 5rem;
    list-style-position: inside;
    color: var(--dark-blue);
  }

  .tabPanel3 ul li {
    padding-left: 0.4rem;
    padding-top: 0.2rem;
  }

  .small-title_tabPanel {
    font-size: 1.1rem;
  }

  .tabPanel4 .specific_safety_contained {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: auto;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .last_pannel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .safety_p_title {
    font-size: 1.1rem;
  }
/************* END OF SAFETY *************/

/************* START OF ATTRIBUTION *************/
.iframe {
   width: 100%;
   padding: 5rem 3rem;    
}

/************* END OF ATTRIBUTION *************/


/************ START OF NOTEBOOK ************/

.time_line_body{
  padding:0;
  margin:0;
  font-family: 'Montserrat', sans-serif;
  background: #010622;
  overflow-x: hidden; 
  margin-top: 5rem;
}

.notebook_h1{
font-size:60px;
text-align:center;
color:white;
}
.timeline{
position:relative;
margin:50px auto;
padding:40px 0;
width:1000px;
box-sizing:border-box;
}
.timeline:before{
content:'';
position:absolute;
left:50%;
width:2px;
height:100%;
background:#c5c5c5;
}
.timeline ul{
padding:0;
margin:0;
}





.timeline ul li{
list-style:none;
position:relative;
width:50%;
padding:20px 40px;
box-sizing:border-box;
margin-bottom: 8rem;
}
.timeline ul li:nth-child(odd){
float:left;
text-align:right;
clear:both;
}
.timeline ul li:nth-child(even){
float:right;
text-align:left;
clear:both;
}
.content{
background: rgba(255, 255, 255, 0.09);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(0.6px);
-webkit-backdrop-filter: blur(0.6px);
border: 2.5px solid rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
padding: 2rem;
}

.img_container_nb{
  width: 22rem;
  height: auto;
  align-self: center;
  margin-top: 1.5rem;
  border-radius: 0.9rem;
}



.timeline ul li:nth-child(odd):before
{
content:'';
position:absolute;
width:1.8rem;
height:1.8rem;
top:24px;
right:-15px;
background-image: url(https://static.igem.wiki/teams/5108/general/moon-pointer.png);
background-size: cover;
}

.timeline ul li:nth-child(even):before
{
content:'';
position:absolute;
width:1.8rem;
height:1.8rem;
top:24px;
left:-15px;
background-image: url(https://static.igem.wiki/teams/5108/general/moon-pointer.png);
background-size: cover;
}

.timeline ul li h3{
padding:0;
margin:0;
font-size: 1.2rem;
font-weight:500;
color: white;
text-align: left;
}


.timeline ul li p{
margin:10px 0 0;
padding:0;
color:white;
text-align: justify;
}

.timeline ul li .time h4{
margin:0;
padding:0;
font-size:14px;
color: white;
}

.timeline ul li:nth-child(odd) .time
{
position:absolute;
top:22px;
right:-165px;
margin:0;
padding:8px 16px;
background-size: cover;
color:white;
border-radius:1rem;
/* box-shadow:0 0 0 1.5px rgba(255, 255, 255, 0.66); */
}

.timeline ul li:nth-child(even) .time
{
position:absolute;
top:22px;
left:-165px;
margin:0;
padding:8px 16px;
background-size: cover;
color:white;
border-radius:16rem;
/* box-shadow:0 0 0 1.5px rgba(255, 255, 255, 0.66); */
}

.timeline ul li:nth-child(odd) .time1
{
position:absolute;
top:22px;
right:-230px;
}

.timeline ul li:nth-child(odd) .time3
{
position:absolute;
top:22px;
right:-210px;
}

.timeline ul li:nth-child(odd) .time5
{
position:absolute;
top:22px;
right:-250px;
}

.timeline ul li:nth-child(even) .time2
{
position:absolute;
top:20px;
left:-210px;
}

.timeline ul li:nth-child(even) .time4
{
position:absolute;
top:20px;
left:-230px;
}

.date {
  padding: 1rem 0;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 600;
}

@media (min-width:1200px) {

  .date {
    display: none;
  }

  .left_content {
    width: 33rem;
    margin-left: -9rem;
    }
    
    .right_content {
      width: 33rem;
      margin-right: -9rem;
      }

 
}

@media(max-width:1200px)
{
.timeline{
  width:100%;
}
}

@media(max-width:767px){
  .mini_leaf {
    height: 0.75rem;
    width: auto;
    overflow: visible;
  }
  

.timeline{
  width:100%;
  padding-bottom:0;
}
h1{
  font-size:40px;
  text-align:center;
}
.timeline:before{
  left:20px;
  height:100%;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even)
{
  width:100%;
  text-align:left;
  padding-left:50px;
  padding-bottom:50px;
}
.timeline ul li:nth-child(odd):before,
.timeline ul li:nth-child(even):before
{
  top:-18px;
  left:8px;
}
.timeline ul li:nth-child(odd) .time,
.timeline ul li:nth-child(even) .time{

  right:inherit;
}

.timeline ul li:nth-child(odd) .time1
  {
  position:absolute;
  top:22px;
  right:-320px;
  }

  .timeline ul li:nth-child(odd) .time3
  {
  position:absolute;
  top:22px;
  right:-290px;
  }

  .timeline ul li:nth-child(odd) .time5
  {
  position:absolute;
  top:22px;
  right:-320px;
  }

  .timeline ul li:nth-child(even) .time2
  {
  position:absolute;
  top:20px;
  left:-320px;
  }

  .timeline ul li:nth-child(even) .time4
  {
  position:absolute;
  top:20px;
  left:-350px;
  }
  .date {
    display: flex;
  }

}

.timeline ul li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline ul li {
  opacity: 1;
  transform: translateY(0);
}




@keyframes upLeft {
  0% {
    margin: 0 0 0 0;
  }
  100% {
    margin: -1000rem 0 0 -1000rem;
  }
}

@keyframes upRight {
  0% {
    margin: 0 0 0 0;
  }
  100% {
    margin: -1000rem 0 0 1000rem;
  }
}

@keyframes downLeft {
  0% {
    margin: 0 0 0 0;
  }
  100% {
    margin: 1000rem 0 0 -1000rem;
  }
}

@keyframes downRight {
  0% {
    margin: 0 0 0 0;
  }
  100% {
    margin: 1000rem 0 0 1000rem;
  }
}

#star-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.star,
.mid-star,
.bg-star {
  width: 4px;
  height: 4px;
  background: #fff;
  position: absolute;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 5px 0 black;
  margin: 0;
}

.mid-star {
  background: #999;
  width: 2px;
  height: 2px;
}
.mid-star.up-left {
  animation: upLeft 10000s linear infinite;
}
.mid-star.up-right {
  animation: upRight 10000s linear infinite;
}
.mid-star.down-left {
  animation: downLeft 10000s linear infinite;
}
.mid-star.down-right {
  animation: downRight 10000s linear infinite;
}

.bg-star {
  background: #333;
  width: 1px;
  height: 1px;
}

.star.up-left {
  animation: upLeft 1000s linear infinite;
}

.star.up-right {
  animation: upRight 1000s linear infinite;
}

.star.down-left {
  animation: downLeft 1000s linear infinite;
}

.star.down-right {
  animation: downRight 1000s linear infinite;
}


.mini_leaf {
  height: 1.3rem;
  width: auto;
  overflow: visible;
}


.science {
  border: 2.5px solid #3B8EA5;
}


.communication {
  border: 2.5px solid #F79F79;
}

.others {
  border: 2.5px solid #CFB3CD;
}

.human {
  border: 2.5px solid #9739c8;
}

.plant {
  border: 2.5px solid #45CB85;
}

.finance {
  border: 2.5px solid #BD1E1E;
}


/************* Slideshow container *************/
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 1rem;
}

.img_slides img {
  border-radius: 1rem;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--dark-blue);
  background-color: #c5c5c5ad;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: var(--white);
}


.nb_link_href {
  color: var(--white) !important;
}
/************ END OF NOTEBOOK ************/

/************ START OF PROTOOCOLS ************/
.protocols_full_container {
  display: flex;
  align-items: start;
}

@media(max-width: 900px) {
  .protocols_full_container {
    flex-direction: column;
  } 
}


.ref_toggle, figcaption {
    color: grey;
  }

sub {
    color: var(--dark-blue);
  }

  sup {
    color: var(--white);
  }

.main_protocols_container {
    display: flex;
    margin: auto;
    padding: auto;
    margin-top: 8rem;
}

.main_protocols_container h1 {
  color: var(--dark-blue);
}

/************* START OF REF ACCORDION *************/

.ref_wrapper {
    background: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    border: 3px solid var(--white);
    position: relative;
    overflow: hidden;
    width: 85%;
        margin: auto auto 20px auto !important;
}

  .ref_toggle p {
    /* width: 100%; */
    font-size: 1.25rem;
    color: var(--dark-blue);
    font-weight: 700;
    font-family: var(--orbitron);
  }

.ref_toggle {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--dark-blue);
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
    font-family: var(--oxanium);
}

.ref_content {
    font-size: 15px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: auto;
    transition: height 0.5s ease-in-out; /* Ensures smooth expansion */
    font-family: var(--oxanium);
      color: var(--dar-blue);
}

.icon-container {
    display: flex;
    align-items: center;
}

.icon {
    width: 1.5rem;
    height: auto;
}

.icon img {
    width: 100%;
}

.plus {
    display: inline;
}

.minus {
    display: none;
}
  
  /************* END OF REF ACCORDION *************/
  
  

/* Existing button styles */


    @media only screen and (min-width: 1000px) {
      /* styles for browsers larger than 960px; */
      .btn_module_container_proto {
        display: flex;
        flex-direction: column;
        position: sticky;
        padding-top: 5rem;
        gap: 1rem;
        text-align: center;
        padding: 1rem 1rem;
        flex-wrap: wrap;
        justify-content: start;
        flex: 1;
        align-items: center;
        /* background: pink; */
        position: sticky;
        top: 11rem;
      } 

      .main_protocols_container  {
        flex: 5;
      }
  }


 
@media screen and (max-width: 999px) {
  .btn_module_container_proto {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 5rem;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
  } 
}



  
  .btn_nb {
    /* align-items: center; */
    background-image: linear-gradient(144deg,#392f61, #5B42F3 50%,#42b761);
    border: 0;
    border-radius: 8px;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    font-family: Phantomsans, sans-serif;
    font-size: 18px;
    justify-content: center;
    line-height: 1em;
    max-width: 100%;
    min-width: 110px;
    padding: 3px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
  }
  
  
  .moon_nb_logo {
    width: 2rem;
    height: auto;
  }
  
  .main_container {
    height: 31rem;
    /* width: 85%; */
    border-radius: 3rem;
    background-image: url(/assets/space-bg_blueish.jpg);
    background-size: cover;
    margin: auto;
  }
  
  .btn_nb span {
    background-color: rgb(5, 6, 45);
    padding: 16px 24px;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    transition: 300ms;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--orbitron);
    font-size: 0.9rem;
  }
  
  .btn_nb:hover span, .btn_nb.active span {
    background: none;
  }
  
  .btn_nb:hover,
  .btn_nb.active {
    background-image: linear-gradient(144deg,#392f61, #5B42F3 50%,#42b761);
    outline: 0;
    transform: scale(0.9);
  }
  
  .btn_nb:active, .btn_nb:focus {
    transform: scale(0.9);
  }

  .btn_nb:focus span {
    background-image: linear-gradient(144deg,#392f61, #5B42F3 50%,#42b761);
  }
  


  /************* TABLE *************/
  table {
    border-collapse: collapse;
    overflow-x: scroll !important;
  }

.container_table th h1 {
	  font-weight: bold;
	  font-size: 0.9rem;
  text-align: center;
  color: var(--white);
  /* margin-bottom: -0.2rem; */
}

tr {
  font-family: var(--oxanium);
}

.container_table td {
	  font-weight: normal;
    text-align: center;
	  font-size: 0.9rem;       
    color: var(--dark-blue);
    padding: 0.7rem 0;
}

.container_table thead {
border-bottom: 1.5px solid var(--dark-blue);
}

.container_table {
	  text-align: center;
	  width: 100%;
	  margin: 0 0;
  display: table;
  padding: 0;
  max-height: fit-content;
  overflow-x: auto;
}

.container_table thead, .container_table tbody {
  overflow: auto !important;
}

/* .container td, .container th {
	  padding-bottom: 2%;
	  padding-top: 2%;
  padding-left:2%;  
} */

/* Background-color of the odd rows */
.container_table tbody tr:nth-child(odd) {
	  background-color: #def4c6;
}

/* Background-color of the even rows */
.container_table tbody tr:nth-child(even) {
	  background-color: #faf3dd;
}

tbody {
  color: var(--dark-blue);
}

@media screen and (max-width: 840px) {
  thead, th {
    display: none;
  }
  tr, td {
    display: block;
  }
  tr {
    border: 1px solid rgba(0, 0 , 0 ,.15);
    margin-bottom: 2rem;
  }
  tr:last-child {
    margin-bottom: 0;
  }
  tr:nth-child(even) td {
    background-color: transparent;
  }
  td {
    clear: both;
    text-align: right;
  }
  td:before {
    content: attr(data-label)': ';
    float: left;
    font-weight: bold;
    margin-right: 1rem;
    margin-left: 0.2rem;
  }
}



/* .container tr:hover {
   background-color: var(--dark-blue);
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
	   -moz-box-shadow: 0 6px 6px -6px #0E1119;
	        box-shadow: 0 6px 6px -6px #0E1119;
          border-radius: 1rem;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  
  transition-delay: 0s;
	  transition-duration: 0.4s;
	  transition-property: all;
  transition-timing-function: line;
} */

/* @media (max-width: 800px) {
.container_table td:nth-child(4),
.container_table th:nth-child(4) { display: none; }
} */


.consumables ul {
  /* font-family: var(--oxanium); */
  padding-left: 2rem;
}

.consumables h4 {
font-size: 1.2rem;
}

.consumables h5 {
  font-size: 0.95rem;
  font-weight: 600;
  }

.consumables ol {
  padding-left: 2rem;
}

.consumables ul li {
  list-style:disc;
}
.protocol_hr {
  color: var(--white);
}

.microbiology h1 {
  margin: 0 auto;
  padding: 6rem 0 2rem 5rem;
  text-align:start;
}

.protocole_title {
  margin-top: -6rem;
}

#bculture {
  margin-top: 4rem;
}

.sup_no_click {
  color: var(--dark-blue) !important;
  cursor: auto !important;
}
/************ END OF PROTOOCOLS ************/

  /************* START OF REF ACCORDION *************/

.ref_wrapper {
    background: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    border: 3px solid var(--white);
    position: relative;
    overflow: hidden;
    width: 85%;
    margin: auto auto 20px auto !important;
}

.ref_toggle {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--dark-blue);
    font-family: var(--oxanium);
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
}

  .ref_toggle p {
    /* width: 100%; */
    font-size: 1.25rem;
    color: var(--dark-blue);
    font-weight: 700;
    font-family: var(--orbitron);
  }

.ref_content {
    font-size: 15px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: auto;
    transition: height 0.5s ease-in-out; /* Ensures smooth expansion */
    font-family: var(--oxanium);
      color: var(--dar-blue);
}

.icon-container {
    display: flex;
    align-items: center;
}

.icon {
    width: 1.5rem;
    height: auto;
}

.icon img {
    width: 100%;
}

.plus {
    display: inline;
}

.minus {
    display: none;
}
  
  
  /************* END OF REF ACCORDION *************/

  /************* START OF ACKNOWLEDGEMENT ************/
.full_container_thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem 0;
}

.sponsor_container {
    height: fit-content;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto;
    background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-blueish.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
    padding: 3rem 0;
    
}

.sponsors_thanks {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: rgba(25, 1, 1, 0.353);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1.5rem;
    color: white;
}

.sponsors_thanks p {
    width: 80%;
   text-align: justify;
   color: white;
}

.sponsors_thanks ul li {
    list-style: none;
    text-align: center;
    padding-top: 0.3rem;
}

.others_tanks_container {
    height: fit-content;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto;
    background-image: url(https://static.igem.wiki/teams/5108/members/space-bg-a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
    padding: 3rem 0;
}

.others_tanks {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: rgba(8, 0, 0, 0.336);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1.5rem;
    color: white;
}

.row_thanks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 1rem;
}

.others_tanks p {
    color: white;
}

.row_thanks ul li {
    list-style: none;
    text-align: center;
    padding-top: 0.3rem;
}

.row_thanks ul {
    text-align: center;
}

.logo_acknow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 75%;
}

.logo_acknow img{
   max-width: 8rem;
   max-height: 8rem;
   height: auto;
}
  /************* END OF ACKNOWLEDGEMENT *************/

    /************* START OF MEDAL CRITERIA *************/
.main_medal_container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: column;
    width: 100%;
}

.medal_icon {
    height: 4rem;
    width: auto;
    overflow: visible;
}

.medal_title {
    font-size: 2rem;
    font-family: var(--orbitron);
    font-weight: 500;
    color: var(--dark-blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


@media (min-width : 900px) {


.medal_tr  td {
    max-width: 10rem;
    padding: 1.5rem;
    text-align: justify;
}

.medal_th {
    font-size: 1.2rem !important;
}

.medal_tr td ul li {
    font-size: 0.9rem;
}

.medal_tr td ul {
    padding-top: 0.2rem;
}

.last_medal_link {
    text-align: center !important;
}
}
/************* END OF MEDAL CRITERIA *************/

/************* START OF ENTREP *************/

.entrep_main h2 {
    font-size: 3rem;
}
.entrep_flex_contained_1 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    gap: 1.5rem;
}


@media (max-width: 1350px) {
	.entrep_fig1 {
	max-width: 80%;
    max-height: 70%;
    height: auto;
	}
	.entrep_flex_contained_1 p {
		width: 100%;
	}
	.slide_entrep:nth-of-type(3) p {
		overflow: auto;
	}
}

@media (min-width: 1350px) {

	.entrep_fig1 {
		max-width: 28rem;
		max-height: auto;
		height: auto;
	}
	.entrep_flex_contained_1 p {
		width: 40%;
	}
	.slide_entrep:nth-of-type(3) p {
		width: 98%;
		margin-top: -10rem;
	}
}



.entrep_fig1_container {
    text-align: center;
}

.entrep_fig2 {
    max-width: 100%;
}

.material_flexbox_1 h4 {
    font-size: 1.5rem;
}

.slider_entrep_container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.slider_entrep {
    margin: 0 auto;
    max-width: 1170px;
}

.slide_viewer_entrep {
    height: 680px;
    overflow: hidden;
    position: relative;
}

.slide_group_entrep {
    height: 100%;
    position: relative;
    width: 100%;
}

.slide_entrep {
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: white;
}


.slide_entrep:first-child {
    display: flex;
}

.slide_entrep:nth-of-type(1) {
    padding: 2rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slide_entrep:nth-of-type(1) p {
    padding-top: 1rem;
    width: 98%;
}

.slide_entrep:nth-of-type(2) {
    padding: 2rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.map_entrep1_img {
    max-width: 75%;
    max-height: 85%;
    height: auto;
	padding-bottom: 0.5rem;
}

.map_entrep2_img  {
    max-width: 55%;
    max-height: 55%;
    height: auto;
	padding-bottom: 0.5rem;
}

.map_entrep3_img {
    max-width: 65%;
    max-height: 75%;
    height: auto;
	padding-bottom: 0.5rem;
}


.slide_entrep:nth-of-type(3) {
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



.figure_map3_entrep {
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	flex-direction: column;
}

.slide_buttons_entrep {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}




.directional_nav_entrep {
    height: 0;
    margin: 0 auto;
    max-width: 940px;
    position: relative;
    top: -20rem;
}

.previous_btn_entrep, .next_btn_entrep {
    cursor: pointer;
    height: 5rem; 
    width: 5rem;  
    opacity: 0.5;
    transition: opacity 0.4s ease-in-out;
    position: absolute;
    z-index: 10; 
    display: flex;
    justify-content: center;
    align-items: center; 
	border-radius: 100%;
	background-color: #4745445a;
}

.previous_btn_entrep {
    left: -1rem;
    top: 50%; 
    transform: translateY(-50%); /* Adjust for vertical centering */
}

.next_btn_entrep {
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
}

.previous_btn_entrep:hover, .next_btn_entrep:hover {
    opacity: 1;
}

@media (max-width: 1100px) {
	.previous_btn_entrep {
		left: -2rem;
		top: 50%; 
	}
	
	.next_btn_entrep {
		right: -2rem;
		top: 50%;
	}
}

@media (max-width: 1000px) {
	.previous_btn_entrep {
		left: -2.1rem;
		top: 50%; 
	}
	
	.next_btn_entrep {
		right: -2.1rem;
		top: 50%;
	}

	.previous_btn_entrep, .next_btn_entrep {
		height: 3rem; 
		width: 3rem;  
	}

	.competitive_container {
		flex-wrap: wrap;
	}
}

.entrep_ref_content_ul {
	font-size: 0.9rem !important;
}

.product_flex_box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: auto;
}

.product_flex_box1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
}
.product_flex_box1 img {
max-width: 35%;
max-height: 15%;
height: auto;
}

.img_lyo_pfluo {
	max-height: 18rem !important;
}

.product_flex_box_2 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
}

.product_flex_box_2 img {
	max-width: 95%;
	max-height: 85%;
	height: auto;
	}

.bioearth_bottle {
	max-height: 32rem !important;
}

.product_flex_box img {
	max-width: 85%;
	max-height: 65%;
	height: auto;
}

.pestel_img {
	max-width: 85%;
	max-height: 65%;
	height: auto;
}

.stake_holder_img {
	max-width: 75%;
	max-height: 50%;
	height: auto;
	border-radius: 1rem;
}

.figure_flex {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	flex-direction: column;
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	flex-grow: 1;
}

figcaption {
	padding-top: 2rem;
	text-align: center;
}



  .p {
	background-color: #fffb0000;
	top: 2.3%;
	left: 12.8%;
  }

  .e1 {
	background-color: #fffb0000;
	top: 2.3%;
	left: 27.8%;
  }

  .s {
	background-color: #fffb0000;
	top: 2.3%;
	left: 41.8%;
  }

  .t {
	background-color: #fffb0000;
	top: 2.3%;
	left: 55.8%;
  }

  
  .e2 {
	background-color: #fffb0000;
	top: 2.3%;
	left: 70%;
  }

  .l {
	background-color: #fffb0000;
	top: 2.3%;
	left: 84%;
  }


  #explanation_pestel1,  #explanation_pestel2,  #explanation_pestel3,  #explanation_pestel4,  #explanation_pestel5,  #explanation_pestel6, #explanation_pestel7, #explanation_pestel8, #explanation_pestel9, #explanation_pestel10, #explanation_pestel11, #explanation_pestel12, #explanation_pestel13, #explanation_pestel14, #explanation_pestel15, #explanation_pestel16, #explanation_pestel17, #explanation_pestel18 {
	display: none;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: 80%;
	flex-grow: 1;
	padding-bottom: 1.5rem;
  }

  .pestel_max_container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	flex-direction: column;
  }

  @media screen and (max-width: 600px) {
	.area_click {
	  width: 2rem;
	  height: 2rem;
	}	
  
	
.area_click_small {
	width: 1.5rem;
	height: 1.5rem;
  }
  }

  .btn_module_entrep {
	height: 3.1rem;
	width: 1.8rem;
	border-radius: 1.5rem;
	border: none;
	outline: 3px solid #42b761;
	outline-offset: 1.5px;
	background-color: white;
    font-family: var(--orbitron);
    color: var(--dark-blue);
	font-size: 1.5rem;
	cursor: pointer;
	margin-top: 1rem;
	}

	.button_intro_entrep {
		margin-top: 5rem;
	}

.swot_flexbox {
	margin-top: 5rem;
}

.swot_img {
	max-width: 65%;
	max-height: 45% ;
	height: auto;
	border-radius: 2rem;
}

.competitive_img {
	max-width: 55%;
	max-height: 40%;
	height: auto;
	border-radius: 2rem;
}

@media (min-width: 1100px) {
	.area_click {
		position: absolute;
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	  
 .bioM {
	background-color: #2e2d0c00;
	top: 13.5%;
	left: 23%;
  }

  .hydro {
	background-color: #2e2a0c00;
	top: 26%;
	left: 23%;
  }

  .baf {
	background-color: #2e2b0c00;
	top: 41%;
	left: 23%;
  }

  .anti {
	background-color: #2c2e0c00;
	top: 55%;
	left: 23%;
  }

  .bioch {
	background-color: #2b2e0c00;
	top: 68%;
	left: 23%;
  }
}

@media (max-width: 900px) {
	.area_click {
		position: absolute;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		cursor: pointer;
	  }

	.bioM {
	   background-color: #2e2d0c00;
	   top: 13.5%;
	   left: 23%;
	 }
   
	 .hydro {
	   background-color: #2e2a0c00;
	   top: 26%;
	   left: 23%;
	 }
   
	 .baf {
	   background-color: #2e2b0c00;
	   top: 39%;
	   left: 23%;
	 }
   
	 .anti {
	   background-color: #2c2e0c00;
	   top: 50%;
	   left: 23%;
	 }
   
	 .bioch {
	   background-color: #2b2e0c00;
	   top: 61%;
	   left: 23%;
	 }
   }


   @media (max-width: 700px) {
	.area_click {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }

	.bioM {
	   background-color: #2e2d0c00;
	   top: 13.5%;
	   left: 23%;
	 }
   
	 .hydro {
	   background-color: #2e2a0c00;
	   top: 26%;
	   left: 23%;
	 }
   
	 .baf {
	   background-color: #2e2b0c00;
	   top: 36%;
	   left: 23%;
	 }
   
	 .anti {
	   background-color: #2c2e0c00;
	   top: 49%;
	   left: 23%;
	 }
   
	 .bioch {
	   background-color: #2b2e0c00;
	   top: 60%;
	   left: 23%;
	 }
	 .swot_img {
		max-width: 65%;
		max-height: 45% ;
		height: auto;
		border-radius: 0.5rem;
	}
	
	.competitive_img {
		max-width: 55%;
		max-height: 40%;
		height: auto;
		border-radius: 0.5rem;
	}
   }

  .competitive_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	margin: auto;
	gap: 0;
  }

  .explanation_pestsel_text_competitors {
	width: 80%;
	display: flex;
	margin: auto;
	padding: 2rem 0;
  }

  .entrep_fig_13 {
	max-width: 80%;
	max-height: 45% ;
	height: auto;
	border-radius: 2rem;
  }

  .entrep_fig17 {
	max-width: 85%;
	max-height: 78% ;
	height: auto;
  }

@media (min-width: 1230px) {
	.blue {
		background-color: #cbfe0000;
		bottom: 40% !important;
		right: 23.5% !important;
	  }
}

@media (min-width: 1200px) {
.area_click_small {
	position: absolute;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	cursor: pointer;
  }

  .red {
	background-color: #cbfe0000;
	top: 27%;
	left: 31%;
  }

  .pink {
	background-color: #cbfe0000;
	top: 34%;
	right: 21.5%;
  }


  .cyan {
	background-color: #cbfe0000;
	bottom: 40%;
	right: 40%;
  }

  .purp {
	background-color: #cbfe0001;
	bottom: 31%;
	left: 39%;
  }

  .blue {
	background-color: #cbfe0000;
	bottom: 39%;
	right: 20.5%;
  }

  .yelo {
	background-color: #cbfe0000;
	bottom: 44%;
	right: 27%;
  }

  .green {
	background-color: #cbfe0000;
	bottom: 22%;
	right: 37%;
  }
}

  @media (max-width: 1200px) {
	.area_click_small {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 33%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 42%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 35%;
		right: 40%;
	  }
	
	  .purp {
		background-color: #cbfe0000;
		bottom: 28%;
		left: 38%;
	  }
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 46%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 50%;
		right: 28%;
	  }
	
	  .green {
		background-color: #cbfe0000;
		bottom: 28%;
		right: 37%;
	  }
  }


  @media (max-width: 1180px) {
	.area_click_small {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 32%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 39%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 38%;
		right: 40%;
	  }
	
	  .purp {
		background-color: #cbfe0000;
		bottom: 29%;
		left: 39%;
	  }
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 40%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 42%;
		right: 28%;
	  }
	
	  .green {
		background-color: #cbfe0000;
		bottom: 23%;
		right: 37%;
	  }
  }


  @media (max-width: 1150px) {
		
	  .red {
		background-color: #cbfe0000;
		top: 38%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 43%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 36%;
		right: 40%;
	  }
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 34%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 39%;
		right: 28%;
	  }
  }

  @media (max-width: 1000px) {
	.area_click_small {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 32%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 39%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 38%;
		right: 40%;
	  }
	
	  .purp {
		background-color: #cbfe0000;
		bottom: 29%;
		left: 39%;
	  }
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 40%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 42%;
		right: 28%;
	  }
	
	  .green {
		background-color: #cbfe0000;
		bottom: 23%;
		right: 37%;
	  }
  }
  

  @media (max-width: 945px) {
	.area_click_small {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 41%;
		left: 28.5%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 44%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 34%;
		right: 39%;
	  }
	
	.green {
		background-color: #cbfe0000;
		bottom: 21%;
		right: 35%
	}

	.purple {
		background-color: #cbfe0000;
		left: 38%;
		bottom: 25%;
	}
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 34%;
		right: 20%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 37%;
		right: 27%;
	  }
	
  }

  @media (max-width: 780px) {	
	  .red {
		background-color: #cbfe0000;
		top: 31%;
		left: 31%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 37%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 38%;
		right: 40%;
	  }
	
	  .green {
		background-color: #cbfe0000;
		bottom: 23%;
		right: 37%;
	  }
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 40%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 43%;
		right: 28%;
	  }
	
  }


  @media (max-width: 700px) {
	.area_click_small {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 37%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 43%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 36%;
		right: 40%;
	  }
	
	
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 37%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 39%;
		right: 28%;
	  }

	  .entrep_fig_13 {
		max-width: 80%;
		max-height: 45% ;
		height: auto;
		border-radius: 0.5rem;
	  }

  }


  @media (max-width: 600px) {
	.area_click_small {
		position: absolute;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		cursor: pointer;
	  }
	
	  .red {
		background-color: #cbfe0000;
		top: 46%;
		left: 30%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 51%;
		right: 21%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 34%;
		right: 40%;
	  }
	
	
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 34%;
		right: 23%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 36%;
		right: 28%;
	  }
	
  }

  @media (max-width: 580px) {
	
	  .red {
		background-color: #cbfe0000;
		top:40%;
		left: 31%;
	  }
	
	  .pink {
		background-color: #cbfe0000;
		top: 46%;
		right: 23%;
	  }
	
	
	  .cyan {
		background-color: #cbfe0000;
		bottom: 36%;
		right: 41%;
	  }
	
	.green {
		background-color: #cbfe0000;
		bottom:23%;
		right:38%;
	}
	
	  .blue {
		background-color: #cbfe0000;
		bottom: 37%;
		right: 24%;
	  }
	
	  .yelo {
		background-color: #cbfe0000;
		bottom: 39%;
		right: 28%;
	  }
	
  }

  .btn_module_entrep_impact {
	max-width: 100%;
	height: auto;

	border: none;

	background-color: white;
    font-family: var(--orbitron);
    color: var(--dark-blue);
	font-size: 1.5rem;
	cursor: pointer;
	margin-top: 1rem;
	}
	
	.btn_module_entrep_impact img {
		max-width: 65%;
		max-height: 65%;
		height: auto;
		border-radius: 1rem;
	}

	.stakeholder_fig p {
		padding-bottom: 2rem;
		color: var(--white);
		font-family: var(--orbitron);
	}

	.ref_content_entrep ol li {
		padding: 0.4rem 0 !important;
		font-size: 0.9rem !important;
      color: var(--dar-blue);
	}

	.ref_content_entrep a {
		color: var(--white);
	}

	.competitors_click {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 2rem auto;
		color: var(--white);
		font-size: 1.2rem;
	}

	.icon_planet_stake {
		height: 2rem;
		width: auto;
	}

	.stake_moon_text {
		display: flex;
		align-items: center;
		justify-content: start;
		flex-direction: row;
		padding-bottom: 1rem;
	}

	.red_title {
		color: #e15959;
	}

	.purp_title {
		color: #b28fdc;
	}

	.cyan_title {
		color: #71c6e1;
	}

	.blue_title {
		color: #78aee2;
	}

	.green_title {
		color: #99e18b;
	}

	.yelo_title {
		color: #e3e35a;
	}

	.pink_title {
		color: #dc8fd2;
	}



.produt_wrapper_container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
max-width: 50%;
}

.card-wrapper_entrep{
    max-width: 50%;
    margin: 0 auto;
}
.img_product_entrep{
    width: 50%;
    display: block;
}
.img-display_entrep{
    overflow: hidden;
}
.img-showcase_entrep{
    display: flex;
    width: 100%;
    transition: all 0.5s ease;
}
.img-showcase_entrep img{
    min-width: 100%;
}
.img-select_entrep{
    display: flex;
}
.img-item_entrep{
    margin: 0.3rem;
}
.img-item_entrep:nth-child(1),
.img-item_entrep:nth-child(2),
.img-item_entrep:nth-child(3){
    margin-right: 0;
}
.img-item_entrep:hover{
    opacity: 0.8;
}









@media screen and (min-width: 992px){
    .card_entrep{
        display: flex;
        gap: 1.5rem;
    }
    .card-wrapper{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .product-imgs{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .product-content{
        padding-top: 0;
    }
}


/********** Product Slider 2 ************/
.produt_wrapper_container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  max-width: 50%;
  }
.card-wrapper_entrep2{
  max-width: 50%;
  margin: 0 auto;
}
.img_product_entrep2{
  width: 50%;
  display: block;
}
.img-display_entrep2{
  overflow: hidden;
}
.img-showcase_entrep2{
  display: flex;
  width: 100%;
  transition: all 0.5s ease;
}
.img-showcase_entrep2 img{
  min-width: 100%;
}
.img-select_entrep2{
  display: flex;
}
.img-item_entrep2{
  margin: 0.3rem;
}
.img-item_entrep2:nth-child(1),
.img-item_entrep2:nth-child(2),
.img-item_entrep2:nth-child(3){
  margin-right: 0;
}
.img-item_entrep2:hover{
  opacity: 0.8;
}









@media screen and (min-width: 992px){
  .card_entrep2{
      display: flex;
      gap: 1.5rem;
  }
  .card-wrapper2{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .product-imgs2{
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .product-content2{
      padding-top: 0;
  }
}

/************* END OF ENTREP *************/

/************* START OF HOME *************/
.space_exploration {
    background-image: linear-gradient(to bottom, #000000, #070d2b);
    height: fit-content;
    padding: 10rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
}

.space_exploration_text {
   width:100%;
   margin: auto;
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 5rem;
}

@media (max-width: 900px) {

  .space_exploration_text h2 {
    width: 100% !important;
  }
}

.space_exploration_text h2 {
  width: 40%;
}


.moon_base_img{
  max-width: 25rem;
  height: auto;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 0px 33px 0px rgba(255,255,255,0.38); 
box-shadow: 0px 0px 33px 0px rgba(255,255,255,0.38);

}

.problem_space_explo h2 {
  width: 30%;
}

.problem_space_explo img {
  max-width: 55%;
  max-height: 50%;
  min-width: 30%;
  height: auto;
}

@media (min-width:800px) {
    .space_exploration_text p {
        width: 60%;
    } 
    canvas { 
        display: block; 
        z-index: 100; 
        position: absolute;
        left: 0;
      }
}

@media (max-width:800px) {

  .problem_space_explo h2 {
    width: 90%;
  }
  
  .problem_space_explo {
    background-image: linear-gradient(to bottom,#070d2b, #0a0d2b, #0d0d2a, #0f0d29);
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding-top: 5rem;
    width: 100%;
  }


    .space_exploration_text p {
        width: 60%;
    } 
    canvas { 
        display: block; 
        z-index: 100; 
        position: absolute;
        left: 2.5rem;
      }
}

.space_exploration_text h2 {
    color: var(--white);
    font-size: 1.7rem;
    text-align: center;
    font-weight: 500;
}

.problem_space_explo {
    background-image: linear-gradient(to bottom,#070d2b, #0a0d2b, #0d0d2a, #0f0d29);
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding-top: 5rem;
    width: 100%;
  }

.problem_space_explo_container {
  height: fit-content;
  background-image: linear-gradient(to bottom, #0f0d29, #1a1c39, #262949, #33375a, #40466c);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 12rem 0 3rem 0;
  width: 100%;
}


@media (max-width: 900px) {
  .problem_space_explo_container {
    height: fit-content;
    background-image: linear-gradient(to bottom, #0f0d29, #1a1c39, #262949, #33375a, #40466c);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding: 4rem 0 3rem 0 !important;
    width: 100%;
  }
}

.problem_space_explo_container_p1 {
  color: var(--white);
  width: 80%;
  text-align: center;
}

  .space_issues {
    background-image: linear-gradient(to bottom, #40466c, #4d557e, #5b6591, #6875a4, #7686b7, #7686b7);
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: space-around;
    padding :5rem 0 0 0;
    margin: 0;
  }

  @media (max-width: 900px) {
    .space_issues {
      background-image: linear-gradient(to bottom, #40466c, #4d557e, #5b6591, #6875a4, #7686b7, #7686b7);
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      gap: 0;
      align-items: center;
      justify-content: space-around;
      padding :0 1rem;
      margin: 0;
      text-align: center;
      height: fit-content;
    }
  }

.space_issues img {
    max-width: 50%;
    max-height: 50%;
    height: auto;
    margin-top: -2rem;
}

.space_issues_text h2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.space_issues_text p {
    font-size: 1.4rem;
    color: white;
    text-align: center;
    text-wrap: wrap;
}


.food_data {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: 5rem auto 0 auto;
    width: 80%;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
		transform: translateY(0);
	}
	50% {
		box-shadow: 0 25px 15px rgba(0, 0, 0, 0.2);
		transform: translateY(-20px);
	}
	100% {
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
		transform: translateY(0);
	}
}

.procedure {
    background-image: url(https://static.igem.wiki/teams/5108/home/milky-way-2-1.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 70vh;
  }
  
  .procedure h2 {
    font-size: 2.2em;
    color: #42b761;
    font-family: var(--orbitron);
    text-align: center;
    padding: 1rem;
  }
  
.bs_container_text {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-direction: column;
  margin: auto;
}

  .bs_logo_home1 {
    max-width: 30rem;
    height: auto;
    animation: updown 5s ease infinite;
    margin: 1rem auto;
  }

  @keyframes updown {
    0% {
      transform: translateY(-10%);
    }
  
    50% {
      transform: translateY(1%);
    }
  
    100% {
      transform: translateY(-10%);
    }
}
.bs_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  width: 100%;
  padding-top: 5rem;
}

.bs_container_text {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 50%;
}

.bs_container_text p {
  color: white;
  font-size: 1.1rem;
  text-align: center;
}

#bs_word {
  color: var(--white) !important;
  font-size: 1.3rem !important;
}
  .container_reveal2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: -1rem;
  }
  
  @media (max-width: 1070px) {
    .procedure {
      height: auto;
    }
  
  }

  @media (max-width: 800px) {
   #wave2 {
    margin-bottom: 1rem;
   }

   #wave1 {
    margin-top: -0.2rem;
   }

   .container_reveal2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 0 !important;
  }

   .pf_fact_card_container h2{
    width: 80%;
    padding-bottom: 3rem;
  }


  .pf_fact_card_container{
    background-image: linear-gradient(to bottom, #304276, #284978, #244f79, #235579);
    height: fit-content;
    padding:-6rem 0 6rem 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
  }
  
  .pf_fact_card_container h2{
    width: 75% !important;
    margin: auto;
    text-align: center;
    color: rgb(209, 206, 206);
  }

  .creatine_success_div {
    margin: -3rem auto auto auto !important;
    text-align: center;
    color: rgb(209, 206, 206);
    width: 80% !important;
  }

  .bs_yeah h2 {
    display: flex;
    margin: auto;
    width: 90%;
    text-align: center;
  }


  .parts {
  background-image: linear-gradient(to bottom, #307651, #328656) !important;
  height: 800px;
  margin-top: -17rem  !important;
  padding-top: 15rem  !important;
}

  }

  .parts {
  background-image: linear-gradient(to bottom, #307651, #328656) !important;
  height: 800px;
  margin-top: -17rem  !important;
  padding-top: 15rem  !important;
}
  .defis_space_explo {
   background-image: linear-gradient(to bottom, #0f0d29, #262949, #40466c, #5b6590, #7686b7);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-top: 3rem;
   height: fit-content;
  }

.pf_fact_card_container{
  background-image: linear-gradient(to bottom, #304276, #284978, #244f79, #235579);
  height: fit-content;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
  margin-top: -1rem;
}

.pf_fact_card_container h2{
  width: 40%;
  margin: auto;
  text-align: center;
  color: rgb(209, 206, 206);
}


.creatine_success h2 {
  margin: auto;
  text-align: center;
  color: rgb(209, 206, 206);
}


.pf_ID {
  top: 0;
  position: relative;
  width: 28rem;
  height: 20rem;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
  display: flex;
  margin: auto auto;
}

.pf_ID:hover {
  transform: translateY(-20px);
}

.pf_ID::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #eeff00be;
  border-radius: 1.2em;
}

.pf_ID::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eeff00c8;
  filter: blur(20px);
}

.pf_ID span {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background-color: #05031a;
  z-index: 2;
  border-radius: 1em;
}



.pf_ID .pf_ID_content {
  position: relative;
  padding: 10px;
  z-index: 10;
  width: 100%;
  height: 100%;
  font-weight: 400;
  font-size: 0.9em;
}

.pf_ID_content_flex {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 2rem 0 0.5rem 0.5rem;
}

.ID_title {
  font-size: 1.3rem;
  text-align: center;
  width: fit-content;
  padding: 0.5rem;
  text-wrap: wrap;
}

.lupso_pfluo {
  max-width: 9rem;
  height: auto;
}

.creatine_success {
  background-image: linear-gradient(to bottom, #235579, #115e7b, #0a6779, #1b6f75, #307670);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  height: fit-content;
  gap: 3rem;
  padding: 5rem 0 6rem 2rem;
}

.creatine_success_div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  width: 50%;
}


.creatine_success img {
  max-width: 45%;
  max-height: 50%;
  height: auto;
  border-radius: 1rem;
 display: flex;
 margin: auto;
 align-items: center;
}

.h2_creatinine {
  color: yellow !important;
}

.bs_yeah h2  {
  font-size: 2rem;
  color: rgb(232, 229, 229);
  text-align: center;
}

.bs_yeah {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  background-image: linear-gradient(to bottom, #307670, #2b766a, #2a7763, #2b765a, #307651);
  height: fit-content;
  gap: 3rem;
  padding-top: 8rem;
}

.by2 {
  background-image: linear-gradient(to bottom, #328656, #30945b, #2da35f, #29b163, #24c067) !important;
  padding-top: -8rem;
}

@media (max-width: 1000px) {
  .by2 {

    padding-top: 22rem;
  }

  .home_video {
    margin-top: 4rem;
  }
}

.bs_yeah_logo {
  animation: updown 5s ease infinite;
  max-width: 20rem;
  height: auto;
  filter: drop-shadow(0 0 0.75rem rgb(186, 230, 159));
}

.prizes_application {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  height: fit-content;
  gap: 3rem;
}

.prizes_application p {
  font-size: 1.6rem;
  color: var(--purple);
  font-weight: 600;
}

.prizes_application_btn_container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: row;
  height: fit-content;
  flex-wrap: wrap;
  gap: 3rem;
  font-family: var(--oxanium);
  font-size: 1rem;
  color: white;
  word-wrap: wrap;
}

.prizes_btn {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 15px 30px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--purple);
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 3px solid var(--purple);
  border-radius: 10px;
  box-shadow: 10px 5px 5px rgb(24, 5, 50);
  width: 13em;
  word-wrap: wrap;
}

.prizes_btn:active, .prizes_btn:hover {
  transform: scale(0.9);
  background-color: rgb(24, 5, 50);
}

.bionoob_container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  height: fit-content;
  gap: 3rem;
  width: 70%;
}

.bionoob_container p {
  font-size: 1.1rem;
  color: white;
  font-weight: 300;
  text-align: center;

}

.bionoob_container img {
  max-width: 9rem;
  height: auto;
  transition: ease-out 0.5s;
}

.bionoob_container img:hover {
  scale: 0.9;
}

.context_h2 {
  color: var(--white) !important;
  font-size: 1.7rem !important;
  text-align: center;
  font-weight: 500;
}

.last_of_the_last {
  background-image: linear-gradient(to bottom, #8ecb9e, #98cfa6, #a1d4af, #aad8b7, #b4dcbf, #aedaba, #a9d9b6, #a3d7b1, #8ccf9e, #75c88a, #5dbf76, #42b761);
}

.home_video {
  background-color: black;
}

.accrodion_click p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 80%;
  color: rgb(211, 211, 211);
  font-size: 1.5rem;
  padding: 1rem 0 2rem 0;
}



.us {
    width: 100%;
    background-image: linear-gradient(to bottom, #24c067, #4bc375, #64c683, #7ac990, #8ecb9e);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 5rem 0 3rem 0;
    gap: 5rem;
  }

  @media (min-width: 480px) {
   .team_box {
    height: 28rem;
   }
    
   }


 @media (max-width: 480px) {
  .us {  
    padding: 5rem 0 3rem 0;
  }


  
 }


  .team_box{
   
    width: 30rem;
    border-radius: 1.5rem;
    margin: 0 0.5rem 0 0.5rem;
    z-index: 0 ;
    display: flex;
    flex-direction: column;
    align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.9px);
  -webkit-backdrop-filter: blur(3.9px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .team_box2{
    height: 20rem;
    width: 30rem;
    border-radius: 1.5rem;
    margin: 0 0.5rem 0 0.5rem;
    z-index: 0 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.9px);
  -webkit-backdrop-filter: blur(3.9px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  }



  .team_box h3{
    color: #392f61;
    font-size: 2.1rem;
    font-family: var(--orbitron);
    text-align: center;
    margin-top: 0.5rem;
  }
  .team_box2 h3{
    color: #392f61;
    font-size: 2.1rem;
    font-family: var(--orbitron);
    margin-top: 0.5rem;
    }

.us_p1{
    color: #392f61;
    font-size: 1.3rem;
    font-family: var(--oxanium);
    text-align: center;
    padding: 0 1rem;
      }

 .us_p2{
    color: #392f61;
    font-size: 1.3rem;
    font-family: var(--oxanium);
    text-align: center;
    margin-top: 1rem;
    padding: 0 1rem;
      }
  /* ******* Plant button ******* */
  .plnt {
      position: relative;
      padding: 13px 35px;
      margin-top: 10.5rem;
      background: #392f61 ;
      font-size: 17px;
      font-weight: 900;
      color: #cdcbcb ;
      font-family: var(--orbitron);
      border: none;
      border-radius: 8px;
      box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #564ec6b0;
      transition: all .3s ease-in-out;
    }
    
  
    
    .icon-1 {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0px;
      height: auto;
      transition: all .5s ease-in-out;
      z-index: -1;
    }
    
    .icon-2 {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0px;
      height: auto;
      transition: all .5s ease-in-out;
      z-index: -2;
    }
    
    .icon-3 {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0px;
      height: auto;
      transition: all .5s ease-in-out;
      z-index: -2;
    }
    
    .icon-4 {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0px;
      height: auto;
      transition: all .5s ease-in-out;
      z-index: -2;
    }
    
    .icon-5 {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0px;
      height: auto;
      transition: all .5s ease-in-out;
      z-index: -2;
    }
    
    .plnt:hover {
      padding: 13px 25px;
      border-radius: 8px 8px 24px 24px;
      cursor: pointer;
    }
    
    .plnt:hover .icon-1 {
      top: -250%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 50px;
      height: auto;
      animation: inIcon1 1s ease .45s forwards;
    }
    
    @keyframes inIcon1 {
      0% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    
      25% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(5deg);
      }
    
      50% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(1deg);
      }
    
      65% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(3deg);
      }
    
      100% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    }
    
    .plnt:hover .icon-2 {
      position: absolute;
      top: -200%;
      left: 90%;
      transform: translate(-50%, 0);
      width: 75px;
      height: auto;
      animation: inIcon2 1s ease .45s forwards;
    }
    
    @keyframes inIcon2 {
      0% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    
      35% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(10deg);
      }
    
      50% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(4deg);
      }
    
      80% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(5deg);
      }
    
      100% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    }
    
    .plnt:hover .icon-3 {
      position: absolute;
      top: -130%;
      left: 20%;
      transform: translate(-50%, 0);
      width: 60px;
      height: auto;
      animation: inIcon3 1s ease .45s forwards;
    }
    
    @keyframes inIcon3 {
      0% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    
      35% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(-2deg);
      }
    
      100% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    }
    
    .plnt:hover .icon-4 {
      position: absolute;
      top: -300%;
      left: 10%;
      transform: translate(-50%, 0);
      width: 85px;
      height: auto;
      animation: inIcon4 1s ease .45s forwards;
    }
    
    @keyframes inIcon4 {
      0% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    
      40% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(-3deg);
      }
    
      100% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    }
    
    .plnt:hover .icon-5 {
      position: absolute;
      top: -350%;
      left: 90%;
      transform: translate(-50%, 0);
      width: 85px;
      height: auto;
      animation: inIcon5 1s ease .45s forwards;
    }
    
    @keyframes inIcon5 {
      0% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    
      35% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(-3deg);
      }
    
      100% {
        transform-origin: 0 100%;
        transform: translate(-50%, 0) rotate(0deg);
      }
    }
    
    .fil-leaf-1 {
      fill: #29bf12;
    }
    
    .fil-leaf-2 {
      fill: #088c0e;
      fill-rule: nonzero
    }
    
    .fil-leaf-3 {
      fill: #092807
    }
    
    .fil-leaf-4 {
      fill: #088c0e
    }
    
    .fil-leaf-5 {
      fill: #092807
    }






.section_title{
  font-size: 2.8rem;
  text-align: center;
  font-family: var(--orbitron);
  color: white;
  padding-bottom: 3rem;
  padding-top: 5rem;
}

.wrapper {
    max-width: 65rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-top: 6rem;
    text-align: justify;
  }
  
  .accordion {
    --_button-size: 4rem;
     --button-size_small:2.5rem;
    --_panel-padding: 0.85rem;
    --_panel-gap: 1.2rem;
  
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .accordion:hover, .accordion-icon:hover {
    cursor: pointer;
  }
  
  @media (min-width: 900px) {
    .accordion {
      flex-direction: row;
      height: 30rem;
    }
  }
  
  /* ci dessous, code pour agir sur tous les descendants de la classe accordion */
  .accordion * {
    margin: 0;
  }
  
  .accordion-panel {
    position: relative;
    isolation: isolate;
    flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));
    overflow: hidden;
    padding: var(--_panel-padding);
    padding-right: calc(var(--_panel-padding) * 4);
    border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .accordion-panel {
      transition: flex-basis 500ms, flex-grow 500ms;
    }
  }
  
  .accordion-panel:has([aria-expanded="true"]) {
    flex-basis: clamp(15rem, 40vh, 20rem);
    flex-grow: 1;
    outline: 3px solid white;
    outline-offset: 4px;
  }
  
  /* ci dessous on choisi uniquement le texte dans la classe accordion-content, on déplace le texte vers le bas */
  .accordion-content > p {
    transform: translateY(2rem);
    opacity: 0;
    transition: transform 500ms 250ms, opacity 500ms;
    margin-left: calc(var(--_button-size) + var(--_panel-gap));
    font-size: 1.3rem;
  }

  .accordion-content p{
    font-family: var(--oxanium);
    font-size: 1rem;
    color: #fff;
    padding-top: 2rem;
    max-height: 200px;
  }

  .accordion-content::-webkit-scrollbar {
    width: 6px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background-color: #42b761;
    border-radius: 10px;
}

  @media (prefers-reduced-motion: no-preference) {
    .accordion-panel:has([aria-expanded="true"]) p {
      transition: transform 500ms 1000ms, opacity 500ms 500ms;
    }
  }
  
  .accordion-panel:has([aria-expanded="true"]) p {
    transform: translateY(0);
    opacity: 1;
  }
  
  .accordion-trigger {
    outline: 0;
  }
  
  .accordion-panel:focus-within {
    outline: 3px solid #42b761;
    outline-offset: 4px;
  }
  .accordion-title {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--oxanium);
    position: relative;
    isolation: isolate;
    color: #fff;
    display: grid;
    align-items: center;
  }
  
  @media (max-width: 900px) {
    .accordion-title::after {
      content: "";
      position: absolute;
      left: calc((var(--_panel-gap) + var(--_button-size_small)) * -1);
      width: calc(100% + (var(--_button-size_small) * 2));
      height: var(--_button-size_small);
      z-index: -1;
      border-radius: 100vw;
    }

    .accordion-content p {
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .accordion-icon {
      width: var(--_button-size_small);
      aspect-ratio: 1 / 1;
      padding: 0.75rem;
      border-radius: 50%;
      border: 2px solid #42b761;
    }
    .accordion-content p{
      font-size: 0.9rem;
      color: #fff;
      margin-top: 1rem;
      padding-bottom: 1rem;
      overflow-y: auto;
      max-height: 200px;
      margin-left: 10px;
      text-align: justify;
    }

  }
  
  .accordion-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* à cause de la ligne "position: absolute, les images se retrouvent par dessus leur contenu, pour régler ce problème on donne un indice z négatif */
    z-index: -1;
  
    transition: filter 500ms;
  }
  
  .accordion-panel:has([aria-expanded="true"]) .accordion-image {
    filter: brightness(0.5);
  }
  
  .accordion-trigger {
    display: flex;
    align-items: center;
    border: 0;
    /* pour mettre les icones tous au même endroit sur la gauche */
    gap: var(--_panel-gap);
    flex-direction: row-reverse;
    background: transparent;
    padding: 0;
  }
  
  .accordion-icon {
    fill: #42b761;
    width: var(--_button-size);
    aspect-ratio: 1 / 1;
    padding: 0.75rem;
    border-radius: 50%;
    border: 2px solid #42b761;
  }

  #project_link{
    color: #42b761;
    }

/* PF ID */
    .pf_ID {
      top: 5rem;
      position: relative;
      width: 36rem;
      height: 24rem;
      color: #fff;
      transition: 0.5s;
      cursor: pointer;
      display: flex;
      margin: auto auto;
    }
    
    .pf_ID:hover {
      transform: translateY(-20px);
    }
    
    .pf_ID::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #eeff00;
      border-radius: 1.2em;
    }
    
    .pf_ID::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #eeff00;
      filter: blur(20px);
    }
    
    .pf_ID span {
      position: absolute;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      background-image: url(https://static.igem.wiki/teams/5108/home/space-purple.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
      z-index: 2;
      border-radius: 1em;
    }
    
    
    
    .pf_ID .pf_ID_content {
      position: relative;
      padding: 0.6rem 0.8rem;
      z-index: 10;
      width: 100%;
      height: 100%;
      font-weight: 400;
      font-size: 0.95rem;
    }

    .ID_content_column p{
      color: #fff;
      margin-top: 0.5rem;
    }
  
    .pf_ID_content_flex {
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 0 1.2rem;
      gap: 3.5rem;
      margin: auto;
    }
    
    .ID_title {
      font-size: 1.3rem;
      font-weight: 500;
      text-align: center;
      color: var(--dark-blue);
      background-color: #ffffff6b;
      border-radius: 26px 58px;
      width: 70%;
      margin: auto;
      font-family: var(--orbitron);
      margin-top: 0.2rem;
    }

    .pf_glowing_plate {
      width: 8rem;
      height: auto;
      margin-left: 2rem;
    }

    .signature {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-top: 3rem;
      gap: 1rem;
    }

    .pf_column {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .pf_yellow {
      width: 5rem;
      height: auto;
      transform: rotate(60deg);
    }
  

/************* END OF HOME *************/


/************ START OF CONTRIBUTION *********/
@media (min-width: 900px) {
    .flexbox_contrib1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: auto;
        gap: 1rem;
    }
    
    .flexbox_contrib1 p, .flexbox_contrib2 p  {
        width: 50%;
        }
        
        
        .flexbox_contrib1 figure, .flexbox_contrib2 figure {
            width: 48%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin: auto;
        }
        
        
        
        .flexbox_contrib2 {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin: auto;
            gap: 1rem;
        }
        


}

@media (max-width: 900px) {
    .flexbox_contrib1, .flexbox_contrib2  {
        flex-direction: column;
    }

    .flexbox_contrib1 p, .flexbox_contrib2 p  {
        width: 100%;
        }

        .flexbox_contrib1 figure, .flexbox_contrib2 figure {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin: auto;
            padding-top: 2rem;
        }
        
}

.contrib_fig1, .contrib_fig2, .contrib_fig3, .contrib_fig4, .contrib_fig5, .contrib_fig6  {
    max-width: 90%;
    min-width: 90%;
    height: auto;
    border-radius: 0.8rem;
    border: 4px solid var(--purple);
    padding: 0.15rem;
}

.contrib_fig7 {
    max-width: 45%;
    min-width: 45%;
    height: auto;
    border-radius: 0.8rem;
    border: 4px solid var(--purple);
    padding: 0.15rem;
}
/************ END OF CONTRIBUTION *********/

/************ START OF COMMUNICATION *********/
.comm_h2 {
    font-size: 2.7rem !important;
    margin-top: 1rem  !important;
}

.row-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.row_flex_text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

@media(max-width: 900px) {
    .row-flex {
       flex-wrap: wrap;
    }
}


.all_outside {
    max-width: 18rem;
    height: auto;
    border-radius: 1rem;
}

.material_flexbox_1 ul {
    list-style: inside;
}

.material_flexbox_1 ul li {
    padding-left: 0.4rem;
    padding-top: 0.2rem;
}

.insta_page_figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    gap: 0.4rem;
}

.insta_page_figure img {
    border: solid 3px var(--purple);
    padding: 4px;
}

.insta_page {
    border-radius: 1.5rem;
    max-width: 28rem;
}

.insta_linkedIn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.video_promo_container {
    border-radius: 1rem ;
    border: solid 5px red;
    height: 20rem;
    width:fit-content;
    z-index: 10;
}

.winners_mini_jamb {
    border-radius: 1rem;
    height: 15rem;
    width: auto;
}

.interview {
    position: relative;
}

.interview::before {
    position: absolute;
    content: "";
    background-image: url(https://static.igem.wiki/teams/5108/lupso/lupso-interview.webp);
    background-size: 9rem auto;
    background-repeat:no-repeat;
    width: 9rem;
    height: 9rem;
    bottom: -7rem;
    left: 0;
}

.lupso_social_media {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 3rem;
}

.lupso_social_media img {
    width: 7rem;
    height: auto;
    }

.lupso_social_media p {
    width: 80%;
} 
/************ END OF COMMUNICATION *********/


/********** START OF TITLE OF PAGE *************/
.title_page_container {
    background-image:  linear-gradient(to right, rgba(19, 16, 53, 1), rgba(11, 36, 73, 1), rgba(0, 55, 91,1), rgba(0, 74, 105, 1), rgba(0, 94, 117, 1), rgba(0, 108, 125, 1), rgba(0, 123, 129, 1), rgba(0, 137, 130, 1), rgba(0, 149, 129, 1), hsla(166, 100%, 32%, 1), rgba(30, 173, 111, 1), rgba(66, 183, 97, 1));
   margin: 3rem auto;
    padding: 5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title_page_container h1 {
font-family: var(--orbitron);
font-weight: 600;
padding: 2.5rem 2.5rem;
border-radius: 30px 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(0.5px);
border: 1px solid rgba(255, 255, 255, 0.84);
background: rgba(255, 255, 255, 0.1);
color: var(--dark-blue);
font-size: 4rem;
}
 @media  (max-width: 900px) {
    .title_page_container h1 {
        font-size: 2rem;
    }
 }

/********** END OF TITLE OF PAGE *************/


.comm_h2 {
    font-size: 2.7rem !important;
    margin-top: 1rem  !important;
}

.row-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.row_flex_text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

@media(max-width: 900px) {
    .row-flex {
       flex-wrap: wrap;
    }

    .insta_page_figure {
        flex-direction: row;
    }
}


.all_outside {
    max-width: 18rem;
    height: auto;
    border-radius: 1rem;
}

.material_flexbox_1 ul {
    list-style: inside;
}

.material_flexbox_1 ul li {
    padding-left: 0.4rem;
    padding-top: 0.2rem;
}

.insta_page_figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    gap: 0.4rem;
}

.insta_page_figure figcaption {
   padding-bottom: 1rem;
}

.insta_page_figure img {
    border: solid 3px var(--purple);
    padding: 4px;
}

.insta_page {
    border-radius: 1.5rem;
    max-width: 60%;
    min-width: 60%;
    height: auto;
}

.insta_linkedIn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.video_promo_container {
    border-radius: 1rem ;
    border: solid 5px red;
    height: 20rem;
    width:fit-content;
    z-index: 10;
}

.winners_mini_jamb {
    border-radius: 1rem;
   max-width: 70%;
   max-height: 70%;
   height: auto;
}

.interview {
    position: relative;
}

.interview::before {
    position: absolute;
    content: "";
    background-image: url(https://static.igem.wiki/teams/5108/com-educ/lupso-interview.webp);
    background-size: 9rem auto;
    background-repeat:no-repeat;
    width: 9rem;
    height: 9rem;
    bottom: -7rem;
    left: 0;
}

.lupso_social_media {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 3rem;
}

.lupso_social_media img {
    width: 7rem;
    height: auto;
    }

.lupso_social_media p {
    width: 80%;
} 


.image_educ_row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin: auto;
    gap: 1rem;
}

@media (max-width: 900px) {
    .image_educ_row {
     flex-wrap: wrap;
    }


    .image_educ_row img {
        min-width: 100%;
        min-height: 100%;
        height: auto;
        border-radius: 1rem;
        border: solid 3px var(--purple);
        padding: 4px;
    }

    .insta_page {
        border-radius: 1.5rem;
        max-width: 100%;
        min-width: 100%;
        height: auto;
    }


    .interview::before {
        position: absolute;
        content: "";
        background-image: url(https://static.igem.wiki/teams/5108/com-educ/lupso-interview.webp);
        background-size: 9rem auto;
        background-repeat: no-repeat;
        width: 9rem;
        height: 9rem;
        bottom: -10rem;
        left: -3rem;
      }
}

.image_educ_row img {
    max-width: 50%;
    max-height: 50%;
    height: auto;
    border-radius: 1rem;
    border: solid 3px var(--purple);
    padding: 4px;
}

/************ START OF MODEL PAGE ************/
.model_big_box {
    border-radius: 1rem;
    border: 5px solid var(--purple);
    text-align: center;
    padding: 1rem;
    width: 95%;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}


.model_big_box p {
    font-size: 1.2rem;
    font-weight: 700;
}


.model_small_box {
    border-radius: 1rem;
    border: 5px solid var(--purple);
    text-align: center;
    padding: 1rem;
    width: 85%;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}


.model_small_box p {
    font-size: 1rem;
    font-weight: 700;
}

.lupso_rebs_model1  {
    max-width: 10%;
    max-height: 10%;
    height: auto;
    display: flex;
    margin: auto;
}

.eg_little {
    font-size: 0.9rem;
    display: flex;
    margin: auto;
    align-items: center;
    width: 90%;
}

.model_ul {
    list-style-position: inside;
}

.model_ul li {
    margin-left: 0.3rem;
}

.model_accordion {
    width: 100%;
}

.model_flex_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
    margin: auto;
}

.model_flex_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
    margin: auto;
}

.model_flex_row_reverse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-direction: row-reverse;
    margin: auto;
}

@media (max-width : 900px) {
    .model_flex_row, .model_flex_row_reverse, .model_fig_row {
      flex-direction: column;
    }
    .model_fig_row img {
        max-width: 80%;
        max-height: 80%;
        height: auto;
    }
}

.model_flex_row img, .model_flex_row_reverse img{
   max-width: 12%;
   max-height: 12%;
   height: auto;
}

.lupso_crazy {
    max-width: 15% !important;
    max-height: 15% !important;
    height: auto;   
    border-radius: 1rem;
}

.cycle_model {
    max-width: 80%;
    max-height: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.model_fig_row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
}

.model_fig_row img {
    max-width: 50%;
    max-height: 50%;
    height: auto;
}

.green_sub {
    color: var(--white) !important;
}
/************ END OF MODEL PAGE ************/

/************ START OF NEW PROJECT DESCRIPTION ***********/

.h2_pd {
  font-size: 2.5rem !important;
  padding-bottom: 0.3rem !important;
}

.long_material_title {
 font-size: 1.95rem !important;
}

.material_flexbox_1 h5 {
  font-size: 1.15rem;
  color: var(--purple);
  font-family: var(--orbitron);
}

.pd_img {
  max-width: 50%;
  max-height: 50%;
  height: auto;
  border-radius: 1rem;
  border: 4px solid var(--purple);
  padding: 0.05rem;
}

.pd_img2 {
  max-width: 70%;
  max-height: 70%;
  height: auto;
  border-radius: 1rem;
  border: 4px solid var(--purple);
  padding: 0.05rem;
}

.pd_img3 {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 1rem;
  border: 4px solid var(--purple);
  padding: 0.05rem;
}


.fig_pd {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}



/************ START OF NEW PROJECT DESCRIPTION ***********/


/*********** START OF ENGINEERING ***********/
.flex_row_eng {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: row-reverse;
    gap: 2rem;
}

.flex_row-reverse_eng {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: row;
    gap: 2rem;
}

@media (max-width: 800px) {
    .flex_row_eng, .flex_row-reverse_eng  {
        flex-direction: column;
    }
}

.design_engin_img {
    max-width: 20%;
    max-height: 20%;
    height: auto;
}

.fig_col_eng {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.img_eng1 {
    max-width: 80%;
    max-height: 60%;
    height: auto;  
}

.img_eng2 {
    max-width: 100%;
    max-height: 100%;
    height: auto;  
    border-radius: 1rem;
}

.img_eng3 {
    max-width: 50%;
    max-height: 50%;
    height: auto;  
    border-radius: 1rem;
}

.img_eng4 {
    max-width: 30%;
    max-height: 30%;
    height: auto;  
    border-radius: 1rem;
}

.eng_ul {
    list-style-position: inside;
}

.eng_ul li {
    width: 90%;
    margin:0 0.5rem;
}

.fig_container_row_eng {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: row;
}
/*********** END OF ENGINEERING ***********/


/*********** START OF RESULTS ***********/

.row_resu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 1rem;
    flex-direction: row;
    margin-top: -2rem;
}

.row_resu_no_margin {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 1rem;
    flex-direction: row;
}

.row-reverse_resu_no_margin {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 1rem;
    flex-direction: row-reverse;
}

.row-reverse_resu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 1rem;
    flex-direction: row-reverse;
    margin-top: -2rem;
}


@media (max-width: 900px) {
    .row_resu, .row-reverse_resu, .row_resu {
        flex-direction: column;
    }
}

.lups_resu1 {
    max-width: 15%;
    max-height: 15%;
    height: auto;
    border-radius: 1rem;
}

.lups_resu2 {
    max-width: 11%;
    max-height: 11%;
    height: auto;
    border-radius: 1rem;
}

.lups_resu3 {
    max-width: 20%;
    max-height: 20%;
    height: auto;
}

.fig_col_resu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-direction: column;
}

.graph_resu1 {
    max-width: 60%;
    max-height: 60%;
    height: auto;  
}

.graph_resu2 {
    max-width: 70%;
    max-height: 70%;
    height: auto;  
}

.graph_resu3 {
    max-width: 80%;
    max-height: 80%;
    height: auto;  
}


.graph_resu4 {
    max-width: 50%;
    max-height: 50%;
    height: auto;  
}

.graph_resu5 {
    max-width: 40%;
    max-height: 40%;
    height: auto;  
}

.graph_resu6 {
    max-width: 100%;
    max-height: 100%;
    height: auto;  
}


.neg_margin {
    margin-top: -2rem !important;
}

h6 {
    font-family: var(--oxanium);
    font-size: 1.05rem;
    color: var(--white);
}

.ul_results {
    list-style-position: inside;
}

.ul_results li {
    padding: 0.5rem !important;
}

.max-w_td {
    padding: 3rem !important;
}
/*********** END OF RESULTS ***********/

/*********** START OF PARTS ***********/

.small_part {
width: 20rem;

    height: auto;
}


.tiny_part {
    width: 5rem;
    
        height: auto;
    }


.min-w_td {
    padding: 1.5rem !important;
}

.th_parts {
    width: 10%;
}
/*********** END OF PARTS ***********/

.collab_fig {
    max-width: 50%;
    max-height: 50%;
    height: auto;
}

/********** START OF IHP **********/
.max_IHP_body {
  overflow-x: hidden;
}

.interactive_map_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

@media (max-width: 1000px) {
   
  .interactive_map_container {
  flex-direction: column;
}
}

#world_map_full {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin: auto;
  padding: 4rem;
}

#container_map_garonne {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin: auto;
  padding: 4rem;
}

.real_map_container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
}



.real_map_container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pin {
  background-color: var(--dark-blue);
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  cursor: pointer;
}

.pin::before {
  content: '';
  background-color: var(--dark-blue);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 50%;
  animation: pulse 1.3s ease-in-out infinite;
}

.pin span {
  display: inline-block;
  white-space: wrap;
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(224, 223, 223, 0.538);
  border-radius: 3rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.7rem;
  font-family: var(--oxanium);
  color: var(--dark-blue);
  text-align: center;
}

.algae {
  top: 37.5%;
  left: 50%;
}
.algae span {
 transform: translate(5%, -50%);
}

.space_ressource {
  top: 49%;
  left: 28.5%;
}

.cockell {
  top: 34%;
  left: 47.5%;
}

.cockell span {
  transform: translate(-60%, -120%);
}

.aboa {
  top: 39.5%;
  left: 49%;
}

.aboa span {
  transform: translate(-60%, 30%);
}

.tbi {
  top: 55%;
  left: 61%;
}

.imean {
  top: 53.2%;
  left: 61%;
}

.imean span {
  transform: translate(-70%, -130%);
 }

 .inrae {
  top: 57%;
  left: 60%;
}

.inrae span {
  transform: translate(-70%, 30%);
 }

.cnes {
  top: 56%;
  left: 58%;
}

.cnes span {
  transform: translate(-140%, -50%);
 }

 .agronutrition {
  top: 65%;
  left: 51%;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@media screen and (max-width: 600px) {
  .pin span {
    font-size: 0.5rem;
    left: 0.3rem;
  }

  .pin {
    width: 0.3rem;
    height: 0.3rem;
  }
  

  .algae {
    top: 44%;
    left: 19%;
  }

  .agronutrition {
    top: 69%;
    left: 51%;
  }

}

.map_toggle_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  font-weight: 600;
  margin-top: -3rem;
}

.switch_map {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch_map input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider_map {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dark-blue);
  transition: .4s;
  border-radius: 30px;
}

.slider_map:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: var(--dark-blue);
  box-shadow: inset 2px -2px 0 1.8px #fff;
  transition: .4s;
  animation: maptoggle 0.3s linear;
}

@keyframes maptoggle {
  0% {
    transform: translateX(1.5em);
  }

  80% {
    transform: translateX(-0.3em);
  }

  100% {
    transform: translateX(0em);
  }
}

.switch_map input:checked + .slider_map:before {
  background-color: rgb(250, 250, 250);
  box-shadow: none;
  transform: translateX(1.5em);
  animation: moontoogle 0.3s linear;
}

@keyframes moontoogle {
  0% {
    transform: translateX(0px)
  }

  80% {
    transform: translateX(1.6em)
  }

  100% {
    transform: translateX(1.4em)
  }
}

.explanation_map {
  width: 25rem;
}

.explanation_map_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#explanation_IHP1, #explanation_IHP2, #explanation_IHP3, #explanation_IHP4, #explanation_IHP5, #explanation_IHP6, #explanation_IHP7, #explanation_IHP8 {
  flex-grow: 1;
  border-radius: 1rem;
  border: 3px solid var(--purple);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto 2rem;
  padding: 0.5rem;
  height: fit-content;
}

#explanation_IHPA, #explanation_IHPB, #explanation_IHPC, #explanation_IHPD, #explanation_IHPE, #explanation_IHPF, #explanation_IHPG, #explanation_IHPH, #explanation_IHPI, #explanation_IHPJ, #explanation_IHPK, #explanation_IHL, #explanation_IHPM {
  flex-grow: 1;
  display: none;
  text-align: justify;
  margin: auto 0.2rem;
  padding: 0.5rem;
  height: fit-content;
}
.map_hide {
  display: none;
}

.explanation_map_buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 0.8rem 1rem;
  height: fit-content;
  gap: 0.5rem;
  cursor: pointer;
}

.map_buttons_links {
  height: 2rem;
  width: 10rem;
  border-radius: 1.2rem;
  border: none;
  color: white;
  background-color: var(--purple);
  text-align: center;
  font-family: var(--oxanium);
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.explanation_map_text {
  text-align: justify;
  padding: 0 0.6rem;
  width: 20rem;
}

.world_map {
  flex-grow: 2;
}

.world_map img {
  max-width: 55rem;
  max-height: auto;
}

.card_IHP {
    background-color: hsla(252, 35%, 28%, 0.3);
    background-image: linear-gradient(43deg, hsla(252, 35%, 28%, 0.3) 0%, hsla(252, 35%, 28%, 0.3) 46%, hsla(136, 47%, 49%, 0.3) 100%);
    border-radius: 8px;
    color: white;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 100%;
    max-height: 100%;
    height: auto;
  }
  
  
  
  .card_IHP:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  
  .card_IHP:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    z-index: 1;
  }
  
  .card_IHP:hover:before {
    transform: translateX(-100%);
  }
  
  .card_IHP:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    z-index: 1;
  }
  
  .card_IHP:hover:after {
    transform: translateX(100%);
  }

  .col_img_ihp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: auto;
  }

  .ihp_logo {
    max-width: 85%;
    max-height: 85%;
    height: auto;
  }

  
  .ihp_logo2 {
    max-width: 30%;
    max-height: 30%;
    height: auto;
  }

  .ihp_logo3 {
    max-width: 60%;
    max-height: 60%;
    height: auto;
  }

  .ihp_logo4 {
    max-width: 40%;
    max-height: 40%;
    height: auto;
  }

  .ihp_logo5 {
    max-width: 70%;
    max-height: 70%;
    height: auto;
  }

  
  .ihp_logo6 {
    max-width: 99%;
    max-height: 99%;
    height: auto;
  }

  .loop_ihp {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 1rem;
    max-width: 60%;
    min-height: 60%;
    height: auto;
  }

  .timeline_ihp {
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .ihp_ref_seed {
    width: 100%;
  }


  .timeline_hp_max{
    position:relative;
    margin:20px auto;
    padding:20px 0;
    width:1000px;
    box-sizing:border-box;
    }
    .timeline_hp_max:before{
    content:'';
    position:absolute;
    left:8px;
    width:2px;
    height:100%;
    background:#c5c5c5;
    }
    .timeline_hp_max ul{
    padding:0;
    margin:0;
    }
    
    .timeline_hp_max ul li{
    list-style:none;
    position:relative;
    width: 100%;
    padding:20px 40px;
    box-sizing:border-box;
    margin-bottom: 8rem;
    }

    .timeline_hp_max ul li::before{
      content:'';
      position:absolute;
      width:1.8rem;
      height:1.8rem;
      top:24px;
      left:-6px;
      background-image: url(https://static.igem.wiki/teams/5108/general/moon-pointer.png);
      background-size: cover;
      }


      .logo-i-cad1 {
        max-width: 15%;
        max-height: 15%;
        height: auto;
        border-radius: 1rem;
      }

      .logo-i-cad2 {
        max-width: 20%;
        max-height: 20%;
        height: auto;
      }
      /********** END OF IHP **********/


      .grey {
        color:#a4a4a4 !important;
      }