/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
 
  /* Make marquee full width - breaking out of container */
  .custom-marquee {
      position: relative;
      overflow: hidden;
      width: 100vw !important; /* Full viewport width */
      margin-left: calc(-50vw + 50%) !important; /* Break out of container */
      background-color: #fff;
      color: rgb(44, 90, 160);
      font-size: 14px;
      line-height: 14px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 7px 0 5px 0;
      z-index: 999;
      border-bottom: 1px solid rgba(44, 90, 160, 0.1);
  }

  /* If marquee is inside header builder element */
  .whb-html-block .custom-marquee {
      width: 100vw !important;
      margin-left: calc(-50vw + 50%) !important;
      margin-right: calc(-50vw + 50%) !important;
  }

  /* Remove any WoodMart container padding/margins affecting marquee */
  .whb-row .custom-marquee,
  .whb-column .custom-marquee {
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
  }

  /* Target the parent HTML block to be full width */
  .whb-html-block:has(.custom-marquee) {
      width: 100vw !important;
      margin-left: calc(-50vw + 50%) !important;
      margin-right: calc(-50vw + 50%) !important;
      padding: 0 !important;
  }

  .custom-marquee .marquee-content-wrapper {
      display: flex;
      width: max-content;
  }

  .custom-marquee .marquee-content {
      display: flex;
      animation: marquee-scroll 30s linear infinite;
  }

  .custom-marquee .marquee-content > div {
      flex-shrink: 0;
      margin-right: 20px;
      white-space: nowrap;
  }

  .custom-marquee .marquee-highlight {
      color: #000;
      font-weight: 700;
  }

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

  .custom-marquee:hover .marquee-content {
      animation-play-state: paused;
  }

  @media (max-width: 768px) {
      .custom-marquee {
          font-size: 12px;
          line-height: 12px;
          padding: 6px 0 4px 0;
      }

      .custom-marquee .marquee-content {
          animation: marquee-scroll 20s linear infinite;
      }
  }