.rkd5-wrap { display: inline-flex; max-width: 100%; }

.rkd5-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 260px;
  max-width: 100%;
  min-height: 70px;
  padding: 0 35px;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font: 400 16px Poppins, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .8s cubic-bezier(.77, 0, .175, 1);
}

.rkd5-dark { background: #111; color: #fff !important; }
.rkd5-outline { background: transparent; color: #2d2d2d !important; }
.rkd5-minimal { background: transparent; color: #2d2d2d !important; transition: color .8s cubic-bezier(.77, 0, .175, 1); }
.rkd5-button.rkd5-minimal { min-width: 0; padding: 0 8px 0 0; overflow: visible; }
.rkd5-minimal:hover { color: #8b0000 !important; }

.rkd5-button > .rkd5-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rkd5-left, .rkd5-rect, .rkd5-travel { fill: none; stroke: #b8860b; }
/* Left bar: an 8px non-scaling stroke on the SVG's left edge, half clipped, so it is exactly 4px at any button size. */
.rkd5-left { stroke-width: 8; vector-effect: non-scaling-stroke; transition: opacity .01s ease .8s; }
/* Frame: same trick as the left bar. The rect is the SVG's full box with a 2px non-scaling stroke, half clipped, so
   every side is exactly 1px and flush with the button edge however far the 260×70 SVG is stretched (a scaling 1px
   stroke came out ~1.5px and soft on the sides of wider buttons, with a dark sliver outside it on the right). */
.rkd5-rect { stroke-width: 2; vector-effect: non-scaling-stroke; }
.rkd5-travel { stroke-width: 3.5; stroke-dasharray: 70 590; stroke-dashoffset: 0; opacity: 0; }

.rkd5-text { position: relative; z-index: 2; }
.rkd5-arrow {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
  transition: transform .8s cubic-bezier(.77, 0, .175, 1);
}
.rkd5-arrow path {
  fill: none;
  stroke: #b8860b;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke .8s cubic-bezier(.77, 0, .175, 1), stroke-width .8s cubic-bezier(.77, 0, .175, 1);
}

.rkd5-dark:hover { background: #8b0000; }
.rkd5-button:hover .rkd5-left { opacity: 0; transition: opacity .01s; }
.rkd5-button:hover .rkd5-travel { opacity: 1; animation: rkd5-travel .8s cubic-bezier(.77, 0, .175, 1) forwards; }
.rkd5-button:hover .rkd5-arrow { transform: translateX(4px); }
.rkd5-dark:hover .rkd5-arrow path { stroke: #fff; stroke-width: 3; }
.rkd5-outline:hover .rkd5-arrow path { stroke: #b8860b; stroke-width: 2; }
.rkd5-minimal:hover .rkd5-arrow { transform: translateX(8px); }
.rkd5-minimal:hover .rkd5-arrow path { stroke: #8b0000; stroke-width: 2; }

/* Divi contact form submit rendered as an animated button (form CSS class `rkd5-primary-submit` or `rkd5-transitional-submit`). */
.et_pb_contact_form_container .et_pb_button.rkd5-button,
.et_pb_contact_form_container .et_pb_button.rkd5-button:hover { display: inline-flex; gap: 20px; margin: 0; padding: 0 35px; border: 0; border-radius: 0; font: 400 16px Poppins, sans-serif; line-height: normal; letter-spacing: 3px; }
.et_pb_contact_form_container .et_pb_button.rkd5-button::before,
.et_pb_contact_form_container .et_pb_button.rkd5-button::after { display: none; }
.et_pb_contact_form_container .et_pb_button.rkd5-dark { background: #111; }
.et_pb_contact_form_container .et_pb_button.rkd5-dark:hover { background: #8b0000; }
.et_pb_contact_form_container .et_pb_button.rkd5-outline,
.et_pb_contact_form_container .et_pb_button.rkd5-outline:hover { background: transparent; }

@keyframes rkd5-travel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -660; }
}

@media (max-width: 480px) {
  .rkd5-button { min-width: 0; white-space: normal; min-height: 70px; padding: 14px 24px; letter-spacing: 2px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rkd5-button, .rkd5-minimal, .rkd5-arrow, .rkd5-arrow path { transition: none; }
  .rkd5-button:hover .rkd5-travel { animation: none; opacity: 0; }
  .rkd5-button:hover .rkd5-left { opacity: 1; }
}