.inverted-radius {
  --r: 31px;
  --s: 40px;
  --x: 12px;
  --y: 10px;
  width: 100%;
  aspect-ratio: 1;
  background: var(--white);
  border-radius: var(--r);
  --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
        72%);
  --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px))
      calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  mask-repeat: no-repeat;
  position: relative;
  padding: 50px 75px;
  /*box-shadow: 7px 8px 24px 0px rgba(0, 0, 0, 0.1), 29px 33px 44px 0px rgba(0, 0, 0, 0.09), 66px 73px 59px 0px rgba(0, 0, 0, 0.05), 117px 130px 70px 0px rgba(0, 0, 0, 0.01), 183px 203px 77px 0px rgba(0, 0, 0, 0.01);*/
}

.inverted-box {
  position: relative;
}

.ArrowButton {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--white);
  filter: drop-shadow(117px 130px 70px rgba(0, 0, 0, 0.01))
    drop-shadow(66px 73px 59px rgba(0, 0, 0, 0.05))
    drop-shadow(29px 33px 44px rgba(0, 0, 0, 0.09))
    drop-shadow(7px 8px 24px rgba(0, 0, 0, 0.1));
  border-radius: 60px;
  height: 68px;
  width: 68px;
  z-index: 9;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  transition: 0.5s ease;
}

.ArrowButton svg {
  fill: var(--secondary);
}
.inverted-box .logo {
  text-align: center;
  margin-bottom: 30px;
}
@media (max-width: 992px) {
  .inverted-radius {
    padding: 35px 40px;
  }
}
@media (max-width: 480px) {
  .inverted-radius {
    padding: 35px 25px;
  }
  .inverted-radius {
    --r: 14px;
    --s: 30px;
  }
  .ArrowButton {
    height: 48px;
    width: 48px;
  }
}
@media (max-width: 375px) {
  .inverted-radius {
    padding: 30px 15px;
  }
  .inverted-radius .form_group-sm label {
    margin: 0;
  }
  .inverted-radius .form_group {
    margin: 0 0 5px;
  }
  .inverted-box .logo {
    margin-bottom: 15px;
  }
  .inverted-box .text-center.pb-3 {
    padding-bottom: 0.5rem !important;
  }
}