css

.hero-ramadhan {
    background: linear-gradient(#3837371a, rgba(109, 8, 88, 0.73)), url(https://sharinghappiness.org/files/ramadhan2019/bg-landing-page.jpg);
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;

    .hero-headline {
        margin-top: 8%;

        h1 {
            line-height: 1.5em;
        }

        h3 {
            line-height: 1.5em;
        }
    }

    .btn--scroll-down {
        cursor: pointer;
        position: absolute;
        bottom: 2em;
        font-size: 1.7em;
        left: 49%;
        animation: bounce 2s infinite;
    }

    .countdown {

        @media screen and (max-width: 48em){
            display: none;
        }
    }

    .counter {
        padding: 25px;
        margin: 25px 0 15px 0;
        // background-color: #000;
        border-radius: 8px;
        // box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        min-height: 80px;
        div {
            display: inline-block;
        }
    }

    .project-name {
        color: white;
        font-size: 16pt;
        margin: 5px 0;
        text-align: center;
    }

    .days,
    .hours,
    .minutes,
    .seconds {
        font-weight: 700;
        color: white;
        width: 25%;
        float: left;
        text-align: center;
        .value {
            display: block;
            font-size: 36pt;
            width: 100%;
            margin-bottom: .3em;
        }
        span {
            font-size: 8pt;
            opacity: 0.8;
            width: 100%;
            display: block;
        }
    }
    .hours::before,
    .minutes::before,
    .seconds::before {
        content: ":";
        float: left;
        font-size: 20pt;
        position: relative;
        margin-top: 10px;
        opacity: 0.7;
        animation :pink 1s ease-in-out infinite;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    40% {
      -webkit-transform: translateY(-30px);
      -moz-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      -o-transform: translateY(-30px);
      transform: translateY(-30px); }
    60% {
      -webkit-transform: translateY(-15px);
      -moz-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      -o-transform: translateY(-15px);
      transform: translateY(-15px);
    }
}

@keyframes pink {
    0% {
    opacity:1;
    }
    50% {
    opacity:0.5;
    }
    100% {
      opacity: 1;
    }
  }