.font-roboto-slab {
    font-family: "Roboto Slab", serif;
}

.font-roboto {
    font-family: "Roboto", sans-serif;
}

.font-roboto-serif {
    font-family: "Roboto Serif", serif;
}

.horizontal-media-scroller-brands {
    --size: 120px;
    --gap: 100px;
    display: flex; /* Changed from grid to flex */
    gap: var(--gap);
    padding: 0 var(--gap);
    overflow-x: scroll; /* Changed from auto to scroll */
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; /* Changed from inline to x */
    scroll-padding-inline: var(--gap);
    -webkit-overflow-scrolling: touch; /* Added for smooth scrolling on iOS */
    width: 100%; /* Added explicit width */
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

/*  container padding fix  */
.horizontal-media-scroller-brands > li:last-of-type .card-container {
    position: relative;
}

.horizontal-media-scroller-brands > li:last-of-type .card-container::after {
    display: none;
}

.horizontal-media-scroller-brands .card-container {
    scroll-snap-align: start;
    display: flex;
    align-items: center;
}

.horizontal-media-scroller-brands .list-container {
    flex: 0 0 auto; /* Added flex properties */
    display: flex; /* Changed from inline-block */
    align-items: center;
    @media (prefers-reduced-motion: no-preference) {
        transition: outline-offset 0.25s ease;
    }
}

.horizontal-media-scroller-brands .list-container:focus {
    outline-offset: 7px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.horizontal-media-scroller-brands::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.horizontal-media-scroller-brands {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.horizontal-media-scroller-service {
    --size: 360px;
    --gap: 32px;
    display: grid;
    grid-auto-flow: column;
    gap: calc(var(--gap) / 2);
    margin: 0;
    padding-inline-start: var(--gap);
    padding-inline-end: var(--gap);
    padding-block-start: calc(var(--gap) / 2);
    padding-block-end: calc(var(--gap) / 2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-left: var(--gap);
    scroll-padding-right: var(--gap);
    scroll-padding-inline: var(--gap);
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

/*  container padding fix  */
.horizontal-media-scroller-service > li:last-of-type .card-container {
    position: relative;
}

.horizontal-media-scroller-service > li:last-of-type .card-container::after {
    content: "";
    position: absolute;
    inline-size: var(--gap);
    block-size: 100%;
    inset-block-start: 0;
    inset-inline-end: calc(var(--gap) * -1);
}

.horizontal-media-scroller-service .card-container {
    scroll-snap-align: start;
}

.horizontal-media-scroller-service .list-container {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    outline-offset: 12px;
    @media (prefers-reduced-motion: no-preference) {
        transition: outline-offset 0.25s ease;
    }
}

.horizontal-media-scroller-service .list-container:focus {
    outline-offset: 7px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.horizontal-media-scroller-service::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.horizontal-media-scroller-service {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


/* Remove arrows for Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Remove arrows for Firefox */
input[type="number"] {
    -moz-appearance: textfield !important;
}

.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Added to ensure content stays contained */
}

.marquee-content {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
    animation: marquee 40s linear infinite; /* Increased duration */
    width: max-content; /* Added to ensure proper content width */
}

.marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 2rem)); /* Adjusted to account for gap */
    }
}

/* Optional: Pause animation on hover */
.marquee-content:hover {
    animation-play-state: paused;
}