.pricing-hero {
    text-align: center;
    padding: 1rem;
    margin-bottom: 60px;
}
.pricing-hero h1 {
    color: #1E3A87;
    font-size: 32px;
}

.pricing-hero p {
    color: #424242;
    font-size: 18px;
    margin-top: 10px;
}

#products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

#product-cards {
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
#product-cards .product-card-content p {
    font-size: 14px;
}

.product-card-header span {
    color: #05306A;
    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    /* lay out children in a row */
    display: inline-flex;
    align-items: flex-start;
    /* ↖️ push icon to the top of the text block */
    gap: 0.5rem;
}

.product-card-header span img {
    width: 1.5em;
    /* or whatever fits your design */
    height: auto;
    display: block;
}

.product-card-content p {
    margin-top: 6px;
    color: #62636C;
    font-size: 18px;
}

.product-card {
    background-image: url(../css/bg-products/gpt-bg.png);
    background-size: cover;
    background-position: center;
    height: 162px;
    width: 100%;
    padding: 20px;
}

.prod-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/* SECOND SECTION */
#blue-product-cards {
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.cta-gradient-full {
    color: #fff;
    border-radius: 0px;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 2rem;
    background-image: url(bg-products.png);
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 40px;
}

.cta-gradient {
    color: #fff;
    border-radius: 16px;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 2rem;
    background-image: url(bg-products.png);
    background-repeat: repeat;
    background-position: right bottom;
    background-size: cover;
    margin-bottom: 40px;
}


.blue-product-card-content p {
    margin-top: 6px;
    color: #D9ECFF;
    font-size: 14px;
}

.blue-product-card {
    background-image: url(../css/bg-products/wf-bg.png);
    background-size: cover;
    background-position: center;
    height: 170px;
    width: 100%;
    padding: 24px;
    text-align: left;
}

.blue-prod-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.blue-product-card-header span {

    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    /* lay out children in a row */
    display: inline-flex;
    align-items: flex-start;
    /* ↖️ push icon to the top of the text block */
    gap: 0.5rem;
}

.blue-product-card-header span img {
    width: 1.5em;
    /* or whatever fits your design */
    height: auto;
    display: block;
}

.prod-text-content {
    /* fallback color */
    /* 1) your left→right gradient: */
    background: linear-gradient(to right, #3BFF87 0%, #B9FFD4 100%);

    /* 2) clip the background to the text shape: */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3) make the text transparent so you see the gradient: */
    color: transparent;
    font-weight: bold;
    font-size: 32px;
    margin-top: 10px;
}

.section-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.l-info {
    width: 50%;
}

.l-info .product-card {
    background-image: url(../css/bg-products/As-bg.png);
    background-size: cover;
    background-position: center;
    height: 176px;
    width: 100%;
    padding: 32px;
    text-align: left;
    margin-top: 10px;
}

/* 4th Section */

.fourth-gradient {
    color: #fff;
    border-radius: 16px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    background-image: url(bg-products.png);
    background-repeat: repeat;
    background-position: right bottom;
    background-size: cover;
    margin-bottom: 40px;
}

.fourth-gradient .prod-wrapper {
    display: flex;
    justify-content: left;
    align-items: baseline;
    flex-direction: column;
    text-align: left;
}

.prod-text-subcontent {
    color: #FCFDFF;
    font-size: 32px;
}

.fourth-gradient #blue-product-cards {
    display: block;
    padding-left: 0px;
}

.fourth-gradient .blue-product-card {
    background-image: url(../css/bg-products/index-bg.png);
    height: 146px;
    width: 100%;
    padding: 31px;
    text-align: left;

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left;
}

.fourth-gradient {
    display: flex;
    gap: 40px;
}


.fourth-gradient .cta-illustration {
    flex-basis: 50%;
    max-width: 50%;
    flex: none;
    position: relative;
}

.fourth-gradient .prod-text {
    padding-left: 20px;
}

#fifth .subtext {
    color: #0068EE;
    font-size: 32px;
    font-weight: 600;
}

.marginTop {
    margin-top: 40px;
    margin-bottom: 10px;
}

@media (max-width: 1024px) {

    #product-cards,
    #blue-product-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .r-info {
        display: none;
    }

    .l-info {
        width: 100%;
    }

    .product-card,
    .blue-product-card {
        height: 220px;
        padding: 30px;
        margin-bottom: 20px;
    }

    .product-card-header span {
        font-size: 24px;
    }

    .product-card-content p {
        font-size: 20px !important;
    }

    .section-3 .product-card {
        height: 260px;
        padding: 30px;
        margin-bottom: 20px;
        background-position: left;
    }
    .fourth-gradient .blue-product-card {
    background-image: url(../css/bg-products/index-bg.png);
    height: 174px;
    width: 100%;
    padding: 31px;
    text-align: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}
}

@media (max-width: 768px) {
    .section-3 {
        display: block;
    }

    .prod-text-content {
        text-align: center;
        margin-bottom: 10px;
    }

    .prod-text-subcontent {
        margin-top: 8px;
        text-align: center;
    }

    #blue-product-cards {
        margin-top: 20px;
    }

    .fourth-gradient .blue-product-card {
        background-image: url(../css/bg-products/wf-bg.png);
        height: 211px;
        width: 100%;
        padding: 24px;
        text-align: left;
        background-repeat: no-repeat;
        background-position: left;
    }

    .l-info .product-card {
        background-position: left;
        background-image: url(../css/bg-products/gpt-bg.png);
        background-size: 100%;
    }

    #blue-product-cards {
        padding: 0px !important;
    }

    .cta-gradient-full .blue-product-card {
        background-size: 100% !important;
        background-repeat: no-repeat !important;
    }

    #product-cards,
    #blue-product-cards {
        grid-template-columns: 1fr;
    }

    .r-info {
        display: none;
    }

    .l-info {
        width: 100%;
    }

    .product-card,
    .blue-product-card {
        height: 220px;
        padding: 30px;
        margin-bottom: 20px;
    }

    .product-card-header span,
    .blue-product-card-header span {
        font-size: 24px;
    }

    .product-card-content p,
    .blue-product-card-content p {
        font-size: 18px !important;
    }
}