.fill-btn.icon-btn {
  display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.fill-btn.blue-btn {
  background: var(--brand-two);
}
.fill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--btnradius);
 
}

/* icon */
.fill-btn span img {
  transition: transform 0.25s ease;
}

/* ✨ hover */
.fill-btn:hover {
  transform: translateY(-2px);
  background: transparent;
  color: var(--brand-one);
  border-color: var(--brand-one);
}

/* 👉 subtle icon move */
.fill-btn:hover span img {
  transform: translateX(4px);
}
.fill-btn:hover svg path {
  fill: var(--brand-one);
}
/* BASE BUTTON (keep your existing one) */




/* 🔵 VARIANT for blue background */
.fill-btn--light {
  background: var(--maincolor);
  color: var(--brand-one);
  border: 1px solid var(--maincolor);
}

/* hover */
.fill-btn--light:hover {
  background: transparent;
  color: var(--maincolor);
  transform: translateY(-2px);
   border: 1px solid var(--maincolor);
}

/* icon */
.fill-btn--light span img {
  transition: transform 0.25s ease, filter 0.25s ease;
}



/* if using inline SVG */
.fill-btn--light svg path {
  /* fill: currentColor; */
  transition: fill 0.25s ease;
}
.fill-btn--light:hover svg path {
  fill: var(--maincolor)
}
/* BASE */
.fill-btn {
 display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--btnradius);
    transition: all 0.3s ease;
color: var(--maincolor);
    background: var(--brand-one);
    border: 1px solid transparent;
 
}

/* 🔵 OUTLINE → FILL VARIANT */
.fill-btn--outline-fill {
  background: transparent;
  color: #fff; /* for blue banner */
  border: 1px solid #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ✨ fill animation layer */
.fill-btn--outline-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

/* 🚀 hover = fill */
.fill-btn--outline-fill:hover::before {
  transform: scaleX(1);
}

/* text color change */
.fill-btn--outline-fill:hover {
  color: var(--brand-one);
  transform: translateY(-2px);
}

/* icon */
.fill-btn--outline-fill span img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* icon move */
.fill-btn--outline-fill:hover span img {
  transform: translateX(4px);
  filter: brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(500%) hue-rotate(200deg);
}

/* inline SVG support */
.fill-btn--outline-fill svg path {
  fill: currentColor;
  transition: fill 0.3s ease;
}
.button-set {
    display: flex;
    gap: 20px;
}
.fill-btn.white-outline:hover {
    border: 1px solid var(--maincolor);
    color: var(--maincolor);

  }
  .fill-btn.fill-btn--light {
    background: var(--maincolor);
    color: var(--brand-one);
    border: 1px solid var(--maincolor);
}
.fill-btn.fill-btn--light:hover {
background-color: transparent;
color: var(--maincolor);
}