body {
	margin: 0;
	height: auto;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
.video-background {
  position: static;
  margin-top: 2.7cm;
}
a{
  text-decoration: none;
  color: inherit;
}
a:hover{
  text-decoration: none;
  color: inherit;
}
iframe{
  height: 100%;
  width: 77.77777778000001vh;
  min-width: 100%;
  min-height: 55.25vw;
}
/*-------------------SCROLLING MOUSE ANIMATION HOME---------------------------*/
#section10 { background: url(https://www.nxworld.net/example/css-scroll-down-button/bg10.jpg) center center / cover no-repeat;}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .3em;
  text-decoration: none;
  transition: opacity .3s;
}
@media (max-width: 1500px){
  .demo a{
    bottom: 50;
  }
}
.demo a:hover {
  opacity: .5;
}

#section10 a {
  padding-top: 60px;
}
#section10 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
#section10 a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

blue{
  color: #257bb4;
}
strong{
  color: #748230;
  font-weight: 600;
}
.container{
  background-color: #F8FBED; /* #F8FBED;*/
}

.wrapper {
  position: absolute;
  width: 80vw;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-around;
  gap: 5px;
  margin-top: 100vh;
}
/*------------------------ PUZZLE-----------------------*/

/* Create a full-width container and flexbox layout to split it into halves */
.container-puzzle {
    display: flex;
    width: 100%;
}

/* Style the left half */
.left-half-puzzle {
    flex: 1; /* Take up half the width */
    padding-left: 100px; /* Add some padding for spacing */
    padding-right: 20px;
    display: flex; /* Enable flexbox for vertical centering */
    flex-direction: column; /* Stack child elements vertically */
    justify-content: center; /* Vertically center content */
    text-align: left; /* Justify text */
    font-family: "Poppins", sans-serif; /* Use the Poppins font */
    font-size: 26px;
    color: #333e02;
}

/* Style the right half */
.right-half-puzzle {
    flex: 1; /* Take up half the width */
    text-align: center; /* Center the image horizontally */
    padding-right: 80px; /* Add some padding for spacing */
}

/* Style the image within the right half */
.right-half-puzzle img {
    max-width: 100%; /* Ensure the image doesn't exceed the container's width */
    height: auto; /* Maintain the image's aspect ratio */
}

/*----------------------------- προταση που εισαγει το επομενο κουτακι σλει -----------------------*/

.boom-it-appeared {
  font-family: "poppins", sans-serif;
  font-size: 60px; 
  font-weight: bold;
  text-align: center;
  color: #627b0e;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
  letter-spacing: 3px; /* Adjust the letter-spacing to your desired value */
}

.boom-it-appeared.active {
  opacity: 1;
  transform: translateY(0);
}

.word, .extra-extra-large {
  margin-right: 10px; /* Adjust the margin-right to increase spacing */  
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.extra-extra-large {
  font-size: 80px; 
  font-weight: bold;
  color: #405508;
  letter-spacing: 5px; /* Adjust the letter-spacing to your desired value */
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow effect */
}



/*----------------- TEXT SCROLL  --------------------------*/
h2 {/*----------------OPHAELIA--------------*/
  font-size: 45px;
  font-weight: normal;
  color: black;
}
.type {
  position: static;
  min-width: 400px;
	max-width: 1170px;
  margin-top: 300px;
  margin-bottom: -100px;
  margin-left: 50%;
  width: 60%;
	padding: 2.6em 3.8em;
	cursor: pointer;                            
  transform: translate(-50%, -50%);
	background: rgba(241, 255, 163, 0.601);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
             rgba(0, 0, 0, 0.09) 0px 4px 2px, 
             rgba(0, 0, 0, 0.09) 0px 8px 4px, 
               rgba(0, 0, 0, 0.09) 0px 16px 8px, 
            rgba(0, 0, 0, 0.09) 0px 32px 16px;  
  backdrop-filter: blur( 4px );
  border-radius: 10px;
}
.note::after { /*-------------- LINE IN THE CARD ----------------*/
	content: '';
	width: 90%;
	height: 7px;
	border-radius: 999px;
	background-color: #AFAFAF;
	background: linear-gradient(135deg, #6c842e 0%, #a4ac34 100%);
	position: absolute;
	top: -1.8em;
	left: 0;
}
.note { /*--------------TEXT BELOW---------------*/
	font-size: 1.5em;
	color: #67694f;
	position: relative;
	margin-top: 4em;
}

/* Scroller styling */
.scroller {
  height: 1em;
  line-height: 1.2em;
  position: relative;
  overflow: hidden;
  width: 10em;
}
.scroller > span {/*---------------SCROLLING TEXT---------------*/
  position: absolute;
  top: 0;
  animation: slide 7s infinite;
  font-weight: bold;
  color: #5b7323;
}
@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -1.2em;
  }
  50% {
    top: -2.4em;
  }
  75% {
    top: -3.6em;
  }
}

.bold-and-fabulous {
  font-weight: bold;
  font-style: italic;
  color: #5b7323;
}

/*----------------------------MAPS THESSALY AND GREECE----------------*/

/* Apply general styles to the containers */
    .container-maps-two {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f0f0f000;
      margin: 0px;
      width: 100%;
    }

    /* Apply styles to the left and right divs for Container 1 */
    
    .left1 {
      flex: 1;
      padding-left: 100px;
      animation: float 3s ease infinite;
    }

    .right1 {
      flex: 1;
      padding-left: 60px;
      padding-right: 100px;
    }

    .right1 {
      text-align: left;
    }

    /* Apply styles to the left and right divs for Container 2 */
    
    .left2 {
      flex: 1;
      padding-left: 80px;
      animation: float 3s ease infinite;
    }


    .right2 {
      flex: 1;
      padding-left: 60px;
      padding-right: 100px;

    }

    /* Apply styles to the image for Container 1 */
    .left1 img {
      max-width: 95%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* Apply styles to the image for Container 2 */
    .left2 img {
      max-width: 95%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* Apply styles to the text box for Container 1 */
    .right1 p {
      font-family: 'Poppins', sans-serif;
      font-size: 30px;
      text-align: flex;
      color: #333e02;
    }

    /* Apply styles to the text box for Container 2 */
    .right2 p {
      font-family: 'Poppins', sans-serif;
      font-size: 30px;
      text-align: flex;
      color: #333e02;
    }

    /* Styles for the first container */
    .container-maps-two1 {
      background-color: transparent;
    }

    /* Styles for the second container */
    .container-maps-two2 {
      background-color: #a4ac34;
    }

    /* Media query for responsiveness */
    @media (max-width: 768px) {
      .container-maps-two {
        flex-direction: column;
        text-align: center;
      }
      .left1,
      .left2,
      .right1,
      .right2 {
        width: 100%;
      }
      .left1 img,
      .left2 img {
        width: 100%;
      }
    }

    /* Keyframes for the floating effect */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/*------------------------απλη προταση πριν απο τα βακτηρια --------------------*/

.simple-text-consortium {
  font-size: 32px;
  text-align: center;
  color: #405508;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 150px;
  font-family: "Poppins", sans-serif;
}



/*------------------------IMAGE MOVE---------------------------*/
.img-move {
  position: absolute;
  width: 100%;
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -3cm;
}

.image {
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  transition: transform 0.2s ease-out;
}
/*-----------------E COLI----------------------*/
#image1 {
  background-image: url('https://static.igem.wiki/teams/4624/wiki/coli.png');
  height: 9cm;
  width: 5cm; 
  margin-left: 50vw;
}
/*-------------------PUTIDA----------------*/
#image2 {
  background-image: url('https://static.igem.wiki/teams/4624/wiki/puttida.png');
  height: 9.6cm;
  width: 6.3cm;
  margin-left: -50vw;
} 
.coli{
  font-family: 'Poppins', sans-serif;
  color: #257bb4;
  font-size: 50px;
  font-weight: 500;
  padding-left: 20%;
  margin-top: 1cm;

}
.pseudo{
  font-family: 'Poppins', sans-serif;
  color: #6c842e;
  font-size: 50px;
  font-weight: 100;
  margin-left: 60%;
  margin-top: -2.4cm;
}
.explain{
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  display: flex;
  flex-direction: row;
  gap: 4cm;
  justify-content: space-around;
  margin-top: 3cm;

}
/*-------------------TYPING EFFECT-----------------------------------*/

.container-typewritter {
      display: flex;
      align-items: center; /* Center vertically */
      height: 65vh; /* Make the container take up the full viewport height */
      background-color: transparent; /* Background color */
      margin-left: 150px;
    }
    
    .css-typing p {
  border-right: .2em solid #93b82b;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  color: #627b0e;
  font-size: 32px;
  white-space: nowrap;
  overflow: hidden;
  position: relative; /* Position relative for pseudo-element */
  margin-bottom: 60px; /* Add margin to increase the distance between lines */
}
  

.css-typing p:nth-child(1) {
  width: 40em;
  opacity: 0;
  -webkit-animation: type 3.5s steps(60, end);
  animation: type 3.5s steps(60, end);
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 30em;
  opacity: 0;
  -webkit-animation: type2 3.5s steps(60, end);
  animation: type2 3.5s steps(60, end);
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 20em;
  opacity: 0;
  -webkit-animation: type2 3.5s steps(60, end);
  animation: type2 3.5s steps(60, end);
  -webkit-animation-delay: 12.5s;
  animation-delay: 12.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #93b82b;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}

.dark-type {
    color: #526807;
}

.darker-type {
    color: #3c4f06;
}

.darkest-type {
    color: #2f3807;
}
/*-------------------------------TEXT ANIMATINON--------------------------*/
.animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6c842e;
  font-family: 'Poppins', sans-serif;
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 1cm;
}

.problem, .solution {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.problem.active, .solution.active {
  opacity: 1;
  transform: translateY(0);
}
/*------------------UNDERLINE--------------------------*/
.underline{
  border-bottom: 3px solid;
  border-color:#6c842e;
  margin-left: 2cm;
  margin-right: 2cm;
}
/*-------------------------PHA TITLE------------------------------*/
.pha{
  display: flex;
}
.pha-title{
  font-weight: 500;
  font-size: 70px;
  font-family: 'Poppins', sans-serif;
  padding-top: 1.5cm;
  color: #333e02;
  text-align: center;
  background-color: #ECF5CE;
}
.chemi-chain{
  position: absolute;
  height: 10cm;
  width: 17cm;
  margin-left: 3cm;
  margin-top: -3cm;
}
@media(max-width: 1300px){
  .chemi-chain{
    margin-left: 1cm;
    margin-top: 1cm;
    height: 7cm;
    width: 12cm;
  }
}

@media (max-width: 1600px){
  .chemi-chain{
    margin-left: 1cm;
    margin-top: 1cm;
  }
}
/*------------------------PLASTIC POLLUTION IMAGE AND TEXT-----------------------*/

/* Create a full-width container and flexbox layout to split it into halves */
.container-plastic-pollution {
    display: flex;
    width: 100%;
    margin-top: -1cm;
    background-color: #ECF5CE;

}

/* Style the left half */
.left-half-plastic {
    flex: 1; /* Take up half the width */
    padding-top: 150px; /* Add some padding for spacing */
    padding-bottom: 100px; /* Add some padding for spacing */
    padding-left: 100px; /* Add some padding for spacing */
    padding-right: 30px; /* Add some padding for spacing */
    display: flex; /* Enable flexbox for vertical centering */
    flex-direction: column; /* Stack child elements vertically */
    justify-content: center; /* Vertically center content */
    text-align: left; /* Justify text */
    font-family: "Poppins", sans-serif; /* Use the Poppins font */
    font-size: 26px;
    color: #333e02;
}

/* Style the right half */
.right-half-plastic {
    flex: 1; /* Take up half the width */
    text-align: center; /* Center the image horizontally */
    padding-right: 80px; /* Add some padding for spacing */
    justify-content: center; /* Vertically center content */
    margin-top: 100px;
}

/* Style the image within the right half */
.right-half-plastic img {
    max-width: 100%; /* Ensure the image doesn't exceed the container's width */
    height: auto; /* Maintain the image's aspect ratio */
}


/*-----------------------------three phases implementation---------------------------*/


.three-phases-implementation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 40px;
}


/*--------------------------CYCLE THROUGH PHRASES-------------------*/
.phrase-container {
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-left: 5cm;
  background-color: transparent;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
}

.phrase {
  font-size: 24px;
  font-weight: bold;
  display: none;
}

.active-phrase {
  display: block;
}
/*---------------------------CARDS DEPARTMENT------------------------*/
.all-depart{
  display: flex;
  gap: 1cm;
  justify-content: center;
  margin: 2cm 1cm;
}
@media (max-width: 1000px){
  .ali{
    display: grid;
  }
}
/*----------------------IMPLEMENTATION TERMA KATO BOXES---------------------*/
.depart-imple {
  background-image: url(https://static.igem.wiki/teams/4624/wiki/implem.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 350px;
  box-shadow:rgba(0, 0, 0, 0.4) 10px 15px 10px, rgba(0, 0, 0, 0.3) 0px 20px 40px -15px, rgba(0, 0, 0, 0.2) 0px -5px 0px inset;
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.depart-imple::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #8b9b52;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.depart-imple:hover::before {
  height: 100%;
}

.depart-imple:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/*----------------------HUMAN TERMA KATO BOXES---------------------*/
.depart-human {
  background-image: url(https://static.igem.wiki/teams/4624/wiki/edu-green.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 350px;
  box-shadow: rgba(0, 0, 0, 0.4) 10px 15px 10px, rgba(0, 0, 0, 0.3) 0px 20px 40px -15px, rgba(0, 0, 0, 0.2) 0px -5px 0px inset;
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.depart-human::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #8b9b52;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.depart-human:hover::before {
  height: 100%;
}

.depart-human:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/*----------------------ENTRE TERMA KATO BOXES---------------------*/
.depart-entre {
  background-image: url(https://static.igem.wiki/teams/4624/wiki/entre-green.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 350px;
  box-shadow: rgba(0, 0, 0, 0.4) 10px 15px 10px, rgba(0, 0, 0, 0.3) 0px 20px 40px -15px, rgba(0, 0, 0, 0.2) 0px -5px 0px inset;
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.depart-entre::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #8b9b52;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.depart-entre:hover::before {
  height: 100%;
}

.depart-entre:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/*-------------------------------------------------------------------*/
.depart-heading{
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
}
.para{
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
}
.depart-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: white;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.depart-content .depart-heading {
  font-weight: 700;
  font-size: 32px;
}

.depart-content .para {
  line-height: 1.5;
}

.depart-content .btn {
  color: white;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #8b9b52;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.depart::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #8b9b52;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.depart:hover::before {
  height: 100%;
}

.depart:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.depart-content .btn:hover {
  outline: 2px solid #8b9b52;
  background: transparent;
  color: #a4ac34;
}

.depart-content .btn:active {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}