/* announcement bar Css */
.announcement-bar {
  position: sticky;       /* Sticks to top */
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background-color: #1A1A1A; /* Dark red/black tone */
  color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 50;            /* Keeps above other elements */
  font-family: 'DM Sans', sans-serif;
}

/* Scrolling text */
.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 17s linear infinite;   /* this control animation speeds */
  font-size: 15px;
  font-weight: 500;
  /* padding-left: 25%; */
}

.marquee p {
  display: inline-block;
  margin: 20px; /* spacing between messages */
}

/* Animation keyframes */
@keyframes scroll-left {
  0% {
    transform: translateX(10%); /* start off-screen right */
  }
  100% {
    transform: translateX(-40%); /* move off-screen left */
	}
} 

/* HAPPY END! */
/* Animation with no friction is combination of animation second - and both 2 transforms */