:root {
  --body-color: #393937;
  --accent-color: ;
  --white-color: #fff;
  /* --box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 10px #03e9f4; */
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 1rem;
  --font-regular: 400;
  --font-semi-bold: 600;
  --z-tooltip: 10;
  --z-fixed: 100;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.button-animation {
  position: relative;
  display: inline-block;
  padding: 10px 30px;
  color: var(--logo-color);
  text-transform: capitalize;
  overflow: hidden;
  letter-spacing: 2px;
  transition: 0.5s;
}
.button-animation span {
  position: absolute;
  display: block;
}
.button-animation span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--logo-color));
  animation: btn-anim1 2s linear infinite;
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
.button-animation span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--logo-color));
  animation: btn-anim2 2s linear infinite;
  animation-delay: 0.5s;
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
.button-animation span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, var(--logo-color));
  animation: btn-anim3 2s linear infinite;
  animation-delay: 1s;
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
.button-animation span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--logo-color));
  animation: btn-anim4 2s linear infinite;
  animation-delay: 1.5s;
}
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
.button-animation:hover {
  background-color: var(--logo-color);
  color: white;

  box-shadow: var(--box-shadow);
}

/* Contact Us Btn */

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}



/* 7 */
.btn-7 {
    background:var(--logo-color);
      line-height: 42px;
      padding: 0;
      border: none;
      margin: 1rem 0 ;
      font-weight: bold;
      text-transform: capitalize;
      font-family: var(--font-semi-bold);
      width: 35%;
    }
    .btn-7 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-7:before,
    .btn-7:after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background:var(--logo-color);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7:before{
       height: 0%;
       width: 2px;
    }
    .btn-7:after {
      width: 0%;
      height: 2px;
    }
    .btn-7:hover{
      color: var(--logo-color);
      background: transparent;
    }
    .btn-7:hover:before {
      height: 100%;
    }
    .btn-7:hover:after {
      width: 100%;
    }
    .btn-7 span:before,
    .btn-7 span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: var(--logo-color);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-7 span:after {
      height: 2px;
      width: 0%;
    }
    .btn-7 span:hover:before {
      height: 100%;
    }
    .btn-7 span:hover:after {
      width: 100%;
    }