* {
        box-sizing: border-box;
        margin: 0;
      }
      @font-face {
        font-family: 'Dax Pro';
        src:
          url('fonts/DaxPro-Regular.woff2') format('woff2'),
          url('fonts/DaxPro-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }

      body {
        background: #282c66;
        font-family: 'Dax Pro', Arial, sans-serif;
        text-align: center;
        color: #525f83;
      }
      svg {
        display: block;
        margin: 0;
      }
      .container {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        margin: auto;
        padding: 0;
      }
      .container:before {
        padding-top: 50%;
        content: ' ';
        display: block;
        width: 1px;
      }
      .container svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      h1 {
        font-weight: normal;
        padding: 60px 0 0;
        font-size: 24px;
        color: #239c9c;
        color: #fff;
      }
      h1 + p {
        margin: auto;
        padding: 0 0 40px;
        font-size: 14px;
      }

      .timeStamp {
        position: absolute;
        right: 0;
        top: 0;
        width: 160px;
        color: #fff;
      }
      .timeStamp:before {
        position: absolute;
        top: 0;
        right: 0;
        /* background-image: linear-gradient(to left, #df5862, #FFC107); */
        display: block;
        height: 3px;
        width: calc(100% - 10px);
        content: '';
      }
      .timeStamp p {
        margin: 0;
      }
      .timeStamp .curr-time,
      .timeStamp .curr-date {
        margin-top: 20px;
        font-size: 0;
        cursor: default;
      }
      .timeStamp .curr-date,
      .timeStamp .curr-time {
        position: relative;
      }
      .timeStamp .curr-date > span,
      .timeStamp .curr-time > span {
        display: inline-block;
        width: 100%;
        line-height: 36px;
        height: 100%;
        font-size: 32px;
      }
      .timeStamp .curr-date > span > span,
      .timeStamp .curr-time > span > span {
        position: absolute;
        font-size: 10px;
        top: -20px;
        opacity: 0.5;
        font-weight: 300;
        letter-spacing: 1px;
        right: 48px;
      }
      .timeStamp .curr-date {
        margin-top: 0px;
        text-transform: uppercase;
      }
      .timeStamp .curr-date > span {
        font-size: 20px;
        opacity: 0.5;
      }

      /*================================ For pin point ==============================*/

      .glow-point {
        cursor: pointer;
      }

      .glow-point circle:first-child {
        animation: pulse 2s ease-in-out infinite;
        filter: drop-shadow(0 0 4px rgb(255, 217, 0));
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 0.6;
        }
        50% {
          opacity: 1;
        }
      }

      /* .connector-line {
        stroke: #ffd700;
        stroke-width: 1;
        fill: none;
        opacity: 0;
        pointer-events: none;
      }

      .logo-box {
        fill: white;
        stroke: #ffd700;
        stroke-width: 1;
        opacity: 0;
        pointer-events: all;
      }

      .logo-image {
        opacity: 0;
        pointer-events: all;
      } */