.pageH1Banner {
    padding: 1.5rem;
    padding-top: 100px;
    position: relative;
    text-align: center;
    background: var(--ac-stone-gray);
    color: var(--color-light);
    border-bottom: var(--color-accent) 5px solid;

    &::before {
        content: "";
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url("../images/food-bg-old-site.jpg");
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #080708a1;
        filter: blur(.2rem) brightness(50%);
    }

    .main-title {
        z-index: 3;
        span {
            display: inline;
        }
    }

    p {
        position: relative;
        z-index: 3;
    }

    &.our-products::before{
        /* background-image: url("../images/pizza-bg-contact-form.webp"); */
    }
}

.product-categories{
    background: var(--bg-icons-garlic);
    text-align: center;

    .main-title{
        margin-bottom: 2rem;
    }

    .categories-list {
        /* border: solid red 1px; */

        display: flex;
        flex-wrap: wrap;
        gap: 3em;
        justify-content: center;
        margin-top: 4rem;

        .category-item {
            position: relative;
            background: url(../images/gray-marble-serving-background.webp) no-repeat center / cover;
            border-radius: 8px;
            box-shadow: 5px 5px 3px 0px rgb(186 186 186 / 75%);
            max-width: 270px;
            margin-top: 90px;
            margin-left: 50px;
            margin-right: 30px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: solid #08070880 1px;
        }

        .category-image{
            box-shadow: 8px 8px 0px 0px rgb(187 187 187 / 30%);
            border-radius: 24px;
            transform: translate(-15%, -15%);
            background-color: var(--color-light);
            height: auto; 
            aspect-ratio: 1/1;
        }

        .category-description {
            display: flex;
            flex-direction: column;
            align-items: center;

            .category-title {
                text-align: center;
                text-transform: uppercase;
            }

            .button {
                align-self: flex-end;
                transform: translate(30px, 50%);
                max-width: 80%;
            }
        }


    }
}