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

header .content {
    padding-top: 200px;
    padding-bottom: 107px;
}


/* DEKSTOP HEADER */

header .dekstop-version {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

header .left-text-container {
    width: 700px;
    height: 351px;
    text-align: left;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

header .left-text-container h1 {
    font-size: 70px;
    font-weight: 500;
}

header .left-text-container .button-container {
    margin-top: 75px;
}

header .schedule {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}

header .schedule .arrow {
    color: #232323;
    position: absolute;
    top: 50%;
    transform: translate(20px, -50%);
    transition: .3s;
}

header .schedule:hover .arrow {
    transform: translate(10px, -50%);
    color: #fff;
}

header .right-text-container {
    width: 325px;
    height: 550px;
    position: relative;
}

header .right-text-container p {
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    margin-right: 5px;
}

header .dekstop-version .phone {
    width: 472px;
    position: absolute;
    top: 130px;
    left: calc(50% - 80px);
    filter: drop-shadow(-10px 70px 140px rgba(0, 0, 0, 0.7));
}

#circle1 {
    position: absolute;
    top: 226px;
    left: calc(50% + 254px - 25px);
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
    transition-delay: .2s;
}

#circle2 {
    position: absolute;
    top: 649px;
    left: 540px;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
    transition-delay: .2s;
}

header .dekstop-version .silver-wifi {
    width: 120px;
    position: absolute;
    top: 500px;
    right: 50px;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

header .dekstop-version .gold-finger {
    width: 183px;
    height: 183px;
    position: absolute;
    top: 640px;
    left: 125px;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
    z-index: -1;
}

#circle3 {
    position: absolute;
    top: 740px;
    left: 50%;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

header .scroll-down {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: .3s;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(50px);
}

header .scroll-down svg {
    position: absolute;
    top: 50%;
    transform: translate(-50px, -50%);
}

header .scroll-down:hover svg path {
    transition: .3s;
    stroke: #fff;
}

.slide-left {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.6s ease-out;
}

.slide-right {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.6s ease-out;
}

.slide-right-quick {
    opacity: 0;
    transform: translateX(-100px) rotate(-69deg);
    transition: all 0.3s ease-out;
}

.slide-left-quick {
    opacity: 0;
    transform: translateX(100px) rotate(28deg);
    transition: all 0.3s ease-out;
}

.slide-bottom-quick {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.3s ease-out;
}
  
.slide-left.visible, .slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-left-quick.visible {
    opacity: 1;
    transition-delay: .3s;
    transform: translateX(0) rotate(28deg);
}

.slide-right-quick.visible {
    opacity: 1;
    transition-delay: .3s;
    transform: translateX(0) rotate(-69deg);
}

.slide-bottom-quick.visible {
    opacity: 1;
    transition-delay: .3s;
    transform: translateY(0);
}


/* MOBILE HEADER */

.mobile-version {
    width: 100%;
    display: none;
    flex-direction: column;
}

.mobile-version h1 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    line-height: 115%;
}

.mobile-version .image-composition {
    width: 340px;
    height: 350px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

.mobile-version .image-composition img {
    width: 60px;
}

.mobile-version .image-composition .phone {
    width: 300px;
    position: absolute;
}

.mobile-version .image-composition .gold-finger {
    position: absolute;
    width: 100px;
    left: 0px;
    bottom: 20px;
}

.mobile-version .image-composition .silver-wifi {
    position: absolute;
    width: 42px;
    right: 30px;
    top: 130px;
}

#circle4 {
    position: absolute;
    top: 20px;
    right: 60px;
    z-index: -1;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

#circle5 {
    position: absolute;
    top: 150px;
    left: 0px;
    z-index: -1;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

.mobile-version .button-container {
    display: flex;
    flex-direction: column;
}

.mobile-version .button-container a {
    width: 196px;
    margin: 20px auto;
}

.slide-mobile-left-quick {
    opacity: 0;
    transform: translateX(40px) rotate(27deg);
    transition: all 0.3s ease-out;
}

.slide-mobile-left-quick.visible {
    opacity: 1;
    transition-delay: .3s;
    transform: translateX(0) rotate(27deg);
}

.slide-mobile-right-quick {
    opacity: 0;
    transform: translateX(-40px) rotate(-70deg);
    transition: all 0.3s ease-out;
}

.slide-mobile-right-quick.visible {
    opacity: 1;
    transition-delay: .3s;
    transform: translateX(0) rotate(-70deg);
}

.mobile-version p {
    text-align: center;
    padding: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    margin-top: 20px;
}


/* HEADER MEDIA */

@media only screen and (max-width: 1320px) {
    .dekstop-version {
        display: none !important;
    }

    .mobile-version {
        display: flex !important;
    }

    header .content {
        padding-top: 100px;
        padding-bottom: 50px;
    }
}



/* ---------------------------------------------------------
|                          PARTNERS                        | 
--------------------------------------------------------- */

.partners {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
}

.marquee {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    background-color: #1E8687;
}
  
.marquee-track {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    align-items: center;
}
  
.marquee-track img {
    width: auto;
    height: 40px;
    margin: 60px 50px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    transform: translateY(-50%);
}

@media only screen and (max-width: 450px) {
    .marquee-track img {
        margin: 60px 30px;
    }    
}



/* ---------------------------------------------------------
|                       PAYMENT METODS                     | 
--------------------------------------------------------- */

.payment-methods {
    position: relative;
    width: 100%;
    height: 850px;
    padding-top: 80px;
    overflow-x: hidden;
}

.payment-methods .content {
    position: relative;
    width: 100%;
    max-width: 1344px;
    margin: 0 auto;
    height: 100%;
}

.payment-methods .text-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.payment-methods .text-content h2 {
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    margin-top: 50px;
    padding: 0 20px;
}

.payment-methods .text-content p {
    font-size: 16px;
    font-weight: 400;
    margin: 80px auto 40px;
    text-align: center;
    width: 100%;
    max-width: 455px;
    padding: 0 20px;
}

.payment-methods .text-content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* max-width: 435px; */
    margin: 0 auto;
    margin-bottom: 170px;
    padding: 0 20px;
}

.payment-methods .text-content ul li {
    font-size: 16px;
    font-weight: 500;
    line-height: 180%;
    margin-left: 15px;

    margin-top: 5px;
}

.payment-methods .bank {
    position: absolute;
    background-color: #fff;
    border-radius: 15px;
    filter: drop-shadow(0px 30px 40px rgba(0, 0, 0, 0.25));
    left: 50%;
    top: 50%;
    transition: .3s;
    z-index: 2;
}

#mastercard-central-element, .payment-methods .bank svg path  {
    transition: .3s;
}

.payment-methods .bank:hover {
    background-color: #1E8687;
}

.payment-methods .bank:hover svg path {
    fill: #fff;
}

.payment-methods .bank:hover #mastercard-central-element {
    fill: #1E8687;
}

.payment-methods .bank:hover #main-blik {
    fill: #fff;
}

.payment-methods .bank #circle-blik {
    fill: #ee252c;;
}

.payment-methods .bank:hover #circle-blik {
    fill: #fff;
}

#visa-payment {
    transform: translate(-550px, 50px);
    padding: 25px 35px;
}

#mbway-payment {
    transform: translate(200px, 120px);
    padding: 15px 25px;
}

#gpay-payment {
    transform: translate(500px, 40px);
    padding: 15px 25px;
}

#bizum-payment {
    transform: translate(400px, -140px);
    padding: 15px 20px;
}

#mastercard-payment {
    transform: translate(430px, -340px);
    padding: 15px 35px;
}

#payout-payment {
    transform: translate(170px, -380px);
    padding: 15px 20px;
}

#sepa-payment {
    transform: translate(-250px, -350px);
    padding: 15px 20px;
}

#swift-payment {
    transform: translate(-550px, -300px);
    padding: 15px 20px;
}

#applepay-payment {
    transform: translate(-450px, -100px);
    padding: 15px 20px;
}

@media only screen and (max-width: 1165px) {
    .payment-methods {
        padding: 0;
        height: 750px;
    }

    .payment-methods .bank {
        filter: none;
    }

    .payment-methods .bank svg {
        width: 100%;
    }

    .payment-methods .text-content h2 {
        margin-top: 10px;
    }

    .payment-methods .text-content p {
        margin: 40px auto 30px;
    }

    .payment-methods .text-content ul {
        margin-bottom: 50px;
    }


    /* TOP PART */

    #swift-payment, #sepa-payment, #mastercard-payment, #payout-payment, #applepay-payment {
        top: 20px;     
        transform: translate(0, 0);  
    }

    #sepa-payment svg {
        width: 40px;
    }

    #sepa-payment {
        transform: translate(-120px, 0);
        padding: 10px 15px;
    }

    #swift-payment svg {
        width: 55px;
    }
    
    #swift-payment {
        transform: translate(-200px, 60px);
        padding: 10px 15px;
    }

    #mastercard-payment svg {
        width: 60px;
    }

    #mastercard-payment {
        transform: translate(-50%, 50px);
        padding: 0px 35px;
    }

    #payout-payment svg {
        width: 40px;
    }

    #payout-payment {
        transform: translate(50px, 0px);
        padding: 10px 15px;
    }

    #applepay-payment svg {
        width: 50px;
    }
    
    #applepay-payment {
        transform: translate(115px, 60px);
        padding: 10px 15px;
    }


    /* BOTTOM PART */

    #visa-payment, #mbway-payment, #gpay-payment, #bizum-payment {
        top: auto;
        bottom: 20px;
        transform: translate(0, 0); 
    }

    #visa-payment svg {
        width: 70px;
    }

    #visa-payment {
        transform: translate(-50%, -30px);
        padding: 10px 35px;
    }

    #mbway-payment svg {
        width: 55px;
    }
    
    #mbway-payment {
        transform: translate(-200px, -70px);
        padding: 10px 20px;
    }

    #gpay-payment svg {
        width: 50px;
    }
    
    #gpay-payment {
        transform: translate(100px, -60px);
        padding: 10px 25px;
    }

    #bizum-payment svg {
        width: 40px;
    }
    
    #bizum-payment {
        transform: translate(-160px, -10px);
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 343px) {
    .payment-methods {
        padding: 0;
        height: 800px;
    }
}

.svg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.svg-wrapper img.svg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svg-wrapper img.dim {
    z-index: 1;
    filter: brightness(0.95);
}

.svg-wrapper img.bright {
    filter: none; 
    z-index: 2;
    mask-image: none;
    -webkit-mask-image: none;
}

.svg-wrapper canvas.mask {
    display: none;
}



/* ---------------------------------------------------------
|                          FEATURES                        | 
--------------------------------------------------------- */

.features-section {
    background-color: #1E8687;
    width: 100%;
    height: 785px;
    position: relative;
}

#accordion-container {
    margin-top: 100px;
}

.features-section .small-black-button {
    margin-top: 30px;
}

.features-section .phone-composition {
    display: none;
    position: relative;
    width: 341px;
    height: 360px;
    margin: 50px auto;
}

#computer-features-2 {
    height: 100%;
    width: auto;
}

#code-features-2 {
    top: 50%;
    left: 50%;
    transform: translate(50%, -100%) rotate(17deg);
}

#qr-features-2 {
    top: 50px;
    left: 10px;
    transform: rotate(-28deg);
}

#circle-4-features {
    top: -10px;
    right: -10px;
}

#circle-5-features {
    top: 50%;
    left: -10px;
}

#circle-6-features {
    bottom: 0;
    left: 75%;
}

.features-section .content {
    background-color: #1E8687;
    width: 100%;
    height: 100%;
    max-width: 1344px;
    margin: auto;
    display: flex;
    position: relative;
}

.features-section .left, .features-section .right {
    width: 45%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding-right: 10px;
}

.features-section .left {
    justify-content: flex-start;
    width: 55%;
    padding-right: 0px;
    padding-left: 25px;
}

.features-section .left h2 {
    margin-top: 100px;
    width: 308px;
    color: #fff;
    font-size: 40px;
    font-weight: 500;
}

.features-section .left p {
    margin-top: 50px;
    width: 308px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

.features-section .left img {
    position: absolute;
}

#computer-features {
    position: absolute;
    bottom: -120px;
    left: -30px;
}

#code-features {
    transform: rotate(16deg);
    left: 320px;
    bottom: 70px;
}

#qr-features {
    transform: rotate(-28deg);
    left: -45px;
    bottom: 265px;
}

#circle-1-features {
    left: 500px;
    bottom: 400px;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

#circle-2-features {
    left: -45px;
    bottom: 85px;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

#circle-3-features {
    left: 345px;
    bottom: -165px;
    filter: drop-shadow(0px 40px 25px rgba(0, 0, 0, 0.15));
}

@media only screen and (max-width: 1165px) {
    .features-section {
        height: auto;
        padding-bottom: 40px;
        overflow-x: hidden;
    }

    .features-section .content {
        flex-direction: column;
    }

    .features-section .left h2 {
        margin-top: 50px;
        width: 100%;
        text-align: center;
    }

    .features-section .left p {
        width: 100%;
        text-align: center;
    }

    .features-section .dekstop-composition {
        display: none;
    }

    .features-section .phone-composition {
        display: block;
    }

    .features-section .left, .features-section .right {
        width: 100%;
        padding: 0 15px;
    }

    #accordion-container {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 410px) {
    .features-section .white-box .minus {
        display: none;
    }

    .features-section .phone-composition {
        height: 260px;
    }

    #computer-features-2 {
        left: 40px;
    }

    #code-features-2 {
        transform: translate(20%, -100%) rotate(17deg);
    }
    
    #qr-features-2 {
        left: 60px;
    }
}


/* ---------------------------------------------------------
|                          PROCESS                         | 
--------------------------------------------------------- */

.process {
    position: relative;
    padding: 200px 0px 150px;
    width: 100%;
    text-align: center;
    overflow-y: visible;
    z-index: 2;
}

.container {
    margin: auto;
}

.process h2 {
    font-weight: 500;
    font-size: 40px;
    text-align: center;
    padding: 0 10px;
}

.process p.description {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;    
    max-width: 660px;
    margin: 40px auto 90px;
    padding: 0 10px;
}

.process .step-container {
    width: 100%;
    background: #e6e8eb;
    margin-bottom: 100px;
}

.process .steps {
    display: flex;
    justify-content: space-between;
    padding: 30px 3px;
    width: 1344px;
    margin: auto;
    height: 167px;
}

.process .step {
    width: 20%;
    display: flex;
    position: relative;
    justify-content: flex-end;
    height: 100%;
}

.process .step span {
    font-family: "Red Hat Display", sans-serif;
    font-weight: 900;
    font-size: 240px;
    line-height: 150%;
    text-align: right;
    color: #fff;
    text-shadow: 12px 16px 24px rgba(97, 113, 129, 0.25);
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(-50%, -50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .3s;
}

.process .step:hover span {
    color: #1E8687;
    text-shadow: 12px 16px 24px rgba(30, 134, 135, 0.25);
}

.process .step .text-content {
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
}

.process .step .text-content h4 {
    font-weight: 600;
    font-size: 24px;
    color: #1E8687;
}

.process .step .text-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;    
}

.process .step:hover .text-content h4, .process .step:hover .text-content p {
    text-decoration: underline;
    text-decoration-color: #1E8687;
}

.process .scroll-container {
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.process .scroll-container::-webkit-scrollbar {
    display: none;
}

.process .fixed-container {
    width: 1400px; 
    margin: auto;
    position: relative;
    height: 100%;
}

.process .overlay {
    width: 100%; 
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.process img {
    position: absolute;
    bottom: 0;
}

#circle1-process {
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
    left: 50%;
    transform: translate(-700px, 50%);
    position: absolute;
    width: 157px;
    height: 157px;
}

#circle2-process {
    left: 50%;
    transform: translate(200px, 40px);
}

#circle3-process {
    right: 50%;
    transform: translate(1100px, calc(50% + 100px));
}

@media only screen and (max-width: 1165px) {
    .process {
        padding: 100px 0px 50px;
    }
}

@media only screen and (max-width: 1120px) {
    .process img {
        display: none;
    }
}



/* ---------------------------------------------------------
|                            WE ARE                        | 
--------------------------------------------------------- */

.we-are {
    background-color: #fff;
    text-align: center;
    padding: 150px 10px 100px;
}

.we-are h2 {
    font-weight: 500;
    font-size: 40px;
}

.we-are p {
    max-width: 660px;
    margin: 50px auto 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
}

.we-are .blocks {
    max-width: 1344px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.we-are .block {
    width: calc(33.3% - 20px);
    margin: 10px;
    padding: 5px 30px;
    border-radius: 24px;
    text-align: left;
    transition: .3s;
}

.we-are .block:hover {
    transform: scale(1.07);
}

.we-are .block:hover p {
    text-decoration: underline;
}

.we-are .block span {
    font-weight: 250;
    font-size: 90px;
}

.we-are .block p {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
}

.we-are .block:nth-child(1) {
    background-color: #CED4DA;
    height: 186px;
    color: #617181;
}

.we-are .block:nth-child(2) {
    background-color: #617181;
    height: 310px;
    color: #fff;
}

.we-are .block:nth-child(3) {
    background-color: #617181;
    height: 186px;
    color: #fff;
}

.we-are .block:nth-child(4) {
    background-color: #617181;
    height: 310px;
    color: #fff;
    transform: translateY(-124px);
}

.we-are .block:nth-child(5) {
    background-color: #CED4DA;
    height: 186px;
    color: #617181;
}

.we-are .block:nth-child(6) {
    background-color: #1E8687;
    height: 310px;
    color: #fff;
    transform: translateY(-124px);
}

.we-are .block:nth-child(4):hover, .we-are .block:nth-child(6):hover {
    transform: scale(1.07) translateY(-124px);
}

@media only screen and (max-width: 1325px) {
    .we-are {
        background-color: #fff;
        text-align: center;
        padding: 100px 10px 50px;
    }

    .we-are .block {
        width: calc(50% - 20px);
        height: 186px !important;
        transform: translateY(0px) !important;
        padding: 20px 30px;
    }

    .we-are .block span {
        font-size: 68px;
    }

    .we-are .blocks {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 960px) {
    .we-are .block {
        width: calc(50% - 10px);
        margin: 5px;
        padding: 15px 25px;
    }

    .we-are .block span {
        font-size: 48px;
    }

    .we-are .block p {
        font-weight: 300;
    }
}


@media only screen and (max-width: 520px) {
    .we-are .block {
        width: calc(100% - 10px);
        margin: 5px;
        padding: 15px 25px;
    }

    .we-are .block span {
        font-size: 48px;
    }

    .we-are .block p {
        font-weight: 300;
    }
}



/* ---------------------------------------------------------
|                             HELP                         | 
--------------------------------------------------------- */

.help {
    background-color: #fff;
    width: 100%;
    padding: 50px 0 100px;
}

.help .help-container {
    width: 100%;
    max-width: 1344px;
    margin: auto;
    position: relative;
    height: 510px;
}

.help .text-container {
    background-color: #1E8687CC;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 60px 10px;
}

.help .content-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 24px;
}

.help .text-container h2 {
    font-weight: 500;
    font-size: 40px;
    color: #fff;
}

.help .text-container p {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #fff;
    max-width: 936px;
    margin: 0 auto;
}

.help img {
    position: absolute;
    z-index: 3;
    filter: drop-shadow(0px 70px 20px rgba(0, 0, 0, 0.25));
}

#circle1-help {
    top: 10px;
    left: 100px;
    transform: translate(0, -50%);
}

#finger-help {
    top: -10px;
    right: 0;
    transform: translate(50px, -50%);
}

#circle2-help {
    bottom: 30px;
    right: 20px;
    transform: translate(0, 50%);
}

@media only screen and (max-width: 1040px) {
    .help {
        padding: 50px 0;
    }

    .help img {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .help .help-container {
        border-radius: 0px;
        height: 400px;
    }

    .help .text-container p {
        font-size: 18px;
    }
}