body {
  overflow-x: hidden;
}

/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #b3429f 0%, #5acddb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-container {
  text-align: center;
  color: white;
}

.loading-gif {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.loading-text {
  font-family: 'Orbitron', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: fadeInOut 1.5s infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Progress Bar Styles */
.progress-bar-container {
  position: fixed;
  top: 85px; /* 导航栏高度 */
  left: 0;
  width: 100%;
  height: 8px;
  z-index: 99;
  overflow: hidden;
}

.progress-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.progress-bg-img {
  width: auto;
  height: 150%;
  object-fit: contain;
  opacity: 0.8;
  z-index: 1;
  transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: left center;
  position: relative;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #aefbeb 0%, #5acddb 100%);
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(174, 251, 235, 0.5);
  z-index: 2;
}

/* 移动端进度条样式 */
@media (max-width: 768px) {
  .progress-bar-container {
    height: 4px;
  }

  .progress-bg-img {
    opacity: 0.2;
  }
}


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




: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%; */
  /* 
}

sup {

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 {
  
}


.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 ************ */



.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 i {transition: transform .25s ease;}
.parent-menu a.toggled i {
transform: rotate(180deg) !important;
}


#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: 1;
z-index: 3;
/* 将箭头近似转为主题色 #aa4b9d */
filter: brightness(0) saturate(100%) invert(42%) sepia(24%) saturate(1068%) hue-rotate(291deg) brightness(93%) contrast(92%);
}


.parent-menu:hover #arrow_green {
opacity: 0;
}

#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 {

}

.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 {

border: none;
scale: 1.03;
}




.btn_module1 {

  background-repeat: no-repeat;
  background-size: contain;
}


.btn_module2 {

  background-repeat: no-repeat;
  background-size: contain;
}

.btn_module3 {

  background-repeat: no-repeat;
  background-size: contain;
}

.btn_module4 {

  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;
  
  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 {
  
}

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 
@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;
transform-style: preserve-3d;
margin: 0 50px;
cursor: pointer;
}

.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 {

}



.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 0%,
  rgba(255, 255, 255, 0.1) 50%,
  rgba(255, 255, 255, 0.2) 100%
);
border-radius: 1.5rem;
/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
}
.wrapper_team::after {
bottom: 0;
opacity: 0;
background-image: linear-gradient(
  to bottom,
  transparent 0%,
  rgba(255, 255, 255, 0.1) 50%,
  rgba(255, 255, 255, 0.2) 100%
);
border-radius: 1.5rem;
}


.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: '';

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;
transform-origin: center center;
}


.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-size: cover;
background-repeat: no-repeat;
}

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

.yohann_back {

background-size: cover;
background-repeat: no-repeat;
}

.laura_back {

background-size: cover;
background-repeat: no-repeat;
}

.lea_back {

background-size: cover;
background-repeat: no-repeat;
}
.ls_back {

background-size: cover;
background-repeat: no-repeat;
}

.matt_back {

background-size: cover;
background-repeat: no-repeat;
}

.nathan_back {

background-size: cover;
background-repeat: no-repeat;
}

.rebs_back {

background-size: cover;
background-repeat: no-repeat;
}

.others_back {

background-size: cover;
background-repeat: no-repeat;
}


.card_team_back {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.5rem;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}

/* 自定义滚动条样式 */
.card_team_back::-webkit-scrollbar {
width: 8px;
}

.card_team_back::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}

.card_team_back::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}

.card_team_back::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}

/* Firefox滚动条样式 */
.card_team_back {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

.card_team_back_header {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
margin-bottom: 1.5rem;
gap: 0.5rem;
}

.card_team_back_content {
flex: 1;
overflow-y: auto;
max-height: calc(100% - 200px);
padding-right: 0.5rem;
}

.card_team_back_header h3 {
font-size: 1.8rem;
font-weight: 600;
color: white;
text-align: center;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card_team_back_content p {
color: white;
text-align: justify;
line-height: 1.6;
font-size: 1rem;
margin: 0;
padding: 0.5rem 0;
}

/* 为内容区域添加滚动条样式 */
.card_team_back_content::-webkit-scrollbar {
width: 6px;
}

.card_team_back_content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}

.card_team_back_content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}

.card_team_back_content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}


.profile_pic {
height: 8rem;
width: auto;
margin-top: 1rem;
margin-bottom: 0.5rem;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
}

.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);
pointer-events: none;
}

/* 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: '';

  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 {

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;
  
  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;

}

.nav-item-long:before {
  content: "";
      position: absolute;
      left: -17px;
      width: 28px;
      height: 28px;

}

.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;

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;
    
    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-size: cover;
}

.timeline ul li:nth-child(even):before
{
content:'';
position:absolute;
width:1.8rem;
height:1.8rem;
top:24px;
left:-15px;

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 {

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;
  
  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;
  
  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;

}
/************ 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;
  
  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-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-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 {
  
  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;

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%;
  
  }
  
.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%;
  
  }

.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%;
  
  }

.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%;

}

.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%;
  
  }

  .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%;
  
  }

  .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%;
  
  }

  .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%;
  
  }

  .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%;
  
  }

  .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%;
  
  }

  .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;

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-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;

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;

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;
    
  }
  
  .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 {
  
}

@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;
    
    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-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-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-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-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%;

}

.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;

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;

}

.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;

}

.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);
  
  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-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;
    }