body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container-shop {
    position: relative;
    text-align: left;
    color: white;
    width: 100%;
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
}

.background-image-shop {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
    /*clip-path: inset(15% 0 15% 0);*/
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
}

.text-block-shop {
    position: absolute;
    top: 20%;
    left: 10%;
    padding: 20px;
    border-radius: 10px;
    width: 35%;
    z-index: 1;
    color: white;
}

.text-block-shop p {
    font-size: 0.75em;
    line-height: 1.8em;
    font-weight: bold;
}

.content-container {
    margin-left: 0%;
}

.payment-options {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    z-index: 1;
}

.payment-icons {
    display: flex;
    margin-top: 10px;
}

.payment-icons span {
    margin-right: 10px; /* Add space between the icons */
}

.products {
    display: flex;
    justify-content: flex-start;
    z-index: 1;
}

.product {
    position: relative;
    text-align: center;
    color: black;
    margin-right: 20px; /* Adjust this value to control spacing between products */
}

.product img {
    width: 120px; /* Increase image size by 20% */
    height: auto;
    display: block;
    position: relative;
    opacity: 0.8; /* Make the image slightly opaque */
}

.product p {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: bold; /* Apply bold font */
    margin: 0;
    font-size: 12px; /* Make the titles smaller */
    width: 100%; /* Ensure the text is centered */
    text-align: center;
}

.discount-circle {
    position: absolute;
    top: 35%; /* Adjust the top position to raise the circle */
    right: 25%; /* Move the circle away from the right side by approximately 10% */
    transform: translateY(-50%);
    width: 200px; /* Adjust the size of the circle */
    height: 200px; /* Adjust the size of the circle */
    background-color: #FFA500; /* Orange color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 22px; /* Adjust the font size */
    font-weight: bold;
    padding: 10px;
    z-index: 1;
}

.discount-circle p {
    margin: 0;
    font-size: 1.2em; /* Adjust font size for "UP TO" */
    line-height: 1.2em; /* Adjust line height for proper spacing */
}

.discount-circle p span {
    display: block;
    font-size: 1.5em; /* Adjust font size for "30%" */
    margin-top: 5px;
}

.shoe-image {
    position: absolute;
    top: 35%;
    /*bottom: 5%;*/
    right: 5%;
    width: 500px; /* Adjust the size of the shoe image */
    height: auto;
    transform: rotate(0deg); /* Optional: slightly rotate the shoe for a dynamic effect */
    z-index: 1;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .container-shop {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        background-image: none; /* Remove the background image */
        padding: 0;
        margin: 0;
        width: 100%; /* Ensure the container takes the full width */
    }

    .background-image-shop {
        display: none; /* Hide the background image */
    }

    .text-block-shop {
        position: absolute;
        width: 100%; /* Make the text block take the full width */
        margin: 0; /* Remove margin */
        padding: 20px; /* Add padding for better readability */
        padding-left: 0; /* Remove padding on the left */
        z-index: 1;
        background-image: url('newassets/images/shop/fe22d87b-1384-4004-95d6-c10bf7df918d/{{themesettings.shop.backgroundImage}}'); /* Use the background image */
        background-size: cover; /* Cover the entire block */
        background-position: center; /* Center the background image */
        color: white; /* Ensure text is readable over the background image */
        /*border-radius: 0; /* Remove border-radius */
        /*box-sizing: border-box; /* Ensure padding is included in the width */
        text-align: left; /* Align text to the left */
        left: 0; /* Align the text block to the left edge */
    }

    .payment-options {
        align-items: center;
        margin-top: 20px;
        z-index: 1;
    }

    .products {
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }

    .product {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .product img {
        width: 80px; /* Adjust image size for mobile */
    }

    .product p {
        font-size: 14px;
    }

    .discount-circle,
    .shoe-image {
        display: none;
    }
}