/* =========================================================
   WHITE PILL CTA with gradient sweep (works for all .vl-herobtn)
   ========================================================= */

/* container (the pill) */
.vl-herobtn,
.vl-herobtn.vl-aboutbtn {
  background:#fff !important;
  display:inline-flex;
  align-items:center;
  border-radius:50px;
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:4px; /* white ring thickness (smaller than before) */
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.25);
  transition:transform .2s ease;
}


/* gradient layer that sweeps in on hover */
.vl-herobtn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:0;
  background:linear-gradient(90deg,#2E0797 0%, #0700df 100%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.vl-herobtn:hover::after{ transform:scaleX(1); }

/* clickable text */
.vl-herobtn .theme-btn,
.vl-herobtn button.theme-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:15px; /* smaller text */
  line-height:16px;
  height:40px;    /* smaller height */
  padding:0 12px 0 14px;
  background:linear-gradient(90deg,#2E0797 0%, #0700df 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-transform:uppercase;
  transition:color .3s ease, -webkit-text-fill-color .3s ease;
}

/* on hover, text turns white */
.vl-herobtn:hover .theme-btn{
  background:none;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

/* on hover, text turns white */
.vl-aboutbtn:hover .theme-btn{
  background:none;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

/* arrow circle */
.vl-herobtn .theme-btn span{
  display:inline-grid;
  place-items:center;
  width:24px; /* smaller size */
  height:24px;
  border-radius:50%;
  background:linear-gradient(180deg,#ECEBFA 0%, #F0EFFD 100%);
  transform:rotate(-45deg);
  transition:transform .35s ease, background .35s ease, color .35s ease;
  color: #2E0797; /* arrow icon color default */
}

/* hover: arrow background semi-transparent + arrow turns white */
.vl-herobtn:hover .theme-btn span{
  background:rgba(255,255,255,.25);
  transform:rotate(0deg);
  color:#fff; /* arrow icon color on hover */
}

/* make sure any “theme-btn2” inside the hero pill behaves identically */
.vl-herobtn .theme-btn.theme-btn2{
  background:linear-gradient(90deg,#2E0797 0%, #0700df 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Optional: press effect */
.vl-herobtn:active{ transform:translateY(1px); }

/* Optional: make other button families match pill style */
.vl-hero-btn-3,
.thme-btn3,
.them-btn2,
.theme-sec-btn2,
.vl-iner-btn,
.vl-btn,
.vl-btn-sec{
  background:#fff !important;
  border-radius:50px !important;
  color:inherit;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}


/* force text to turn solid white on hover (override background-clip text) */
.vl-herobtn:hover .theme-btn,
.vl-aboutbtn:hover .theme-btn{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.arrow-7 { cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); z-index:2 }
.prev_arrow7 { left:10px }
.next_arrow7 { right:10px }