*{
    /* box-sizing: border-box; */
    margin: 0;
    padding: 0;
    font-family: 'futura', sans-serif;
}

.index {
    padding-top: 15%;
    width: 100%;
}

/* -----------------Home Animation------------------- */

.home-card{
    position: relative;
    width: 60%;
    height: 40%;
    border-radius: 20px;
    transition: 0.5s;
}

.home-circle {
    top: 25%;
    left: 3%;
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    overflow: hidden;
}

.home-circle::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #db0000;
    clip-path: circle(5% at center);
    transition: 0.5s;
}

.home-card:hover .home-circle:before{
    background: #007f98;
    clip-path: circle(70% at center);
}

.home-card img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    pointer-events: none;
    transition: 0.5s;
}

.home-card:hover img{
    left: 85%;
    width: 80%;
}

.home-card .home-content2{
    position: relative;
    width: 50%;
    padding-top: 1%;
    padding-left: 3%;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    color: #fff;
}

.home-card:hover .home-content2{
    opacity: 1;
    visibility: visible;
}

.home-card .home-nanobody img{
    width: 85%;
    position: absolute;
    top: 103%;
    left: 54%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    transition: 0.5s;
    opacity: 1;
}

.home-card:hover .home-nanobody img{
    left: 100%;
    top: 130%;
    width: 100%;
    opacity: 0;
}

/* ---------------Home Animation End----------------- */

/* ------------------Home Content-------------------- */

.index_introduction {
    width:60%;
    margin-top: 20%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.index-content {
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/4233/wiki/hbg.png");
    background-position: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.problem {
    width:60%;
    margin-top: 35%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.problem h1 {
    font-size: 200%;
    font-weight: 500;
}

.problem h2 {
    font-size: 150%;
    font-weight: 400;
}

.current_solution {
    width:60%;
    margin-top: 40%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.current_solution h1 {
    font-size: 200%;
    font-weight: 500;
}

.current_solution h2 {
    font-size: 150%;
    font-weight: 400;
}

.fact {
    width:60%;
    margin-top: 40%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.fact h1 {
    font-size: 200%;
    font-weight: 500;
}

.fact h2 {
    font-size: 150%;
    font-weight: 400;
}

.scary_boo {
    width:60%;
    margin-top: 42%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.scary_boo h1 {
    font-size: 200%;
    font-weight: 500;
}

.scary_boo h2 {
    font-size: 150%;
    font-weight: 400;
}

.dangerous {
    width:60%;
    margin-top: 42%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.dangerous h1 {
    font-size: 200%;
    font-weight: 500;
}

.dangerous h2 {
    font-size: 150%;
    font-weight: 400;
}

.awareness {
    width:60%;
    margin-top: 43%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.awareness h1 {
    font-size: 200%;
    font-weight: 500;
}

.awareness h2 {
    font-size: 150%;
    font-weight: 400;
}

.show_time {
    width:70%;
    margin-top: 40%;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
}

.show_time h1 {
    font-size: 200%;
    font-weight: 500;
}

.our_solution {
    margin-top: 20%;
    width: 100%;
    margin-right: 0;
}

.intro_step {
    padding-top: 20%;
    padding-bottom: 20%;
    padding-left: 37%;
    background-color: #c8e8fc;
     /* #fdfdc2; */
}

.step1 {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 10%;
    text-align: right;
    /* background-color: #e5f3fe; */
    background-color: #d7f6fc;

}

.step1 img {
    margin-top: 10%;
    margin-right: 72%;
    rotate: 45deg;
    width: 26%;
}

.step1 h1{
    width: 80%;
    margin-right: 20%;
    float: right;
    margin-top: -25%;
}

.step1 h2{
    width: 70%;
    float: right;
    margin-top: -20%;
    margin-right: 20%;
}

.step2 {
    padding-top: 25%;
    padding-bottom: 35%;
    padding-left: 10%;
    text-align: left;
    background-color: #eeffee;

}

.step2 h1{
    width: 45%;
    float: left;
    margin-top: -13%;
}

.step2 h2{
    width: 70%;
    float: left;
    margin-top: -5%;
}

.step2 img{
    float: right;
    margin-top: -10%;
    margin-right: 20%;
    width: 50%;
}

.step3 {
    padding-bottom: 20%;
    padding-top: 5%;
    padding-left: 10%;
    text-align: right;
    background-color: #fbeeff;
}

.step3 img {
    padding-top: 15%;
    padding-right: 55%;
    width: 95%;
}

.step3 h1{
    margin-right: 20%;
    width: 40%;
    float: right;
    margin-top: -14%;
}

.step3 h2{
    margin-right: 20%;
    width: 55%;
    float: right;
    margin-top: -6%;
}

.step4 {
    padding-bottom: 40%;
    padding-top: 18%;
    padding-left: 10%;
    text-align: left;
    background-color: #feb2a8bc;
}

.step4 h1{
    width: 60%;
    float: left;
    margin-top: -13%;
}

.step4 h2{
    width: 70%;
    float: left;
    margin-top: -8%;
}

.step4 img{
    margin-right: 20%;
    float: right;
    margin-top: -12%;
    width: 60%;
}

.step5 {
    padding-bottom: 12%;
    padding-top: 5%;
    padding-left: 10%;
    text-align: right;
    align-items: center;
    background-color: #d0e1f9;
}

.step5 img {
    margin-top: 5%;
    margin-right: 45%;
    width: 30%;
}

.step5 h1{
    margin-top: 1%;
    width: 80%;
    text-align: center;
}

.step5 h2{
    margin-top: 2%;
    width: 80%;
    text-align: center;
}

.index-end {
    padding: 5%;
    text-align: center;
    background-image: url('https://static.igem.wiki/teams/4233/wiki/chickens.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.index-end h1 {
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 200%;
    background-color: white;
    opacity: 0.9;
    font-weight: 500;
}

.index-end h2 {
    padding: 5%;
    font-size: 150%;
    background-color: white;
    opacity: 0.9;
    font-weight: 400;
}