/*************** All Buttons Style ***************/
.primary, .outline, .secondary, a, .primaryN, .outlineN, .secondaryN {
    white-space: unset;
}
.btn--brand, .btn-brand, .btn-secondary, .outline, .primary, .secondary, .primaryN, .outlineN, .secondaryN {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 4px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border: 0;
    cursor: pointer;
    padding: .5em 1.5em;
    margin: 0;
}

.primaryN:hover, .primaryN:focus, .outlineN:hover, .outlineN:focus {
    color: #003478;
}
.secondaryN:hover, .secondaryN:focus {
    color: #c3d156;
}

/***************************** Primary Button Style ***************/
.btn--brand, .btn-brand, .primary, .primaryN {
    color: #003478;
    background: 0 0;
    background-image: linear-gradient(116.69deg, #c3d156, #c3d156, #a9deed, #a9deed);
    background-size: 300% 100%;
    moz-transition: all 0.25s ease-in-out!important;
    -o-transition: all 0.25s ease-in-out!important;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.btn--brand:focus, .btn--brand:hover, .btn-brand:focus, .btn-brand:hover, .primary:focus, .primary:hover, .primaryN:focus, .primaryN:hover {
    background-position: 50% 0 !important;
    background-image: linear-gradient(116.69deg, #c3d156, #c3d156, #a9deed, #a9deed) !important;
}

/*************** Outline Button Style ***************/
.btn-secondary, 
.btn.btn--success, 
.btn.btn-secondary, 
.outline, 
a.btn-secondary, 
a.btn.btn--success, 
a.btn.btn-secondary, 
a.outline,
.outlineN {
    color: #003478;
}

/*************** Secondary Button Style ***************/
.btn.btn--outline, .secondary, .secondaryN {
    color: #c3d156;
}

/*************** Media Queries ***************/
@media(min-width: 768px) {
    .link, .outline, .primary, .secondary, .primaryN, .outlineN {
        font-size: 16px;
    }
}
@media(min-width: 992px) {
    .outline, .primary, .secondary, .primaryN, .outlineN {
        padding: .5em 1em;
    }
}
@media(min-width: 1200px) {
    .outline, .primary, .secondary, .primaryN, .outlineN {
        padding: .5em 1.5em;
    }
}



















































/*************** Outline Button Style ***************/
.outlineN {
  appearance: none;
  background: transparent;
  color: #003478;
  outline: 1px solid #003478;
  transition: outline-color 0.75s ease;
}
/*************** Secondary Button Style ***************/
.secondaryN {
  appearance: none;
  background: transparent;
  color: #c3d156;
  outline: 1px solid #c3d156;
  transition: outline-color 0.75s ease;
}

/*************** gradient border overlay (only the ring) ***************/
.outlineN::before, .secondaryN:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  /* This creates a 2px “ring” by padding the gradient and masking out the center */
  padding: 2px; /* matches the border thickness */
  margin: -2px;
  background: linear-gradient(116.69deg,#c3d156,#c3d156,#a9deed,#a9deed);
  background-size: 300% 100%;
  background-position: 0 0;
  /* Mask so only the border ring shows, interior stays transparent */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  /* start hidden; fade in on hover */
  opacity: 0;
  transition: opacity 0.5s ease, background-position 0.75s ease;
  pointer-events: none;
}

.outlineN:hover, .outlineN:focus, .secondaryN:hover, .secondaryN:focus {
  outline-color: transparent;
}
.outlineN:hover::before, .outlineN:focus::before, .secondaryN:hover::before, .secondaryN:focus::before {
  background-position: 50% 0;
}

/* hover (and keyboard focus) shows the gradient border */
.outlineN:hover::before,
.outlineN:focus::before,
.outlineN:focus-visible::before,
.secondaryN:hover::before,
.secondaryN:focus::before,
.secondaryN:focus-visible::before {
  opacity: 1;
}

/* Accessibility: keep a visible focus ring */
.outlineN:focus-visible, .secondaryN:focus-visible {
  border: 2px solid #000;
}

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  .outlineN::before, .secondaryN:before { 
      transition: none; 
      
  }
}