:root {
--deensimc-text-dark-gray: #555353;
--deensimc-gap: 0px; 
--deensimc-duration: 30s;
--deensimc-scroll-distance: calc(100% + var(--deensimc-gap));
--deensimc-color-white: #ffffff;
} .deensimc-marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--deensimc-gap);
position: relative;
} .deensimc-marquee.deensimc-shadow.deensimc-marquee-horizontal::before {
content: "";
height: 100%;
width: 40px;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
z-index: 1;
}
.deensimc-marquee.deensimc-shadow.deensimc-marquee-horizontal::after {
content: "";
height: 100%;
width: 40px;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
top: 0;
right: 0;
transform: translateX(100%);
z-index: 1;
}
.deensimc-marquee.deensimc-shadow.deensimc-marquee-vertical::before {
content: "";
height: 20px;
width: 100%;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
z-index: 1;
}
.deensimc-marquee.deensimc-shadow.deensimc-marquee-vertical::after {
content: "";
height: 20px;
width: 100%;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
z-index: 1;
} .deensimc-marquee-group {
white-space: nowrap;
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: 20px;
animation: deensimc-scroll-x var(--deensimc-duration) linear infinite;
}
.deensimc-text-marquee .deensimc-marquee-group {
white-space: normal;
}
.deensimc-text-marquee .deensimc-scroll-text {
margin-bottom: 0px;
margin-top: 0px;
}
.deensimc-text-marquee .deensimc-marquee-group svg {
height: 20px;
width: 20px;
}
.deensimc-paused {
animation-play-state: paused !important;
}
.deensimc-marquee-group:nth-child(2),
.deensimc-marquee-group:nth-child(3),
.deensimc-marquee-group:nth-child(4) {
margin-left: 20px;
}
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(2), 
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(3), 
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(4) {
margin-top: 20px;
margin-left: 0px;
}
.deensimc-marquee .deensimc-img-wrapper {
display: grid;
place-items: center;
}
.deensimc-marquee .deensimc-text-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.deensimc-marquee img {
width: 250px;
height: 100%;
}
.deensimc-marquee-vertical img {
width: 250px;
} @keyframes deensimc-scroll-x {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-1 * var(--deensimc-scroll-distance)));
}
}
@keyframes deensimc-scroll-y {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-1 * var(--deensimc-scroll-distance)));
}
}
@keyframes fade {
to {
opacity: 0;
visibility: hidden;
}
} .deensimc-wrapper {
display: flex;
flex-direction: column;
gap: var(--deensimc-gap);
margin: auto;
max-width: 100vw;
}
.deensimc-wrapper-vertical {
flex-direction: row;
height: 100vh;
justify-content: center;
}
.deensimc-marquee-vertical,
.deensimc-marquee-vertical .deensimc-marquee-group {
flex-direction: column;
}
.deensimc-marquee-vertical .deensimc-marquee-group {
animation-name: deensimc-scroll-y;
}
.deensimc-marquee-reverse .deensimc-marquee-group {
animation-direction: reverse;
animation-delay: -3s;
}  @media (prefers-reduced-motion: reduce) {
.deensimc-marquee-group {
animation-play-state: paused;
}
} @media (max-width: 881px) {
.deensimc-marquee.deensimc-shadow.deensimc-marquee-vertical::before {
content: "";
height: 100%;
width: 40px;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
z-index: 1;
}
.deensimc-marquee.deensimc-shadow.deensimc-marquee-vertical::after {
content: "";
height: 100%;
width: 40px;
box-shadow: 0px 0px 100px 10px var(--deensimc-text-dark-gray);
position: absolute;
top: 0;
right: 0;
left: unset;
transform: translateX(100%);
z-index: 1;
}
.deensimc-wrapper-vertical {
display: flex;
flex-direction: column;
gap: var(--deensimc-gap);
margin: auto;
max-width: 100vw;
}
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(2), 
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(3), 
.deensimc-wrapper-vertical .deensimc-marquee-vertical .deensimc-marquee-group:nth-child(4) {
margin-top: 0px !important;
margin-left: 20px !important;
}
.deensimc-marquee-vertical,
.deensimc-marquee-vertical .deensimc-marquee-group {
flex-direction: row !important;
}
.deensimc-marquee-vertical .deensimc-marquee-group {
animation-name: deensimc-scroll-x !important;
}
}