@media screen and (max-width: 1050px) {
  .main img.dot3 {
    position: absolute;
    top: 150px;
    left: 50%;
  }
  .dot3 {
    animation: verticalmove 1s infinite alternate;
  }
}

@media screen and (max-width: 900px) {
  .nav-links {
    width: 70%;
  }
  .main img.shape2 {
    position: absolute;
    top: 20px;
    left: 85%;
    width: 60px;
    height: 40px;
  }
  .main img.shape1 {
    width: 60px;
    height: 40px;
  }
  .main img.dot4 {
    position: absolute;
    top: 150px;
    left: 50%;
  }
  .main img.dot3 {
    position: absolute;
    top: 170px;
    display: none;
    left: 50%;
  }
  .article .img.triangle1 {
    display: none;
  }
  .dot4 {
    animation: verticalmove 1s infinite alternate;
  }
  .dot3 {
    animation: zoominout1 4000ms infinite alternate;
  }
}

@media screen and (max-width: 600px) {
  body {
    overflow: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 70vh;
    top: 70px;
    width: 250px;
    display: flex;
    flex-direction: column;
    transform: translateY(100vh);
    transition: transform 0.5s ease-in;
    background-color: #fbfeff;
    z-index: 20;
  }
  .nav-links a:hover {
    width: 0px;
    background: none;
    z-index: 50;
    transition: none;
    color: #800020;
    font-size: 14px;
  }
  .nav-links li {
    opacity: 0;
  }
  .layer {
    font-size: 20px;
    text-align: center;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .nav-active {
    box-shadow: 0px 4px 8px 100vw rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    transform: translateY(0%);
  }
  @keyframes blink {
    from {
      clip-path: circle(0px);
    }
    to {
      clip-path: circle(145px);
    }
  }
  .image {
    clip-path: circle(145px);
  }
  .companyname {
    font-size: 20px;
  }
}

@media screen and (max-width: 500px) {
  @keyframes blink {
    from {
      transform: scale(0);
      clip-path: none;
    }
    to {
      transform: scale(1);
      clip-path: none;
    }
  }
  .image {
    height: 199px;
    width: 300px;
    clip-path: none;
  }
  .main img {
    position: absolute;
    top: 30px;
    left: 4%;
  }
  .main img.dot1 {
    position: absolute;
    top: 70%;
    left: 5%;
  }
  .main img.dot3 {
    position: absolute;
    top: 170px;
    display: none;
    left: 50%;
  }
  .main img.dot4 {
    position: absolute;
    top: 30px;
    left: 90%;
  }
  .main img.triangle2 {
    position: absolute;
    top: 200px;
    left: 90%;
  }
  .main img.dot5 {
    position: absolute;
    top: 0px;
    left: 50%;
  }
  .main img.shape1 {
    position: absolute;
    top: 105%;
    left: 45%;
    width: 60px;
    height: 40px;
  }
  @keyframes bounce {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, 20px, 0);
    }
  }
  .dot4 {
    animation: zoominout 4000ms infinite alternate;
  }
  .article .img.dot5 {
    position: absolute;
    top: 40px;
    left: 10%;
  }
  .main img.shape2, .article img.triangle3, .article img.dot2 {
    display: none;
  }
  .article .img.dot6 {
    display: none;
  }
  #buttondiv {
    position: absolute;
    text-align: center;
    display: flex;
    align-items: end;
    height: 150px;
  }
}

@media screen and (max-width: 320px) {
  .dot1 {
    display: none;
  }
  .article .img.dot5 {
    position: absolute;
    top: 20px;
    left: 10%;
  }
  .main img.triangle2 {
    position: absolute;
    top: 170px;
    left: 90%;
  }
  .main img.shape1 {
    width: 40px;
    height: 30px;
  }
  @keyframes bounce {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, 10px, 0);
    }
  }
}