*,

*::before,

*::after {

  box-sizing: border-box;

}

a{

  text-decoration: none;

}



body {

  margin: 0;

  background: #ffffff;

  font-family: 'Poppins', sans-serif;

  color: #448A8A;

}

header{

  padding-top: 10%;

  padding-bottom: 13%;

  text-align: center;

}

span{

  font-weight: 600;

}

ul{

  line-height: 1.8;

}



.header-content H1{

  font-weight: 400;

  font-size: 45px;

}

.header-logo{

  margin-top: 20px;

}

.header-logo img{

  max-width: 350px;

}



.some-icons{

  width: 100%;

  height: auto;

  padding: 20px;

}

.icons{

  float: right;

}

.icons img{

  width: 35px;

  margin-right: 10px;

}



.side-navivagion{

  width: 60px;

  text-align: center;

  line-height: 3;

  position: absolute;

  z-index: 1;

  right: 0;

  margin-right: 60px;

  margin-top: -200px;

}

.side-navivagion a{

  text-decoration: none;

  color: #448A8A;

  font-size: 24px;

}



.timeline {

  position: relative;

  width: 100%;

  margin: 0 auto;

  padding: 15px 0;

}

.wrapper{

  max-width: 1300px;

  margin: 0 auto;

  width: 90%;

}

.timeline::after {

  content: '';

  position: absolute;

  width: 6px;

  background: #448A8A;

  top: 0;

  bottom: 0;

  left: 50%;

  margin-left: -3px;

}

.container {

  padding: 15px 30px;

  position: relative;

  background: inherit;

  width: 50%;

}

.container-reverse{

  background-color: #FFFFFF;

}

.image{

  text-align: center;

}

.image img{

  width: 100%;

}

.image H3{

  font-weight: 400;

  font-size: 24px;

}

.img-text{

  text-align: left;

  position: absolute;

  top: 10%;

  left: 10%;

}

.container-wrap{

  width: 100%;

  display: flex;

  flex-direction: row;

  padding: 7% 0;

  align-items: center;

}

.green{

  background-color: #AECDCF;

}

.white{

  background-color: #FFFFFF;

}

.container.left {

  left: 0;

}



.container.right {

  left: 50%;

}



.dot {

  content: '';

  position: absolute;

  width: 24px;

  height: 24px;

  top: calc(50% - 12px);

  right: -12px;

  background: #448A8A;

  border-radius: 20px;

  z-index: 1;

}



.container.right::after {

  left: -12px;

}



.content{

  padding: 0 10px;

}

.container .content p {

  margin: 0;

  font-size: 16px;

  line-height: 22px;

  color: #448A8A;

  line-height: 1.8;

}

.section-video{

  text-align: center;

  padding: 7% 0;

}

.section-video H2{

  font-weight: 400;

  font-size: 36px;

}

.video{

  max-width: 1000px;

  height: auto;

  background-color: #F5F5F5;

  margin: auto;

  position: relative;

}

.video:hover .playPause-button{

  display: block;

  opacity: 1;

  transition: all 1s;

}

.playPause-button{

  transition: all 1s;

  opacity: 0;

  position: absolute;

  top: calc(50% - 35px);

  left: calc(50% - 35px);

}

.playPause-button img{

  width: 70px;

}

.section-our-story{

  text-align: center;

}

.section-our-story H2{

  font-weight: 400;

  font-size: 36px;

}

.section-icons{

  padding: 5% 0;

}

.section-icons img{

  max-width: 250px;

}

.icons-flexbox-container{

  display: flex;

  flex-direction: row;

  margin: auto;

  align-items: center;

}

.icons-flexbox-container div{

  width: 30%;

  text-align: center;

  margin: 30px;

}

.paragraph-wapper{

  max-width: 1000px;

  margin: auto;

}

.product-headline{

  text-align: center;

  max-width: 1000px;

  margin: auto;

}

.section-products H3{

  font-weight: 400;

  font-size: 24px;

  line-height: 1.7;

}

.product-text{

  padding: 5% 0;

  max-width: 700px;

  margin: auto;

}

.section-gap{

  width: 100%;

  height: 30px;

}

.product{

  background-color: #F5F5F5;

  min-width: 300px;

  min-height: 300px;

  border-radius: 100%;

}

.product img{



}

.product-slider{

  text-align: center;

  padding: 10% 0 5% 0;

  max-width: 1200px;

  margin: auto;

}

.product-flex-container{

  display: flex;

  flex-direction: row;

  align-items: center;

}

.product{

  margin: auto;

  margin: 10px;

}

.product-wapper{

  display: flex;

  flex-direction: row;

  margin: auto;

}

.section-buy-now{

  padding: 50px 0;

  text-align: center;

}

.section-buy-now a{

  font-size: 20px;

  color: #fff;

  text-decoration: none;

  border-style: solid;

  border-width: 2px;

  padding: 10px 30px;

}

.video video{

  width: 100%;

  height: auto;

}

footer{

  padding: 50px 0;

}

.footer-icons-container{

  display: flex;

  flex-direction: row;

  max-width: 300px;

  min-width: 240px;

  margin: auto;

}

.footer-icon{

  margin: auto;

}

.footer-icon img{

  max-height: 90px;

}



@media (max-width: 1200px){

  .side-navivagion{

    margin-right: 40px;

    margin-top: -170px;

  }

  .side-navivagion a{

    font-size: 20px;

  }

  .product{

    min-width: 200px;

    min-height: 200px;

  }



}



@media (max-width: 800px) {

  .product{

    min-width: 100px;

    min-height: 100px;

  }

  .icons-flexbox-container{

    flex-wrap: wrap;

    flex-direction: column;

  }

  .icons-flexbox-container div{

    width: 100%;

    text-align: center;

    margin: 0;

    margin-top: 50px;

  }

  .section-icons img{

    margin-bottom: -15px;

  }

  .img-text{

    left: 100px;

  }

  .img{

    margin-top: 100px;

  }

  header{

    padding: 30% 0;

    text-align: center;

  }

  .header-content{

    width: 90%;

    margin: 0 auto;

  }

  .header-content H1{

    font-size: 36px;

  }

  .header-logo{

    margin-top: 30px;

  }

  .header-logo img{

    max-width: 250px;

  }



  .container-wrap{

    flex-wrap: wrap;

    padding-top: 10%;

    padding-bottom: 15%;

  }

  .container-reverse{

    flex-flow: column-reverse;

  }

  .timeline::after {

    left: 60px;

    width: 4px;

    margin-left: -2px;

  }

  .dot {

    display: none;

  }

  .image img{

    max-width: 150px;

  }

  .container {

    width: 100%;

    padding-left: 100px;

    padding-right: 30px;

  }

  .content{

    padding: 0 0;

  }

  .container.right {

    left: 0%;

  }



  .container.left::after,

  .container.right::after {

    left: 82px;

  }



  .container.left::before,

  .container.right::before {

    left: 100px;

    border-color: transparent #006E51 transparent transparent;

  }



  .container.left .date,

  .container.right .date {

    right: auto;

    left: 15px;

  }



  .container.left .icon,

  .container.right .icon {

    right: auto;

    left: 146px;

  }



}

@media (max-width: 400px) {

  .product{

    min-width: 40px;

    min-height: 40px;

  }

}