Review

@import url(‘https://fonts.googleapis.com/css2?family=Archivo:wght@700&display=swap’);

.marquee-container {
font-family: ‘Archivo’, sans-serif;
font-size: 64px;
white-space: nowrap;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
}

.marquee-text {
display: flex;
min-width: 200%; /* Ensures continuous loop */
animation: marquee 30s linear infinite; /* Infinite scrolling */
color: #1E2C4C;
}

.marquee-text span {
display: flex;
align-items: center;
padding: 0 15px;
font-weight: 700;
-webkit-text-stroke: 1px black;
color: white;
transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.diamond {
color: #DB1E58;
font-size: 39px;
width: 29px;
height: 39px;
margin: 0 10px;
}

/* Hover effect – fills color to #212D65 */
.marquee-text span:hover {
color: #212D65;
background: none;
-webkit-background-clip: unset;
}

/* Animation */
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

/* Responsive adjustments */
@media (max-width: 1024px) {
.marquee-container {
font-size: 40px;
}
.diamond {
font-size: 30px;
width: 24px;
height: 30px;
}
}

@media (max-width: 768px) {
.marquee-container {
font-size: 30px;
}
.diamond {
font-size: 25px;
width: 20px;
height: 25px;
}
}

@media (max-width: 480px) {
.marquee-container {
font-size: 24px;
}
.diamond {
font-size: 20px;
width: 16px;
height: 20px;
}
}