.page-header {
    background-color: var(--color-gray);
    background-image: url('../imgs/backgrounds/bg-header-lg.webp');
    background-position: cover;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* padding: 32px 0; */
}

.page-header .container {
    display: flex;
    gap: 64px;
    justify-content: space-between;
}

.page-header .left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 630px;
    backdrop-filter: Montserrat(8px);
    padding: 32px;
    border-radius: 16px;
}

.page-header .left .logo-image {
    height: auto;
    width: 177px;
    justify-self: center;
    align-self: center;
}

.page-header .right .product-image {
    height: auto;
    width: 500px;
}

.header-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-benefits li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 20px;
}

.header-benefits li svg {
    height: 36px;
    width: 36px;
    color: var(--color-yelow-dark);
    fill: var(--color-yelow-dark);
}


.page-header .bi-chevron-down {
    height: 64px;
    width: 64px;
    fill: var(--color-black);
}

.payment-props {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.payment-props img {
    max-height: 60px;
}

.payment-props .payment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.payment-props .payment-item .icon-content {
    border: 2px solid var(--color-black);
    padding: 16px;
    border-radius: 50%;
}

.payment-props .payment-item svg {
    height: 32px;
    width: 32px;
    fill: var(--color-black);
    font-weight: bold;
}



@media (max-width: 992px) {
    .page-header {
        background-image: none;
    }
}

@media (max-width: 428px) {
    .page-header {
        background-image: none;
    }
}


@media (max-width: 450px) {
    .page-header .left {
        padding: 16px 8px;
        backdrop-filter: Montserrat(78px);
    }

    .header-benefits li {
        font-size: 16px;
    }
}