/*
 * Custom Marquee Widget — style.css
 * Edit this file to customize the look globally.
 * Widget-specific overrides use inline styles generated by Elementor controls.
 */

/* ─────────────────────────────────────────
   BASE RESET FOR ALL MARQUEE INSTANCES
───────────────────────────────────────── */
.cmw-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.cmw-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}

.cmw-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cmw-logo img {
    display: block;
    object-fit: contain;
    max-width: 100%;
    height: auto;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.cmw-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ─────────────────────────────────────────
   CUSTOM OVERRIDES — Edit freely below
   These override Elementor control values.
   Use !important only when needed.
───────────────────────────────────────── */

/*
   Example: Force all logos to be 120px wide on mobile
   @media (max-width: 767px) {
       .cmw-logo img {
           width: 90px !important;
           max-width: 90px !important;
       }
   }
*/

/*
   Example: Add a subtle scale on logo hover
   .cmw-logo img:hover {
       transform: scale(1.05);
   }
*/

/*
   Example: Add a border around the whole marquee section
   .cmw-wrapper {
       border-top: 1px solid #eee;
       border-bottom: 1px solid #eee;
   }
*/

/*
   Example: Change background to dark
   .cmw-wrapper {
       background-color: #111 !important;
   }
   .cmw-logo img {
       filter: brightness(0) invert(1);
   }
*/