Hiding Banner on our mobile site only

Site URL: https://www.worqflowsolutions.com/copy-of-home

Hi there, as you will see on this page we have a banner on the secondary part of the index with a rocket and other such shapes. I don't want this to show on mobile since it cuts off the words and doesn't look good, but still want it on the desktop. 

I tried using this code here in our CSS, but nothing happened: 

@media screen and (max-width:767px) {
/* hide welcome banner */
[data-section-id="whatisworqflow-with-banner"] {
    display: none;
}
}

Any assistance here is most appreciated! Thanks!

I found an 'id' not a 'data-section-id'. Try this?:

@media screen and (max-width:767px) {
/* hide welcome banner */
[id="whatisworqflow-with-banner"] {
    display: none;
}
}

@ghemachandar This got rid of the whole section on mobile, but not the banner. I would still like to see the area where 'What is WorQFlow?' is located. I feel like it's on the right track though.

Oh! So, you need just the background image removed? Please try this:

@media screen and (max-width:767px) {
/* hide welcome banner */
#collection-609b09827e0a8b72f5bf4e21 .Parallax-host .Parallax-item:nth-child(2){
  display: none;
}
}

@ghemachandar This worked! Thanks so much. I was wondering what I was missing, and it was definintely the .Parallax-host .Parallax-item:nth-child(2). 

Thanks again!