Profile-card-component

👾Hello again Eman, congratulations for your new solution!

I saw that you've used two divs to import the circle images, a better way to do it is import both using the body with two keys properties, background-image and background-position, note that the comma inside each properties declare the single modification for each circle separated.

Before doing these changes set the two divs with the circles and add display: none or just remove it

Here's your solution code with background applied:

main {
    background-color: hsl(185deg, 75%, 39%);
    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top -569px left -56px, bottom -649px right 222px;
    background-color: hsl(185, 75%, 39%);
    width: 100%;
    height: 100vh;
    position: relative;
}

👋 I hope this helps you and happy coding!