/* ===== SECTION CONTAINER ===== */
    .banner-section {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 600px; /* adjust section height */
      background: #111; /* background outside banner */
    }

    /* ===== BANNER STYLES ===== */
    .overlay-banner {
      position: fixed;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
      background: rgb(238, 172, 49);
      background-size: 300% 300%;
      color: #000;
      overflow: hidden;
      z-index: 99999;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      font-family: Arial, sans-serif;
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      animation: bounceIn 1s ease;
      margin-top: 50px;
    }

    .site-title {
      font-size: 1.8rem;
      font-weight: bold;
      color: red;
      margin: 0;
      padding: 0 15px;
    }

    /* ===== SCROLLING BANNER ===== */
    .scroll-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      height: 150px; /* adjust banner height */
      overflow: hidden;
      position: relative;
    }

    .scroll-track {
      display: flex;
      width: max-content;
      animation: scrollText 20s linear infinite;
    }

    .scroll-text {
      white-space: nowrap;
      font-weight: bold;
      font-size: 45px;
      padding-right: 50px; /* space between repeats */
    }

    @keyframes scrollText {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* bounce in effect */
    @keyframes bounceIn {
      0% { transform: translateY(-200%) scale(0.8); opacity: 0; }
      60% { transform: translateY(-45%) scale(1.05); opacity: 1; }
      80% { transform: translateY(-48%) scale(0.97); }
      100% { transform: translateY(-50%) scale(1); }
    }