body {
    height: 100%;
}
body::before {
    background-image: url(/images/contact-page-bg.jpg);
}

/*------------------------------------------------------------------------- SECTION: HEADER
*/
section.header p {
    width: 100%;
    max-width: 480px;
}

/*------------------------------------------------------------------------- SECTION: CONTACT POINTS
*/
.contact-points ul.icon-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.contact-points ul.icon-list li {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, rgba(6,9,24,0.25) 0%, rgba(25, 120, 252, 0.5) 100%); 
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 240px;
}
.contact-points ul.icon-list li:hover {
    cursor: pointer;
}
.contact-points ul.icon-list li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    right: 20px;
    aspect-ratio: 10;
    width: 160px;
    background: url(/images/shiny.png) center center / 100% no-repeat;
    mix-blend-mode: screen;
}
.contact-points ul.icon-list li.whatsapp {

    background: #075e54;
}
.contact-points ul.icon-list li.whatsapp a {
    display: block;
    margin: 0 auto 20px;
    width: 100%;
    aspect-ratio: 1;
    max-width: 120px;
    font-size: 0;
    background: url(/images/whatsapp-qrcode.svg) center center / 100% no-repeat;
}
.contact-points ul.icon-list li.whatsapp a:hover {
    filter: brightness(120%);
}
.contact-points ul.icon-list li .icon { 
    border: none;
    width: 60px;
    height: 60px;
}
.contact-points ul.icon-list li .icon::before { 
    filter: invert(1);
    background-size: 100%;
}

.contact-points .container > p {
    text-align: center;
    color: var(--c3LightGrey);
    margin-top: 40px;
}