.puzzle * {
  position: absolute;
}

.puzzle {
  height: 490px;
  /* width: 300px; */
  margin: auto;
  /* transform: translateY(50%);
  top: 50%;
  left: 50%; */
  z-index: 11111;
  position: relative;
}

.puzzle-left {
  height: 258px;
  width: 446px;
  border-radius: 3%;
  top: -26px;
  left: -130px;
  background-color: #1C24EC;
  //box-shadow: 10px 10px 0px #e8e3e7;
  animation-name: move-left;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  z-index: 1;
}

/*   @keyframes move-left {
    0% { top: 0%; transform: translateY(0%); }
    50% { top: 37%; left: 37%; transform: translate(-50%, -50%); }
    100% { top: 0%; transform: translateY(0%); }
  } */

.puzzle-right {
  height: 258px;
  width: 446px;
  border-radius: 2%;
  top: -27px;
  left: 326px;
  background-color: #8B1BED;
  //box-shadow: 10px 10px 0px #e8e3e7;
  animation-name: move-right;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
/*
  @keyframes move-right {
    0% { top: 0%; transform: translateY(0%); }
    50% { top: 37%; right: 37%; transform: translate(50%, -50%); }
    100% { top: 0%; transform: translateY(0%); }
  } */

.puzzle-left-lower {
  height: 50%;
  width: 50%;
  border: 2px solid;
  border-radius: 10%;
  bottom: -6px;
  left: 0;
  background-color: orange;
  //box-shadow: 10px 10px 0px #e8e3e7;
  animation-name: move-left-up;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

/*   @keyframes move-left-up {
    0% { bottom: 0%; transform: translateY(0%); }
    50% { bottom: 37%; left: 37%; transform: translate(-50%, 50%); }
    100% { bottom: 0%; transform: translateY(0%); }
  }
 */
.puzzle-right-lower {
  height: 50%;
  width: 50%;
  border: 2px solid;
  border-radius: 10%;
  bottom: -6px;
  right: -6px;
  background-color: yellow;
 // box-shadow: 10px 10px 0px #e8e3e7;
  animation-name: move-right-up;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  /* z-index: -1; */
}

/*   @keyframes move-right-up { */
    0% { bottom: 0%; transform: translateY(0%); }
    50% { bottom: 37%; right: 37%; transform: translate(50%, 50%); }
    100% { bottom: 0%; transform: translateY(0%); }
/*   } */

.puzzle-left-right {
  height: 80px;
  width: 76px;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  right: -64px;
  transform: translateY(-50%);
  border-left-color: transparent;
  background-color: magenta;
  //box-shadow: 10px 10px 0px #e8e3e7;
}

.puzzle-left-bottom {
  height: 67px;
  width: 80px;
  border: 2px solid;
  border-radius: 50%;
  left: 50%;
  bottom: -23%;
  transform: translateX(-50%);
  border-top-color: transparent;
  background-color: magenta;
  //box-shadow: 10px 10px 0px #e8e3e7;
}

.puzzle-right-right {
  height: 30%;
  width: 30%;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  right: -7%;
  transform: translateY(-50%);
  border-right-color: transparent;
  background-color: white;
}

.puzzle-right-right::before {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #e8e3e7;
  //content: "";
  position: absolute;
  bottom: 0%;
  right: -10%;
  border-right: 2px solid #e8e3e7;
}

.puzzle-right-right::after {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: white;
  //content: "";
  position: absolute;
  bottom: -50%;
  right: -100%;
  border-right: 2px solid white;
}

.puzzle-right-left {
  height: 107px;
  width: 80px;
  left: -16px;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: transparent;
  background-color: white;
}

.puzzle-right-bottom {
  height: 67px;
  width: 80px;
  border: 2px solid;
  border-radius: 50%;
  left: 50%;
  bottom: -23%;
  transform: translateX(-50%);
  border-top-color: transparent;
  background-color: #c0ffee;
  z-index: 1;
  //box-shadow: 10px 10px 0px #e8e3e7;
}
.puzzle-right,.puzzle-left,.puzzle-left-lower,.puzzle-right-lower{
  justify-content: center;
  display: flex;
  align-items: center;
}

.puzzle-right-top {
  height: 30%;
  width: 30%;
  border: 2px solid;
  border-radius: 50%;
  top: -23%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: transparent;
  background-color: #c0ffee;
}

.puzzle-left-lower-right {
  height: 80px;
  width: 76px;
  right: -64px;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #ffa500;
  background-color: orange;
  //box-shadow: 10px 10px 0px #e8e3e7;
  z-index: 1
}

.puzzle-left-lower-left {
  height: 30%;
  width: 30%;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  left: -8%;
  transform: translateY(-50%);
  border-left-color: transparent;
  background-color: white;
}

.puzzle-left-lower-bottom {
  height: 30%;
  width: 30%;
  border: 2px solid;
  border-radius: 50%;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  border-bottom-color: transparent;
  background-color: white;
}

.puzzle-left-lower-bottom::before {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #e8e3e7;
  //content: "";
  position: absolute;
  bottom: -10%;
  left: 0%;
  border-bottom: 2px solid #e8e3e7;
}

.puzzle-left-lower-bottom::after {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: white;
  //content: "";
  position: absolute;
  bottom: -90%;
  left: 50%;
}

.puzzle-left-lower-top {
  height: 32%;
  width: 35%;
  border: 2px solid;
  border-radius: 50%;
  top: -7%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: transparent;
  background-color: white;
}

.puzzle-right-lower-right {
  height: 30%;
  width: 30%;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  right: -29%;
  transform: translateY(-50%);
  border-left-color: transparent;
  background-color: yellow;
 // box-shadow: 10px 10px 0px #e8e3e7;
}

.puzzle-right-lower-left {
  left: -15px;
  height: 107px;
  width: 79px;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  /* left: -8%; */
  transform: translateY(-50%);
  border-left-color: transparent;
  background-color: white;
}

.puzzle-right-lower-top {
  height: 72px;
  width: 107px;
  top: -14px;
  border: 2px solid;
  border-radius: 50%;
  /* top: -8%; */
  left: 50%;
  transform: translateX(-50%);
  border-top-color: transparent;
  background-color: white;
}
.puzzle span{
  font-size: 22px;
}
.tech-conet{
  display: none;
}
.tech-conet.active{
  display: block;
}
.al-center{
  align-items: center;
}
.tech-conet {
  margin-left: 30px
}
.tech-conet p{
  font-size: 32px;
  margin-bottom: 30px;
}
.tech-conet ul{
  font-size: 20px;
  padding-left: 35px
}
.tech-conet ul li{
  position: relative;
}
.tech-conet ul li::after{
  content: "";
  display: block;
  width: 15px;
  height: 1px;
  background: #333;
  position: absolute;
  top: 4px;
  left: -30px;
  bottom: 0;
  margin: auto;
}
.nav-active .puzzle{
  z-index: unset
}