.PedramProducts {
    margin-top: 1rem;
    overflow-x: hidden;
    position: relative;

    .content {
        background: var(--pedi-bg-color);
        color: var(--pedi-text-color);
    }

    svg:first-child {
        width: calc(176% + 1.3px);
        height: 171px;
        transform: rotateY(180deg) rotateZ(180deg);
        display: block;
        left: 50%;
        position: relative;
    }

    svg:last-child {
        width: calc(100%);
    }

    h1 {
        text-align: center;
        font-weight: 400;
        font-size: 35px;
    }

    ul {
        list-style: none;
        padding-bottom: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-around;

        li {
            cursor: pointer;
            padding: .5rem;
            border-bottom: 1px solid transparent;
            color: var(--xshop-text);
            border-radius: var(--xshop-border-radius);

            &.active {
                //text-shadow: 3px 3px 0px #000000;
                border: 1px solid var(--pedi-bg-color);
            }

            &:hover {
                background: var(--pedi-bg-color);
            }
        }
    }

    .pedi-tab {
        display: none;

        &.active {
            display: block;
        }

        padding-bottom: 2rem;
    }

    .content2 {
        background: var(--xshop-background);
        border-radius: var(--xshop-border-radius);
        padding: 1rem;
    }

    .pedi-product {
        display: block;
        border: 1px dashed var(--pedi-bg-color);
        padding: 5px;
        border-radius: var(--xshop-border-radius);
        margin-bottom: 1rem;
        overflow: hidden;
        color: var(--xshop-text);
        position: relative;

        span {
            inset-inline-end: 1rem;
            top: 1rem;
            position: absolute;
            font-size: 20px;
            color: var(--xshop-secondary);
        }

        h4 {
            padding: 1rem;
        }

        img {
            margin: 1rem;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .right-img {
        position: absolute;
        right: 0;
        top: 10rem;
    }

    .left-img {
        position: absolute;
        left: 0;
        bottom: 10rem;
    }
}

/*-968px width*/
@media (max-width: 968px) {

    .PedramProducts {
        .content2 {
            position: relative;
        }
    }

}
/*-600px width*/
@media (max-width: 600px) {

    .PedramProducts {
        .price {
            position: absolute;
            bottom: 1rem;
            inset-inline-end: 1rem;
            top: auto !important;
            background: var(--xshop-background);
            padding: 4px 10px 0 ;
            border: 1px solid var(--xshop-secondary);
            border-radius: var(--xshop-border-radius);
        }
    }

}
