Responsive Dropdown Drop Shadow for Elementor

I created my website using the website builder Elementor and wanted to have my main menu in the header. Everything worked fine but I wanted to not have the box shadow on the mobile version of the header but at the same time keep the shadow effect on both desktop and tablet versions.

I reached out to some forums but their code did not work unfortunately. However, with some amendments to the code, I was able to create what I wanted!

Now the box shadow on the dropdown cannot be seen on mobile but it is still visible on tablet and desktop.

Here is the code that I used:

@media (max-width: 1067px) {
.elementor-nav-menu--dropdown {
box-shadow: none!important;
}
}