.circle-device {
  z-index: 10;
}

.circle-small {
  height: 200px;
  width: 200px;
  z-index: 4;
  background-color: #7A7C7F;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='300' ry='300' stroke='%23DEE4E9FF' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 200px;
}

.circle-medium {
  height: 300px;
  width: 300px;
  z-index: 3;
  background-color: #64676A;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='400' ry='400' stroke='%23AAACAD' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 300px;
}

.circle-xl {
  height: 500px;
  width: 500px;
  z-index: 2;
  background-color: #383B3F;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='500' ry='500' stroke='%236A6B6E' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 500px;
}

.circle-xxl {
  height: 800px;
  width: 800px;
  z-index: 1;
  background-color: #25292D;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='500' ry='500' stroke='%233E4143' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 800px;
}

.dotted {
  border: none;
  border-top: 3px dashed #0a2540;
  background-color: #fff;
  opacity: 1;
}

.zoom-box {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  /* Animation */
}

.zoom-box:hover {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.device-float {
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.device-float:hover {
  transform: translateY(-40px);
}

.device {
  shape-margin: 50px;
  -webkit-shape-outside: polygon(367px -1px, 51.69% 99.52%, 87.2% 95.47%, 617px 729px, 89.7% 64.91%, 627px 604px, 100.67% 57.58%);
  shape-outside: polygon(367px -1px, 51.69% 99.52%, 87.2% 95.47%, 617px 729px, 89.7% 64.91%, 627px 604px, 100.67% 57.58%);
}