.btn-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--body-text-font, var(--text-font, "Inter", sans-serif));
  gap: 20px;
}

/* ===== ICON HOVER STYLES ===== */
.button-icon-wrapper {
  position: relative;
  display: inline-flex;
  width: 32px; /* Fixed width - adjust per button if needed */
  height: 32px; /* Fixed height - adjust per button if needed */
  justify-content: center;
  align-items: center;
}

.button-icon-default,
.button-icon-hover {
  position: absolute; /* Absolute positioning for overlay */
  top: 0;
  left: 0;
  width: 32px; /* Match wrapper dimensions */
  height: 32px; /* Match wrapper dimensions */
  transition: opacity 0.2s ease; /* Smooth transition */
}

.button-icon-default {
  opacity: 1;
}

.button-icon-hover {
  opacity: 0; /* Hidden by default */
}

/* Button One - Icon Hover */
.btn-primary:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

.btn-primary:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-primary:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Three - Icon Hover */
 .btn-large__square:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-large__square:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-large__square:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Six - Icon Hover (24px icons) */
 .button-icon-wrapper {
  width: 24px;
  height: 24px;
}

 .button-icon-default,
 .button-icon-hover {
  width: 24px;
  height: 24px;
}

 .btn-normal__withIcon:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-normal__withIcon:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-normal__withIcon:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Seven - Icon Hover (24px icons) */
 .button-icon-wrapper {
  width: 24px;
  height: 24px;
}

 .button-icon-default,
 .button-icon-hover {
  width: 24px;
  height: 24px;
}

 .btn-icon:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-icon:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-icon:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Eight - Icon Hover (24px icons) */
 .button-icon-wrapper {
  width: 24px;
  height: 24px;
}

 .button-icon-default,
 .button-icon-hover {
  width: 24px;
  height: 24px;
}

 .btn-icon__round:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-icon__round:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-icon__round:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Nine - Icon Hover (24px icons) */
 .button-icon-wrapper {
  width: 24px;
  height: 24px;
}

 .button-icon-default,
 .button-icon-hover {
  width: 24px;
  height: 24px;
}

 .btn-fancy:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-fancy:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-fancy:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* Button Ten - Icon Hover (24px icons) */
 .button-icon-wrapper {
  width: 24px;
  height: 24px;
}

 .button-icon-default,
 .button-icon-hover {
  width: 24px;
  height: 24px;
}

 .btn-fancy__curved:hover .button-icon-default {
  opacity: 0; /* Fade out default on hover */
}

 .btn-fancy__curved:hover .button-icon-hover {
  opacity: 1; /* Fade in hover on hover */
}


  .btn-fancy__curved:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1; /* Keep default visible if no hover icon */
}

/* ===== BUTTON ONE STYLES ===== */
.btn-primary {
  display: inline-flex;
  padding: 18px 30px;
  border-radius: 61.5px;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
  gap: 7px;
}

.btn-primary.button-1 {
  border: 2px solid var(--button1-border, #1c1f25);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #1c1f25);
}

.btn-primary.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #1c1f25));
  color: var(--button1-text-hover, #1c1f25);
  background: var(--button1-hover, transparent);
}

.btn-primary.button-1:hover svg path {
  fill: var(--button1-text-hover, #1c1f25);
}

.btn-primary.button-1:hover svg circle {
  stroke: var(--button1-text-hover, #1c1f25);
}

.btn-primary.button-2 {
  border: 2px solid var(--button2-border, #1c1f25);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #1c1f25);
}

.btn-primary.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #1c1f25));
  color: var(--button2-text-hover, #1c1f25);
  background: var(--button2-hover, transparent);
}

.btn-primary.button-3 {
  border: 2px solid var(--button3-border, #1c1f25);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #1c1f25);
}

.btn-primary.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #1c1f25));
  color: var(--button3-text-hover, #1c1f25);
  background: var(--button3-hover, transparent);
}

@media screen and (max-width: 1199px) {
  .btn-primary {
    padding: 15px 25px;
    font-size: 16px;
  }
}

@media screen and (max-width: 991px) {
  .btn-primary {
    padding: 12px 15px;
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .btn-primary {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ===== BUTTON TWO STYLES ===== */
 .btn-large__bordered {
  display: inline-block;
  padding: 18px 43px;
  border-radius: 29px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
}

 .btn-large__bordered.button-1 {
  border: 3px solid var(--button1-border, #02ed85);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #1c1f25);
}

 .btn-large__bordered.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #1c1f25));
  color: var(--button1-text-hover, #1c1f25);
  background: var(--button1-hover, #fff);
}

 .btn-large__bordered.button-2 {
  border: 3px solid var(--button2-border, #02ed85);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #1c1f25);
}

 .btn-large__bordered.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #1c1f25));
  color: var(--button2-text-hover, #1c1f25);
  background: var(--button2-hover, #fff);
}

 .btn-large__bordered.button-3 {
  border: 3px solid var(--button3-border, #02ed85);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #1c1f25);
}

 .btn-large__bordered.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #1c1f25));
  color: var(--button3-text-hover, #1c1f25);
  background: var(--button3-hover, #fff);
}

@media screen and (max-width: 1199px) {
   .btn-large__bordered {
    padding: 15px 35px;
    font-size: 16px;
  }
}

@media screen and (max-width: 991px) {
   .btn-large__bordered {
    padding: 12px 15px;
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
   .btn-large__bordered {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ===== BUTTON THREE STYLES ===== */
 .btn-large__square {
  display: inline-flex;
  padding: 18px 30px;
  border-radius: 4px;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
  gap: 10px;
}

 .btn-large__square.button-1 {
  border: 1px solid var(--button1-border, #1c1f25);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #1c1f25);
}

 .btn-large__square.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #1c1f25));
  color: var(--button1-text-hover, #1c1f25);
  background: var(--button1-hover, #fff);
}

 .btn-large__square.button-1:hover svg path {
  stroke: var(--button1-text-hover, #1c1f25);
}

 .btn-large__square.button-2 {
  border: 1px solid var(--button2-border, #1c1f25);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #1c1f25);
}

 .btn-large__square.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #1c1f25));
  color: var(--button2-text-hover, #1c1f25);
  background: var(--button2-hover, #fff);
}

 .btn-large__square.button-3 {
  border: 1px solid var(--button3-border, #1c1f25);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #1c1f25);
}

 .btn-large__square.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #1c1f25));
  color: var(--button3-text-hover, #1c1f25);
  background: var(--button3-hover, #fff);
}

@media screen and (max-width: 991px) {
   .btn-large__square {
    padding: 12px 15px;
    font-size: 18px;
  }
}

/* ===== BUTTON FOUR STYLES ===== */
 .btn-normal {
  display: inline-flex;
  padding: 10px 30px;
  border-radius: 4px;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
  gap: 10px;
}

 .btn-normal.button-1 {
  border: 1px solid var(--button1-border, #685dff);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #685dff);
}

 .btn-normal.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #685dff));
  color: var(--button1-text-hover, #685dff);
  background: var(--button1-hover, #fff);
}

 .btn-normal.button-2 {
  border: 1px solid var(--button2-border, #685dff);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #685dff);
}

 .btn-normal.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #685dff));
  color: var(--button2-text-hover, #685dff);
  background: var(--button2-hover, #fff);
}

 .btn-normal.button-3 {
  border: 1px solid var(--button3-border, #685dff);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #685dff);
}

 .btn-normal.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #685dff));
  color: var(--button3-text-hover, #685dff);
  background: var(--button3-hover, #fff);
}

@media screen and (max-width: 991px) {
   .btn-normal {
    padding: 8px 20px;
    font-size: 16px;
  }
}

/* ===== BUTTON FIVE STYLES ===== */
 .btn-normal__curved {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 61.5px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
}

 .btn-normal__curved.button-1 {
  border: 1px solid var(--button1-border, #685dff);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #685dff);
}

 .btn-normal__curved.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #685dff));
  color: var(--button1-text-hover, #685dff);
  background: var(--button1-hover, #fff);
}

 .btn-normal__curved.button-2 {
  border: 1px solid var(--button2-border, #685dff);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #685dff);
}

 .btn-normal__curved.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #685dff));
  color: var(--button2-text-hover, #685dff);
  background: var(--button2-hover, #fff);
}

 .btn-normal__curved.button-3 {
  border: 1px solid var(--button3-border, #685dff);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #685dff);
}

 .btn-normal__curved.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #685dff));
  color: var(--button3-text-hover, #685dff);
  background: var(--button3-hover, #fff);
}

@media screen and (max-width: 991px) {
   .btn-normal__curved {
    padding: 8px 20px;
    font-size: 16px;
  }
}

/* ===== BUTTON SIX STYLES ===== */
 .btn-normal__withIcon {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 4px;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
  gap: 10px;
}

 .btn-normal__withIcon.button-1 {
  border: 1px solid var(--button1-border, #685dff);
  color: var(--button1-text, #fff);
  background: var(--button1-background, #685dff);
}

 .btn-normal__withIcon.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #685dff));
  color: var(--button1-text-hover, #685dff);
  background: var(--button1-hover, #fff);
}

 .btn-normal__withIcon.button-2 {
  border: 1px solid var(--button2-border, #685dff);
  color: var(--button2-text, #fff);
  background: var(--button2-background, #685dff);
}

 .btn-normal__withIcon.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #685dff));
  color: var(--button2-text-hover, #685dff);
  background: var(--button2-hover, #fff);
}

 .btn-normal__withIcon.button-3 {
  border: 1px solid var(--button3-border, #685dff);
  color: var(--button3-text, #fff);
  background: var(--button3-background, #685dff);
}

 .btn-normal__withIcon.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #685dff));
  color: var(--button3-text-hover, #685dff);
  background: var(--button3-hover, #fff);
}

@media screen and (max-width: 991px) {
   .btn-normal__withIcon {
    padding: 8px 20px;
    font-size: 16px;
  }
}

/* ===== BUTTON SEVEN STYLES ===== */
 .btn-icon {
  display: inline-flex;
  padding: 10px;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
}

 .btn-icon.button-1 {
  border: 1px solid var(--button1-border, #685dff);
  background: var(--button1-background, transparent);
}

 .btn-icon.button-1 svg path {
  stroke: var(--button1-border, #685dff);
}

 .btn-icon.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #685dff));
  background: var(--button1-hover, #685dff);
}

 .btn-icon.button-1:hover svg path {
  stroke: var(--button1-text-hover, #fff);
}

 .btn-icon.button-2 {
  border: 1px solid var(--button2-border, #685dff);
  background: var(--button2-background, transparent);
}

 .btn-icon.button-2 svg path {
  stroke: var(--button2-border, #685dff);
}

 .btn-icon.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #685dff));
  background: var(--button2-hover, #685dff);
}

 .btn-icon.button-2:hover svg path {
  stroke: var(--button2-text-hover, #fff);
}

 .btn-icon.button-3 {
  border: 1px solid var(--button3-border, #685dff);
  background: var(--button3-background, transparent);
}

 .btn-icon.button-3 svg path {
  stroke: var(--button3-border, #685dff);
}

 .btn-icon.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #685dff));
  background: var(--button3-hover, #685dff);
}

 .btn-icon.button-3:hover svg path {
  stroke: var(--button3-text-hover, #fff);
}

/* ===== BUTTON EIGHT STYLES ===== */
 .btn-icon__round {
  display: inline-flex;
  padding: 10px;
  border-radius: 34px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.2s all ease;
  outline: none;
}

 .btn-icon__round.button-1 {
  border: 1px solid var(--button1-border, #685dff);
  background: var(--button1-background, transparent);
}

 .btn-icon__round.button-1 svg path {
  stroke: var(--button1-border, #685dff);
}

 .btn-icon__round.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #685dff));
  background: var(--button1-hover, #685dff);
}

 .btn-icon__round.button-1:hover svg path {
  stroke: var(--button1-text-hover, #fff);
}

 .btn-icon__round.button-2 {
  border: 1px solid var(--button2-border, #685dff);
  background: var(--button2-background, transparent);
}

 .btn-icon__round.button-2 svg path {
  stroke: var(--button2-border, #685dff);
}

 .btn-icon__round.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #685dff));
  background: var(--button2-hover, #685dff);
}

 .btn-icon__round.button-2:hover svg path {
  stroke: var(--button2-text-hover, #fff);
}

 .btn-icon__round.button-3 {
  border: 1px solid var(--button3-border, #685dff);
  background: var(--button3-background, transparent);
}

 .btn-icon__round.button-3 svg path {
  stroke: var(--button3-border, #685dff);
}

 .btn-icon__round.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #685dff));
  background: var(--button3-hover, #685dff);
}

 .btn-icon__round.button-3:hover svg path {
  stroke: var(--button3-text-hover, #fff);
}

/* ===== BUTTON NINE STYLES ===== */
 .btn-fancy {
  display: inline-flex;
  padding: 20px 30px;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  transition: 0.2s all ease;
  outline: none;
  gap: 10px;
}

 .btn-fancy.button-1 {
  border: 2px solid var(--button1-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button1-border, #000);
  color: var(--button1-text, #1c1f25);
  background: var(--button1-background, transparent);
}

 .btn-fancy.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button1-hover, transparent);
}

 .btn-fancy.button-2 {
  border: 2px solid var(--button2-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button2-border, #000);
  color: var(--button2-text, #1c1f25);
  background: var(--button2-background, transparent);
}

 .btn-fancy.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button2-hover, transparent);
}

 .btn-fancy.button-3 {
  border: 2px solid var(--button3-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button3-border, #000);
  color: var(--button3-text, #1c1f25);
  background: var(--button3-background, transparent);
}

 .btn-fancy.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button3-hover, transparent);
}

@media screen and (max-width: 991px) {
   .btn-fancy {
    padding: 10px 20px;
    font-size: 16px;
  }
}

/* ===== BUTTON TEN STYLES ===== */
 .btn-fancy__curved {
  display: inline-flex;
  padding: 20px 30px;
  border-radius: 56px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  transition: 0.2s all ease;
  outline: none;
  gap: 10px;
}

 .btn-fancy__curved.button-1 {
  border: 2px solid var(--button1-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button1-border, #000);
  color: var(--button1-text, #1c1f25);
  background: var(--button1-background, transparent);
}

 .btn-fancy__curved.button-1:hover {
  border-color: var(--button1-border-hover, var(--button1-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button1-hover, transparent);
}

 .btn-fancy__curved.button-2 {
  border: 2px solid var(--button2-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button2-border, #000);
  color: var(--button2-text, #1c1f25);
  background: var(--button2-background, transparent);
}

 .btn-fancy__curved.button-2:hover {
  border-color: var(--button2-border-hover, var(--button2-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button2-hover, transparent);
}

 .btn-fancy__curved.button-3 {
  border: 2px solid var(--button3-border, #1c1f25);
  box-shadow: 6px 6px 0 0 var(--button3-border, #000);
  color: var(--button3-text, #1c1f25);
  background: var(--button3-background, transparent);
}

 .btn-fancy__curved.button-3:hover {
  border-color: var(--button3-border-hover, var(--button3-border, #1c1f25));
  box-shadow: none !important;
  background: var(--button3-hover, transparent);
}

@media screen and (max-width: 991px) {
   .btn-fancy__curved {
    padding: 10px 20px;
    font-size: 16px;
  }
}