1. I am attempting to create a template override that will change the background and text color for the CTA particle that is in the footer section of my layout, all without affecting the style of any of the other particles/modules also in the footer.

2. Also need the particle to be vertically aligned, as you can see from Screenshot-1, the box is floating to the top right corner within the layout position.

Attachment-1 shows the particle position without a custom.scss.

Attachment -2 show the particle position with the custom.scss I created. In this example, my css code is changing the title color on the other positions in the footer. My desire is is only change the CSS on the position where I have placed the CTA particle and nothing else.

I've attempted numerous configurations in the scss as you can see below. Any help would be greatly appreciated.
Thanks
David

 padding: 25px;

  background: #ffffff;

  color: #8C489F;

}



.shd-boxwhite .g-title {

  color: #fff !important;

  border-bottom: 1px solid #8C489F;

  padding-bottom: 15px;

}



.shd-boxwhite .g-title span:before, .shd-boxwhite .g-title span:after {

  display: none;

}



.shd-boxwhite .button {

  background: #2d3d4d;

}



.shd-boxwhite .button:hover {

  background: #40576d;

  color:#fff;

}



.shd-boxwhite a {

  color: #ecf0f1;

}



.shd-boxwhite a:hover {

  color: #dde4e6;

}



.shd-boxwhite .g-cta-button.style1 .g-cta-inner {

	padding: 10px;

	background: #fff;

	color: #8C489F;

}







/* additional code I've tried */



/*shd-boxwhite #g-footer h1, #g-footer h2, #g-footer h3, #g-footer h4, #g-footer h5, #g-footer h6, #g-footer strong {

	color: #8C489F;

	font-size: 1.35rem;

} */