How do I change the overlay color for one index section (Sofia)?

Hi all, I am slowly learning CSS but inevitably have problems with syntax between different themes. I'm trying to change the background color (technically an overlay in this case) for the Services section on this index page. The collection ID is 59e653fc8fd4d2e4bc8651b2, which I've tried to incorporate in various ways, but I cannot get the bloody syntax right.

Sofia (Brine family) has two overlays that alternate on indexes, so sometimes if you want to change the color on one section the overlay will ruin an image on another section.

I'm trying to change the color to hsla(28, 100%, 44%, 0.18).

The site in question:

https://www.joannethedoglady.com

Thanks for any and all help, hopefully I'll be asking less questions in the future and answering more!

Hey there,

Instead of using the Collection ID to change background colors, you can use the pagename.

This should work instead:

#services { background-color: #e06900; }

I know right? It's much easier than you'd expect.I hope this works for you!

Wow, I guess I was overthinking it. Thanks so much!

Thank you! That was so brilliantly simple :)

Thanks for this... I have the same need, but then also need to switch the font color in this section for body and headings. Can anyone help? I want the font to be white.

1 hour ago, KingdomCreativeCo said:

Thanks for this... I have the same need, but then also need to switch the font color in this section for body and headings. Can anyone help? I want the font to be white.

Can you share link to your site? We can take a look