/* Button Hover Effects - Bottom to Top Fill */

/* Hide button2 button */
button.button2 {
  display: none !important;
}
/* Individual button styles to maintain proper display */
.frame-295-ds {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 189.11px !important;
  height: 48px !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  cursor: pointer !important;
  background: #a53dff !important;
  border-radius: 2em !important;
  padding: 12px 24px 12px 24px !important;
  transition:
    opacity 0.3s cubic-bezier(0.2, 0, 0.1, 1),
    transform 0.3s cubic-bezier(0.2, 0, 0.1, 1),
    box-shadow 0.5s ease,
    color 0.5s ease,
    background 0.5s ease !important;
  will-change: box-shadow, color, transform, opacity, background;
  box-shadow:
    0 0 0 rgba(97, 56, 216, 0) !important;
}

.frame-332,
button.frame-331-sa,
.button-4-qa-2,
.frame-313-rhg {
  display: none !important;
}

/* Button content containers */
.frame-295-ds .button4,
.frame-332 .button,
.frame-331-sa .button,
.button-4-qa-2 .button3,
.frame-313-rhg .submit-button {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: white !important;
}

/* Common hover effects for all buttons */

.frame-295-ds .button {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 1 !important;
  color: white !important;
  height: 100% !important;
  width: 100% !important;
}

.frame-332 .button,
.frame-331-sa .button,
.button-4-qa-2 .button3,
.frame-313-rhg .submit-button,
.frame-295-ds .button {
  position: relative;
  z-index: 1;
  color: white !important;
}

.frame-295-ds:after,
.frame-295-ds:before,
.frame-332:after,
.frame-332:before,
.frame-331-sa:after,
.frame-331-sa:before,
.button-4-qa-2:after,
.button-4-qa-2:before,
.frame-313-rhg:after,
.frame-313-rhg:before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  transition: height 0.5s cubic-bezier(0.2, 0, 0.1, 1);
  opacity: 0;
}

.frame-295-ds:before,
.frame-332:before,
button.frame-331-sa:before,
.button-4-qa-2:before,
.frame-313-rhg:before {
  background: linear-gradient(
    to top,
    #6138D8,
    rgba(97, 56, 216, 0.8)
  );
  border-radius: 2em;
}

.frame-295-ds:after,
.frame-332:after,
button.frame-331-sa:after,
.button-4-qa-2:after,
.frame-313-rhg:after {
  background: linear-gradient(
    to top,
    rgba(97, 56, 216, 0.5),
    rgba(81, 40, 200, 0)
  );
  border-radius: 2em;
}

.frame-295-ds:hover,
.frame-332:hover,
button.frame-331-sa:hover,
.button-4-qa-2:hover,
.frame-313-rhg:hover {
  transition:
    opacity 0.3s cubic-bezier(0.2, 0, 0.1, 1),
    transform 0.3s cubic-bezier(0.2, 0, 0.1, 1),
    box-shadow 2s ease,
    color 1.5s ease,
    background 1s ease 0.75s;

  background: #6138D8;
  box-shadow:
    0 0 1.75em rgba(97, 56, 216, 0.5);
}

.frame-295-ds:hover:before,
.frame-332:hover:before,
.frame-331-sa:hover:before,
.button-4-qa-2:hover:before,
.frame-313-rhg:hover:before,
.frame-295-ds:hover:after,
.frame-332:hover:after,
button.frame-331-sa:hover:after,
.button-4-qa-2:hover:after,
.frame-313-rhg:hover:after {
  transition: height 0.5s cubic-bezier(0.2, 0, 0.1, 1);
  opacity: 1;
  height: 100%;
}

/* Bottom to top fill effect */
.frame-295-ds:hover:before,
.frame-332:hover:before,
button.frame-331-sa:hover:before,
.button-4-qa-2:hover:before,
.frame-313-rhg:hover:before {
  height: 100%;
}

.frame-295-ds:hover:after,
.frame-332:hover:after,
button.frame-331-sa:hover:after,
.button-4-qa-2:hover:after,
.frame-313-rhg:hover:after {
  height: 90%;
  transition-delay: 0.1s;
}

/* Hover effects for buttona-56, buttonrt-4, button-9-r-2, buttono-41, buttong-09, buttonpk-2 and button5 buttons */
.buttona-56,
.buttonrt-4,
.button-9-r-2,
.buttono-41,
.buttong-09,
.buttonpk-2,
.button5 {
  background: var(--gray-white, #ffffff);
  border-radius: 2em;
  border-style: solid;
  border-color: var(--primary-500, #a53dff);
  border-width: 1px;
  padding: 12px 24px 12px 24px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  color: var(--primary-500, #a53dff);
}

/* Create a background layer for the hover effect */
.buttona-56::before,
.buttonrt-4::before,
.button-9-r-2::before,
.buttono-41::before,
.buttong-09::before,
.buttonpk-2::before,
.button5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-500, #a53dff), #7c3aed);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2em;
}

.buttona-56::after,
.buttonrt-4::after,
.button-9-r-2::after,
.buttono-41::after,
.buttong-09::after,
.buttonpk-2::after,
.button5::after {
  bottom: -2px;
  right: -2px;
  border-left: 2px solid #b388ff;
  border-bottom: 2px solid #b388ff;
  transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.buttona-56::before,
.buttonrt-4::before,
.button-9-r-2::before,
.buttono-41::before,
.buttong-09::before,
.buttonpk-2::before,
.button5::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid #b388ff;
  border-right: 2px solid #b388ff;
  transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.buttona-56:hover,
.buttonrt-4:hover,
.button-9-r-2:hover,
.buttono-41:hover,
.buttong-09:hover,
.buttonpk-2:hover,
.button5:hover {
  border-color: var(--primary-500, #a53dff);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(165, 61, 255, 0.3);
}

/* Background fill on hover */
.buttona-56:hover::before,
.buttonrt-4:hover::before,
.button-9-r-2:hover::before,
.buttono-41:hover::before,
.buttong-09:hover::before,
.buttonpk-2:hover::before,
.button5:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* Text and icon transition */
.buttona-56 .button7,
.buttonrt-4 .button7,
.button-9-r-2 .button7,
.buttono-41 .button7,
.buttong-09 .button7,
.buttonpk-2 .button7,
.button5 .button6,
.buttona-56 img,
.buttonrt-4 img,
.button-9-r-2 img,
.buttono-41 img,
.buttong-09 img,
.buttonpk-2 img,
.button5 img {
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Text and icon color change on hover */
.buttona-56:hover .button7,
.buttonrt-4:hover .button7,
.button-9-r-2:hover .button7,
.buttono-41:hover .button7,
.buttong-09:hover .button7,
.buttonpk-2:hover .button7,
.button5:hover .button6 {
  color: #ffffff;
  font-weight: 600;
}

.buttona-56:hover img,
.buttonrt-4:hover img,
.button-9-r-2:hover img,
.buttono-41:hover img,
.buttong-09:hover img,
.buttonpk-2:hover img,
.button5:hover img {
  filter: brightness(0) invert(1);
}