.link-wrapper {
  position: relative;
  display: block;
  padding: 20px 0;
}
.inner-wrapper {
  position: relative;
  display: inline-block;
}
/* hover styles */
.hover-1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(110deg, #d42020, #e5f506, #6cb8ea, #0d6efd);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-1:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}
.hover-2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  background: #20C2F7;
  transition: transform 0.3s;
}
.hover-2:hover:after {
  transform: scaleX(1);
}
.hover-3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #37D631;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s;
}
.hover-3:hover:after {
  transform: scaleX(1);
}
.hover-4:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-4:hover:after {
  transform: scaleX(1);
}
.hover-5:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleY(0);
  background-color: #E2061B;
  transition: transform 0.3s;
}
.hover-5:hover:after {
  transform: scaleY(1);
}
.hover-6:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 50%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s;
}
.hover-6:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 50%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-6:hover:before {
  transform: scaleX(1);
}
.hover-6:hover:after {
  transform: scaleX(1);
}
.hover-7:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #37D631;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.hover-7:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #37D631;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-7:hover:before {
  transform: scaleX(1);
}
.hover-7:hover:after {
  transform: scaleX(1);
}
.hover-8:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.hover-8:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.hover-8:hover:before,
.hover-8:hover:after {
  transform: scaleX(1);
}
.hover-9:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 0.3s;
}
.hover-9:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 0.3s;
}
.hover-9:hover:before,
.hover-9:hover:after {
  transform: scaleX(1);
}
.hover-10:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.hover-10:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.hover-10:hover:before,
.hover-10:hover:after {
  transform: scaleX(1);
}
.hover-11:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleY(0);
  background-color: #37D631;
  transition: transform 0.3s;
}
.hover-11:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleY(0);
  background-color: #37D631;
  transition: transform 0.2s;
}
.hover-11:hover:before,
.hover-11:hover:after {
  transform: scaleY(1);
}
.hover-12:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  top: 0;
  left: 0;
  background: linear-gradient(110deg, #d42020, #d42020, #6cb8ea, #0d6efd);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.hover-12:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  right: 0;
  background: linear-gradient(110deg, #0d6efd, #6cb8ea, #d42020, #d42020);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-12:hover:before {
  transform-origin: top right;
  transform: scaleX(1);
}
.hover-12:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}
.wrapper-13:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.wrapper-13:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 50%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 0.3s;
}
.wrapper-13 .hover-13:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 50%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s;
}
.wrapper-13 .hover-13:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 50%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.wrapper-13 .hover-13:hover:before,
.wrapper-13 .hover-13:hover:after {
  transform: scaleX(1);
}
.wrapper-13:hover:before,
.wrapper-13:hover:after {
  transform: scaleX(1);
}
.wrapper-14:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #20C2F7;
  transform: scaleY(0);
  transition: transform 0.3s;
}
.wrapper-14:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #20C2F7;
  transform: scaleY(0);
  transition: transform 0.3s;
}
.wrapper-14 .hover-14 {
  padding: 10px;
}
.wrapper-14 .hover-14:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.wrapper-14 .hover-14:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #20C2F7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.wrapper-14:hover:before,
.wrapper-14:hover:after {
  transform: scaleY(1);
}
.wrapper-14:hover .hover-14:before,
.wrapper-14:hover .hover-14:after {
  transform: scaleX(1);
}
.wrapper-15:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #37D631;
  transform: scaleY(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.wrapper-15:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #37D631;
  transform: scaleY(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.wrapper-15 .hover-15 {
  padding: 10px;
}
.wrapper-15 .hover-15:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #37D631;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.wrapper-15 .hover-15:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #37D631;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.wrapper-15:hover:before,
.wrapper-15:hover:after {
  transform: scaleY(1);
}
.wrapper-15:hover .hover-15:before,
.wrapper-15:hover .hover-15:after {
  transform: scaleX(1);
}
.wrapper-16:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #ffcc00;
  transform: scaleY(0);
  transform-origin: bottom left;
  transition: transform 0.3s;
}
.wrapper-16:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #ffcc00;
  transform: scaleY(0);
  transform-origin: top right;
  transition: transform 0.3s;
}
.wrapper-16 .hover-16 {
  padding: 10px;
}
.wrapper-16 .hover-16:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s;
}
.wrapper-16 .hover-16:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.wrapper-16:hover:before,
.wrapper-16:hover:after {
  transform: scaleY(1);
}
.wrapper-16:hover .hover-16:before,
.wrapper-16:hover .hover-16:after {
  transform: scaleX(1);
}
.wrapper-17:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #E2061B;
  transform: scaleY(0);
  transform-origin: bottom left;
  transition: transform 0.2s;
}
.wrapper-17:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #E2061B;
  transform: scaleY(0);
  transform-origin: top right;
  transition: transform 0.2s 0.2s;
}
.wrapper-17 .hover-17 {
  padding: 10px;
}
.wrapper-17 .hover-17:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.2s 0.3s;
}
.wrapper-17 .hover-17:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #E2061B;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.2s 0.1s;
}
.wrapper-17:hover:before {
  transform: scaleY(1);
  transition: transform 0.2s 0.3s;
}
.wrapper-17:hover:after {
  transform: scaleY(1);
  transition: transform 0.2s 0.1s;
}
.wrapper-17:hover .hover-17:before {
  transform: scaleX(1);
  transition: transform 0.2s;
}
.wrapper-17:hover .hover-17:after {
  transform: scaleX(1);
  transition: transform 0.2s 0.2s;
}


.btn1 {
  cursor: pointer;
  position: relative;
  padding: 10px 20px;
  background: pink;
  font-size: inherit;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.2s;
}
.btn1:after, .btn1:before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #252525;
  transition: all 0.2s;
}
.btn1:after {
  top: -1px;
  left: -1px;
  border-top: 5px solid black;
  border-left: 5px solid black;
}
.btn1:before {
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
}
.btn1:hover {
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.btn1:hover:before, .btn1:hover:after {
  width: 100%;
  height: 100%;
}

.hero-image {
  background-image: url("/bengkelbaru/libs/css/images/checkgreen.svg");
  background-color: #cccccc;
  width: 100%;
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  border: 3px solid red;
  border-radius:.5rem;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}