@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.Manrope {
    font-family: 'Manrope', sans-serif;
}

.marquee__track {
    display: flex;
    flex-shrink: 0;
}

/* Marquee only animates when .marquee-animate class is added */
.marquee__track.marquee-animate {
    animation: marquee-scroll 7s linear infinite;
}

.marquee__content {
    display: inline-flex;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}

.max-width {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== SERVICES ACCORDION ====== */
.service-option {
    cursor: pointer;
}

.service-option .service-title {
    transition: font-size 0.4s ease;
}

/* Image container needs to establish stacking context */
#services-images {
    overflow: hidden;
}

.service-image {
    transition: z-index 0s;
}

/* ====== SCROLL BEHAVIOR ====== */
html {
    scroll-padding-top: 60px;
    /* Mobile height */
    scroll-behavior: smooth;
}

@media (min-width: 1024px) {
    html {
        scroll-padding-top: 67px;
        /* Desktop height */
    }
}

@media (min-width: 1280px) {
    html {
        scroll-padding-top: 0px;
        /* Desktop height */
    }
}