@import url("https://use.typekit.net/wee3fqx.css");

 :root{
    --blue-dark:#102336;
    --blue-mid:#3C89F7;
    --blue-light:#B0D1FC;
    --blue-lightest:#eff6fe;
    --teal:#96F5C2;
     --gradient-blue-white:linear-gradient(0deg, #3C89F7 0%, #B0D1FC 25%, rgba(176, 209, 252, 0.20) 75%);
    --gradient-blue-teal:linear-gradient(0deg, var(--blue-mid) 0%, var(--teal) 100%);
    --gradient-dark-blue:linear-gradient(90deg, var(--blue-dark) 0%, var(--blue-mid) 100% );
    --gradient-blue-light-white:linear-gradient(90deg, var(--blue-light) 0%, #fff 100% );
 }



html, body { width:100%;padding:0;margin:0;text-align:center;font-size:100%; }

* { box-sizing:border-box; }
body { font-family: "halyard-text", sans-serif;
font-weight: 400;
font-style: normal;padding:1rem; }

h1,h2,h3,h4,h5,h6 { font-family: "halyard-display", sans-serif;
font-weight: 400;
font-style: normal; }

h1 { font-size:4rem; }
h2 { font-size:3rem;margin-bottom:1.5rem; }
h3 { font-size:2rem;}
h4 { font-size:1.8rem; }
p, ul, ol { font-size:1rem;line-height:150%; }
ul,ol { padding:0;text-align: center;list-style:none;padding:0; }
.container li { border-top:1px solid #DEDEDE;padding:0.5rem;  }
.container li:last-child { border-bottom:1px solid #DEDEDE; }

.container { width:100%;max-width:1728px;margin:0 auto;padding:2rem 0; }
body .container:first-of-type { margin-top:-3rem;}
.container-inner { width:100%;max-width:872px;margin:0 auto; }
.container-small { width:100%;max-width:1320px;margin:0 auto; }
.box { width:100%;border-radius:3rem;padding:4rem 1rem;position:relative; }

.bg-gradient-blue-white { background:var(--gradient-blue-white); }
.bg-gradient-light-blue-white { background:var(--gradient-blue-light-white); }
.bg-teal-blue { background:linear-gradient(90deg, var(--teal) 0%, var(--blue-mid) 100%); }

.text-left { text-align:left; }




.hero-box { margin-bottom:-28rem;border-top-left-radius:0;border-top-right-radius:0;padding-top:14rem;padding-bottom:30rem; }
.hero-image { position:relative;margin:0rem auto 0rem;max-width:1320px;  }
.hero-image .background { border-radius:2rem;width:100%;  }
.hero-image :is(.cardreader, .cardhand) { position:absolute;top:0;left:0;width:100%;height:100%;object-fit: contain;object-position:center; }
.hero-image .cardreader { height:calc(100% + 4rem);top:-2rem; }
.hero-image .cardhand { object-position:left center;top:-4rem;height:100%; }
.hero-backgrounds { border-radius:3rem;overflow:hidden; }


.corner { position:absolute; }
.corner.top-right { right:1rem;top:1rem; }
.corner.top-left { left:1rem;top:1rem;transform:rotate(180deg);  }
.corner.bottom-right { bottom:1rem;right:1rem; }
.corner.bottom-left { bottom:1rem;left:1rem;transform:rotate(180deg); }


/* .logos .slick-slide { display:flex;flex-wrap:wrap;align-items:center;gap:1rem;row-gap:2rem; } */
/* .logos > div { flex:1 1 120px; } */

.logos .slick-track { display:flex;align-items:center; }



/* .icon-circles { display:flex;flex-wrap:nowrap;align-items: flex-start;justify-content: space-evenly;gap:2rem;margin:4rem 0 2rem;align-items: stretch; } */
.icon-circles { margin-top:3rem;}
.icon-circles .slick-track { display:flex; }
.icon-circles .slick-slide { padding:0 1rem;height:auto; }
.icon-slide{ background:#fff;border-radius:2rem;color:var(--blue-dark);padding:2rem 1rem;flex:0 1 424px;height:100%; }
.icon { border-radius:100%;background:var(--gradient-blue-teal);aspect-ratio:1/1;width:100px;height:100px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem; }
.icon svg { width:3rem;height:3rem;object-fit: contain;object-position: center center; }
.icon-circles span { font-size:1.5rem;display:block;width:100%;text-align:center; }
.icon-circles span.tick, span.tick  { background:var(--gradient-blue-teal);border-radius:100%;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; }


.three-columns { display:grid;grid-template-columns:424px 300px 424px;text-align:left;justify-content:space-evenly; }
.large-icon { width:300px;height:300px;border-radius:100%;display:inline-flex;align-items:center;justify-content: center;background:var(--gradient-blue-teal); }
.tick.float {margin-left:-2rem;position:relative;left:-0.5rem; }
.col-3 { padding-left:2.5rem; }

.world-map { position:relative;margin-top:2rem;margin-bottom:2rem; }
.circle { position:absolute;width:150px;height:150px;border-radius:100%;background:rgba(150, 245, 194, 0.8);display:flex;align-items:center;justify-content: center; }
.circle.north-america { top:28%;left:17%; }
.circle.south-america { top:60%;left:30%; }
.circle.europe { top:22%;left:48%; }
.circle.asia { top:23%;left:66%; }
.circle.asia-pacific { top:53%;left:70%; }
.circle { transform:scale(0);transition:transform 0.5s ease-in-out; }
.circle.visible { transform:scale(1); }

.bg-dots { background:var(--gradient-dark-blue);color:#fff;  }
.bg-dots::before { opacity:0.2;position:absolute;content:"";display:block;top:0;left:0;width:100%;height:100%;background:url("img_g8/background-dots.svg");background-size:auto 100%;overflow:hidden;border-radius:3rem; }
.bg-dots.dark { background:var(--blue-dark); }
.ontop { position:relative; }





.box.phone-box { background:var(--blue-dark);display:flex;color:#fff;text-align:left;gap:2rem;justify-content: space-around;margin-top:10rem;padding:6rem 1rem;margin-bottom:10rem; }
.box.phone-box svg { margin-bottom:3rem; }
.phone-container { position:relative;margin-top:-14rem;margin-bottom:-14rem;  }
.phone-container::before { content:"";display:block;width:220%;background:linear-gradient(90deg,transparent 0%, var(--blue-mid) 25%, var(--blue-mid) 75%, transparent 100%);position:absolute;top:8rem;left:-60%;height:calc(100% - 16rem);opacity:0.5; }
.phone-container img { position:relative; }
.phone-container > svg { position:absolute;top:45%;left:-7rem; }
.phone-container > svg:last-child { position:absolute;top:45%;left:auto;right:-7rem; }

.left-box, .right-box { width:100%;max-width:320px; }

.phone-screen { position:absolute;top:13%;left:9%;width:82%;height:78%; }
.phone-screen > div { position:absolute;top:50%;left:50%;transform: translate(-50%, -50%); }
.phone-screen > div svg { width:100%;object-fit:contain; }







.payment-card-box { margin-top:10rem;}
.payment-card { background:linear-gradient(90deg, var(--teal) 0%, var(--blue-mid) 100%);border-radius:1rem;width:100%;max-width:648px;aspect-ratio:648/409;position:relative;padding:2rem;margin:-10rem auto 3rem; }
.payment-card .number { position:absolute;bottom:5%;left:0;width:100%;object-position: center;padding:2rem; }
.payment-card .number > svg { width:100%;position:relative; }
.chip { position:absolute;right:2rem;bottom:40%; }
.number-backing { position:absolute;top:0;left:2rem;background:#ff0004;border-radius:0.5rem;width:0%;height:100%;transition:width 0.5s ease-in-out; }
.number-backing.step-2 { width:24%; }
.number-backing.step-3 { width:calc(100% - 4rem); }
.number .number-backing svg  { position:absolute;top:-1rem;right:-1rem;transform:scale(0);transition:transform 0.5s ease-in-out; }
.number .number-backing.step-2 svg,
.number .number-backing.step-3 svg { transform:scale(1); }

.slider-controls { margin-top:5rem;width:50%;min-width:300px;display:flex;flex-wrap: nowrap;margin-left:50%;padding:0 0 1rem 1rem;justify-content:space-between; }
.sliders-box { padding:0 1rem;margin-bottom:4rem; }
.slick-slide { height:auto; }
.slide-count { font-size:1.5rem;color:#DEDEDE; }
.slide-count span { color:var(--blue-dark); }
.slide-arrows { display:flex;gap:1rem; }
.slick-arrow { border:none;text-indent:-9999px;background:#dedede;overflow:hidden;border-radius:100%;aspect-ratio:1/1;width:40px;position:relative;padding:1rem; }
.slick-arrow:hover { background:var(--blue-light);}
.slick-arrow::after { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20' fill='none'><path d='M18.4854 1.06055L26.9706 9.54583L18.4854 18.0311' stroke='%23102336' stroke-width='3'/><line y1='9.56055' x2='18' y2='9.56055' stroke='%23102336' stroke-width='3'/></svg>") no-repeat center;display:block;content:"";position:relative;width:100%;height:100%;background-size:25px 25px;position:absolute;top:0;left:0; }
.slick-prev { transform:rotate(180deg);top:-1px; }

.slick-dots { display:flex;justify-content:center;gap:1rem;margin-top:2rem; }
.slick-dots li { border:none !important;padding:0px; }
.slick-dots button { text-indent:-9999px;overflow: hidden;border-radius:100%;border:none;width:15px;height:15px;opacity:0.3; }
.slick-dots li.slick-active button, .slick-dots li:hover button { opacity:1; }


.quote-slide { display:flex;justify-content: space-evenly;align-items:center; }
.quote-image { position: relative;border-radius:3rem;overflow:hidden;flex:0 1 536px;max-width:536px;margin-top:-3.5rem;margin-bottom:5rem;  }
.quote-image img { width:100%; }
.quote-logo-slider { position: absolute; top:50%;left:50%;transform:translate(-50%, -50%);width:100%; }
.quote-text { flex:0 1 424px;max-width:424px;text-align:left;color:#fff;font-size:1.25 }




.box.cta { background:url("img_g8/cta_background.png") no-repeat center center;background-size:cover;aspect-ratio:132/48;position:relative; }
.box.cta::before { content:"";background:var(--blue-dark);display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:3rem;opacity:0.6; }
.cta-lady { position:absolute;bottom:0;left:0;width:100%;height:calc(100% + 5rem);object-fit:contain;object-position:75% bottom; }
.cta-text { position:absolute;top:6rem;color:#fff;width:100%;max-width:380px;text-align:left; margin-left:6rem;padding-bottom:4rem; }
.cta-text h3 { margin-top:0;margin-bottom:0.5rem;  }
.cta-text span { font-size:1.25rem; }
.contact { display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3rem; }
.contact > div { display:flex;align-items:center;gap:1rem;  }
.cta-wrapper { position:relative; }

.cta-wrapper {  }


.mobile-only { display:none; }

header { transition: transform 0.25s ease; }
header.header-hidden { transform: translateY(-100%); }




#world { padding-top:3rem; }
#payment-wrapper {

}

#payment-sequence {
    position: relative;
    /* height:300px; */
    padding-top:6rem;
    padding-bottom:8rem;
}

.para {
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .4s ease;
    padding-top:1rem;
}
#p1 { position:static; }
.para.visible {
    opacity: 1;
}














@media(max-width:560px){
   .desktop-only { display:none; }
   .mobile-only { display:block; }
   .hero-image .background { aspect-ratio:350/150; }
   .hero-image .cardreader { height:calc(100% + 2rem);top:-1rem;left:2rem; }
   .hero-image .cardhand { top:-2rem; }
   .corner { width:30px;height:30px; }
   .hero-box { padding-top:10rem; }
   .hero-box > svg { width:164px;height:78px; }
   h1 { font-size:2rem;}
   h2 { font-size:1.5rem;line-height: 110%; }
   h3 { font-size:1.5rem;line-height: 110%; }
   .hero-image { margin-top:4rem; }
   .bg-dots { background:var(--blue-dark); }

   .circle { background:none;width:100%;}
   .circle.north-america { top:0;left:0;}
   .circle.south-america { top:20%;left:0; }
   .circle.europe { top:-20%;left:0;}
   .circle.asia { top:40%;left:0;}
   .circle.asia-pacific { top:60%;left:0; }

   .bg-gradient-light-blue-white { background:var(--blue-lightest); }
   .three-columns { grid-template-columns: 1fr;row-gap:2rem;text-align:center; }
   .large-icon { width:150px;height:150px;padding:1.2rem;margin:0 auto;display:flex;  }
   .three-columns .text-left { text-align:center; }
   .three-columns .col-3 { padding:0; }
   .three-columns .col-3 span { display:none; }

   .box.phone-box { display:flex;flex-wrap:wrap;}
   .phone-container { margin-top:0;margin-bottom:0;width:50%; }

   .box.phone-box { text-align:center;margin-top:0;margin-bottom:0; }


   .phone-container::before { width:180%;height:calc(100% - 8rem);top:4rem;left:-40%; }

   .quote-slide { flex-wrap:wrap; }
   .quote-slide .quote-text-slider .slick-slide { text-align:center;padding:0 1rem 3rem; }
   .quote-image { height:auto;aspect-ratio:348/180;margin-top:7rem;margin-bottom:2rem; }
   .bg-teal-blue { background:linear-gradient(180deg, var(--teal) 0%, var(--blue-mid) 100%); }
   .slider-controls { margin:3rem 0 -5rem;padding:0 1rem;width:100%;position: relative;z-index:1; }
   
   .cta-wrapper { background:var(--blue-dark);border-radius:3rem;margin-top:-2rem; }
   .box.cta, .box.cta::before { border-bottom-left-radius:0;border-bottom-right-radius:0;aspect-ratio:unset; }
   .box.cta { padding-top:7rem; }
   .cta-lady { height:calc(100% + 2rem);object-position:75% bottom; }
   .cta-text { margin:0;padding:2rem 2rem 3rem;position:static; }
   .contact { margin-top:1.5rem;margin-bottom:0rem; }
}