parallax.js - links not clickable and cursor : pointer not working

I have a few images working as social media links. I added parallax.js (http://wagerfield.github.io/parallax/) to add the parallax effect, and after that, I can't click on my links. I have also added cursor:pointer which is not working when hovered on the links. I have tried to play around with the position:relative and z-index but I can't solve the bug.

Thanks in advance for the help.

The section in question, the social media links on the bottom right are not clickable - https://rimildeyjsr.github.io/spotify-circle-animation/#contact

HTML

<div class="section" id="section4">
        <h1>Contact</h1>

        <div class="group layer container-4" data-depth="0.8">
            <div class="left">
                <h3>Cheerio !</h3>
                <img src="images/emoji.png" alt="smiley with sunglasses" class="smiley">
            </div>
            <div class="right">
                <div class="group">
                    <div class="left-small">
                        <div class="rectangle"></div>
                    </div>
                    <div class="right-large">
                        <p>Hey, thanks for visiting my website.<br>
                            If you want to get in touch with<br>
                            me, shoot me an email or a<br>
                            tweet. I’m fun to talk to <br>
                            (seriously)
                        </p>
                        <div>
                            <a href="https://twitter.com/hackertronix">
                                <img src="images/fill-1.svg" class="social-img twitter-img">
                            </a>
                            <a href="https://dribbble.com/hackertronix">
                                <img src="images/dribbble-logo-preview@3x.png" class="social-img svg-size">
                            </a>
                            <a href="https://github.com/hackertronix">
                                <img src="images/git-hub-mark@3x.png" class="social-img svg-size">
                            </a>
                            <a href="mailto:hello@hackertronix.com">
                                <img src="images/shape.svg" class="social-img">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layer" id="circle-wrapper-1-4" data-depth="0.6"></div>
        <div class="layer" id="circle-wrapper-2-4" data-depth="0.5"></div>
        <div class="layer" id="circle-wrapper-3-4" data-depth="0.4"></div>
    </div>

CSS:

.container-4 {
    position: relative;
    z-index: 20;
    top: 9% !important;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
}

#circle-wrapper-1-4,
#circle-wrapper-2-4,
#circle-wrapper-3-4
{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#circle-wrapper-1-4
{
    z-index: 15;
}

#circle-wrapper-2-4{
    z-index: 10;
}

#circle-wrapper-3-4{
    z-index: 5;
}

#section4 h1,#section4 h3, #section4 p {
    position: relative;
    z-index: 20;
    display: block;
    text-align: left;
    top: 5%;
    left: 8%;
    color: #FFFFFF;
}

#section4 h1,#section3 h1 {
    margin: 0;
    top: 3.5%;
    font-family: Graphik, Roboto;
    font-weight: 600;
}


.left {
    float: left;
    width: 49%;
    opacity: 0;
    position: relative;
    z-index: 20;
}

.right {
    float: right;
    width: 51%;
    position: relative;
    z-index: 20;
}

.right-large {
    float: right;
    width: 90%;
    opacity: 0;
    position: relative;
    z-index: 20;
}

.left-small {
    float: left;
    width: 10%;
    position: relative;
    z-index: 20;
}

.group:after {
    content:"";
    display: table;
    clear: both;
}

#section4 h3 {
    font-family: Graphik, Roboto;
    color: white;
    font-size: 6em;
    margin: 29% 0 7%;
}

#section4 img {
    position: relative;
    z-index: 20;
}

.smiley {
    height: 180px;
    width: auto;
    margin: 0 22%;
}

#section4 p {
    font-family: Graphik-Regular, Roboto;
    color: white;
    font-size: 2em;
    margin: 15% auto;
    line-height: 1.55em;
    position: relative;
    z-index: 20;
}

.social-img {
    height: 4%;
    width: auto;
    margin: 0 63px 0 0;
    position: relative;
    z-index: 20;
    cursor: pointer;
}

.svg-size {
    height: 53px;
}

.twitter-img {
    margin-left: 8%;
}

.rectangle {
    width: 12px;
    height: 600px;
    border-radius: 100px;
    background-color: #ffffff;
    margin-top: 50%;
    position: relative;
    z-index: 20;
}

The parent most class .fullpage-wrapper has pointer-events:none which prevents the default behavior of anchor element.

Either you can run through your js code and remove that or you can add the following in css, which allows the mouse event.

.layer {
   pointer-events: auto;
}