@media (min-width: 1200px) {
    .content-container {
        max-width: 1140px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(10dvh);
}

/* Section1 */
.payment-section1-container {
    width: 96%;
    margin: 0 auto;
    margin-top: 3rem;
    border-radius: 1.3rem;
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(/images/PaymentProgram/Section1-background.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.payment-section1-h1 {
    font-size: 2.5rem;
}

.payment-section1-p, .payment-section1-h1 {
    text-align: center;
    color: var(--PrimaryColor7);
}

.payment-section1-p {
    width: 60%;
}

/* Section2 */
.payment-section2-container {
    width: 100%;
    margin-top: 10rem;
    display: grid;
    grid-template-columns: 12rem 12rem 12rem 12rem 12rem 12rem;
    grid-template-rows: 18rem 18rem 18rem 18rem 18rem;
    grid-template-areas:
        "item1 item1 item2 item2 item3 item3"
        "item4 item4 item5 item5 item6 item6"
        "item7 item7 item5 item5 item8 item8"
        "item9 item9 item10 item10 item11 item11"
        "item12 item12 item13 item13 item14 item14";
    gap: 2rem;
}

.item1 {
    grid-area: item1;
}

.item2 {
    grid-area: item2;
}

.item3 {
    grid-area: item3;
}

.item4 {
    grid-area: item4;
}

.item5 {
    grid-area: item5;
    position: relative;
}

.item6 {
    grid-area: item6;
}

.item7 {
    grid-area: item7;
}

.item8 {
    grid-area: item8;
}

.item9 {
    grid-area: item9;
}

.item10 {
    grid-area: item10;
}

.item11 {
    grid-area: item11;
}

.item12 {
    grid-area: item12;
}

.item13 {
    grid-area: item13;
}

.item14 {
    grid-area: item14;
}

.section2-item-container {
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.2s ease-in-out;
}

    .section2-item-container:hover {
        transform: translateY(-4px);
    }

        .section2-item-container:hover .section2-item-image {
            transform: scale(1.04) rotate(-8deg);
        }

.section2-item-image {
    width: 4rem;
    transition: all 0.2s ease-in-out;
}

.section2-item-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--PrimaryColor6);
    margin: 0;
}

.section2-image-container {
    width: 20rem;
}

.section2-image {
    width: 42rem;
    position: absolute;
    left: 48%;
    top: -25%;
    transform: translateX(-53%);
}

.section2-item-information {
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 950px) {
    .payment-section1-p {
        font-size: 1.3rem;
        width: 80%;
    }

    .payment-section2-container {
        grid-template-columns: 100%;
        grid-template-rows: repeat(14, auto);
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "item4"
            "item5"
            "item6"
            "item7"
            "item8"
            "item9"
            "item10"
            "item11"
            "item12"
            "item13"
            "item14";
        gap: 6rem;
    }

    .section2-item-container {
        width: 60%;
        margin: 0 auto;
    }

    .section2-item-title {
        font-size: 1.6rem;
    }

    .section2-item-information {
        font-size: 1.3rem;
    }

    .section2-image {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-60%);
        width: 34rem;
    }

    .section2-image-container {
        width: 100%;
        height: 30rem;
    }

    .section2-item-image {
        width: 5rem;
    }
}

@media (max-width: 500px) {
    .payment-section1-h1 {
        font-size: 1.6rem;
    }

    .payment-section1-p {
        font-size: 1rem;
        width: 80%;
    }

    .section2-item-container {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section2-item-information {
        text-align: center;
        font-size: 1rem;
    }

    .section2-image {
        width: 95%;
    }

    .section2-image-container {
        height: 22rem;
    }
}