.footer-contact-container {
    position: relative;
    overflow-x: clip;
}
.footer-contact {
    padding: var(--section-spacing);
    text-align: center;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
    padding-bottom: 80px;
}
.footer-contact > p {
    max-width: 830px;
}
.footer-contact .h2-title {
    color: var(--colour-navy);
}
.footer-contact-container:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 25vw solid transparent;
    border-right: 75vw solid transparent;
    border-bottom: 45px solid var(--colour-white);
    position: absolute;
    z-index: 99;
    top: -45px;
}
@media screen and (min-width: 768px) {
    .footer-contact-container:after {
        display: none;
    }
    .footer-contact > a {
        max-width: 290px;
    }
}
@media screen and (min-width: 1200px) {
    @keyframes rotate360 {
        0% {
          transform: rotate( 0deg ) scale( 0.75 ) translateX(0);
        }
        
        100% {
          transform: rotate( 360deg ) scale( 1 ) translateX(100px);
        }
      }
      
      @keyframes rotate180 {
        0% {
          transform: rotate( 0deg ) scale( 1 );
        }
          
        100% {
          transform: rotate( 180deg ) skewX( 1 );
        }
      }
      @keyframes rotate90 {
        0% {
          transform: rotate( 0deg ) scale( 1 );
        }
          
        100% {
          transform: rotate( 90deg ) scale( 1.25 );
        }
      }
    
    .triangles-animated .triangle {
        width: 0px;
        height: 0px;
        border-color: transparent transparent #F6F7F8 transparent;
        border-style: solid;
        position: absolute;
        z-index: -1;
    }
    .triangles-animated .triangle-1 {
        border-width: 0 235px 120px 50px;
        transform: rotate(-10deg);
        top: 50px;
        left: 0;
        transform: scale(.75);
        animation: rotate360 60s linear infinite alternate-reverse;
    }
    .triangles-animated .triangle-2 {
        border-width: 0 240px 72px 200px;
        transform: rotate(142deg);
        bottom: 50px;
        left: 100px;
        animation: rotate180 30s linear infinite alternate;
    }
    .triangles-animated .triangle-3 {
        border-width: 0 180px 80px 80px;
        transform: rotate(90deg);
        left: 500px;
        bottom: -15px;
        animation: rotate360 50s linear infinite alternate;
    }
    .triangles-animated .triangle-4 {
        border-width: 0 50px 136px 50px;
        transform: rotate(104deg);
        bottom: -120px;
        right: 400px;
        animation: rotate90 10s linear infinite alternate-reverse;
    }
    .triangles-animated .triangle-5 {
        border-width: 0 96px 230px 23px;
        transform: rotate(107deg);
        bottom: -15px;
        right: 150px;
        animation: rotate180 25s linear infinite alternate;
    }
    .triangles-animated .triangle-6 {
        border-width: 0 240px 72px 200px;    
        transform: rotate(142deg);
        right: -50px;
        bottom: -165px;
        animation: rotate180 15s linear infinite alternate;
    }
    .footer-contact {
        padding-block: 140px;    
    }
}