@import "platform-section.css";

body .site.grid-container {
    background: url("../svg/hp-main-bg-mobile.svg") no-repeat;
    background-size: cover;
}

#hp-hero {
    padding: 140px 20px 45px;
}

#hp-hero .elementor-background-video-container::before {
    background: linear-gradient(259.8deg, rgba(0, 190, 255, 0.5) 0%, rgba(0, 158, 255, 0.355459) 11.82%, rgba(0, 124, 255, 0.20737) 23.94%, rgba(0, 89, 255, 0.05) 36.81%, rgba(9, 65, 187, 0.443741) 49.73%, rgba(15, 46, 135, 0.748188) 62.03%, #151E5B 76.42%);
    opacity: 1;
}

#hp-hero .hero-title {
    margin-bottom: 25px;
}

.hero-title h1 {
    font: var(--heading-4);
    color: var(--white);
}

.hero-title h1 span {
    color: var(--cyan-blue);
}

#hp-hero .hero-text {
    font: var(--text-regular);
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 30px;
}

.section-title h2 {
    text-align: center;
}

#hp-ecosystem {
    padding: 40px 20px;
    margin-bottom: 20px;
}

#hp-ecosystem .e-con-inner {
    padding: 0;
}

#hp-ecosystem .ecosystem-text {
    font: var(--text-regular);
    letter-spacing: -0.01em;
    margin: 0 auto 44px;
}

#ecosystem-grid {
    padding: 20px;
    gap: 40px 20px;
}

#ecosystem-grid .ecosystem-box {
    height: 190px;
}

#ecosystem-grid .ecosystem-box .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

#ecosystem-grid .ecosystem-box figure {
    /*display: flex;*/
    width: 100px;
    height: 86px;
    margin-bottom: 8px;
}

#ecosystem-grid .ecosystem-box figure a {
    display: flex;
    position: relative;
    height: 100%;
}

#ecosystem-grid .ecosystem-box figure a img {
    max-height: 100%;
}

#ecosystem-grid .ecosystem-box figure a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain !important;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#ecosystem-grid .ecosystem-box.eco-issuers figure a::after {
    background: url("../svg/card-issuers-hover.svg") no-repeat center;
}

#ecosystem-grid .ecosystem-box.eco-processors figure a::after {
    background: url("../svg/issuer-processors-hover.svg") no-repeat center;
}

#ecosystem-grid .ecosystem-box.eco-merchants figure a::after {
    background: url("../svg/merchants-hover.svg") no-repeat center;
}

#ecosystem-grid .ecosystem-box.eco-partners figure a::after {
    background: url("../svg/product-partners-hover.svg") no-repeat center;
}

#ecosystem-grid .ecosystem-box:hover figure a::after {
    opacity: 1;
}

#ecosystem-grid .ecosystem-box h3 {
    font: 700 24px/32px var(--DM-Sans);
    /*color: var(--focus-blue);*/
    background-image: var(--text-gradient-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 100%;
    background-position: top left;
    transition:all 0.3s ease;
}

#ecosystem-grid .ecosystem-box.eco-processors h3 {
    background-image: var(--text-gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ecosystem-grid .ecosystem-box.eco-merchants h3 {
    background-image: var(--text-gradient-pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ecosystem-grid .ecosystem-box.eco-partners h3 {
    background-image: var(--text-gradient-teal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ecosystem-grid .ecosystem-box:hover h3 {
    background-size: 100% 100%;
    /*background-position: top left 100%;*/
}


#hp-awards {
    padding: 40px 20px 40px;
}

#hp-awards .short-title {
    margin-bottom: 16px;
}

#awards-grid {
    overflow: auto hidden;
}

#awards-grid .award-box {
    width: max-content;
    min-width: 220px;
    padding: 0;
}

#awards-grid .award-box figure {
    height: 70px;
    width: 100%;
    max-width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#awards-grid .award-box figure * {
    width: 100%;
    max-height: 70px;
}

#awards-grid .award-box h3 {
    font: var(--text-medium);
    background: var(--text-gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#awards-grid .award-box p {
    font: var(--text-small-h9);
    margin: 8px auto 0;
    line-height: 24px;
}

#hp-how-to {
    padding: 60px 20px 30px;
}

#hp-how-to  .short-title {
    margin-bottom: 16px;
}

/* Use Cases */
#hp-use-cases {
    max-width: calc(100% - 40px);
    margin: 55px auto 30px;
}

#hp-use-cases .use-case-grid {
    overflow: auto hidden;
    padding: 30px 0 60px;
    gap: 16px;
    justify-content: left;
}

#hp-use-cases .use-cases-wrapper:first-child .use-case-grid {
    padding: 0 0 60px 0;
}

#hp-use-cases .use-cases-wrapper:first-child{
    border-bottom: 1px solid #D9D9D9;
}

.grid-header {
    margin: 0 auto 30px;
    max-width: 630px;
}

.grid-header.merchants {
    margin: 30px auto 0;
}

.grid-header .grid-title h3 {
    font: var(--heading-7);
    background: var(--text-gradient-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grid-header .grid-title.merchants h3 {
    background: var(--text-gradient-pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grid-header .grid-btn a {
    font: var(--heading-8);
    color: var(--cyan-blue);
    background: none;
    padding: 0;
    margin: 4px 0 0;
}

#hp-lets-talk {
    padding: 25px 20px 60px;
    background: linear-gradient(86deg, #151E5B 0.63%, #0A2D94 59.52%, #003AC6 76.26%, #0051CF 83.36%, #00BEFF 100.27%);
}

#hp-lets-talk .short-title h4  {
    text-align: left;
}

#hp-lets-talk .section-title {
    align-self: flex-start;
}

#hp-lets-talk .btn {
    max-width: max-content;
}

#hp-lets-talk .section-title h2 {
    max-width: 245px;
    text-align: left;
    background: var(--light-grey);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 16px 0 60px;
}

#hp-lets-talk .card-add-grid {
    margin: 70px 0 0;
    gap: 24px;
}

.card-add-box svg {
    width: 29px;
    height: auto;
}
.card-add-box .elementor-icon-box-content {
    color: var(--white);
}

.card-add-box h3 {
    font: var(--heading-7);
    margin-bottom: 8px;
}

.card-add-box .elementor-icon-box-description {
    font: var(--text-regular);

}


@media (min-width: 768px) {
    body .site.grid-container {
        background: url("../svg/hp-main-bg.svg") no-repeat;
        background-size: cover;
    }

    #hp-lets-talk .section-title h2 {
        max-width: 100%;
    }

    #hp-how-to {
        padding: 100px 50px 0;
    }

    #hp-use-cases .use-case-grid {
        justify-content: center;
    }

}

@media (min-width: 1025px) {
    #hp-hero {
        padding: 230px 130px 100px;
    }

    #hp-hero .hero-title {
        max-width: 790px;
        margin-bottom: 30px;
    }

    .hero-title h1 {
        font: var(--heading-2);
        letter-spacing: -0.05em;
    }

    #hp-hero .hero-text {
        font: var(--text-large);
        max-width: 790px;
        margin-bottom: 70px;
    }

    .hp-cta-grid {
        width: 345px;
        padding: 0;
    }

    #hp-ecosystem {
        margin-bottom: 100px;
    }

    #hp-ecosystem .ecosystem-text {
        font: var(--text-medium);
        max-width: 996px;
        margin: 0 auto 70px;
    }

    #ecosystem-grid .ecosystem-box {
        height: 205px;
    }

    #ecosystem-grid .ecosystem-box figure {
        width: max-content;
        height: 126px;
    }

    #ecosystem-grid .ecosystem-box .elementor-image-box-wrapper {
        justify-content: space-between;
    }

    #hp-awards > div {
        max-width: 1320px;
    }

    #awards-grid {
        overflow: hidden;
        justify-content: space-between;
        display: flex;
    }

    #awards-grid .award-box figure {
        margin-bottom: 30px;
    }

    #hp-how-to > div {
        max-width: 996px;
    }

    #hp-how-to .section-title h2 {
        letter-spacing: -0.06em;
        max-width: 700px;
        margin: 0 auto 16px;
        line-height: 51px;
    }

    #hp-how-to .text-regular {
        font: var(--text-medium);
    }

    #hp-use-cases {
        max-width: 1320px;
        padding: 0 30px 0;
        margin: -40px auto 0;
    }

    #hp-use-cases .use-case-grid {
        gap: 74px;
        justify-content: center;
        padding: 100px 0;
    }

    #hp-use-cases .use-cases-wrapper:first-child .use-case-grid {
        padding: 100px 0;
    }

    .grid-header {
        display: none;
    }

    #hp-lets-talk {
        padding: 70px 20px 0;
    }

    #hp-lets-talk > div > .e-con-inner {
        max-width: 1300px;
    }

    #hp-lets-talk .section-title h2 {
        max-width: 700px;
    }

    #hp-lets-talk .short-title h4 {
        text-align: left;
    }

    #hp-lets-talk .card-add-grid {
        gap: 0 0;
        grid-template-columns: repeat(4, 275px);
        max-width: max-content;
        border: 1px solid #D6D7E340;
        border-radius: 20px 20px 0 0;
    }

    .card-add-box {
        padding: 25px 45px 45px;
    }

    #hp-lets-talk  .card-add-box .elementor-icon-box-icon {
        margin-bottom: 25px;
    }

    .card-add-box:not(:last-of-type) {
        border: solid #D6D7E340;
        border-width: 0 1px 0 0;
    }

}