@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Bungee+Spice&family=Lato:wght@300&family=Poppins:wght@200&display=swap');

:root {
    --red: rgb(13, 177, 149);
    --bgColor: bisque;
    
  }

*{
    font-family: 'Poppins', sans-serif;
    /* font-weight: bold; */
}

 /* 
.img{
    border: 5px #4e4e4e dotted;
}*/

/*Home stats css*/
.main-container{
    max-width: 88vw;
    margin: auto;
}

#main-content-header h3{
    text-align: center;
    font-size: 30px;
    padding-bottom: 20px;
    margin-top: 90px;
}

#main-content-header p,
#lith-stats .cards-p{
    line-height: 30px;
    width: 1000px;
    margin: auto;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

#main-cont-img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0px;
}

#main-cont-img img{
    width: 55%;
}

#lith-stats-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
}

.lith-stats-card-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lith-stats-card-img img{
    width: 250px;
}

.lith-stats-card-data{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 250px;
    text-align: center;
}

.lith-stats-card-data span{
    font-weight: bolder;
    font-size: 28px;
    padding: 8px;
}

p{
    font-size: 20px;
}

.lith-stats-card-data p{
    font-size: 18px;
    text-align: center;
}

.lith-stats-card-img2 img{
    width: 150px;
}

.lith-stats-card-img3 img{
    width: 150px;
}

.lith-stats-card-img4 img{
    width: 150px;
}

#lithi-stats-flex{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.cards-p{
padding-bottom: 60px;
}

#lith-stats{
    background-color: #f0f0f0;
    padding: 30px;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

#lithi-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1180px) {

    #lith-stats .cards-p,
    #main-content-header p{
        line-height: 30px;
        width: 95%;
        margin: auto;
        text-align: center;
        font-size: 20px;
    }

    #lith-stats-content{
        display: block;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: auto;
    }

    .lith-stats-card-img img{
        width: 150px;
    }
}

@media screen and (max-width: 850px) {
    #lithi-stats-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

@media screen and (max-width: 680px) {
    .lith-stats-card-data{
        width: 200px;
    }

    #main-cont-img img{
        width: 400px;
    }
    
}

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

.body-container{
    max-width: 88vw;
    margin: auto;
    padding-top: 100px;
    overflow-x: hidden;
}

.body-container2{
    max-width: 88vw;
    margin: auto;
    overflow-x: hidden;
}

.re-content{
  height: 830px;
  width: 100%;
  background: url("https://static.igem.wiki/teams/4746/wiki/rese.jpeg");
  background-position: center center;
  background-size: cover;
  margin-bottom: 30px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.body-section{
    margin-bottom: 60px;
}

.body-container p{
    font-size: 18px;
    line-height: 30px;
    color: white;
}
.body-container .mining_safe{
  color:black;
}

.line1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 90px;
    background-color: #122331;
    color:white;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    border-radius: 10px;
}

.line1 img{
    width: 300px;
}

.line1 p{
    width: 800px; 
    text-align: center;
    color:white;

}

.p1{
    background-color: #122331;
    color:white;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    border-radius: 10px;
}

.line1 h3{
    font-size: 30px;
    padding-bottom: 20px;
    text-align: center;
    color:white;
}

.breaker{
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
}

.line2{
    background-color: #122331;
    color:white;
    margin-bottom: 90px;
}

.line2 p{
    text-align: center;
    width: 900px;
    margin: auto;
    padding-bottom: 20px;
}

.line2-images{
    display: flex;
    align-items: center;
    justify-content: center;
}

.line2-images img{
    width: 200px;
    height: 150px;
}

.lab{
    height: 200px;
    object-fit:cover;
}

.dashed {
    --b: 5px;  /* border thickness */
    --s: 30px; /* size of the dashes */
    --c1: #d3d6d6;
    --c2: #626362;
    
    width: 100%;
    height: 390px;
    padding: 20px 0px;
    aspect-ratio: 1;
    position: relative;
  }
  .dashed::before {
    content:"";
    position: absolute;
    inset: 0;
    padding: var(--b);
    background: 
      repeating-conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%) 
      0 0/var(--s) var(--s) round;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  
  img.framed {
    box-shadow:
      -50px -50px 0 -40px var(--red),
      50px 50px 0 -40px var(--red);

  }

  .line3{
    margin-bottom: 90px;
    background-color: #122331;
    color:white;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    border-radius: 10px;
  }

  .line3-header{
    display: flex;
    align-items: center;;
  }

  .p-style{
    width: 800px;
    text-align: center;
  }

  .breaker2{
    font-size: 30px;
    padding-bottom: 20px;
  }
  
  .line3-header img{
    width: 60px;
  }

  .line3-main-img img{
    width: 300px;
    padding: 10px;
  }

  .line3-content{
    display: flex;
    align-items: center;
  }

  .line4-images{
    display: flex;
    justify-content: center;
  }

  .line4-images img{
    width: 1000px;
  }

  .line4{
    background-color: #fff;
  }

  .line5{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #122331;
    color:white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    border-radius: 10px;
  }

  .line5 .img img{
    width: 380px;
  }
  .line5 h3{
    padding-bottom: 20px;
    font-size: 30px;
  }

  .border {
	font-size: 1.6rem;
	display: grid;
	place-items: center;
	min-height: 200px;
	border: 8px solid;
	padding: 1rem;
}

.notes{
    width: 900px;
}

.sides {
	border-image: linear-gradient(to left, rgb(78, 83, 78), rgb(0, 75, 46)) 1 0;
}

.line5 .img{
    border-radius: 50%;
}

.tool{
    width: 80px;
    animation: moveRotate 5s linear infinite;
    position: absolute;
    top: 10px;
    left: 10px;
}

.rocks{
    width: 200px;
}

.anim-content{
    position: relative;
    padding: 20px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    margin: auto;
    background-color: #122331;
    color:white;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.p2{
    background-color:#122331;
    color:white;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
} 

 @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
}

.line5{
    overflow-y: hidden;
    margin-bottom: 90px;
    overflow-x: hidden;
}

.line5 .img {
    overflow-y: hidden;
    overflow-x: hidden;
}
        
.line5 .img img{
    animation: rotate 4s linear infinite;
}

.line6 h3{
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}
.line6 p{
    text-align: center;
    width: 900px;
    margin: auto;
}

/* You can remove this page div in your website */
#page{
    width:100%;
    height:100%;
    background: #122331;
    color: white;
    height: 700px;
  }
  /* Our normalize css */
  *{
    margin:0;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Our wrapper */
  .wrapper{
    width: 690px;
    height: 600px;
    max-height:100vh;
    position: relative;
    left:50%;
    top:50%;
    transform:translate3d(-50%,-50%,0);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  
  /* Our image information */
  .bottom,
  .middle,
  .top {
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-color: white;
    background-size: cover;
    background-position: center;
    position: absolute;
    top:0;
    left:0;
    pointer-events:none;
    overflow: hidden;
    img {
      height:100%;
    }
  }
  
  .bottom{
    background: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top{
    background:  #bbdefb;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .middle{
    background:  #ffffff; 
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .middle img{
    width: 500px;
  }
  
  .top{
    width:125px;
  }

  .top img{
    width: 700px;
  }
  
  .scroller{
    width: 50px;
    height:50px;
    position: absolute;
    left:100px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background-color: #fff;
    opacity:0.9;
    transition: opacity 0.12s ease-in-out;
    pointer-events:auto;
    cursor: pointer;
    box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
  }
  .scroller-middle{
    margin-top:25px;
  }
  .scroller-top{
    margin-top:-25px;
  }
  
  
  .scroller:hover{
    opacity:1;
  }
  
  .scrolling{
    pointer-events:none;
    opacity:1;
    z-index: 1;
  }
  
  .scroller__thumb{
    width:100%;
    height:100%;
    border-radius:50%;
    padding: 7px;
  }
  
  .scroller:before,
  .scroller:after{
    content:" ";
    display: block;
    width: 7px;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -3.5px;
    z-index: 30;
    transition:0.1s;
    box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
  }
  .scroller:before{
    top:49px;
  }
  .scroller:after{
    bottom:49px;
  }
  
  /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
  .scroller-middle>.scroller__thumb{
    border: 5px solid #616161;
  }
  .scroller-middle:before,
  .scroller-middle:after{
    background: #FFCCBC;
  }
  
  .scroller-top>.scroller__thumb{
    border: 5px solid #FFAB91;
  }
  .scroller-top:before,
  .scroller-top:after{
    background: #FFAB91;
  }
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}
/* Bannner styles */
/* Trial styles */

  
  #app {
    align-items: center;
    padding-bottom: 4vmin;
    /* background:linear-gradient(rgba(80, 87, 110, 0.336),rgba(73, 82, 105, 0.384)), url(./images/home_banner.png); */
    z-index: 10;
    height: 20vh;
    width: 100%;
    top: 0;
    position: absolute;
    margin-top: 100px
  }
  .image{
    height: 70vh;
    width: 100%;
  }
  .empty{
    background:#122331;
  }
  .image_1{
    background: url(https://static.igem.wiki/teams/4746/wiki/home-banner.png);
    background-position: center;
    background-size: cover;
    
  }
  
 
  
  @import url("https://fonts.googleapis.com/css2?family=Prata&display=swap");
  
  .title {
    padding-left: 1em;
    grid-column: 1 / -1;
    grid-row: 1;
    
  
    font-size:43px; 
    font-family:'Roboto Slab', serif;
    font-weight: bolder;
    width: 100%;
    z-index: 0.1;
  
    /*  start */
  
    > .title-inner {
      display: inline-block;
      margin-top: 255px;
    }
  }
  
  @keyframes text-clip {
    from {
      clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  
  @keyframes outer-left {
    from {
      transform: translateX(50%);
    }
    to {
      transform: none;
    }
  }
  
  @keyframes inner-left {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: none;
    }
  }
  
  .cafe,
  .mozart {
    animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
  }

  
  .title-inner {
    display: inline-block;
    animation: inner-left 1s 1s ease both;
  }
  
  .cafe-inner {
    display: inline-block;
    animation: inner-left 1s 1s ease both,
      text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
  }
  
  .mozart-inner {
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
  }
  
  .title {
    animation: outer-left 1s 1s ease both;
  }
  
  .cafe {
    > .cafe-inner {
      display: inline-block;
    }
  } 
  .mozart {
    display: inline-block;
  }
  
   .read_more button{
    border: 2px  #122331 solid;
    padding: 10px;
    background-color: #122331;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 650px;
    text-transform:uppercase;
  }
  .read_more button:hover{
    background:#1c3f5d;
    border: 2px  #1c3f5d solid;
  }
  .brief-description{
    display: block;
  }

/* End of trila styles */
.body_section .banner{
    width: 100%;
    height: 75vh;
    background-position: center;
    background-size: cover;
}
.background-vid{
  width: 100%;
  height:650px;
  padding: 10px;
  border-radius: 25px;
}

/* Moving heading*/
@keyframes showTopText {
    0% { transform: translate3d(0, 100%, 0); }
    40%, 60% { transform: translate3d(0, 50%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  @keyframes showBottomText {
    0% { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  .banner{
  padding-left:0px;
  } 
 
  .background-video-content{
    position: absolute;
    top: 30%;
    left:0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(1, 0, 19) 0%, rgba(3, 42, 49, 0.514) 0%, rgba(13, 39, 49, 0.397) 0%);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 4.45px;
    border-bottom: 3px white solid;
    
}

.background-video-content .top_text, .bottom_text{
    font-size: 32px;
    font-weight: bolder;
    color: white; 
}
.background-video-content .top_text{
    border-bottom: 7px solid #ffffff;
    width:500px;
    top: 0;
}

.text_line{
    border: 3px white solid;
}
.info-text{
    width: 700px;
    color: white;
    padding-top: 5px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
}
@media screen and (max-width: 1490px){
 #main-content-header{
   margin-top:150px;
 }
 .read_more button{
    border: 2px  #122331 solid;
    padding: 10px;
    background-color: #122331;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 600px;
    text-transform:uppercase;
  }
}
@media screen and (max-width: 1366px){
     #body-main{
   margin-top:270px;
   }
   .read_more button{
    border: 2px  #122331 solid;
    padding: 10px;
    background-color: #122331;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 530px;
    text-transform:uppercase;
  }
}
@media screen and (max-width: 1280px){
    .background-vid{
        position: absolute;
        height: 750px;
        overflow-y: hidden;
    }
    .background-video-content{
        top: 45%;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .info-text{
        width: 700px;
        color: white;
        padding-top: 5px;
        font-weight: normal;
        font-size: 16px;
        line-height: 26px;
        }
         .read_more button{
    border: 2px  #122331 solid;
    padding: 10px;
    background-color: #122331;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 500px;
    text-transform:uppercase;
  }

}
@media screen and (max-width: 1024px){
    .background-vid{
        position: absolute;
        height: 600px;
        overflow-y: hidden;
    }
    .background-video-content{
        top: 45%;
        padding-left: 20px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    #body-main{
   margin-top:250px;
   }
      .info-text{
        width: 700px;
        color: white;
        padding-top: 5px;
        font-weight: normal;
        font-size: 13.5px;
        line-height: 26px;
    }
}

@media screen and (max-width: 975px){
    .background-video-content{
        top: 20%;
        padding-left: 20px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .background-vid{
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        border-radius: 0px;
    }
    #body-main{
       margin-top:0px;
    }
  .body_section .banner{
    height:50vh;
  }

}
@media screen and (max-width: 768px){
    .background-video-content{
        top: 25%;
        padding-left: 20px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .background-vid{
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        border-radius: 0px;
    }
    .body_section .banner{
    height:60vh;
  }

}
@media screen and (max-width: 700px){
    h5{
        display: none;
    }
    .background-vid{
        height: 40vh;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        border-radius: 0px;
    }
    .background-video-content{
        top: 15%;
    }
    .background-video-content p{
        font-size: 20px;
        font-weight: bolder;
        color: white;
    }
    .text_line{
        border: 2px white solid;
    }
      .background-video-content{
    top: 20%;
  }
  .background-video-content .top_text, .bottom_text{
    font-size: 22px;
    font-weight: bolder;
    color: white; 
}
  .background-video-content .top_text{
    width: 300px;
  }
  .info-text{
    display:none;
}
   .body_section .banner{
    height:30vh;
  }

  /* End of trial */




  .bottom{
  letter-spacing:3px;
}
.animated-title b{
    background: white;
  }

 

  .animated-title > div.top_text div {
    animation: showTopText 3s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    bottom: 0;
    transform: translate(0, 100%);
  }
  .animated-title > div.top_text div span:first-child {
    color: #ffffff;
  }
  .animated-title > div.bottom_text {
    bottom: 0;
  }
  .animated-title > div.bottom_text div {
    animation: showBottomText 3s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    top: 0;
    transform: translate(0, -100%);
  }
/*  end of moving headings*/

/*slider*/
.slider {
    width: 100%;
    overflow: hidden;
  }

.slider img {
    width: 100%;
    height: 750px;
    object-fit: cover;
    display: none;
    margin: auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}




@keyframes moveRotate {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    50% {
      transform: translateX(580px) rotate(360deg);
    }

    100%{
        transform: translateX(0px) rotate(-360deg);
    }
}


@media screen and (max-width: 1420px) {
    .p-style{
        width: 800px;
    }
}

@media screen and (max-width: 1340px) {
    .line1 p{
        width: 700px; 
    }
}

@media screen and (max-width: 1300px) {
    .p-style{
        width: 700px;
    }

    .notes{
        width: 800px;
    }
}

@media screen and (max-width: 1220px) {
    .line1 p{
        width: 600px; 
    }

    .notes p{
        text-align: center;
    }

    .line5 .img img{
        width: 300px;
    }
}

@media screen and (max-width: 1300px) {
    .p-style{
        width: 600px;
    }
}


@media screen and (max-width: 1100px) {
    .line1 p{
        width: 500px; 
        text-align: center;
    }

    .line1 img{
        width: 300px;
    }

    .line4-images img{
        width: 900px;
    }

    .line5 .img img{
        width: 250px;
    }

    .notes{
        width: 700px;
    }
}

@media screen and (max-width: 1080px) {
    .p-style{
        width: 500px;
    }
}

@media screen and (max-width: 1050px) {
    .line5 .img img{
        width: 300px;
    }
}

@media screen and (max-width: 1010px) {
    .line2 p{
        width:800px;
    }

    .line3-content{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .line3-header{
        display: flex;
        align-items: center;
        justify-content: center;
      }

    .line3-main-img img{
        width: 450px;
        border: #4e4e4e dotted 5px;
        padding: 10px;
      }
    
    .line3-content p{
        text-align: center;
        padding-bottom: 20px;
    }

    .p-style{
        width: 100%;
    }

    .line5 .img img{
        width: 200px;
    }
}

@media screen and (max-width: 950px) {
    .line4-images img{
        width: 800px;
    }

    .line1 .img{
        margin-top: 30px;
    }
}

@media screen and (max-width: 940px) {
    .line1{
        flex-direction: column-reverse;
        margin-bottom: 90px;
    }

    .line1 img{
        width: 350px;
    }

    .line1 p{
        width: 700px; 
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 920px) {
    .anim-content{
        width: 700px;
        margin: auto;
    }

    @keyframes moveRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }
        50% {
          transform: translateX(480px) rotate(360deg);
        }
    
        100%{
            transform: translateX(0px) rotate(-360deg);
        }
    }
}

@media screen and (max-width: 910px) {
    .line2 p{
        width:700px;
    }
}

@media screen and (max-width: 850px) {
    .line5{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .line5 .img{
        margin-bottom: 20px;
    }

    .notes{
        width: 100%;
    }
    
    .p1{
        width: 650px;
    }

    .p1 p{
        width: 600px;
    }
}

@media screen and (max-width: 830px) {
    .line4-images img{
        width: 700px;
    }
}

@media screen and (max-width: 810px) {
    .anim-content{
        width: 600px;
    }

    @keyframes moveRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }
        50% {
          transform: translateX(380px) rotate(360deg);
        }
    
        100%{
            transform: translateX(0px) rotate(-360deg);
        }
    }
}

@media screen and (max-width: 795px) {
    .line2 p{
        width:600px;
    }

    .dashed {
        height: 480px;
    }

    .p1{
        width: 100%;
    }

    .p1 p{
        margin: 0px;
        width: 95%;
        margin: auto;
    }
}

@media screen and (max-width: 730px) {
    .line4-images img{
        width: 600px;
    }
}

@media screen and (max-width: 700px) {
    .line2 p{
        width:500px;
    }

    .anim-content{
        width: 500px;
    }

    @keyframes moveRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }
        50% {
          transform: translateX(250px) rotate(360deg);
        }
    
        100%{
            transform: translateX(0px) rotate(-360deg);
        }
    }
}

@media screen and (max-width: 620px) {
    .line4-images img{
        width: 500px;
    }
}

@media screen and (max-width: 570px) {
    .line2 p{
        width:400px;
    }

    .anim-content{
        width: 400px;
    }

    @keyframes moveRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }
        50% {
          transform: translateX(150px) rotate(360deg);
        }
    
        100%{
            transform: translateX(0px) rotate(-360deg);
        }
    }
}}

/* ----------------------------- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
.statistics_information{
    width: 700px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 355px;
    margin-top: 50px;
}

.statistics_container{
    display: flex;
    background: #122331;
    height: 300px;
    width: 100%;
    color: white;
    border-radius: 10px;
    margin-left: 0px;
    margin-right: 100px;
    margin-top: 50px;
}
/* images styles*/
.lithium_mines{
    margin-top: 40px;
    margin-left: 40px;
 
}
.metric_tons{
    margin-top: 60px;
    margin-left: 60px;
   
}
.yearly_money{
    margin-top: 30px;
    margin-left: 20px;
   
}
.lithium_batteries{
    margin-top: 65px;
    margin-left: 20px;
   
}
.worlds_batteries{
    margin-top: 50px;
    margin-left: 20px;
   
}

.statistics_paragraph{
    padding-left: 20px;
}

.our_dream_heading{
    width: 700px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 400px;
    margin-top: 50px;
    text-align: center;
}
.our_vision_section{
    height: 150px;
    width: 700px;
    color: black;
    margin-left: 400px;
    margin-top: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius:5px;
    padding: 10px;
}
.our_mission_section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    width: 100%;
    margin-left: 0px;
    margin-right: 100px;
    margin-top: 50px;
    border-radius: 10px;
    background: #122331;

}
.our_mission_text{
    color: white;
    padding-left: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.mission_image{
    width: 500px;
    margin-top: 35px;
    margin-left: 150px;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
}
.mission_image img{
    border-radius: 10px;
}
.action_button button {
    margin-left: 750px;
    padding: 10px;
    border-radius: 20px;
    border: none;
    color: white;
    background: #122331;
    cursor: pointer;
}
.action_button button:hover{
    background: #1c3f5d;
}
 .promo-vid{
    display:flex;
    justify-content:center;
    align-items:center;

  }
  .promo-vid{
    display:flex;
    justify-content:center;
    align-items:center;

  }
  .promo-vid iframe{
    width: 900px;
    height: 500px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
  }

  .promotional_heading{
    text-align: center;
    width:500px;
    margin-left:450px;
    padding:10px;
    border-radius:7px;
    margin-bottom: 10px;
    border-right: 5px solid #122331;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
@media screen and (max-width: 1480px){
  .read_more button{
      margin-left:540px;
    }
   .statistics_information{
     margin-left: 250px;
   }
  .promotional_heading{
    margin-left:350px;
  }
}
@media screen and (max-width: 1280px){
    .statistics_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin-left:3px;
        height: 530px;
      width: 100%;
    }
  .read_more button{
      margin-left:500px;
    }
  .statistics_information{
    width: 620px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 250px;
    margin-top: 50px;
     
}
 .promotional_heading{
    margin-left:10px;
    width:1090px
  }
    
}
@media screen and (max-width: 1024px){
    .statistics_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin-left:3px;
        height: 530px;
      width: 100%;
    }
  .read_more button{
      margin-left:400px;
    }
  .statistics_information{
    width: 620px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 120px;
    margin-top: 50px;
     
}
  .promotional_heading{
    margin-left:10px;
    width:880px
  }
    
}
@media screen and (max-width: 970px){
    .statistics_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin-left:3px;
        height: 500px;
      width: 100%;
    }
  .read_more button{
      margin-left:310px;
    }
   .statistics_information{
    width: 620px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 65px;
    margin-top: 50px;
     
}
.promotional_heading{
    margin-left:10px;
    width:700px
  }
}

@media screen and (max-width: 780px){
   .read_more button{
      margin-left:290px;
    }
   .statistics_information{
    width: 620px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 25px;
    margin-top: 50px;
     
}
  .statistics_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin-left:3px;
        height: 600px;
      width: 100%;
    }
    .promotional_heading{
    margin-left:10px;
    width:650px
  }
}
@media screen and (max-width: 700px){
    .statistics_container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        width: 100%;
        height: 905px;
        margin-left: 0px;
      margin-bottom:20px;
    }
  .read_more button{
      margin-left:110px;
    }
  .statistics_information{
    width: 327px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:5px #122331 solid;
    border-radius:5px;
    padding: 10px;
    margin-left: 5px;
    margin-top: 50px;
}

    .metric_tons img{
        margin-top: 57px;
        
    }
  .lithium_mines{
    margin-left:0px;
  }
  .promotional_heading{
    margin-left:10px;
    width:350px
  }
  .yearly_money{
    margin-left:0px;
  }
    .metric_tons{
        margin-left:0px;
        
    }
  .lithium_batteries{
    margin-left:0px;
  }
  .metric_tons img{
    left:2%;
  }
    .metric_tons, .yearly_money,.lithium_batteries,.worlds_batteries{
        margin-top:0px;

    } 
}


/* ----------------------------- */