.scrolling-text {
  width: 100%; /* Full width of the container */
  overflow: hidden;
	height: 100px;
	padding-top: 50px;
	padding-bottom: 50px;
  white-space: nowrap;
  position: relative;
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent); /* For Safari */
	direction: rtl
}

.scrolling-text span {
  display: inline-block;
  font-size: 80px;
  	font-family: "Cairo", sans-serif;
width: 100%; /* Ensure the text spans the full width */
  text-align: right; /* Center the text inside the div */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  animation: scrollText 30s linear infinite;
	transform: translateX(0%);
	line-height: 80px;
	color: var(--primary-color)
}

@keyframes scrollText {
  0% {
    transform: translateX(-100%); /* start outside from left */
  }
  100% {
    transform: translateX(100%); /* move to right */
  }
}
@media screen and (min-width: 505px) and (max-width: 1100px) {
	
}
@media screen and (max-width: 500px) {
	.scrolling-text {
 
	padding-top: 20px;
	padding-bottom: 0px;

}
	.scrolling-text span {
  
  font-size: 58px;
  
}
}