/**
 * Kadence Blocks - HEXAGON Button Styles
 * File: assets/css/sc-block-styles.css
 */

/* HEXAGON button base */
.hex-btn {
  --hex-size: contain;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  border: none !important;
  background: none !important;
  text-decoration: none;
  color: #000 !important;
  transition: all 0.25s ease;
}

/* Use an inline SVG as background image */
.hex-btn::before {
  content: "";
  position: absolute;
  opacity: 1 !important;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='59' height='66' fill='none' viewBox='0 0 59 66'><path fill='%23fff' stroke='%23000' stroke-width='2' d='M57.5 17.081v31.837l-28 15.932-28-15.932V17.081l28-15.932z'/></svg>") no-repeat center !important;
  background-size: var(--hex-size) !important;
  z-index: -1;
  transition: filter 0.25s ease, fill 0.25s ease;
}

/* Hover fill inversion */
.hex-btn:hover::before {
  filter: invert(1);
}

.hex-btn:hover,
.hex-btn:hover .kt-svg-icon {
  color: #fff !important;
  border: none !important;
}

/* Ensure icon/text layering stays above background */
.hex-btn .kt-svg-icon,
.hex-btn .kt-btn-inner-text {
  position: relative;
  z-index: 1;
  transition: color 0.25s ease;
}

/*** End Kadence Blocks - HEXAGON Button Styles **/

/**
* Intro Rows Clip Path Styles
*/

.sc-intro-txt-image-column-left {
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.sc-intro-txt-image-column-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

@media (max-width: 1024px) {
  .sc-intro-txt-image-column-left,
  .sc-intro-txt-image-column-right {
    clip-path: none;
  }
}