.notifcation-bar {
  background: #274a50;
  color: #FFF;
  position: fixed;
  width: 250px;
  height: fit-content;
  z-index: 9999;
  border-radius: 100px 0 0 0;
  bottom: 0;
  right: 0;
  padding: 20px;
  
  }
  

  
  .notifcation-bar .inner { 
  
  display: flex;
  flex-direction: column;
  padding: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
  
  #slide {
display: none;
  right: -250px;
    -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 0.5s forwards;
  animation-delay: 0.5s;
}

@-webkit-keyframes slide {
  100% { right: 0; }
}

@keyframes slide {
  100% { right: 0; }
}
  
  .notifcation-bar a {
    background:#599078 !important;
    border:2px solid #599078  !important;
  }
  
  .notifcation-bar a:hover {
    background:none  !important;
    color:#599078 !important;
  }
  
  .notifcation-bar a.border-white:hover span {
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  .notifcation-bar img {
    max-width: 125px;
  }
  
  .notifcation-bar .hidepop {
        background: none !important;
      border: none !important;
      position: absolute;
      top: 15px;
      right: 15px;
  }
  
  .notifcation-bar strong {
    font-size: 20px;
  line-height: 25px;
  margin: 15px 0;
  }
  
  @media screen and (max-width:750px) {
    
    .notifcation-bar {
      top: 50%;
      border-radius: 50px 0 0 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    }
  }


.margtop {
margin-top:30px;
display: inline-flex;
}

html {
height: 100%;
box-sizing: border-box;
background: #ebebeb;
}

* { 
box-sizing:border-box;	
}

img:not([src]) {
visibility: hidden;
}

/* Fixes Firefox anomaly during image load */
@-moz-document url-prefix() {
img:-moz-loading {
  visibility: hidden;
}
}

a {  
transition: all .3s ease-in-out; 
}

a:hover { 
 transition: all .3s ease-in-out; 
}



body  {
  color: #462b6b;
  background: #f5f7fa;
  font-size: 16px;
   font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  font-weight: 500;
  line-height: 1.6em;
  margin: 0 auto;
  max-width: 2250px;
  min-width: 980px;
  text-align: left;
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  text-align: center;
}



.logos .container {
  max-width:100%;
}
.logo-container {
  overflow: hidden; /* Hide overflow initially */
  white-space: nowrap; /* Ensure all logos are in a single line */
  position: relative;
 
}

.logo-container__logos, .logo-container__logos-notanimated {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%; /* Keep the width at 100% */
  position: relative;
}




.logo-container__logos-notanimated .logo-container__logo img {
  max-height: 5rem;;
}

.logo-container__logo {
  flex: 0 0 auto;
  width: calc(100% / 8); /* Ensure 6 logos fit within the container */
  box-sizing: border-box;
}

/* Apply the animation only when the animate class is present */
.logo-container__logos.animate {
  animation: scroll 20s linear infinite; /* This creates the scrolling effect */
}


.logo-container__logo h4 {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "IBM Plex Sans", sans-serif;
  margin:1.5em 0;
}

@keyframes scroll {
  from {
      transform: translateX(0); /* Start from the initial position */
  }
  to {
      transform: translateX(-150%); /* Move to the left by 100% of the container width */
  }
}




.logo-container {
display:flex;
max-width:100%;
margin:3em auto 0 auto;

}



.logo-container__logo{
display:flex;
justify-content: center;
align-items: center;
}

.logo-container__logo img {
max-width:12rem;
max-height: 3rem;;
}


@media screen and (max-width:1023px) {

.logo-container__logo {
  width:calc(100% / 2);
}

.logo-container__logos.animate {
  animation: scroll 10s linear infinite; /* This creates the scrolling effect */
}


.logo-container {
  margin-top:2em;
}

.logo-container__logos-notanimated { 
  flex-wrap:wrap;
}
.logo-container__logos-notanimated .logo-container__logo {
  width:calc(50% - 1em);
}

.logo-container__logo h4 {
  font-size:1.05em;
  margin:1em 0;
}

.logo-container__logos-notanimated .logo-container__logo:not(:nth-child(-n+2))  {
  margin-top:1.5em;
}

logo-container__logos-notanimated .logo-container__logo img {
  max-height: 4rem;
}
}



::selection { 
 background: #fec17d; 
}	

.inner { 
max-width: 1600px;   
padding:0px;
margin:0 auto;
}

a.white-but { 

background: #FFF; 
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);

text-decoration: none;
padding:13px 25px;

font-size: 16px;
border-radius: 50px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: capitalize;
background-size: 100% 100%;
border:2px solid #FFF;
}


.white-but-orange span { 
  
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%) !important;
background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;

}

.white-but-orange:hover span {
  -webkit-text-fill-color: #FFF !important;

}

a.white-but span { 
  background: linear-gradient(to right, #5c5ab9 0%, #673f9e 75%);-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

a.white-but:hover { 
 background: none;
 border:2px solid #FFF;
}

a.white-but:hover span { 
color:#FFF;
background: none;
-webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

a.orange-but { 

background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
color:#FFF;
text-decoration: none;
padding:14px 25px;

font-size: 16px;
border-radius: 50px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: capitalize;
background-size: 100% 100%;
}

a.orange-but:hover { 
 background-size:200% 200%;  
}


a.purple-but { 

  background: linear-gradient(to right, #5c5ab9 0%, #673f9e 75%) !important;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  color:#FFF !important;
  text-decoration: none !important;
  padding:14px 25px;
  
  font-size: 16px;
  border-radius: 50px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  text-transform: capitalize;
  background-size: 100% 100%;
  }
  
  a.purple-but:hover { 
   background-size:200% 200% !important;
  }

a.border-white, div.border-white { 
  transition: all .3s ease-in-out;
border:2px solid #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
color:#FFF;
text-decoration: none;
background:none;

padding:12px 25px;

font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: capitalize;
font-size: 16px !important;
border-radius: 50px;
}


.main.dark-purple, footer {
  background: linear-gradient(to right, #462b6b 0%, #352152 75%);
}

.main.dark-purple-invert.dark-purple {
  background: linear-gradient(to left, #462b6b 0%, #352152 75%);
}
.main.dark-purple {
  color:#FFF;
}

.main.dark-purple h1 {
  color:#FFF;
  -webkit-background-clip: none;
  -webkit-text-fill-color: white;
}

.right-promo:hover div.border-white span {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.right-promo:hover div.border-white { 
  background:#FFF;
}

div.border-white:hover, a.border-white:hover { 
background: #FFF;
transition: all .3s ease-in-out;
}

.yellow {
  background: #f8eedb !important;
}

.yellow .icon-column-cont strong {
  background: linear-gradient(to right, #5c5ab9 0%, #673f9e 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.yellow a.border-purple:hover {

  color:#f8eedb;
  background: #462b6b;
}
a.border-purple { 
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
color:#FFF;
text-decoration: none !important;
padding:12px 25px;
background: none !important;
-webkit-background-clip: none !important;
-webkit-text-fill-color: unset !important;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: capitalize;
font-size: 15px;
border-radius: 50px;
border: 2px solid #462b6b;
  color:#462b6b !important;
}



a.border-purple:hover { 
background: #462b6b !important;
color:#FFF !important;
}

a.border-white:hover { 
background: #FFF;
}

a.border-white:hover span { 
background: linear-gradient(to right, #5c5ab9, #673f9e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

a.border-white.orange-text:hover span { 
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.orange-text {
  background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* HEADERS */

h1 { 
font-size: 60px;
line-height: 68px;

font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500 !important;
font-style: normal;
text-transform: none;

margin:0;
color:#FFF;
}

h1.purple, span.purple { 
 background: linear-gradient(to right, #5c5ab9, #673f9e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h2 { 
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: none;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500 !important;
font-size: 22px;
line-height: 26px;
}


/* DEMO BAR  ------------------------------------------------------------ */


.demo-bar { 
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
display: flex;
justify-content: center;
align-items:center;
width:100%;
padding:15px;
text-decoration: none;
color:#FFF;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: uppercase;

font-size: 14px;
  background-size: 100% 100%;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);

}

.demo-bar:hover { 
background-size:200% 200%;   
}

.demo-bar img { 
max-width: 25px;
margin-right: 15px;
}


.non-modal.modal-open {
height: 100vh%; 
overflow: hidden !important; 
width: 100%; 

touch-action: none;
}

.modal { 
-webkit-overflow-scrolling: touch;
}



.promo-bar {
  background:#FFF;
  padding:12.5px 0;
  font-weight: 600;
 
}

.promo-bar span {
  background: linear-gradient(to right, #5c5ab9 0%, #673f9e 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-bar a {
  margin-left:10px;
  text-decoration: underline;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* HEADER ------------------------------------------------------------ */


header.fixed { 

}

.header-main  {
background: linear-gradient(to right, #5c5ab9, #673f9e);
 box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
 max-width: 2250px;
 width:100%;
 margin:0 auto;
 position: fixed;
z-index: 4;
top:0;
 margin:0 auto;
}

header.fixed .logo { 
max-width: 250px;
}

header.fixed .demo-bar { 
padding:10px;
max-width: 2250px;
margin: 0 auto;
}

header { 
position: absolute;
left:0;
right: 0;
z-index: 4;
}

header.mobile-header { 
display: none;
}

.non-modal {
  margin-top:125px;
}



.header-main .inner { 
display: flex;
align-items:center;
justify-content:center;
}

.logo { 
max-width: 250px;
}

.logo img { 
max-width: 100%;
display: block;
}

.new-badge {
      position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
  color: #FFF;
  text-decoration: none;
  max-width: fit-content;
  padding: 5px 7px;
  border-radius: 0 10px 0 10px;
  font-size: 9px;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  margin: auto;
  font-weight: 700;
 

}
nav.main-nav { 
width:100%;
 margin-left: 60px;
text-align: right;
}

.featurelsit {
flex-direction: row;
    flex-direction: column;
}

.grid-tap {
  background-image: url(assets/img/2024/hp_square-taptopay.jpg);
  background-size: cover;
}

.grid-auction {
  background-image: url(assets/img/2024/hp_square-auction.jpg);
  background-size: cover;
}

.grid-community {
  background-image: url(assets/img/2024/masons-sq.jpg);
  background-size: cover;
}

.grid-qr {
  background-image: url(assets/img/2024/hp_square_qr.jpg);
  background-size: cover;
}

.grid-team {
  background-image: url(assets/img/2024/hp_square_team.jpg);
  background-size: cover;
}

.grid-card {
  background-image: url(assets/img/2024/hp_square_card.jpg);
  background-size: cover;
}

.main.features-new-actual-cont {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 0;
  width: 100%;
 padding:0;
}

.flex-end {
  align-items: flex-end;
  justify-content: flex-end !important;
}


.new-hp-feature.flex-endy {
  align-items: flex-end;
}


.flex-start {
  align-items: flex-start;
  justify-content: flex-start !important;
  
}.new-hp-feature-left .nopadp p  {
  margin-bottom: 0;
}


.flex-start .push-left {
  padding-left: 100px;
  max-width: 800px !important;
}

.flex-center {
  align-items: center !important;
}

.flex-center {
  align-items: flex-center;
}

.new-hp-feature-left p {
  color:#FFF;
  margin:10px 0 40px 0;
}

.hp .new-hp-feature img {
  max-width: 250px;
}
.main.features-new-actual-cont .push-left {
  max-width: 700px;
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-start !important;
}

.new-hp-feature {
  background: linear-gradient(to right, #5c5ab9, #673f9e);  
  display: flex;
  justify-content: space-between;
  padding-right: 100px;
  
}
.new-hp-feature-left h1 {
  font-size:40px;
  line-height: 45px;
}
.new-hp-feature-left {
  padding:70px;
  padding-left:0;
  text-align: left;
  width:60%;
}

.new-hp-feature img  {
  width:40%;
  align-items: flex-end;
  max-width: 280px;
  height: fit-content;
  display: block;
}


.new-hp-feature:nth-child(3), 
.new-hp-feature:nth-child(4) {
  background: linear-gradient(to right, #673f9e, #5c5ab9);
}

.grid-container {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  width: 90%;
  max-width: 1200px;
}
.grid-item {
  position: relative;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #ccc;
  background-size:cover !important;
  background-position: center center;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.grid-item:hover {

  transition: all 0.3s ease-in-out;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  padding:30px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  color: white;
  text-align: center;
  flex-direction: column;
}
.grid-item:hover .overlay {
  opacity: 1;
}
.overlay-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.icon-columns {
  
}

.flex-columns {
  
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 50px;
 
}

.cta-bar a.white-but span {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-bar .inner {
  display: flex;
      justify-content: center;
      align-items: center;
}
.cta-bar a.white-but:hover span {

  -webkit-text-fill-color: #FFF;

}

.flex-columns {
  justify-items: start; 
  text-align:left;
}

.border-white.orange-text {
  -webkit-text-fill-color: #FFF;

}

.inner .flex-me_img {
  width:50%;
}

.flex-me_text .purple-but {
  margin-top: 10px;
    display: inline-flex

}
.inner .flex-me_img img  {
  max-width:100%;
  max-height: 600px;
}
.flex-columns h1 {
  align-self: center;
  justify-self: start !important;
  text-align: left;
  margin:0 !important;

}

.main h2 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.icon-column-cont {
  justify-content: flex-start;
}


.icon-column-cont strong {
  font-weight: 500;
  font-size:20px;
  display: block;
  margin:20px 0 10px 0;
}

.icon-column-cont  p {
  margin-bottom: 0 !important;
  margin-top:0;
}

.icon-column-cont a {
  color:#FFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top:20px;
}
.icon-column-cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.icon-column-cont img {
  width: 40px;
    height: 40px;
}
h1.small {
  font-size:40px;
}

.dd-menu .overlay-icon {
  margin-bottom: 0;
}
.dd-menu .icon-overlay-cont {
  margin-right: 20px;
  margin-bottom: 0px;
  background: #FFF;
  border-radius: 100%;
}

.icon-overlay-cont {
  display: flex;
  position: relative;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  
  height: 60px;
  margin-bottom: 15px;
  align-items: center;
}

nav.main-nav a.demo-but::after { 
  display: none !important;
}

nav.main-nav a.login-but, nav.main-nav a.register-but, a.demo-but {
  font-size: 16px !important;
}
.icon-overlay-cont img {
  position: relative;
  top:0;
  width:35px;
  height: 35px;
  left:0;
}

 nav.main-nav a.demo-but {
  margin-right: 0;
  padding: 12px 25px;
}


.overlay-icon {
  position: absolute;
  left:0;
  top:0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari */
  mask-composite: exclude; /* For other browsers */
  padding: 1.25px; /* Border thickness */
}


.overlay-title {
  font-size: 20px;
  margin-bottom: 5px;
}
.overlay-text {
  font-size: 15px;
}

nav.main-nav a { 
color:#FFF;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
text-transform: capitalize;
font-size: 18px;
text-decoration: none;
cursor: pointer;
margin:0 10px;
position: relative;
}

.pp.feature {
max-width: 50%;
  width: 100%;
  margin: 0 auto;

}

.fheader {
  background:none !important;
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
}
.pp ul {
display: flex;
width:100%;
flex-direction: column;
background: linear-gradient(to right, #462b6b 0%, #352152 75%);
}

.pp ul li:not(:last-child) {
  border-bottom: 1px solid #5c5ab9;
} 
.pp ul span {
 font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
order:1;
width:calc(100% - 35px);
border-right: 1px solid #5c5ab9;
padding: 10px 20px 10px 20px;
}

.pp ul li {
    display: flex;
  text-align: left;
  align-items: center;
  justify-content: space-between;
margin:0;
    
}

.pp ul img {
max-width: 15px;
   
order:2;
margin: 10px 20px 10px 20px;
}

a.comm-menu {
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

nav.main-nav :after, a.comm-menu.active:after {    
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
top:75px;
position: absolute;
 background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}

nav.main-nav a:hover:after, nav.main-nav a.active:after, a.comm-menu.active:after { 
   width: calc(100% - 20px);
  left: calc(0% + 10px);
}
nav.main-nav a.active2:after {
  width: calc(100% - 20px) !important;
  left: calc(0% + 10px) !important;
}
nav.main-nav a.login-but, nav.main-nav a.register-but { 
margin-right: 0;
padding:12px 25px;
}

nav.main-nav a.login-but:hover:after, 
nav.main-nav .dd-cont .dd-menu a:hover:after, 
nav.main-nav a.register-but:hover:after{ 
width:0;
}


.orange-text {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}
#cookie-bar.fixed {
  max-width: 500px !important;
  right: 0 !important;
  left: auto !important;
  border-radius: 50px 0 0 0;
}
/* HEROS  ------------------------------------------------------------ */

.hero .push-left {
  width:800px;
  padding-right: 100px;
}




.hero { 
position: relative;
padding:0 0 0 0;
background-size: cover !important;
}

.hero {display: flex;}
.hero-left {
  width: 50%;
  text-align: left;
  display: flex
;
  justify-content: flex-end;
}

.hero.home .hero-left { 
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  padding:150px 0;
}


.hero.home-actual .hero-left { 
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  padding:180px 0;
}
.hero.contactless { 
background: url("assets/img/contactless/contactless-bg.jpg") no-repeat;
}



.hero.qr { 
background: url("assets/img/qr/qrnfc-bg.jpg") no-repeat;
}

.hero.community { 
background: url("assets/img/community/community-hero.jpg") no-repeat;
}

.hero.websites { 
 background: url("assets/img/website/website-bg.jpg") no-repeat;
}

.hero.events-ticket { 
background: url("assets/img/community/events-hero.jpg") no-repeat;
}

.hero.stripe { 
background: url("assets/img/stripe/stripe-hero.jpg") no-repeat;
}

.hero.taponphone { 
      background: url("assets/img/contactless/taphero2.jpg") no-repeat;
    }

    .nofilter {
      -webkit-background-clip: unset !important;
      -webkit-text-fill-color: white;
      background: none !important;
  }

  
  .hero-right.about {
    background: url("assets/img/2024/about-gt.jpg") no-repeat;
    background-size:cover;
    background-position: center center;
  }


  .hero.app .hero-left {
    background:#161517;
  }

  .thankshero { 
    background: linear-gradient(to right, #5c5ab9, #673f9e);
  }

  .thankshero .hero-left {
    background: none !important;
  }

  .iphoneapp.hero-right .push-right, .thankyou.hero-right {
    max-width: 775px;
 }

 .thankyou.hero-right .push-right  {
  
}

 .iphoneapp.hero-right .push-right,  .thankyou.hero-right .push-right {
  max-width: 775px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

  .hero-right.iphoneapp, .hero-right.giftaid {
    background:#000;
  }

  .hero-right.giftaid {
    background:none;
  }

  .hero-right.giftaid {
    padding:60px 0;
    
  }

  .hero-right.giftaid img {
    filter: drop-shadow(0px 0 75px #5c5ab98c);
  }
  
  .hero.app.giftaid .hero-left {
    align-items: center;
    background:none;
  }

  .hero.home.giftaid {
    background: linear-gradient(to right, #462b6b 0%, #352152 75%);
  }

  .hero-right.donation-pages {
    background: url("assets/img/2024/donation-page.jpg") no-repeat;
    background-size:cover;
    background-position: bottom center;
  }

  
  .hero-right.fundraising {
    background: url("assets/img/2024/fundraising-hero.jpg") no-repeat;
    background-size:cover;
    background-position: bottom center;
  }

    .hero-right.silent-auction {
      background: url("assets/img/2024/auction-bg.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }

    .hero-right.ttp {
      background: url("assets/img/2024/taptopay-hero.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }
    .hero-left.contact-hero {
      background: url("assets/img/2024/contact-image.jpg") no-repeat !important;
      background-size:cover  !important;
      background-position: bottom center !important;
      min-height: 700px;
    }


    .hero-right.qr {
      background: url("assets/img/2024/qrnfc.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }

    .hero-right.events {
      background: url("assets/img/2024/eventshero.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }


    .hero-right.community {
      background: url("assets/img/2024/masons.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }

    .hero-right.card {
      background: url("assets/img/2024/card-heroi.jpg") no-repeat;
      background-size:cover;
      background-position: bottom center;
    }


.flex-hero-points { 
display: flex;
margin-bottom: 30px;
}
.taponphone .flex-hero-points {
  margin-top:30px;
}
.hero-point { 
display: flex;
color:#FFF;
align-items: center;

}

.hero-point:not(:last-child) {
margin-right: 15px;
}

.hero-point img {
max-width: 20px;
margin-right: 5px;

}

.hero.stripe .hero-left .googleetc img, .ios .inline-ctas img { 
max-width: 300px;
}

.hero.taponphone .hero-left .googleetc img {
min-width: 200px;
}

.apps {
margin-top:30px;

}

.apps img {
    max-width: 125px;
}

.hero.stripe .hero-right img { 
max-width: 612px;
}
.hero .inner { 
display: flex;
align-items:center;
justify-content:center;
}

.hero-left { 
width: 50%;
text-align: left;
}

.hero-right { 
  position: relative;
  z-index: 3;
  width: 50%;
  text-align: right;
}

.hero-right img, .hero-right video {
  max-width: 100%;

}

.hero h2 { 
margin:20px 0;
max-width: 650px;
}

.hero p { 
font-size: 17px;
color:#FFF;
line-height:30px;
max-width: 630px;
margin:10px 0 30px 0;
}

.curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  pointer-events: none;
}

.inline-ctas { 
display: flex;
}

.hero .border-white { 
margin-left: 0;
}

.hero .inline-ctas a:nth-child(2) {
  margin-left:15px;
}
.video-section {
max-width: 700px;;
}

.video-section.pay {
max-width: 500px;;
}

.video-section video { 
max-width: 100%;
 clip-path: inset(1px 1px);
margin-top:50px;
}

.video-section-text.flex-me_text-left {
  padding-right: 90px;
  max-width: 450px;
  text-align: left;
}

.stripe .hero-left h1 small {
font-size: 18px;
margin-bottom: 15px;
display: block;
}

.video-section.pay video {
margin-top: 0;
mix-blend-mode: darken;
}

/* Sections */

.main { 
padding:120px 0;
background: #FFF;
}

.main.grey { 
background: linear-gradient(-135deg, #ededfa 20%,#f2f2fa 80%); 
}

.main h1 { 
max-width: 750px;
margin:0 auto;
}

.flex-me {
  display: flex;
  align-items: center;
  padding-top: 100px;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: space-around;
}

.flex-me_text {  
max-width: 600px;
}


.no-pad-bot {
  padding-bottom: 0;
}
.flex-me_text .orange-but {
margin-top:10px;
display: inline-flex;
}

.text-img-split .flex-me_text-right {
  padding-left:100px;
  text-align:left;
}
.yellow .flex-me_text-right, .purple .flex-me_text-right { 
 padding-left:200px;
text-align: left;
}

.flex-me_img.full img {
  max-width: 100%;
  max-height: unset;
  display: block;
}
.flex-me_img.center {
  align-self: center;
}

.flex-me_img.center img {
  max-height:700px;
}
.has-container img {
  margin:0 auto;


}
.donotmove .logo-container__logo {
  width: calc(100% / 6);
}
.flex-me_text p a {
 
    text-decoration: underline;
    background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;

}

.shift-left-dt {
  margin-left:-200px;
}
.shift-right-dt {
  margin-right:-200px;
}
.flex-me_text-left { 
 padding-right:175px;
text-align: left;
}

.flex-icon img {
max-width: 45px;
}

.flex-icon {
display: flex;
}

.flex-icon:nth-of-type(1) {
margin-top:30px;
}

.flex-icon:nth-of-type(2) {
margin:30px 0;
}

.flex-icon-right {
display: flex;
flex-direction: column;
padding-left:20px;
}

.flex-icon-right p {
margin:0;
}
.reader-how.main .inline-ctas {
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
}


.p-h2 h2 { 
display: inline-block;
margin-right: 5px;
margin-bottom: 0;

}

.main.fw-image .hire-units .inline-ctas { 
justify-content: flex-start;
margin-top:0;
    margin: 20px 0 40px 0;
}

ul li { 
  list-style: none;
  display: flex;
  align-items:center;
  margin-bottom: 10px;
}

ul span { 
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500 !important;
font-style: normal;
font-size: 15px;
line-height: 18px;
}

ul { 
padding: 0;
}

ul.terms {
    list-style: square;
  padding-left: 20px;
  width: 80%;
font-size: 14px;

}

ul.terms li {
    list-style: circle;
  display: list-item;
}



.hire-units.readers {
align-items: flex-start;

}

.main .inline-ctas { 
 align-items:center;
 margin-top: 100px;
justify-content:center;
}

a.shift-right { 
margin-left: 15px;
}

.main .inline-img { 
margin-top: 30px;
}

.fw-image .inner { 
display: flex;
flex-direction:column;
}

.main.fw-image .fw-image_img { 
margin: 60px auto 20px auto;
width: fit-content;
max-width: 100%;
}

.main.fw-image .inline-ctas { 
margin-top: 60px;
}

.square {
  margin: 30px auto 60px;
  max-height:32px;
}

.main.fw-image p  { 
max-width: 600px;
margin:1em auto;
}

.selling-points { 
display: flex;
flex-wrap:wrap;
margin:100px 0 70px 0;
}

.selling-points.comm, .selling-points.special {
margin-bottom: 0;
}


.comm.taponphone  {
margin-top:100px !important;
}
.comm.taponphone .selling-point {
 width:calc(33.33% - 40px) !important;
}

.comm.taponphone .selling-point:nth-child(3) {
margin-right: 0 !important;
}

.selling-point { 
width:calc(33.33% - 40px);
margin-right: 60px;  
flex-wrap:wrap;
margin-bottom: 30px;
text-align: left;
}

.selling-points.comm .selling-point {
text-align: center;
}

.selling-point a.border-purple {
margin-top:10px;
display: inline-flex;		
}

.selling-points.comm .selling-point h2 { 
text-align: center;
padding:0 10px;
    font-size: 15px;
  line-height: 20px;
}
.selling-points.comm .selling-point {
width:calc(25% - 45px);

}
.selling-points.comm img {
max-width: 150px;
filter: drop-shadow(0px 0px 10px #00000026);
}
.selling-point:nth-child(3n) { 
margin-right: 0;
}

.selling-points.comm .selling-point:nth-child(3n) {
margin-right: 60px;
}

.selling-points.comm .selling-point:nth-child(4n) {
margin-right: 0px;
}

.selling-point img { 
max-width: 60px; 
}

.selling-points.special img {
max-width: 40px;
}

.selling-point h2 { 
font-size: 18px;
padding-right: 120px;
}

.selling-point p { 
font-size: 14px;
padding-right: 30px;
}

.hire-units { 
background: #FFF;
background: linear-gradient(to left, #462b6b 0%, #352152 75%);
 border-radius: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 max-width: 100%;
 margin: 0 auto;
 padding: 50px;
 margin-top: 60px;
 text-align: left;


}

.hire-left {
 padding-right: 50px;
}


.hire-units strong { 
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
font-weight: normal;
display: block;
margin-top: 30px;
}

.hire-units .hire-units_text { 
max-width: 600px;
text-align: left;
}

.hire-units img { 
max-width: 70px;
margin-right: 50px;
}

.trusted img { 
filter: drop-shadow(2px 0px 5px rgba(0, 0, 0, 0.1));
}

.trusted { 
 background: linear-gradient(to right, #5c5ab9, #673f9e);
background-size: cover;
}

.trusted .flex-me { 
padding-top: 0; 
}

.trusted .flex-me_text-left { 
text-align: left;
}

#copyright {
    display: inline-block;
  font-size: 12px;
}
.events { 
background: url("assets/img/contactless/events-bg.jpg");
background-size: cover;
}

.strava { 
background: url("assets/img/community/strava.jpg");
background-size: cover;
}

.strava .flex-me_text-left { padding-right:80px; } 

.events-list { 
display: flex;
padding:100px 0 50px 0;
}


.strava .flex-me {
padding: 0;
}

.strava p {
color: #FFF;
}

.s-logo {
max-width: 160px;
margin-bottom: 20px;
width:100%;
}
.event { 
width:16.666%;
}

.events p { 
color:#FFF;
max-width: 600px;
margin:0 auto;
}

.event img { 
max-width: 50px;
}

.event h3 {
 background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;

font-size: 14px;
line-height: 20px;
}

.items h3 { 
 background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;

font-size: 16px;
line-height: 20px;
}

.items-flex { 
display: flex;
margin-top:50px;
}

.item { 
width:20%;
  margin-right: 6.666%;
}

.item:last-child { 
margin-right: 0;
}

.logos { 
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;

}

.s700 .purple-but {
  margin-top:50px;
}

.logos img { 
    height: 25px;
    width: auto;
}

.logos img:nth-child(2) { 
margin:0 100px;
}

.card-logos .logos img:nth-child(4) { 
margin:0 100px;
}
.cta-bar { 
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
text-align:left;
}
.cta-bar .inline-ctas{
  margin:0 0 0 50px;
  flex-direction: column;
  text-align:center;
}

.cta-bar h1 {
  max-width: 650px;
}
.inline-ctas a:nth-child(2) {
  margin:0px 0 0 10px;
}
.main.fw-image p {
  margin:0 auto;
}
.cta-bar .inline-ctas a:nth-child(2) {
  margin:10px 0 0 0;
}

.main.fw-image .inline-ctas {
  margin-top: 40px;
}


.cta-bar a {
  width:100%;
}
.cta-bar .inner {
  max-width: fit-content;
}

.pricing h3.white {
color:#FFF;
margin-top:60px;
-webkit-text-fill-color: #FFF;
font-size: 30px;
margin:70px 0 30px;
}
.main .card-logos {
  max-width:300px;
  margin:50px auto 0 auto;
}
.pp-flex {
display: flex;
color:#FFF;
justify-content: center;
align-content: center;
}

.pp img {
max-width: 50px;
    max-width: 100px;
  max-height: 30px;
  display: block;
  margin-bottom: 20px;
}
.pp {
padding:20px;
max-width: 250px;
padding-bottom: 0;
display: flex;
flex-direction: column;
text-align: center;
justify-content: flex-start;
align-items: center;
}
.items p  {
max-width: 600px;
margin:30px auto;
}


.contact.hero .push-left {
  padding:0;
}
.pricing-list h3, .trusted.pricing h1 {
background: linear-gradient(to right, #5c5ab9, #673f9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pricing-list h3 {
  margin-top:10px !important;
}

.contact { 
text-align: center;
background: linear-gradient(to right, #5c5ab9, #673f9e);
padding:120px 0 120px 0;
}

.pricing {
 background: linear-gradient(to right, #5c5ab9, #673f9e);
padding:120px 0 120px 0;
}

.pricing .flex-hero-points {
text-align: center;
justify-content: center;
align-items: center;
margin-top:60px;
}

.pricing.trusted {
background:#FFF;
padding-bottom: 0;
padding-top:120px;

}

.new-social-proof.pricing {
padding:120px 0 120px 0 !important;
background: #f8eedb;
}
.pricing-list h3 {
margin-top:0;
}
light {
font-weight: 600;
font-size: 16px;
display: block;
margin-bottom: 10px;
}
.pricing-list h3 {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 600;
align-items:center;
}

.pricing .flex-hero-points strong {
font-size: 18px;
display: inline-flex;
font-weight: 500;
margin-left:5px;
}
.contact .inner { 
justify-content:unset;
}

.contact-area, .pricing-area { 
display: flex;  
  justify-content: center;
  margin-top:60px;
}

.contact-form h2 {
  font-size: 30px;
  max-width: 100%;
  line-height: 35px;
  margin-bottom: 50px;
  margin-top:0;
}

.pricing-list {
padding:50px;
max-width: 400px;
background: #FFF;
min-width: 400px;
border-radius: 50px;
}

.pricing-list .inline-ctas {
flex-direction: column;
margin-top:20px;
}

.contact-page .push-right {
  max-width: 775px;
  padding: 100px 0 100px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.contact-page .hero-left {
  align-items: center;
}


.contact-form {
  background: linear-gradient(-135deg, #ededfa 20%, #f2f2fa 80%);
  
  width: 100%;
  text-align: center;
  border-radius: 0;
  
}

.contact-details { 
 background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%); 
 padding: 50px;
 width:30%;
 border-radius: 0 50px 50px 0;
}

.contact-area h2, #demo h2, #new h2, #existing h2 { 
 font-size: 30px;
line-height: 35px;

font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500 !important;
font-style: normal;
margin:0;
text-transform: capitalize;
 background: linear-gradient(to right, #5c5ab9, #673f9e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 50px;
}

.contact-form { 

}


#demo, #new, #existing { 
width:800px;
padding:50px;
 background: #f8eedb; 
border-radius: 0px;
display: none;
 position: fixed;
top: 50%  !important;
left: 50% !important;
transform: translate(-50%, -50%)  !important;
margin-left: 0 !important;
z-index: 99999999999999999999 !important;
}

#lean_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
background:rgba(48,40,59,0.5);
  display: none;
}

.modal_close { 
  position: absolute;
  right: 20px;
  top: 20px;
  color: #462b6b;
  font-size: 20px;
  z-index:99;
  cursor: pointer;
} 

.contactless-page.main.fw-image .fw-image_img { 
max-width: 100%;
}



.hide-me {
display: none;
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], textarea, 
#demo input[type="text"], #demo input[type="email"], #demo input[type="tel"], textarea, #demo input[type="datetime-local"],
#existing input[type="text"], #existing input[type="email"], #existing input[type="tel"], textarea, #existing input[type="datetime-local"] ,
#new input[type="text"], #new input[type="email"], #new input[type="tel"], textarea, #new input[type="datetime-local"] { 
 box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.05);
 border:none;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  color:#462b6b;
 padding:15px 25px;
 border-radius: 10px;
 font-size: 16px;
 border:2px solid #FFF;
 width:100%;
 background: #FFF;
  -webkit-appearance: none;
}

#demo input[type="text"]:focus, #demo input[type="email"]:focus, #demo input[type="datetime-local"]:focus, #demo input[type="tel"]:focus, textarea:focus,
#new input[type="text"]:focus, #new input[type="email"]:focus, #new input[type="datetime-local"]:focus, #new input[type="tel"]:focus, textarea:focus,
#existing input[type="text"]:focus, #existing input[type="email"]:focus, #existing input[type="datetime-local"]:focus, #existing input[type="tel"]:focus, textarea:focus,
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, textarea:focus  { 
  outline: none;
  border:2px solid #fec17d ;
}

.contact-form label, #demo label, #new label, #existing label { 
  width:100%;
  display: block;
  margin-bottom: 5px;
  text-transform: capitalize;
  
  font-size: 14px;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
  
}

#datetime { 
  min-height: 55px;
}

input[type="submit"] { 
  background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  color: #FFF;
  text-decoration: none;
   -webkit-appearance: none;
  padding: 18px 25px;
  
  font-size: 15px;
  border-radius: 50px;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
  text-transform: capitalize;
  background-size: 100% 100%;
  border:none;
  width: 100%;
  cursor: pointer;
  margin:0 auto;
  transition: all .3s ease-in-out;
}

 input[type="submit"]:hover { 
  background-size:200% 200%;  
  transition: all .3s ease-in-out;
 }

.contact-form form, #demo form, #existing form, #new form{ 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
}

.frm-row-2 { 
  width:calc(50% - 20px);
  margin-right: 40px;
  text-align: left;
  margin-bottom: 30px;
}

.frm-row-1 { 
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
}

.frm-row-1.submit { 
  text-align: center;
}

.frm-row-2:nth-of-type(2n) {margin-right: 0;}

.contact-area .contact-details { 
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.detail-single { 
  display: flex;
  flex-direction:column;
  text-transform: uppercase;
  color:#FFF;
  
  font-size: 13px;
  align-items: center;
  margin-bottom: 40px;
  justify-content: center;
}

.detail-single:last-child { 
  margin-bottom: 0;
}

.detail-single a { 
  color: #FFF;
  text-decoration: none;
  
  font-size: 16px;
   font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
}

.detail-single img { 
  max-width: 70px;
  margin-bottom: 20px;
}

.detail-single .social a { 
  display: inline-block;
  font-size: 25px;
  margin-right: 10px;    
}

.detail-single .social a i { 
   color:#FFF;
}

/* FOOTER */


footer { 
padding:120px 0;
}

footer .inner { 
 display: flex;
}

.footercont { 
width:25%;
text-align: left;
}

footer h3 { 
margin-bottom: 25px;
font-size: 15px;
color:#FFF;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  text-transform: capitalize;
  font-size: 20px;
  
}

footer ul { 
margin:0;
padding:0;
}

footer  a { 
color:#FFF;
margin:5px 0px;
    
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600 !important;
font-style: normal;
  text-transform: capitalize;
  font-size: 15px;
text-decoration: none;
display: block;
}

footer .social a { 
display: inline-block;
font-size: 25px;
margin-right: 10px;    
}

footer .social a i { 
 background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


footer span { 
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 14px;
text-transform: capitalize;
text-decoration: none;
color: #FFF;
display: block;

}

footer a.detail { 
background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 16px;
text-transform: none;
}

footer a:hover { 
opacity: .5;
}

footer a.detail:first-of-type { 
margin-bottom: 20px;
}


footer .logo-link { 
margin-bottom: 25px;
max-width: 200px;
}

footer ul li {  
      margin:0; 
}

footer p { 
    color: #FFF;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 22px;
  max-width: 500px;
  margin: 20px 0;
  display: block;
}

.pd-bar { 
 background:#352152;
width: 100%;  
display: flex;
align-items: center;
  justify-content: center;
  padding:30px 0;

}

.pd-bar img { 
display: inline-block;
max-width: 30px;
margin-right: 20px;
}
.pd-bar span { 
font-size: 14px; 
color:#FFF; 
display: inline-block;

}

.ios .flex-me_img img { 
  max-width: 100%;
}

.flex-me_img img {
max-width: 650px;
  max-height: 550px;
}
.hero-left .googleetc { 
margin-top:30px;
}

.hero-left .googleetc img, .ios .inline-ctas img { 
max-width: 125px;
}

footer h3 {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.menu-overlay  { 
display: none;
}

.datepickers-container {
z-index: 99999999;
}

.new-social-proof.noheader {
padding:50px 0;
}

.main.card-logos {
  padding:70px 0;
}

.main.card-logos h2 {
  margin-top:0;
}
.new-social-proof { 
 
  
  padding: 70px 0 70px 0;
background:#f8eedb;

}

.new-social-proof.contact-social {
  background:#FFF;
}

.highter img {
  max-height: 700px !important;
}

.new-social-proof.noheader .logos { 
margin-top:0;
}

.new-social-proof .inner {
max-width: 1600px;
}

.new-social-proof .logos img:nth-child(2) { 
margin:0;
}

.new-social-proof .logos img {
margin:0 25px;
min-height: 40px;
}

.new-social-proof .logos {
justify-content: space-between;
margin-top:50px;
}


.flex-me_img {
  width:50%;
  align-self: flex-end;
}

.flex-me_img.center {
  align-self:center;
}

.flex-me_text.full.center {
  padding-bottom: 0;
}
.push-right {
  width:100%;
  max-width:600px;
}

.flex-me_text .push-left {
  width:100%;
  max-width:600px;
}

.flex-me_text.full.flex-me_text-left {
  padding-left: 0px;
  justify-content: flex-end;
  display: flex
;
}

.flex-me_text.full {
  width:50%;
  padding-bottom: 150px;
  max-width: 50%;
  padding-left:175px;
}

.flex-me_text.full.flex-me_text-left {
  padding-left:0px;
}

h3 {
  margin:0 0 10px 0;
  background: linear-gradient(to right, #5c5ab9 0%, #673f9e 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22px;
    font-weight: 500;
}

.text-icon-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap:50px;
}

.text-noicons:not(:last-of-type) {
  margin-bottom: 40px;
}

.text-noicons p {
  margin-bottom: 0;

}

h3 {
  text-transform: capitalize;
}

.purple h3 {
  background: none;
  -webkit-background-clip: none;
    -webkit-text-fill-color: #FFF;
  color:#FFF;
}

.purple p {
  color:#FFF;
}

.purple strong {
  color:#FFF;
}

.new-social-proof h4 {
margin-top:0;
    background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
margin-bottom: 0;
}

div#simpleModal
{
  position:fixed; 
  top: 0; 
  width: 100%;

height:100vh; 
  left: 0; 
  padding: 20px; 
  background: rgba(48,40,59,0.75);
  -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.5); 
  opacity: 0.0; 
z-index: 0;
   display: none;
  justify-content: center;
  align-items: center;
  -webkit-transition-duration: 0.25s;
}

.video-cont {
position: relative;
}

div#simpleModal video {
  min-width: 980px;
  height: 560px;

}

#closeSimple {
    color: #FFF;
  font-size: 30px;
  position: absolute;
right: -30px;
  top: -30px;


}



div#simpleModal.show
{
  opacity: 1.0; 
display: flex;
  z-index: 100;        
  -webkit-transition-duration: 0.25s; 
}


.dd-cont.menu a, .links > a { 
  padding:50px 10px;
}
.removeafter::after { 
display: none !important;
}
.dd-menu { 
      position: absolute;
    background: #FFF;
    left: 0%;
    padding:30px 0;
    width: 100%;
    top: 125px;
   
    
    margin: 0;
    position: absolute;
        box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
  display: none;
}	


.dd-menu .inner {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  height: 100%; /* This makes the inner elements stretch to fill the parent height */
}



.dd-cont.menu a.right-promo, .right-promo {
  background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
background-size:cover;
border-radius: 10px;
height:auto;
padding:30px;
display: flex;
    flex-direction: column;
  text-align: left;
max-width: 250px;
  margin-left: auto !important;
  align-items: flex-start;
background-position: bottom center;
}

a.right-promo .border-white, .right-promo .border-white {
  margin-top:20px;
  line-height: 26px;
}

.dd-cont.menu a.right-promo strong, .right-promo strong {
   font-weight: 500;
font-size: 20px;
text-transform: none; 
line-height: 24px;
margin-top:5px;
}

.dd-cont.menu a.right-promo span {


} 


.dd-menu.visbile {
  display: block;
   transition: width 0.1s ease 0s, left 0.1s ease 0s;
}

.dd-menu .menu-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.dd-menu p{ 
background:none;
      color: #462b6b;
text-transform: none;
    font-size: 13px;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  font-weight: 500;
letter-spacing: 0;
  line-height: 1.2em;
  margin-bottom: 0;
  margin-top: 5px;
  line-height: 20px;
}


.dd-menu a b {
 background: linear-gradient(to right, #5c5ab9, #673f9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
}
.dd-cont .dd-menu a {
  padding:30px;
  align-items: center;
  width: 100%;
  height:100%;
  display: flex;
  font-size: 13px;
     background-color: #f8eedb;
     border-radius: 10px;
  margin: 0 !important;
  text-align: center;
line-height: 14px;
  
}

.dd-menu li { 
  justify-content: flex-start;
  margin: 0;
}




.dd-menu a:hover  b {
    background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a.comm-menu img {		   
  max-width: 10px;
  margin-left:5px;
  height: 10px;
  max-height: 10px;
}

.dd-menu ul {
  margin:0;
  margin-right:30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.dd-cont .dd-menu a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 1.5px;
  left: 50%;
  top: 20px;
  position: absolute;
   background: linear-gradient(to right, #5c5ab9, #673f9e);

  transition: width 0.1s ease 0s, left 0.1s ease 0s;

  width: 0;
}

.dd-cont .dd-menu a:hover::after { 
      width: 100%;
      left: 0;
}


.dd-menu.visbile {
display: flex !important;
}

@media screen and (min-width:1180px) and (max-width: 1540px) {
.hero-left { 
    width:50%;
  }

  nav.main-nav a { 
    margin: 0 15px;
  }

  .hero-right { 
    width:50%;
  }

  .hero-right img { 
    max-width: 100%;
  }

 
}



@media screen and (min-width:1180px) and (max-width: 1400px) {  



  .inner  {
    padding-left:25px;
    padding-right: 25px;
  }
  nav.main-nav a { 
    margin: 0 12px;
    font-size: 16px;
  }

  nav.main-nav { 
    margin-left: 30px;
  }

  .hero-left { 
    width:50%;
  }

  .hero-right { 
    width:50%;
  }

  .hero-right img { 
    max-width: 90%;
  }

  .logo, header.fixed .logo { 
    max-width: 230px;
  }

  h1 { 
    font-size: 42px;
    line-height: 40px;
  }

  
  .flex-me_img { 
    width:50%;
  }


  .flex-me_img img { 
    max-width: 100%;
  }


}

.row-col-ipad .purple-but, .flex-me_text .purple-but {
  margin-top:50px;
}

.nopadp p {
  margin-bottom: 0;
  padding-bottom: 0;
}

@media screen and (min-width:1023px) and (max-width: 1400px) {  

  .push-right {
    width:90%  !important;
  }

  .cta-bar h1 {
    max-width: 400px;
}



  .icon-column-cont {
    text-align: center;
    align-items: center;

  }
  .row-col-ipad {
   display: block  !important;
   text-align: center;
  }

  .row-col-ipad .text-icon-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 50px;
  }
  .dd-menu {
    top:122px;
  }
  .links .login-but {
    width:50px !important;
    height: 50px !important;
  }



  .hero.home .hero-left {
    padding-left:25px;
  }
  .inner {
    padding-right: 25px;
    padding-left:25px;
  }

  .flex-me {
    flex-direction: column;
  }

  
.flex-me_img {
  width: 100%;
  align-self: center;
  order:2;
  margin-top:50px;
}

.flex-me_text.full {
  order: 1;
  max-width: 100%;
  width: 100%;
  padding: 0 20px;
}
.main.no-pad-bot {
  padding-bottom: 0;
}

body {
  font-size: 14px;
}

.text-img-split  h1, .text-img-split  h2 {
  max-width: calc(100% - 40px) !important;
}

.push-right {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  display: grid  ;
      overflow: hidden;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 50px;
}


.flex-me {
  flex-direction: column;
  padding-top: 20px;
}

.text-img-split  h3, .icon-column-cont strong {
  font-size: 18px;
  line-height: 26px !important;
}

.main.features-new-actual-cont {
  display: flex;
  flex-wrap:wrap;
}

.new-hp-feature {
  width:100%;
}

.flex-start .push-left {
  padding-left: 0px;
 
}
.main.features-new-actual-cont .push-left {
  max-width: 800px;
}


.new-hp-feature:nth-child(1n) {
  background: linear-gradient(to right, #5c5ab9, #673f9e) !important;
}
 
.new-hp-feature:nth-child(2n) {
  background: linear-gradient(to right, #673f9e, #5c5ab9) !important;
}


.new-hp-feature {
  padding-right: 0;
  align-items: center;
  justify-content: center !important;
}
.flex-me_text .purple-but {
  margin-top: 10px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
}



nav.main-nav a.demo-but {
  margin-right: 0;
  padding: 12px 25px;
  width: fit-content;
  max-width: fit-content;
  white-space: nowrap;
}


a.comm-menu {
  align-items: center;
    justify-content: center;
    display: inline-flex;

}

.hero.home .hero-left {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  padding: 100px 25px;
}
.logo-container__logo {
  width: calc(100% / 5);
}

.logo-container__logo img {
  max-width: 9rem;
  max-height: 2.5rem;
}


.hero p, p {
  font-size:15px !important;
  line-height: 30px !important;
}

.contactless-page.main.fw-image .fw-image_img {
  margin-top:-50px !important;

}

.text-img-split h1, .text-img-split h2 {
  max-width: calc(60% - 40px) !important;
}




.flex-me_text-left.col-3 a  {
  grid-column: 1 / span 3; /* Span both columns in the last row */
  justify-self: center; /* Center horizontally */
}

.flex-me_text {
  max-width: 800px;
}

.text-img-split .flex-me_text-right {
  padding-left:0;
  text-align:  center !important;
}
.flex-me_img {
  margin-top:70px;
}


.flex-me_text-left.col-3 {
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 50px;
  display: grid;
  padding-right:0;
  text-align: center;
  
}

.text-noicons:not(:last-child) {
  margin-bottom: 0px;
}

.push-right a  {
  grid-column: 1 / span 2; /* Span both columns in the last row */
  justify-self: center; /* Center horizontally */
}


  nav.main-nav a { 
    margin: 0 8px;
    font-size: 16px;
  }

  .non-modal {
    margin-top: 122px;
}


.mob-90.hp-m90 {
  align-self: flex-start !important;
}
  nav.main-nav { 
    margin-left: 30px;
  }

  .hero-left { 
    width:50%;
  }

  .hero-right { 
    width:50%;
  }

  

  .logo, header.fixed .logo { 
    max-width: 170px;
  }

  h1 { 
    font-size: 42px;
    line-height: 46px;
  }

  
  .flex-me_img { 
    width:100%;

  }

  .mob-90 {
    max-width: 90% !important;
    margin-top:70px;
  }


  .flex-me_img img { 
    max-width: 100%;
  }


}


.main.purple, div.purple {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
}


.taptopaybig  {
  background: #f8eedb !important;
}

.contactless-page.main.fw-image .fw-image_img { 
max-width: 100%;
margin-top: -300px;
z-index: 1;;
}

.s700 .flex-me_text.full.flex-me_text-left {
  padding-right:200px;
  max-width: 800px;
  margin-left: auto;

}

.taptopaybig2 .icon-column-cont {
  max-width:800px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap:50px;
  margin-top:70px;
  text-align: center;
  align-items: flex-start;
}

.contactless-page.main.fw-image .fw-image_img.dont-shift {
  margin-top:0;
}
.taptopaybig2 {
  background: #FFF !important;
  padding-bottom: 0;
}
.z-index {

position: relative;
z-index: 3;
}
@media screen and (max-width:1023px) {  



header { 
  display: none;
}


 header.mobile-header { 
      display: block;
       position: absolute;
       width:100%;

       z-index: 10;
    }

header.mobile-header.fixed { 
  position: fixed;
}





header.mobile-header.fixed .mob-header-flex { 
 

}

header.mobile-header.fixed .menu-open { 
  top:25px;
   transition: all .2s ease-in-out;
   width:;
}

header.mobile-header.fixed .menu-open img { 
  width: 25px;
}

.mob-header-flex {    
position: relative;
padding:25px;
text-align: center;
}

.menu-open{ 
  position: absolute;
  right: 25px;
  top:40px;
       transition: all .2s ease-in-out;

}


header.mobile-header .logo img { 
 max-width: 200px;
  margin:0 auto;
}

header.mobile-header .logo a { 

}

header.mobile-header .logo { 
  text-align: center;
  max-width: none;
  margin:0 auto;
}

header.mobile-header .demo-bar { 
  padding:10px 25px;
  font-size: 13px;
}

header.mobile-header .logo img { 
  display: initial;
}

.menu-overlay .social { 
  text-align: left;
  margin-top: 30px;
}

.menu-overlay .social a { 
    display: inline-block;
  font-size: 25px;
  margin-right: 10px;
 }

 .menu-overlay .social a:nth-child(2) {
  margin:0 20px;
 }
 
.menu-overlay .social a { 
   color:#FFF;
}

.menu-overlay { 
  position: fixed;
  z-index: 9999999;
  width:100%;
  right:0;    
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  height: 100%;
  display: none;
  padding:30px 30px;
}

.menu-overlay nav.main-nav { 
   margin-left:0;
   text-align: left;
}

.menu-overlay nav.main-nav a { 
  display: block;
  margin: 0px 0;
  font-size: 15px; 
  display: flex;
  padding: 10px 10px;
justify-content: flex-start;

}

.menu-overlay nav.main-nav a:hover:after { 
  width:0;
  display: none;
}

.menu-overlay nav.main-nav a.login-but { 
  text-align: center;
  justify-content: center;
margin-bottom: 15px;
  margin-top: 30px;
}

.menu-overlay nav.main-nav a.orange-but { 
  text-align: center;
  margin-top: 15px;
  justify-content: center;
}

.page-overlay { 
  background:rgba(48,40,59,0.5);
  height: 100%;
  width: 100%;
  display: none;
  position: absolute;
  z-index: 8; 
}

.menu-close { 
  top:9px;
  right:25px;
      position: absolute;
  z-index: 9999999999;
}

.menu-overlay .links {
  margin-top:70px;
}
a.orange-but, a.border-white, a.border-purple a.white-but { 
  padding-left:15px;
  padding-right:15px;
  font-size: 13px;
}

body { 
      min-width: 0; 
      width:100%;
    }

    .inner { 
      padding:0 25px;
    }

    .overflow { 
      max-width: 100%;
      overflow: hidden;
    }

    h1 { 
      font-size: 24px;
      line-height: 24px;
    }

    h2 { 
      font-size: 16px;
      line-height: 20px;
    }

    .inline-ctas { 
      justify-content:center;
    }

    .hero h2 { 
      margin:10px  auto 10px auto;
     
    }

    .hero { 
      min-height: 0;
      padding:170px 0 0 0;
    }

    .hero p { 
      font-size: 15px;
      line-height: 21px;
      margin:0 auto 20px auto;
    }

    .hero .inner { 
      flex-direction:column;              
    }   

    .hero-left { 
      width: 100%;
      text-align:center;
      margin-top: 0;
    }

    .hero-right { 
      width: 100%;
      text-align: center;
      top: 70px;
      margin-top: -20px;
    }

    .hero-right img { 
      max-width: 80%;
      margin:0 auto;
    }


    .hero.home { 
      background: url("assets/img/home/bg-mob.jpg") no-repeat;
    }



    .hero.contactless { 
      background: url("assets/img/contactless/contactless-mob.jpg") no-repeat;
    }

 .hero.community { 
      background: url("assets/img/community/community-hero-mob.jpg") no-repeat;
    }

    .hero.qr { 
      background: url("assets/img/qr/qrbg-mob.jpg") no-repeat;
    }

    .hero.websites { 
      background: url("assets/img/website/websites-bg-mob.jpg") no-repeat;
    }
.hero.events-ticket { 
      background: url("assets/img/community/events-hero-mob.jpg") no-repeat;
    }

.hero.events .hero-right {
  margin-top:-63px;
}

.hero.stripe { 
      background: url("assets/img/stripe/stripe-bg-mob.jpg") no-repeat;
    }
.hero.stripe { 
      background: url("assets/img/contactless/tapheromob.jpg") no-repeat;
    }



    .flex-me { 
      flex-direction:column;
      padding-top: 50px;
    }

    .flex-me_img img { 
      max-width: 80%;
    }

    .flex-me_text-right, .flex-me_text-left { 
      text-align: center;
      padding-left: 0;
      padding-right: 0;
      margin-top: 20px;
    }

    .flex-me_text-left { 
      padding-bottom: 30px;
    }

.flex-me_text ul {
  text-align: left;
  margin-top: 30px;
}

    .order1 { 
      order:1;
    }

    .order2 { 
      order:2;
    }

    .flex-me_text-right ul { 
      text-align: left;
      max-width: 350px;
      margin: 0 auto;
    }

    ul li { 
      margin-top: 10px;
    }

    /* MAIN */

    .main { 
      padding:60px 0;
    }

    .main .inline-ctas { 
      margin-top: 50px;
    }

    .main.first-band { 
      padding-top: 110px;
    }

    .main.fw-image .fw-image_img { 
      max-width: 100%;
    }

    .square { 
      margin-bottom: 30px;
    }

    .trusted { 
   background: linear-gradient(to right, #5c5ab9, #673f9e);
    background-size:cover;
    }

    .main.fw-image .inline-ctas { 
      margin-top: 30px;
    }

    .selling-points { 
      margin:50px 0 0 0;
    }

    .selling-point { 
         width: 100%;
         margin-right: 0;
         text-align: center;
         display: block;
    }

    .selling-point:nth-child(2n) {
        margin-right: 0;
    }

    

    .selling-point:nth-child(6) {
      margin-right:0px;
      margin-bottom: 0;
    }

    .selling-point:nth-child(5) { 
      margin-bottom: 0;
    }


    .selling-point p { 
      padding-right: 0;
    }

    .selling-point h2 { 
      padding-right: 0;
      font-size: 16px;
    }

    .hire-units { 
      margin-bottom: 60px;
      flex-direction:column;
      text-align: center;
    }

    .hire-units .hire-units_text { 
      text-align: center;
    }

    .hire-units img { 
      margin-right: 0;
      margin-bottom: 30px;
    }

    .events-list { 
      flex-wrap:wrap;
          padding: 50px 0 20px 0;
    }

    .event { 
      width:50%;
      margin-bottom: 20px;
    }




    .items-flex { 
      margin-top:30px;
      flex-direction:row;
      flex-wrap:wrap;
    }

    .item img { 
      max-width: 100%;
    }

    .item { 
       width:calc(50% - 10px);
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .item:nth-child(2n) { 
      margin-right: 0;
    }

    .logos { 
      flex-direction:column;
    }

    .logos img:nth-child(2) { 
      margin:30px 0;
    }

    .card-logos .logos img:nth-child(4) { 
      margin: 30px 0;
    }

    footer { 
      padding:60px 0;
    }

    footer .inner { 
      flex-direction:column;
    }

    .footercont { 
      width:100%;
      margin-bottom: 30px;
      text-align: center;
    } 

    .footercont:last-child { 
      margin-bottom: 0;
    }

    footer ul li {  
      margin:0;
      display: block;
    }

    footer a { 
      margin:2px 0;
    }

    footer p { 
      margin-bottom: 0;
    }

    .contact { 
      padding:180px 0 60px 0;
      text-align: center;
    }

    .contact-area { 
      margin-top: 30px;
      flex-direction:column;
    }

    .contact-form { 
      width:100%;
      border-radius: 30px 30px 0 0;
      padding:50px 30px;
    }

    .frm-row-2 { 
      width:100%;
      margin-right: 0;
    }

    .contact-details { 
      width: 100%;
      padding:50px 30px;
      border-radius: 0 0 30px 30px;
    }

    #demo, #new, #existing { 
    width: 100%;
    top:0 !important;
    transform: none !important;
    left:0 !important;
    border-radius: 0;
    height: 100vh;
    padding: 50px 30px 100px 30px;
    overflow-y:scroll;


   }

.ios .flex-me_text-left { 
  padding-bottom: 0;
}

.new-badge { 
   order: 2;
 position: static;
 margin: 0 0 0 10px;

}

.hero.community .hero-right { 
  margin-top:-70px;
}

.home  .hero-right{
  
    top: 100px;
  margin-top: -70px;
}

.new-social-proof.hp {
  padding: 130px 0 60px 0;
}

.hire-units {
 margin: 30px auto;
 flex-direction: column;
 text-align: center;
}

.hire-left {
   padding-right: 0;
}

.hero.contactless .hero-right {
   margin-top: -70px;
}

.new-social-proof .logos {
  justify-content: space-between;
  margin-top: 50px;
  flex-direction: row;
  flex-wrap: wrap;
}

.new-social-proof .logos img { 
  width: 33.33333%;
     margin: 0 0 25px 0;;
}

.new-social-proof.hp {
  
  padding-bottom: 35px;
}

div#simpleModal video {
  width: 100%;
  height: auto;
  min-width: 0;
}



#closeSimple {
  
  right: 0;
  top: -40px;
}

.new-social-proof .logos img:nth-child(2) {
  margin-bottom: 25px;
}

.selling-points.comm .selling-point {
  width:calc(50% - 20px);
  margin-right: 20px;
}

.selling-points.comm .selling-point:nth-child(2n) {
  margin-right: 0;
}

.selling-points.comm .selling-point:nth-child(4n) {
  margin-right: 0;
}

.selling-points.comm .selling-point h2{
  font-size: 13px;
  line-height: 18px;
  padding:0;
}

.selling-points.comm .selling-point:nth-child(3n)  {
  margin-right: 20px;
  
}

.selling-point a.border-purple {
  padding:12px;
}

.selling-points.comm .selling-point:nth-child(4n), .selling-points.comm .selling-point:nth-child(3n) {
  margin-bottom: 0;
}

.flex-hero-points { 
  justify-content: center;
}


.hero-point {
  flex-direction: column;
  font-size: 14px;
}

.hero-point img { 
  margin:0 0 5px 0;
}

.hero.stripe .hero-right {
  margin-top:-60px;
}

.hero.stripe .hero-right img { 
  max-width: 100%;
}

.hero.stripe  { 
  background-position: right;
}

.main.fw-image .hire-units .inline-ctas { 
  justify-content: center;
}

.hire-units .inline-ctas a.orange-but {
  width:100%;
}

ul.terms {
  width: 100%;
  text-align: left;
}

.readers .hire-right {
  margin-top:30px;
  
}

.readers h2 {
  font-size: 18px;
  margin-bottom: 30px
}

.reader-how.main .inline-ctas {
  justify-content: center;
  
}

.video-section-text.flex-me_text-left {
  max-width: 100%;
  padding:0;
  order:2;
  text-align: center;
}

.video-section.pay video {
  max-width: 80%;
  margin-top: 0;
}

.video-section video {
  margin-top:0;
}

.flex-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-icon-right {
  padding:10px 0 0 0;
}

.strava .flex-me_text-left {
  padding-bottom: 0;
}

.pricing {
      padding: 50px 0 50px 0;
}

.pricing .flex-hero-points {
  margin-top: 30px;
  flex-wrap:wrap;
      align-items: flex-start;f
}
.pricing .flex-hero-points .hero-point {
  width:calc(50% - 8px);
}

.pricing .hero-point:last-child { margin:0 } 
.pricing .hero-point:not(:last-child) {
  margin-right: 15px;
}

.pricing .hero-point:nth-child(2) {
  margin-right: 0;
  marign-bottom:15px;
}

.pricing .hero-point:first-child {
  margin-bottom: 15px;
}



.pricing .flex-hero-points strong {
  font-size: 16px;
}

.pricing-area {
  width: 100%;
  max-width: none;
  display: block;
  margin-top: 40px;
}

.pricing h3.white {
  margin-top:40px;
  font-size: 18px;
}

.pp.feature {
  max-width: 100%;
      padding-left: 0;
  padding-right: 0;
}
.pricing.trusted {
  padding:50px 0 0 0;
}

.pricing .flex-me_text-left { 
margin-top:0;}

.new-social-proof.pricing {
  padding:50px 0 !important;
}

.pricing-list {
  min-width:100%;
}

.logos img {
  height: 27px;
  width: 30%;
}

.logos {
  flex-wrap: wrap;
  flex-direction: row;
}

}


.hero.special { 
background: url("assets/img/special/hero.jpg") no-repeat;
}
.main .inline-ctas.special { margin-top:50px; } 

@media screen and (min-width:1023px) {
.links { 
display: flex;
justify-content: center;
align-items: center;}
}

nav.main-nav a.login-but{
margin-left:auto;
}

.hero.taponphone .hero-left .googleetc img {
min-width: 240px;
}

nav.main-nav a.login-but, nav.main-nav a.register-but {
justify-content: center;
}

.taptopayapple {
background-image: url("assets/img/contactless/taptopay.png");
background-repeat: no-repeat;
background-position: bottom left;
background-size: 50%;
}

.taptopayapple .flex-me_img  {
    min-width: 50%;
}

.taptopayapple .flex-me  {
padding-top:0;
}

.faqs .flex-me {
padding-top:0;
}

@media screen and (max-width:1023px) {

.hero.special .hero-right {
margin-top: -50px;
}

.hero.special { 
background: url("assets/img/special/heromob.jpg") no-repeat;
}

.taptopayapple {
  background-image: url(assets/img/contactless/taptopay.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto 400px;
  padding-bottom: 450px;
}

.hero.taponphone { 
background: url("assets/img/contactless/tappaymob.jpg") no-repeat;
  background-position: center right;
}
}

.dd-menu li:last-child p {
margin-bottom: 0;
}

.menu-right .new-badge {
color:#FFF !important;
    -webkit-background-clip: none;
  -webkit-text-fill-color: #FFF;
position: relative;
top:-2px;
}

.comm-menu {
cursor: default;
}


@media screen and (max-width:1023px) {
  .push-right {
      max-width: 100%;
  }

  .flex-columns {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .mobile-header {
    background: linear-gradient(to right, #5c5ab9, #673f9e);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
        padding: 15px 0;
        position: fixed !important;
        top:0 !important;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);

  }

  header.mobile-header .logo img {
    max-width:180px;  }

    .mob-header-flex {
      padding:0 !important;
    }

    header.mobile-header .logo {
      text-align: center;
      max-width: none;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .menu-open {
    position: absolute;
    right: 25px;
    top: 9px;
    transition: all .2s ease-in-out;
}


header.mobile-header .logo img {
  max-width: 180px;
  display: block;
}

.mobile-header {
  padding:20px 0;
}

.mob-menu-but-img {
  max-width: 25px;
}

.menu-overlay header.mobile-header {
  background: none;
  box-shadow: none;
}

.menu-overlay {
  top:0;
}
.non-modal {
  margin-top: 80px;
}

.hero {
  padding:0;
}
.promo-bar {
  font-size: 13px;
  padding: 7.5px 0;
}

.promo-bar a {
  margin-left:5px;
}

.hero.home { 
  background: linear-gradient(to right, #5c5ab9, #673f9e);
}

.hero.home .hero-left {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  padding: 50px 20px;
}

h1 {
  font-size: 38px;
  line-height: 40px;
}

h2, .new-social-proof h4 {
  font-size: 16px;
  line-height: 22px;
}

a.white-but, a.border-white, div.border-white {
  font-size:14px !important;
  padding:10px 15px !important
  
}

.new-social-proof.hp {
  padding:40px 0 40px 0;
}

.logo-container__logos.animate {
  animation: scroll 15s linear infinite;
}

.logo-container__logo {
  width: calc(100% / 3);
}

.logo-container__logo img {
  max-width: 5rem;
  max-height: 2.5rem;
}

.hero {
  display: flex;
  flex-direction: column;
}

.home .hero-right {
  top: 0;
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  max-width: 100%;
  min-height: 40vh;
}

.grid-item:hover .overlay {
  opacity: 0;
}
#cookie-bar.fixed {
  max-width: 500px !important;
  right: 0 !important;
  left: auto !important;
  border-radius: 0;
  width: 100% !important;
  max-width: 100% !important;
}
#cookie-bar p {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  margin-bottom: 0;
}

.hero p {
  font-size: 14px;
  line-height: 21px;
  margin: 0 auto 20px auto;
} 

.inner {
  padding: 0 20px;
}

.flex-me_img {
  width: 100%;
  align-self: center;
  order:2;
  margin-top:50px;
}

.flex-me_text.full {
  order: 1;
  max-width: 100%;
  width: 100%;
  padding: 0 20px;
}
.main.no-pad-bot {
  padding-bottom: 0;
}

body {
  font-size: 14px;
}

.text-img-split  h1, .text-img-split  h2 {
  max-width: calc(100% - 40px) !important;
}

.flex-me {
  flex-direction: column;
  padding-top: 20px;
}

.text-img-split  h3, .icon-column-cont strong {
  font-size: 18px;
  line-height: 26px !important;
}

.main.features-new-actual-cont {
  grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.new-hp-feature {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  display: flex;
  justify-content: space-between;
  padding-right: 100px;
  flex-direction:  column !important;
  align-items: center;
 width:100%;
  height: auto !important;
  padding-right: 0 !important;
}

.new-hp-feature-left {
  padding:0 !important;
  width: 100%;
  max-width: 100%;
}

.new-hp-feature-left h1 {
  font-size: 30px;
  line-height: 35px;
}
.dd-menu .inner {
  justify-content: center;
}

.main.features-new-actual-cont {
  display: flex;
  flex-wrap:wrap;
}

.main.features-new-actual-cont .push-left {
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start !important;
}

a.white-but, a.border-white, div.border-white {
  display: inline-flex;
}

.addpad .push-right {
  width: calc(90% - 50px) !important;
}

.new-hp-feature img {
  width: 100%;
  align-items: flex-end;
  max-width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 250px;
  width: auto;
}
.main.features-new-actual-cont .push-left {
  flex-direction: column;
}
.new-hp-feature-left {
  padding: 50px 20px !important;
  text-align: center;
  width: 100%;
}

.push-left.flex-center { 
  padding-bottom: 50px;
}

h1.small {
  font-size: 30px;
}

.flex-columns {
  display: flex;
  flex-direction: column;
  text-align: center;
}




.flex-start .push-left {
  max-width: 100%;
  padding-left:0;
}

.new-hp-feature:nth-child(3), .new-hp-feature:nth-child(4) {
  background: unset; 
}


.new-hp-feature:nth-child(1n) {
  background: linear-gradient(to right, #5c5ab9, #673f9e) !important;
}
 
.new-hp-feature:nth-child(2n) {
  background: linear-gradient(to right, #673f9e, #5c5ab9) !important;
}

.icon-column-cont {
  text-align:center;
  align-items: center;
}


.cta-bar .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.cta-bar .inline-ctas {

  margin: 0;
  margin-top:30px;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: fit-content;
}
a.white-but, a.border-white, div.border-white {
  white-space: nowrap;
}

.cta-bar .inline-ctas a:nth-child(2) {
  margin:0 0 0 10px;
}

.contactless-page.main.fw-image .fw-image_img {
  margin-top:0;
}

.icon-column-cont {
  justify-content: flex-start;
}

footer a {
  margin: 5px 0;
  font-size: 14px;
}


.main.card-logos {
  padding: 40px 0;
}

.logos img {
  width: 25%;
  padding: 0 10px;
  height: auto;
}

.logos {
  margin-top: 30px;
}

.logos img:nth-child(2), .card-logos .logos img:nth-child(4) {
  margin:0;
}

.menu-overlay nav.main-nav a {
  padding:5px 0;
}
.new-badge {
  padding:0 8px;
  border-radius:20px;
}
.menu-overlay nav.main-nav a.orange-but {
  padding: 12px 25px;
}

.menu-overlay nav.main-nav a {
  justify-content: center;
}
.menu-overlay nav.main-nav a.login-but {
  margin-left:0;
   margin-bottom: 0;
   width:100%;
}

.menu-overlay nav.main-nav a.register-but { 
  margin-left:0;
  margin-bottom: 0;
  width:100%;
}

  .inline-ctas {
    align-items: center;
    justify-content: center;
    width: 100%;
}

.menu-overlay nav.main-nav a.login-but {
  margin-left: 0;
  margin-top: 0;
  margin-right: 10px;
}

.menu-overlay .white-but {
  margin-top:20px !important;
}

.menu-overlay .inline-ctas {
  margin-top: 50px;
}

.new-hp-feature-left p {
  margin-bottom: 20px;
}

.mob-90 {
  max-width: 90%;
  align-self: flex-start;
}

.hero .push-left {
  padding-right: 0;
  width:100%;
}

.inner .flex-me_img img {
  max-width: 100%;
  max-height: unset;
}
.inner .flex-me_img {
  width: 90%;
}

.shift-right-dt {
  margin-right: -70px !important;
}

section {
  overflow: hidden;
}

.text-img-split .flex-me_text-right {
  padding:0;
  text-align:center;
}

.inner .flex-me_img {
  margin:20px 0 30px 0;
}

.no-pad-bot .inner .flex-me_img {
  margin: 50px 0 0px 0;
}
.order1{ 
  order:1 !important;
}

footer .logo-link {
  max-width: 180px;
}



.s700 .flex-me_text.full.flex-me_text-left {
  max-width: 100%;
  padding:0 25px;
}

.shift-left-dt {
  margin-left: -70px !important;
}
.push-right {
  width:calc(90% - 50px);
  margin-left:auto;
  margin-right: auto;
}

.flex-me_text .push-right {
  width: 100%;
}

.row-col-ipad .purple-but {
  margin-top: 50px;
  margin-bottom: 00px;
}

.logos img {
  width:16%;
}

.nopadp p {
  margin-bottom: 0 !important;
}

.hero-right.silent-auction , .hero-right.community, .hero-right.card {
  min-height: 40vh;
}

.contactless-page.main.fw-image .fw-image_img.dont-shift {
  margin-top: 50px;
}

.taptopaybig2 .icon-column-cont {
  margin-top:50px;
}

.donotmove .logo-container__logo {
  width: calc(100% / 3);
}

.donotmove .logo-container__logo:nth-last-child(-n+3) {
  margin-toP:20px;
}

.donotmove  {
  flex-wrap:wrap;
}

}



.login-but svg, .login-but path {
  fill: #FFF ! Important;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.links .login-but { 
  
  width:54px; 
  height:54px;  
  display:flex; 
  justify-content:center; 
  align-items:center; 
  padding:0 !important; }

  .links .login-but:hover path {
    fill:#462b6b !important;
  }

  @media screen and (min-width:1400px) {

  .inner, .header-main .inner {
    padding-left:25px;
    padding-right: 25px;
  }

  .hero .push-left {
    padding-left:25px;
  }

  .new-hp-feature:nth-of-type(1) .push-left,
  .new-hp-feature:nth-of-type(3) .push-left,
  .new-hp-feature:nth-of-type(5) .push-left {
    padding-left:25px;
  }
}


.giftaidlogo {
  width: 150px !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-bottom: 15px;
  margin-top:15px;
}




.stravalogo {
  width: 100px !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-bottom: 15px;
  margin-top:15px;
}

.noh2 h1 {
  margin-bottom: 20px;
}



@media screen and (max-width:1023px) {
  .flex-me_text.full.flex-me_text-left{
    padding-left:20px;
  }
}

.quote {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
  padding: 30px;

  max-width: 800px;
  margin:0 auto 30px auto;
}

.content strong {
  display: block;
  margin-top:20px;
}

.quotelogo {
  max-width: 100px;
}

.item img {
  max-width: 100%;
}

.main.white p {

    max-width: 600px;
    margin: 1em auto;

}

.main.white a {
  text-decoration: underline;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.pad-me-bot {
  padding-bottom: 120px;
}

.tap-page .card-logos {
  margin-bottom: 50px;
}


.new-hp-feature {
  position: relative;
}



@media screen and (min-width:1023px) {
  .flex-right-img {
    position: absolute;
    max-width: 550px !important;
    right: -70px !important;
    left: auto;
  }

  .pad-image {
    padding:50px 25px;
    max-width: 250px;
  }
}

.new-hp-feature-left .inline-ctas {
  margin-top:50px;
}

.googleetc img {
  max-width: 120px;
  width: 100%;
}

.googleetc {
  justify-content: flex-start !important;
}

@media screen and (max-width:1023px) {
  .pad-me-bot {
    padding-bottom: 0;
  }

  .new-hp-feature-left .inline-ctas {
    justify-content: center !important;
  }

  .hero-left.contact-hero {
    min-height: 0;
  }

  .contact-page .push-right {
    padding: 50px 20px;
    max-width: 100%;
    margin: 0;
    width: 100%;
}

.contact-form {
  border-radius: 0;
  padding:0;
}
.contact-page .text-icon-container {
  padding:50px 0;
}
.contact-form h2 {
  font-size: 18px;
  margin-top:0;
  line-height: 26px !important;
  margin-bottom: 20px;
}
}

.contact-page .her-right.purple h1 {
  text-align: left;
}

.orange.main, div.orange {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%) !important;
  
}

.orange.main  h2 {
  -webkit-text-fill-color:white;
}

.orange p {
  color:#FFF;
}

.contact-page .icon-column-cont a{
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
  text-transform: none;
  font-weight: 600 !important;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  text-align:center;
}

.grid-3 .icon-column-cont p {
  text-align:center;
  margin:0 auto;
  max-width: 70%;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 100px auto 0 auto ;
  
}
.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
    top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}
.timeline-event {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  z-index: 2;
  position: relative;
}
.timeline-event:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-event .icon {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.timeline-event:nth-child(even) .icon {
  left: auto;
  right: 50%;
  transform: translateX(50%);

  
}

.timeline-event:nth-child(odd) .content {
  text-align: left;
}
.timeline-event .content {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  padding: 20px;
  width: 45%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline-event h3 {
  -webkit-text-fill-color: #FFF;
}
.timeline-event:nth-child(even) .content {
  text-align: right;
}
.timeline-event img {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}

.quote.orange {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  color: #fff;
}

.quote.purple strong{
  margin-top:20px;
  display: block;
}

.flex-me_text.full.about-full {
  padding-bottom: 100px;
}

.blacky {
  background:#161517;
  color:#FFF;
}

@media screen and (max-width:1023px) {
  .grid-3 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
  }

  .mission{
    padding:0 25px !important;
  }

  .flex-me_text.full.about-full {
    padding-bottom: 0;
  }

  .blacky .flex-me_img.full img {
    order:1 !important;
  }

  .blacky .flex-me_text.full.about-full { 
    order:2 !important;
  }

  .blacky .flex-me_img {
    margin-top:0;
  }

  .timeline-event h3 {
    font-size: 18px;
  }
}

.mission h3 {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none;
}

.taptopaybig3 {
  background:#161517 !important;
  padding-top:60px;
}

.contactless-page.main.fw-image .fw-image_img.shift-less {
  margin-top:-200px;
}

.app .white-but span {
  -webkit-text-fill-color:#161517 !important;
}

.blacky h3 {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blacky .new-hp-feature {
  background:none !important;
}

.padtopless {
  padding-top:0px;
}

.blacky2 .white-but span {
  -webkit-text-fill-color:#161517 !important;

}

.blacky2 .white-but  {
  background:#FFF !important;
  color:#161517 !important;
  -webkit-text-fill-color:#161517 !important;
  text-decoration: none !important;
}

.blacky2 .white-but:hover  {
  background:#161517 !important;
  color:#FFF !important;
  -webkit-text-fill-color:#FFF !important;
  text-decoration: none !important;
}

.blacky2 .white-but:hover  span, .app .white-but:hover span {
  -webkit-text-fill-color:#FFF !important;

}

.blacky2 .new-hp-feature {
  background: #000 !important;
  border: 1px solid #161517 !important;
}

.card-logos-3 {
  max-width: 300px !important;
  width: 300px;
}

@media screen and (max-width:1023px) {
  .app.hero .hero-left {
    background: #161517;
  }

  .hero-left .googleetc {
    justify-content: center !important;
  }

  .app.hero .hero-right img {
    max-width: 100% !important;
  }

  .contactless-page.main.fw-image .fw-image_img.shift-less {
    margin-top: 0;
    max-width: 150%;
    margin-left:-25%;
}

.iphoneapp  {
  min-height: 0 !important;
}
.blacky2 .flex-me_img{
  order: 1 !important;
}

.blacky2 .flex-me_text-right {
  margin-top:50px;
}

.blacky2 .new-hp-feature {
  background:#161517 !important;
  border:#161517 !important;
}

.blacky.new-features  {
  padding-bottom: 0;
}

.giftaidlogo {
  margin:20px auto 0 auto !important;
}
}

.orange h2 {
  -webkit-text-fill-color:#FFF !important;

}

.fundraising .inline-ctas {
  justify-content: flex-start;
  margin-top:70px !important;
}

.fundraising.main.fw-image .icon-column-cont p {
  margin:0;
}

@media screen and (max-width:1023px) {
  .fundraising .flex-me_text .push-right {
    padding-left:20px;
    padding-right: 20px;
  }

  .fundraising .inline-ctas {
    justify-content: center;
    margin-top: 50px !important;
}

.fundraising.main.fw-image p {
  padding-left:20px;
  padding-right: 20px;
}

.fundraising.blacky .flex-me_img.full img {
  margin-top:50px;
}

.text-img-split .flex-me_text-right.hptext {
  padding-left:20px;
  padding-right: 20px;
}

.flex-me_text-left h1, .flex-me_text-left h2, .flex-me_text-left  { 
  text-align: center;

}

.trusted {
  padding-bottom: 0;
}
}

/* Wrapper style for orange text to block the parent's gradient */
.orange-wrapper {
  position: relative;
  display: inline-block;
}

.orange-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8eedb ;
  z-index: 0;
  border-radius: 5px; /* Optional: Adjust for rounded edges */
}

.orange-text {
  position: relative;
  z-index: 3;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
}


@media screen and (max-width:1024px) {
  .dd-menu {
    position: static;
    background:none;
    box-shadow: none;
  }

  nav.main-nav a:hover:after, nav.main-nav a.active:after, a.comm-menu.active:after {
    display: none;
  }

  .dd-menu ul {
    margin: 0;
    padding: 0; /* Add this if needed */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
    grid-template-rows: auto; /* Rows adjust to content */
    gap: 10px; /* Spacing between items */
    box-sizing: border-box; /* Ensures consistent sizing */
}
.dd-menu .inner {
  padding:0;
}

.dd-menu p {
  display: none;
}

.icon-overlay-cont {
  display: flex;
  position: relative;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-bottom: 15px;
  align-items: center;

}

.dd-menu .icon-overlay-cont {
  margin-right: 10px;
}

.overlay-icon {
  width: 40px;
  height: 40px;
  padding:1px;
}
.icon-overlay-cont img {
  width: 20px;
  height: 20px;
}

.dd-cont .dd-menu a {
  justify-content: flex-start !important;
  padding:10px !important;
}
.dd-menu a b {
  font-size: 14px;
}

.new-badge {
  position: absolute;
  border-radius: 0 10px 0 10px;
}

.menu-overlay nav.main-nav a {
  font-size: 16px;
}

a.right-promo .border-white, .right-promo .border-white {
  margin-top:15px;
}

.menu-overlay .right-promo {
  justify-content: center;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: unset;
  padding: 20px !important;
  margin-top:20px !important;
}

.comm-menu img.active {
  transform: rotate(180deg);
}

.menu-overlay nav.main-nav a {
  font-size: 16px;
  padding:6px 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.open-body {
  height: 100vh;
  overflow: hidden;
  
}
.menu-overlay {
  top: 0;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 140px;
}
.menu-overlay header.mobile-header {
  background: linear-gradient(to right, #5c5ab9, #673f9e);
  
}
}

.android .googleetc { 
  margin-top:30px;  
} 

h1.push-down, .main h1.push-down, .push-down {
  margin-bottom:0.8rem;
}

@media screen and (max-width:1023px) {
  .links .login-but,  .links .register-but  {
    height:50px;
    font-size: 14px !important;
  }
}



/* PLANS */
.pricing-table img {
max-width:20px;
max-height:20px;
}

.plan-price {
min-height:80px;
max-height:80px;
display:flex;
padding:0 !important;
align-items:center;

justify-content:center;
}

.plan-price.price-header.plan-header {
font-size:20px;
font-weight:500;
padding-left:0.8rem !important;
justify-content:flex-start;
background:none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-top:0;
}
.pricing-table {
  max-width: fit-content;
  text-align: center;
  width: 100%;
  margin: 0em auto 0 auto;
}

.plan-price {
  font-weight: 500;
  font-size:30px;
  
}

.plan-price i {
  font-style: normal;
  margin-left:0px;
  font-size:14px;
}

.pricing-grid {
  display: grid;
margin:0 auto;
grid-template-columns: repeat(3, 1fr); 
font-size:0.9em;
gap: 1em; /* space between columns */
max-width:fit-content;
}

.plan-header.empty {
background:none;
} 



.plan.popular .plan-header {
border-radius: 10px 10px 0 0 !important;
}


.plan.popular {
position:relative;
} 

.pricing-table {
  max-width: 80%;
}

.plan-features {
  max-width: 80%;
  margin: 0 auto;
}


.plan.popular .most-popular {
  position: absolute;
  left: 0;
text-transform:none !Important;
  top: -46px;
font-weight:600;
  width: 100%;
  background: #FFF;
 
  font-size: 0.9em;
  border-radius:10px 10px 0 0;
  padding:0.8em;

}

.most-popular span {
  -webkit-text-fill-color: transparent;
    background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
    -webkit-background-clip: text;
}

.features-column {
 margin-right:0em;
  text-align: left;
  font-weight: 400;

}




.plan.popular .feature, .plan.flexi {
}

.features-column .feature {
}
.pricing-table .feature {
  padding: 0 0 0 0.8rem;
display:flex;
justify-content:flex-start;
align-items:center;
min-height:50px;
color:#FFF;
font-size: 15px;
max-height:50px;
}


.plan {
  background-color: #062163;
  text-align: center;
  border-radius: 0px;
}

.plan-header {
  border-radius: 0;
  font-weight: 600;
font-size:18px;

  padding: 1rem;
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.plan-item.description-plan {
  min-height:100px;
}

.plan-price {
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#FFF;
}




.tiers-integrations {
padding-bottom:30;
}

.plan-buttons {
display:none;

}

@media screen and (max-width:1023px) {
.plan-buttons {
 border-radius: 0px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      width: 100% !important;
} 


  .plan-toggle { 
  background: none;
  border: 2px solid #FFF;
  color: #FFF;
      padding: 0.9em 2em;
  font-weight: 600;
    width: 100%;
   
  font-style: normal;
  font-size: 0.95em;
  line-height: 1em;
  text-decoration: none;
  display: inline-flex;
  min-height: 3em;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
} 

.pricing-grid {
        
  border-radius: 10px;
  display: grid;
  font-size: .9em;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
  max-width: 100%;
    margin-top: 2em;
}

.features-column {
  margin:0;
} 

.plan.popular {
  margin:0;
} 
.feature {
  padding-left:0;
} 

.plan {
  min-width:100%;
}

.plan-toggle.active {
  
  background:#FFF;
color:#5c5ab9;
}

.plan.popular .most-popular {
  top:-30px;
}

.plan.popular {
  margin:0 1rem !important;
}

.plan-price.price-header {
  font-size:22px;
  font-weight: 500;
} 
.plan-price {
   min-height:70px;
  max-height:70px;
} 
.plan-header {
  font-size:18px;
  min-height:60px;
  max-height:60px;
} 
}

.plan.plus {
  background: linear-gradient(to left, #5c5ab9, #673f9e);
  color:#FFF;
}

.plan.plus .plan-header {
  background: linear-gradient(to left, #5c5ab9, #673f9e);

}

.plan.flexi, .plan.flexi .plan-header {
  background: linear-gradient(to right, #462b6b 0%, #352152 75%);
  color:#FFF;
  border-radius:10px;
}

.plan.silent, .plan.silent .plan-header {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  
  color:#FFF;
  border-radius: 10px;
}

.plan.flexi .plan-price {
  font-size: 22px;
}

.plan .plan-fee {
  font-size: 15px;
    line-height: 18px;
    margin-top:1em;
}
.plan-price {
  flex-direction: column;
  max-height: unset;
  padding: 0.5em !important;
  min-height: 160px;
}

.plan-features li {
  line-height: 20px;
}
  
.annual-switch {
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  border-radius: 10px;
  margin: 0 2rem 2rem 2rem;
  padding: 1rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.switch.active b {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
  -webkit-background-clip: text;
}

.annual-switch strong {
    color: #FFF;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}

  .switcher {
    margin-left:0rem;
    margin-top:0.5rem;
  }

  .switch { 
    padding:0.25em 1em;
    font-weight: 500;
    font-weight: 600 !important;  
    border:2px solid #FFF;
    background:none;
    color:#FFF;
    cursor: pointer;
    font-size:13px !important;
  }

  .switch.active {
    background:#FFF;
    border:2px solid #FFF;
  }

  .switch:first-of-type {
    border-radius:50px 0 0 50px;
  }

  .switch:last-of-type {
    border-radius:0 50px 50px 0;
  }

  .plan-item:last-of-type {
    border-bottom: 0;
  }

  .price-header.annual {
    display: none;
  }

  .pricing-table .feature {
    background: #462b6b78;
  }
 

  

  

  @media screen and (max-width:1023px) {
    .pricing-table {
      max-width: fit-content;
      text-align: center;
      width: 100%;
      margin: 0 auto;
      min-width: 100%;
  }

  .annual-switch {
    padding:1em;
    width:calc(100% - 3rem);
    max-width: 100%;
    margin: 0 1.5rem 1.5rem 1.5rem;
        justify-content: space-between;
  }

  .plan-price i {
    margin-top:10px;}
  .plan-price.price-header {
    font-size:30px;
  }
  .plan-item.description-plan {
    padding-top:1em !important;
  }
  

  .plan-features {
    max-width:80%;
    margin:0 auto;  }
  .switcher {
    margin-left:20px;
  }

  .annual-switch strong{
    font-size:16px;
  }

  .plan-toggle:first-of-type{
  border-radius:50px 0 0 50px;
   border-right:0;
  }

  .plan-toggle:last-of-type{
    border-radius:0 50px 50px 0px;
     border-left:0;
    }

    
    
.pricing-area {
  margin-top:1rem;
}

.plan.popular {
  margin:0 !important;
}

.pricing-grid {
  grid-template-columns: 100%;
}


  }


  .plan-item.description-plan {
    min-height: 100px;
    padding: 1em 2em;
    padding-top: 0;
} 

.plan-item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: none;
  
  font-weight: 500;
  font-size: 15px;
  max-width: fit-content;
  line-height: 1.5em;
  padding:0.5em 3em;
  align-self: center;
  justify-self: center;
}


.plan-item img {
  margin-right:10px;
}

.plan-item.description-plan {
  text-align: center;
}

.plan-item span{
  text-align:left;
}


.plan-item.title-plan {
  margin:0 auto;}

  .plan.popular {
    border-radius:0 0 10px 10px;
  }

  .plan {
    padding-bottom:2rem;
  }


  .plan-item span {
    text-align: left;
   
}

.plan-price {
  flex-direction: column;
  max-height: unset;
  padding: 0.5em !important;
  min-height: 110px;
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
}

.plan-header {
  font-weight: 600;
  font-size: 18px;
  padding: 1rem;
    display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0 !important;
  min-height: unset;
  padding-top: 2rem;
}

.plan-item {
 width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: center;
  padding-right: 0 !important;  /* ✅ Remove any default right padding */
  gap: 0.5em; /* optional: sets spacing between icon and text neatly */
}

.plan-item.title-plan, .plan-item.description-plan {
  text-align: center !important;
  padding-right: 2em !important;
  justify-content: center !important;
}

.plan-features {
  padding: 0 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.plan-features {
  text-align: left;
}

.plan-features li img {
  margin-right:10px;
}

.title-plan {
    width: 100%;
    align-self: center;
    justify-content: center;
    margin-bottom: 2rem !important;
}


.switcher {
  margin-left: 0rem;
  margin-top: 0.5rem;
  display: inline-flex
;
}


.title-plan span {
  font-weight: 600 !important;
  text-align: center;
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

.plan.plus {
  border-radius: 10px;
}

.annual-benefit {
  display: none;
}

.addon {
  background:none;
  border:2px solid #FFF;
  color:#FFF;
    margin: 2rem 2rem 0 2rem;
    border-radius: 10px;
    line-height: 1.4em;
    font-weight: 600;
    padding:1rem 0.5rem;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  }



.plan-features li:not(:last-child) {
  margin-bottom: 1em;
}

.plan-features {
  margin-top:0rem;
  margin-bottom: 2rem;
}

.plan a.white-but {
  display: inline-flex;
  width:calc(100% - 4rem);
  margin: 0 2rem 2rem 2rem;
  justify-content: center;
}

.plan {
  display: flex;
  flex-direction: column;
}

.addon {
  margin-top:auto;
}

@media screen and (max-width:1300px) {
  .pricing-table {
    width:100%;
    max-width: 100%;
  }
}



.tabs__panel .flex-me .flex-me_img::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.flex-me_img {
  position: relative;
}
.tabs__section {
	padding-bottom: 0;
	background:#000;
}

.tabs__section .tabs__panel h1 {
	
    font-size: 40px;
    line-height: 45px;

}
.tabs__nav li {
	margin:0;
}
.tabs__section .container { 
	padding-bottom:120px;
}

.tabs__section .tabs__panel .container {
	padding-bottom: 0;
}


  .tabs__nav-button {
    border: none;
    padding: 1.25em 2em;
	    cursor: pointer;
	color:#FFF;
    font-weight: bold;
  }


  .tabs__panel {
    display: none;
  }
  .tabs__panel.is-active {
    display: block;
  }

  .tabs__panels {
    position: relative;
   
}


  .tabs__nav-button img { 
    max-width:35px; 
    margin-right: 1em;
	max-height: 28px;
} 
.tabs__nav-button { 
    display:flex; 
    justify-content: center; 
    align-items: center; 
	position: relative;
} 

.tabs__nav {
    display: flex;
    justify-content: stretch;
    gap: 0;
    margin-bottom: 0;
    background:#000000 !important;
    padding:0;
    margin-top:0;
	border-top:2px solid #161517;
}

.tabs__nav  li {
    width:100%;
    list-style:none;
}
.tabs__nav-button.is-active {
    background:#161517 !important; 
	color:#FFF;
	position: relative;
}


.tabs__nav-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #161517; 
}


.tabs__nav-button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #fec17d 0%, #ff8f91 75%);
}

.tabs__nav-button { 
    background:#000000 !important;
	font-size: 16px;
    font-weight: 600 !important;

}

.tabs__nav-button span { 
	font-weight: 600 !important;
	font-size:16px !important;
}

.tabs__panel img  { 
	padding-top: 60px;
    object-fit:cover; 
}

.tabs__panels {
   
    display: flex;
        flex-direction: column;
        justify-content: center;
}

.tabs__panel .flex-me { 
	padding:0;
}

.tabs__panel .flex-me_text { 
	padding-top: 100px;
    padding-bottom: 100px;
    text-align: left;
}
.section--tabs > .container > h2 {
    text-align: center;
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10rem !important;
}

.tabs__nav-button {
    width:100%;
    padding:1em 2em;
}


.tabs__panel .section__inner-content {
	max-width:60rem;
}
.tabs__title {
    font-size: 3em;
    line-height: 1em;
}
.main {
	overflow: hidden;
}
@media screen and (max-width:1023px) {


		.tabs__section .container {
			padding:0 20px 60px 20px;
		}

		.tabs__section .tabs__panel h1 {
			margin-left:auto;
			margin-right: auto;
			text-align:center;
		}

		.tabs__section .text-noicons p { 
			margin-left:auto;
			margin-right: auto;
			text-align:center;
		}
		
		.tabs__nav-button span {
			display: none;
		}

		.tabs__nav-button {
			padding:1em;
		}

		.tabs__section .addpad .push-right {
			max-width: 100%;
			width:100% !important;
		}

		.tabs__nav-button img {
			margin-right: 0;
		}

		.tabs__panel .flex-me_text .push-right {
			margin:0;
			width:100%;
		}

		.tabs__section.blacky .flex-me_img img, .tabs__section.blacky .flex-me_img{
			max-width:calc(100% + 60px);
			margin-left:-20px;
		}

		.tabs__panel .flex-me .flex-me_img::after {
			right:-40px;
		}

		.tabs__panel .flex-me_text {
    padding-top: 60px;
    padding-bottom: 0;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

}


@media screen and (min-width: 1023px) and (max-width: 1400px) {
    .tabs__section .flex-me_img img  {
		margin-top:0;
		max-width: 100%;
		padding-top:0;
	}

	.tabs__panel .push-right {
		text-align:left;
	}

	.tabs__section  .flex-me {
		flex-direction: row !important;;
	}

	.tabs__nav-button span {
		display: none;
	}

	.tabs__nav-button img {
		margin-right: 0;
		order:1 !important;
	}

	.tabs__panel .flex-me_text {
		order:2 !important;
	}

	.tabs__section .flex-me_img {
		margin-top:0;
	}
	.tabs__panel .push-right {
        width: 100% !important;
        display: flex;
    }


	.tabs__panel .flex-me_text {

		padding:80px 0;
	}

}

.cover-fees .flex-me_img.full img {
  max-width:600px;
}

.cover-fees .flex-me_img {
  width: 50%;
  align-self: flex-end;
  text-align: right;
  display: flex;  justify-content: flex-end;
}

.cover-fees .push-right {
  max-width:100%;
}

.cover-fees h1, .cover-fees h2 {
  margin-left:0;
}



.cover-fees {
  padding-top:0;
}

.cover-fees  .flex-me_text .purple-but {
  margin-top:20px;
}

.cover-fees .flex-me_text.full.flex-me_text-left {
  padding-bottom: 100px;
}

.cover-fees .flex-me_text .push-left {
  max-width: 750px;
}

.cover-fees .flex-me_text.full.flex-me_text-left {
  padding-right:25px;
}

.inline-new-badge {
  text-align: center;
  background: linear-gradient(to right, #fec17d 0%,#ff8f91 75%);
  color: #FFF;
  text-decoration: none;
  max-width: fit-content;
  padding: 5px 15px;
  border-radius: 100px;
  font-size: 12px;
  font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
  margin: auto;
  font-weight: 700; 
  margin-bottom: 20px;
  display:inline-flex;
}

.cover-fees h2 {
  margin-bottom: 0;
}

@media screen and (max-width:1023px) {
  .cover-fees h1, .cover-fees h2 {
    margin-left:auto;
  }

  .cover-fees .flex-me_img.full img {
    max-width: 80%;
    width: 100%;
}
.cover-fees .flex-me_img {
  width:100%;
  margin-top:0;
}
.cover-fees .flex-me_text.full.flex-me_text-left {
  padding-bottom:60px;
}
}