Why isn't my button working? Its not clicking, not hovering...anything - css

Question

Please look at the link here:
http://finsfunding.com/funditnow/
go to the bottom where the blue button says "get pre-approved" next to the iphone x. I need to know why this button isn't working when i'm using it successfully in other parts of the page and site (same class, same behavior).
Also, before anyone suggests, I've played around with about 1000 z-index values already, so that isn't it. Im baffled as to why the button doesn't work.

Answer 1

Change #iPhoneText_Container to z-index: 1, and add the following to #iPhone_blue:
position: relative;
z-index: 5;

Answer 2

If you eliminate the z-index: -100 from the #iPhoneText_Container it will solve the problem.
However it will ruin your phone img.
#iPhoneText_Container {
float: left;
position: absolute;
margin: 150px 0 0 75px;
}
Update:
If you remove background-color: #FFFFFF; from #IphoneTextBlock it will solve the problem
#iPhoneTextBlock {
width: 70%;
padding: 20px;
margin: 0 0 0 90px;
font-family: 'Montserrat',! sans-serif important;
position: ;
border: solid 0px #000;
-webkit-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
-moz-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
}

Answer 3

If you see the "Start Here" button div is on top of page (z-index is high for parent div) you have written and hence hover effect on #ApplyNow_button:hover is working.
But for pre-approved button/div, even though you have hover styles for steps-button div(.steps-button:hover), this is being intercepted by some other div on the page.
<div class="steps-button" style="float: left">Get Pre-Approved</div>
I noticed that iPhoneText_Container is placed below all the divs. Set z-index of iPhoneText_Container to 99999 which will fix the issue.
#iPhoneText_Container {
float: left;
position: absolute;
margin: 150px 0 0 75px;
z-index: 99999;
}
Or you can simply add below css to your styles.
#iPhoneText_Container {
z-index: 99999 !important;
}