@charset "UTF-8";
/* CSS Document */
:root {
 --doc-height: 100%;
}

html,
body {
 padding: 0;
 margin: 0;
 height: 100vh; /* fallback for Js load */
 height: var(--doc-height);
}


table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/*///////////////////////// VARIABLES///////////////////////////////*/
:root {
    --dark-gray-1000: #111111;
    --dark-gray-900: #402B59;
    --brand-primary-500: #E37DA5;
    --brand-primary-400: #E2FE00;
    --bb-primary-rgb:190, 214, 0;
    --dark-gray-800: #312045;
    --dark-gray-700: #412B59;
    --dark-gray-600: #5A5A5A;
    --dark-gray-500: #777777;
    --bb-error-100: #FFE5EC;
    --bb-error-500: #FF6363;
    --bb-error-900: #A50029;
    --bb-positive-100: #E7FEF6;
    --bb-positive-500: #08875B;
    --bb-positive-900: #006643;
    --bb-notice-100: #FFEDE3;
    --bb-notice-500: #FF5C00;
    --bb-notice-900: #B84200;
}

body{background-color: var(--dark-gray-900);font-family: "Be Vietnam Pro", sans-serif; display: flex;flex-direction: column;justify-content: space-between; font-weight: 200}
.text-12{font-size: 12px}
.text-14{font-size: 14px}
.text-16{font-size: 16px}
.fs-ultra{font-size: 7vw}
@media (max-width: 992px) {
.fs-ultra {
    font-size: 12vw;
}}
.span-generic{font-weight: bold;}
.text-primary{color:var(--brand-primary-500)!important}
a.text-primary:hover, button.text-primary:hover{color:var(--brand-primary-400)!important}
.bg-bd-dark {background-color: var(--dark-gray-800);}
.disabled-text{color:var(--dark-gray-500)}
a.disabled-text:hover{color:var(--dark-gray-500)}
*{transition: all 0.4s ease-out;}
*:hover{transition: all 0.2s ease-out;}
.trim-text{color:var(--dark-gray-500)}
.text-1-row{-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; max-width: 100%}
.text-overflow{ overflow: hidden;text-overflow: ellipsis;border: 1px solid #000000;}
.svh-100{height:100svh!important}
.vh-100{height:100vh!important}
header{z-index: 100}
.z-index-0{z-index:0} 

/*///////////////////////// BUTTONS ///////////////////////////////*/

.btn-medium{ height: 36px;white-space: nowrap; line-height:34px; font-weight:bold; padding:0 20px; text-decoration: none; background: none;cursor: pointer;}
.stroke-btn{ border: 1px solid #fff; border-radius:8px}
.stroke-btn:hover{ background-color: #ffffff10}
.icon-btn{ height: 36px; width: 36px; white-space: nowrap;padding:6px;background: none;cursor: pointer;border:0; background-color:transparent; border-radius: 100%}
.icon-btn.btn-medium{ height: 28px; width: 28px; white-space: nowrap;padding:6px;background: none;cursor: pointer;border:0; background-color:transparent; border-radius: 100%}
.icon-btn img{vertical-align: top;}
.icon-btn:hover{background-color:var(--dark-gray-900);}
.icon-btn.btn-disabled{ background-color:transparent; cursor: default; opacity: 0.3}
.icon-btn.btn-disabled:hover{background-color:transparent}
.primary-btn{background-color: var(--brand-primary-500); border:0;color: var(--dark-gray-900); text-align: center}
.large-btn{ border-radius: 8px; height: 48px; white-space: nowrap; line-height:46px; padding:0 28px;text-decoration: none; cursor: pointer; font-weight: 500; font-size: 16px; display: inline-block }
.primary-btn:hover{background-color: var(--brand-primary-400); color: var(--dark-gray-900);}
.primary-ghost-btn{background-color:transparent;color:#fff; font-weight: inherit!important}
.primary-ghost-btn:hover{color:var(--brand-primary-500);}
.primary-btn img.dark-icon{filter: brightness(0); vertical-align:middle;}
.link-btn{ border:0; background-color: transparent; padding: 0}

.primary-gradient-btn{background: var(--linear, linear-gradient(90deg, #4C3BD0 0%, #8A48AA 100%))}
.primary-gradient-btn:hover{filter: brightness(1.2)}


/*///////////////////////// tooltip ///////////////////////////////*/
.tooltip.show {opacity: 1;}
.tooltip {--bs-tooltip-bg:  var(--dark-gray-1000);--bs-tooltip-font-size: 12px;}
.tooltip-inner {padding: 10px 15px 10px 20px;background-color: var(--dark-gray-1000);color: #fff;border: none;text-align: left;opacity: 1;}
.tooltip-arrow{ transition: none;}
.tooltip-launcher{ cursor:pointer;white-space: nowrap;}

/*///////////////////////// main hero ///////////////////////////////*/
/*.hero-main{ background:url("../img/hero-main.jpg") no-repeat center top; background-size: cover;}*/
.scroll-div{ height:64px; overflow: hidden; box-sizing: content-box}
.scroll-div .scroll-text{animation-name: moving-text; animation-duration: 2.5s; animation-iteration-count: infinite;}
.scroll-div .scroll-arrow{top:70px}

@keyframes moving-text {
0% { transform: rotate(0deg)}
100%  {transform: rotate(180deg)}
}


/*///////////////////////// feed swap ///////////////////////////////*/
.feeds-swap {
  background-image: url("../img/screens.jpg") ;
    background-color: #402B59;
    background-position:center center; 
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;}


/*///////////////////////// benefits ///////////////////////////////*/
.benefits-content{background-color: var(--dark-gray-800)}
.home-content{background-color: var(--dark-gray-900)}
.home-content .ellipse{ bottom: -1000px;}


/*///////////////////////// footer ///////////////////////////////*/
footer{background-color: var(--dark-gray-700)}
.swapper-footer{ width:160px; filter: brightness(7) contrast(0.6); opacity:0.7 }

/*///////////////////////// Mobile menu ///////////////////////////////*/

.offcanvas {background-color: var(--dark-gray-700)}
.offcanvas.offcanvas-end {width: 280px}
.btn-close { background-image: url("../img/icons/cross.svg"); background-size: 24px;}
@media (max-width: 992px) {
    .no-mobile{display:none!important}
    .nav-link.border-bottom.active {border-bottom:2px solid var(--brand-lime-500)!important; padding-bottom: 12px!important;}
    .offcanvas-body {overflow-y: initial;}
    .app-logo{width: 160px;}

}

/*///////////////////////// how it works ///////////////////////////////*/

.shadow-core{ box-shadow: 4px 4px 110px #00000045; border-radius:35px; width: 30vw; max-width:405px; min-width: 286px;}
.m-negative{ margin-top:-100px;border-radius:20px; overflow:hidden; background: url("../img/inner-image-sw.jpg"); background-size: cover; background-position: center center}
.overflow-image{ height: calc(100% + 100px)}
.overflow-image-contaniner{min-height: 400px}
.feed-input .big-arrow img{max-width: 272px;}

@media (max-width: 991px) {
    .swapper-diagram{flex-direction: column!important}
    .rotate-90{transform: rotate(90deg);}
    .feed-lang-arrow img{margin-left:0!important}
    .feed-input {text-align: center!important}
    .feed-input > div{ margin-bottom: 20px}
    .feed-input .big-arrow{order:3; height: 100px; overflow: hidden}
    .feed-input .big-arrow img{width: 200px; margin-top: 30px;transform: rotate(90deg) translate(-60px, 0px);}
    .feed-input .big-no-arrow{height: 60px; overflow: hidden}
    .feed-input .big-no-arrow img{width: 200px; margin-top: 30px;transform: rotate(90deg)}
    .m-negative{ margin-top:-50px;}
    .overflow-image{ height: calc(100% + 50px)}
}
#myVideo{
  position: fixed;
  bottom: 0; right: 0;
  min-width: 100%; 
  min-height: 100%; z-index: -1; opacity: 0.50; filter: grayscale();transform: translateX(calc((100% - 100vw) / 2))
}
/*
@media (max-width: 991px) {
    .swapper-diagram{flex-direction: column!important}
    .rotate-90{transform: rotate(90deg);}
    .feeds-output{flex-direction: row!important; margin-top: 30px}
    .feeds-output .feed-lang{flex-direction: column!important; width: 20%!important}
    .feeds-output .feed-lang img{transform: rotate(90deg);justify-content: center; margin: 0!important}
    .feed-text{transform: rotate(90deg);display: flex; flex-direction: column!important;justify-content: center;margin-top: 30px}
    .feed-flag{justify-content: center;display: flex; margin-bottom: 8px}
    .feed-lang-arrow{height: 80px; overflow: hidden}
    .feed-output-lang{flex-direction: column; height: 200px}
    
}*/

/*GSAP Overrides*/

.nav-item,.navbar-brand,.main-title,.stag,.feed-input,.shadow-core, .feed-lang,.simple-stag,.stagtitle {opacity: 0;}

.feeds-swap{overflow: hidden; max-width: 100svw;}
   
.h-anim{overflow: hidden;}

/*Diagram Icons*/
.m-diagram-icon{background-color:#37244D; border-radius: 20px; aspect-ratio: 1 / 1;
  width: 100%; padding: 32px; position: relative}
.m-diagram-icon:after{ position: absolute; content: ""; width: 90px; top:50%; height: 2px; 
left:calc(100% - 12px); z-index: 100;
  background:url("../img/diagrams/dash-line.svg") no-repeat;}
.m-diagram-icon:before{ 
    position: absolute;
    content: "";
    width: 42px;
    height: 42px;
    top: calc(50% - 18px);
    left: calc(100% + 11px);
    z-index: 101;
    background: url(../img/diagrams/swappo-int.svg);
}

.m-diagram-icon-container:last-child .m-diagram-icon:before{ display: none;}
.m-diagram-icon-container:last-child .m-diagram-icon:after{ display: none;}
.m-diagram-icon-gap { --bs-gutter-x:66px; --bs-gutter-y:66px;}
@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {padding: 16px!important;}
}
@media (max-width: 991px) {
   .m-diagram-icon {padding: 12px;border-radius: 12px; max-width: 120px;} 
    .m-diagram-icon:after{width: 80px;left:calc(100% - 7px);}
}

@media (max-width: 767px) {
   .m-diagram-icon {padding: 20px;border-radius: 20px; max-width: 120px;} 
    .m-diagram-icon:after{width: 80px;left:calc(100% - 7px);}
    .m-diagram-icon-container{ justify-content: center; display: flex}
    .m-diagram-icon:after{  background:url("../img/diagrams/dash-line-vert.svg") no-repeat; height: 90px; width: 2px; left:50%; top: calc(100% - 12px)}
.m-diagram-icon:before{ 
    top: calc(100% + 11px);
    left: calc(50% - 20px);
}
}