body {
  /* padding-top: 56px; */
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}


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

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

.bg-hero {
  background-color: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 18vh;
}

/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: .25rem;
  border-radius: .25rem
}

.bd-callout h4 {
  margin-bottom: .25rem
}

.bd-callout p:last-child {
  margin-bottom: 0
}

.bd-callout code {
  border-radius: .25rem
}

.bd-callout+.bd-callout {
  margin-top: -.25rem
}

.bd-callout-info {
  border-left-color: #589984;
}

.bd-callout-warning {
  border-left-color: #f0ad4e
}

.bd-callout-danger {
  border-left-color: #d9534f
}

/* footer */
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}

footer a:hover {
  color: white;
  text-decoration: underline;
}

.margine:hover {
  transition: ease-in-out;
  transition-duration: 0.8s;
  border-bottom: solid;
  border-bottom-width: 0.056cm;
  border-bottom-color: #0A2540;
}

.margine {
  border-bottom: solid;
  border-bottom-width: 0.056cm;
  border-bottom-color: #F6F9FC;
}

.margini {
  background-color: #23262a;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  height: 10vh;
  width: 100%;
}

@media (min-width: 960px) {
  body {
    overflow-x: hidden;
  }
}

.outer {
  background-color: #23262a;
  height: auto;
}

@keyframes vinodindreapta {
  0% {
    left: 200vw;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.design1-fundal {
  background-color: rgb(219, 219, 219);
}

.design2 {
  position: relative;
  background-color: rgb(219, 219, 219);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  padding: none;
  width: 100%;
  height: auto;

}


.poza {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;

  
}

.poza-sm {
  display: block;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
}
.text-poze {
  text-align: center;
  font-family: 'Heebo', sans-serif;
  color:#0A2540;
}

#faramargine {
  margin-bottom: 0vh;:hover {
  color: #6862FF;
  transition-duration: 0.2s;
}
}

.links-hover:hover {
  color: #6862FF;
  transition-duration: 0.2s;
}


.marginemica {
  margin-left: 2vw;
  margin-right: 2vw;
}


/* CSS FOR HOME PAGE*/
.here
{
  color:#6862FF;
  font-size: 21px;
}
.here:hover
{
  color:#0A2540;
  transition-duration: 0.2s;
}
.margin-bh {
  margin-bottom: 48px;
}

.margin-b {
  margin-bottom: 160px;
}

.margin-progress {
  margin-top: 56px;
}

.margin-t {
  margin-top: 28%;
}

.h3-home {
  font-family: 'Poppins', sans-serif;
  background-color: #6862FF;
  background-image: linear-gradient(45deg, #B754FF 50%, #6862FF);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

@media screen and (min-width: 601px) {
  .h3-home {
    font-size: 32px;
  }
}

@media screen and (max-width: 600px) {
  .h3-home {
    font-size: 20px;
    margin-top: 160px;
  }
}

.h2-home {
  font-size: 42px;
  color: #0A2540;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

@media screen and (min-width: 601px) {
  .h2-home {
    font-size: 42px;
  }
}

@media screen and (max-width: 600px) {
  .h2-home {
    font-size: 32px;
  }
}

.h2-home2 {
  color: #0A2540;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

@media screen and (min-width: 601px) {
  .h2-home2 {
    font-size: 30px;
  }
}

@media screen and (max-width: 600px) {
  .h2-home2 {
    font-size: 20px;
  }
}



h1.h1-home {
  color: #0A2540;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

@media screen and (min-width: 601px) {
  h1.h1-home {
    font-size: 64px;
  }
}

@media screen and (max-width: 600px) {
  h1.h1-home {
    font-size: 32px;
  }
}

.paragraph {
  color: #425466;
  font-family: 'Heebo', sans-serif;
}


@media screen and (min-width: 601px) {
  .paragraph {
    font-size: 21px;
  }
}

@media screen and (max-width: 600px) {
  .paragraph {
    font-size: 18px;
  }
}
.fundalgif {
  background-image: url(https://static.igem.wiki/teams/4740/wiki/ezgif-com-gif-maker.gif);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 110%;
}
.fundaladn{
  background-image: url(https://static.igem.wiki/teams/4740/wiki/ezgif-com-gif-maker-2.gif);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 220%;
}
.albastru {
  color: #0A2540;
  font-family: 'Heebo', sans-serif;
}

.buton {

  color: #F6F9FC;
  font-family: 'Heebo', sans-serif;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.buton:hover {
  opacity: 80%;
  color: #F6F9FC;
}

.progress-container {
  position: fixed;
  width: 100%;
  height: 8px;
  background: #F6F9FC;
}

.progress-bar {
  position: fixed;
  height: 8px;
  background: rgb(10, 37, 64);
  width: 0%;
  border-bottom-right-radius: 24px;
  border-top-right-radius: 24px;
}

#value {

  color: #B754FF;
  font: system-ui;
  letter-spacing: 8px;

}

@media screen and (min-width: 601px) {
  #value {
    font-size: 88px;
    font-weight: 600;

  }
}

@media screen and (max-width: 600px) {
  #value {
    font-size: 48px;
  }
}

:root {
  --width: 100vw;
  --full-width: 100vw;

  @media (min-width: 42em) {
    --width: 42rem;
  }

  --angle: -8deg;
  --magic-number: 0.09719;
  --skew-padding: calc(var(--width) * var(--magic-number));
  --clip-padding: calc(var(--full-width) * var(--magic-number));
}

.diagonal-box {
  position: relative;
  padding: var(--skew-padding) 0;
  margin-top: -1px;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skew(0deg, -8deg);
    transform-origin: 50% 0;
    outline: 1px solid transparent;
    backface-visibility: hidden;
  }
}


.bg-one:before {
  background-color: #0A2540;
  
}
@media screen and (min-width: 1201px) {
  .bg-one:before{
    background-image: url(https://static.igem.wiki/teams/4740/wiki/earth-1303628-1280.png);
    background-repeat: no-repeat;
    background-position-x: 103%;
    background-size: 41% auto;
  }
}

@media screen and (max-width: 1200px) {
  .bg-one:before{
    background-color: #0A2540;
  }
}


.content {
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  max-width: var(--width);
  margin-top: 104px;
  margin-bottom: 104px;
  margin-right: 32%;
  margin-left: 16%;
  position: relative;
  color: #aeb6c5;
}

/*CSS FOR TABS*/
/* Style the tab */
.tab {
  border-radius: 20px;
  width:auto;
  text-align: center;
  margin-right:25%;
  margin-left: 25%;
  background-color:  #F6F9FC;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  width: auto;
  background-color: inherit;
  border-radius: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 14px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
/* Create an active/current tablink class */

.tab button.active {
  color: white;
  background-color: #B754FF;
}

/* Style the tab content */
.tabcontent {
  text-align: center;
  display: none;
  padding: 6px 12px;
  border-top: none;
}

.imaginereadmore {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.imaginereadmore:hover {

  transition-duration: 0.3s;
}

@media screen and (min-width: 601px) {
  .imaginereadmore{
    width: 20vw;
    border-radius: 20px;
  }
}

@media screen and (max-width: 600px) {
  .imaginereadmore{
    width: 60vw;
    border-radius: 10px;
  }
}

@media screen and (min-width: 601px) {
  .imaginereadmore:hover{
    width: 24vw;
  }
}

@media screen and (max-width: 600px) {
  .imaginereadmore:hover{
    width: 64vw;
  }
}

a {
  text-decoration: none;
}

.textreadmore {
  color: #0A2540;
  position: relative;
}




/*CSS FOR MENU*/

.custom-toggler.navbar-toggler {
  border-color: #F6F9FC;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(10, 37, 64, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.albastru:hover {
  transition-duration: 0.8s;
  color: #6862FF;
}


/* CSS FOR CONTRIBUTION */

.paragraph-sm {
  font-family: 'Heebo', sans-serif;
  color: #425466;
  font-size: 16px;
  text-align: justify;
  text-justify: inter-word;
}


.breaker {
  margin-top: 32px;
  margin-bottom: 32px;
  color: #aeb6c5;
  border-color: #F6F9FC;
  size: 1;
}


/* CSS FOR RESULTS */

.hero-pg {
  height: 80vh;
  width: 100vw;
  overflow: hidden;
  background-image:
    linear-gradient(to top, rgb(253, 253, 253), rgba(237, 198, 255, 0.575)),
    url("https://e1.pxfuel.com/desktop-wallpaper/148/379/desktop-wallpaper-laboratory-on-dog-medical-laboratory.jpg");
  background-size: cover;
  position: relative;
}

.container-hpg {
  position: relative;
  text-align: center;
  color: #0A2540;
  font-weight: 400;
}


:root {
  font-size: 16px;
  font-family: 'Heebo', sans-serif;
  --text-primary: #0A2540;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
}

body::-webkit-scrollbar {
  width: 0.32rem;
}


body::-webkit-scrollbar-track {
  background: var(--text-primary);
}

body::-webkit-scrollbar-thumb {
  background: #6649b8;
}

.navvbar {
  display: flex;
  position: sticky;
  margin-left: 1vw;
  margin-right:1vw;
  top: 19vh;
  width: auto;
  height: auto;
  

}
@media screen and (min-width: 601px) {
  .navvbar {
    margin-top: 3vw;
    margin-bottom: 10vh;

  }
}

@media screen and (max-width: 600px) {
  .navvbar {
    margin-top: 1vw;
    margin-bottom: 1vh;
    background-color: #F6F9FC;
  }
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;


}

.navv-link {
  display: flex;
  align-items: center;
  height: auto;
  color: var(--text-primary);
  margin-left: 1rem;
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
}

.navv-link:hover {
  color: #6862FF;
  transition-duration: 0.2s;
}


@media screen and (min-width: 601px) {
  .spatiu-sm {
    margin-left: auto;
    margin-right: auto;

  }
}

@media screen and (max-width: 600px) {
  .spatiu-sm {
    margin-left: 16px;
    margin-right: 16px;
  }
}

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

.active
{
  border-bottom: 1.6px solid #6649b8;
  width:80%;
}
.conttt{
display:flex; 
 align-items:center;
}
.textttt{
  flex:1;
}
.imggg{
  margin-left:3%; 
  min-width: 23%;
  max-width:26%; 
  height:auto; 

}
.margin-bb {
  margin-bottom: 2%;
}


table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid  rgb(142, 167, 155);
  background-color: #F6F9FC;

}

thead th:nth-child(1) {
  width: 30%;
  text-align: center;

}

thead th:nth-child(2) {
  width: 20%;
  text-align: center;

}

thead th:nth-child(3) {
  width: 45%;
  text-align: center;

}

thead th:nth-child(4) {
  width: 24%;
  text-align: center;

}
thead th:nth-child(5) {
  width: 24%;
  text-align: center;

}
th,
td {
  padding: 8px;
}

thead th,
tfoot th {
  font-family: "Heebo", sans-serif;
}

th {
  letter-spacing: 1px;
  text-align: center;
  font-family: "Heebo", sans-serif;

  border-bottom: 2px solid rgb(142, 167, 155);;
}
/* rgb(98, 116, 108); */
/* td {
  letter-spacing: 1px;
  font-family: "Heebo", sans-serif;
} */

tbody td {
  letter-spacing: 1px;
  text-align: center;
  font-family: "Heebo", sans-serif;
  border-bottom: 2px solid rgb(142, 167, 155);
}

.margin-bt{
  margin-bottom:7%; 
  margin-top:7%;
}

.margin-bbb{
  margin-bottom:7%; 

}


.poza-fr{

  display: block;
  width: 56%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
}







table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid  rgb(142, 167, 155);
  background-color: #F6F9FC;

}