/* Hero */

.apple-pay-hero__wrapper {
    padding-top: 2.083vw;
    width: 100%;
    /*aspect-ratio: 1296/644;*/
    position: relative;
    /*padding: min(15px, 1.030vw);*/
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: min(40px, 2.745vw);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    justify-content: center;
    align-items: start;

    gap: 2.778vw;
    transition: border 0.4s;
    transition-delay: 0.4s;

}

.apple-pay-hero__left {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.apple-pay-hero__left .section-title {
    margin-bottom: 2.778vw;

}

.apple-pay-hero__left .description {
    max-width: max(600px, 41.667vw);
    margin-bottom: 2.778vw;
    color: var(--shark-shark-450);
}

.apple-pay-hero__left .buttons {
    display: flex;
    gap: 0.556vw;
}

.apple-pay-hero__right{
    width: 100%;
    grid-column: span 5;

}

.apple-pay-hero__right svg,.apple-pay-hero__right .svg_wrapper {
    width: 100%;
    height: 100%;
}

#apple-pay-hero-pay {
    opacity: 0;
}

#apple-pay-hero-background {
    opacity: 0;
}

#apple-pay-hero-info {
    transform: translateY(100%);
}


/* Ecosystem */

.apple-pay-ecosystem {
    padding: 2.111vw 0 11.111vw;
}

.apple-pay-ecosystem .section-title {
    text-align: center;
    margin-bottom: 2.778vw;
}


.apple-pay-ecosystem .image img {
    height: auto;
    width: 100%;
    display: block;
}

.apple-pay-ecosystem .description {
    margin: 5.556vw auto 0;
    max-width: 53.472vw;
    text-align: center;
}

/*Optimised for Developers*/

.optimised-section {
    padding: 13.889vw 0 5.556vw;
    text-align: center;

}

.optimised-section .images {
    position: relative;
    aspect-ratio: 336/100;
    max-width: 23.333vw;
    width: 100%;
    margin: 0 auto 3.333vw;
}

.optimised-section .images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

.optimised-section .section-title {
    margin-bottom: 2.778vw;
}

.optimised-section .description {
    max-width: 53.472vw;
    margin: 0 auto;
    color: var(--shark-shark-450);
}


.global-expansion {
    padding: 5.556vw 0 13.889vw
}

.global-expansion__wrapper {
    background-color: var(--shark-shark-50);
    border-radius: min(16px, 1.111vw);
    display: grid;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    gap: 27px;
}

.global-expansion-left {
    grid-column: span 7;
    padding: 2.778vw 0 2.778vw 2.778vw;
}

.global-expansion-left .description {
    margin-top: 40px;
    color: var(--shark-shark-450);
    max-width: 38.194vw;
}

.global-expansion-right {
    grid-column: span 5;


}

.global-expansion-right img {
    width: 100%;
    height: auto;
    display: block;
}

/*   start-with-apple  */


.start-with-apple {
    padding: 13.889vw 0 13.889vw;
}

.start-with-apple__wrapper {
    display: flex;
    gap: 40px;
}

.start-with-apple__left {
    display: flex;
    flex-direction: column;
    gap: 2.778vw;
}

.start-with-apple__left .description .-light {
    color: var(--shark-shark-250);
}


.start-with-apple__left .default-button {
    width: fit-content;
}

.start-with-apple__right {
    position: relative;
    aspect-ratio: 360/460;
    width: 100%;
    height: 100%;
    transform: translateY(-30px);
}


.start-with-apple__right img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}


@media screen and (max-width: 1100px) {
    /* Hero */
    .apple-pay-hero__wrapper {
        padding-top: clamp(14px, 4.103vw, 18px);
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: clamp(14px, 4.103vw, 18px);

    }

    .apple-pay-hero__left .section-title {
        margin-bottom: clamp(22px, 6.154vw, 26px);

    }

    .apple-pay-hero__left .description {
        margin-bottom: clamp(22px, 6.154vw, 26px);
    }

    .apple-pay-hero__left .buttons {
        display: flex;
        gap: clamp(6px, 2.051vw, 9px);
    }

    .apple-pay-hero__right {
        max-width: 100%;
    }

    .apple-pay-hero__right .svg_wrapper {
        width: 100%;
        height: 100%;
    }


    /* Ecosystem */
    .apple-pay-ecosystem {
        padding: clamp(76px, 20.513vw, 84px) 0;
    }

    .apple-pay-ecosystem .section-title {
        margin-bottom: clamp(14px, 4.103vw, 18px);
    }


    .apple-pay-ecosystem .description {
        margin: clamp(36px, 10.256vw, 44px) auto 0;
        max-width: 100%;
    }

    /*Optimised for Developers*/
    .optimised-section {
        padding: clamp(76px, 20.513vw, 84px) 0;
    }

    .optimised-section .images {
        max-width: clamp(240px, 65.641vw, 290px);
        width: 100%;
        margin: 0 auto clamp(30px, 8.205vw, 34px);
    }

    .optimised-section .section-title {
        margin-bottom: clamp(22px, 6.154vw, 26px);
    }

    .optimised-section .description {
        max-width: 100%;
    }

    /* global-expansion */
    .global-expansion {
        padding: 0 0 clamp(76px, 20.513vw, 84px);
    }

    .global-expansion__wrapper {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }

    .global-expansion-left {
        padding: clamp(14px, 4.103vw, 18px);
    }

    .global-expansion-left .description {
        margin-top: clamp(14px, 4.103vw, 18px);
        max-width: 100%;
    }

    .global-expansion-right img {
        margin: 0 auto;
        max-width: 300px;
    }


    /*   start-with-apple  */
    .start-with-apple {
        padding: clamp(76px, 20.513vw, 84px) 0;
    }

    .start-with-apple__wrapper {
        flex-direction: column-reverse;
    }

    .start-with-apple__left {
        gap: clamp(22px, 6.154vw, 26px);
    }

    .start-with-apple__right {
        max-width: 360px;
        margin: 0 auto;
        transform: translateY(0);
    }
}


@media screen and (max-width: 576px) {
    .apple-pay-ecosystem .image {
        aspect-ratio: 1/1;
        overflow: hidden;
        margin: 0 -16px;
    }

    .apple-pay-ecosystem .image img {
        object-fit: cover;
        aspect-ratio: 1/1;
    }
}