/* =====================
       COLORS
       ===================== */
    :root {
      --bg-primary: #fdfdfd;        /* Page background */
      --bg-secondary: #1e1e2f;      /* Header / nav / banner */
      --primary-text: #1e1e2f;      /* Dark text for readability */
      --secondary-text: #ffffff;    /* Light text for dark areas */
      --muted-text: #6c757d;        /* Muted info text */
      --accent-color: #4a90e2;      /* Buttons / highlights */
      --accent-hover: #357ab8;      /* Hover for buttons / links */
      --border-default: #cccccc;
      --border-strong: #3a3a4f;
    }

    /* =====================
       GLOBAL STYLES
       ===================== */
    body {
      font-family: 'Inter', Helvetica, sans-serif !important;
      background-color: var(--bg-primary);
      color: var(--primary-text);
      margin: 0;
      padding: 0;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', Helvetica, sans-serif !important;
      letter-spacing: 0.2px;
    }

    a {
      color: var(--primary-text);
      text-decoration: none;
    }
    a:hover, a:focus {
      color: var(--accent-hover);
      text-decoration: underline;
    }

    .primary-text { color: var(--primary-text) !important; }
    .secondary-text { color: var(--secondary-text) !important; }
    .muted-text { color: var(--muted-text) !important; }

    /* =====================
       BUTTONS
       ===================== */
       /* =====================
   BUTTONS – MODERN SAAS
   ===================== */

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  padding: 0.65em 1.6em;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;

  border-radius: 0.6rem;
  border: 1px solid transparent;

  background-color: var(--accent-color);
  color: var(--secondary-text);

  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;

  font-family: 'Montserrat', Helvetica, sans-serif;
}

/* Hover = darker accent, not black */
.site-button:hover,
.site-button:focus {
  background-color: var(--accent-hover);
  box-shadow: 0 6px 18px rgba(74, 144, 226, 0.35);
  transform: translateY(-1px);
  outline: none;
    color: var(--secondary-text);

}

/* Pressed */
.site-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(74, 144, 226, 0.3);
}

/* Secondary button */
.site-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  padding: 0.65em 1.6em;
  font-weight: 600;
  font-size: 0.95rem;

  border-radius: 0.6rem;
  border: 1px solid var(--border-default);

  background-color: #ffffff;
  color: var(--primary-text);

  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;

  font-family: 'Montserrat', Helvetica, sans-serif;
}

.site-secondary-button:hover,
.site-secondary-button:focus {
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
  transform: translateY(-1px);
  outline: none;
  color: #ffffff;
  background: var(--bg-secondary);
}

.site-secondary-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.15);
}

    /* =====================
       HEADER / NAVBAR
       ===================== */
    .navbar {
      background-color: var(--bg-secondary);
      border-bottom: 1px solid var(--border-strong);
    }

.dark-bg {
  background: linear-gradient(135deg, var(--bg-secondary), #000000);
}


    /* =====================
       BANNER
       ===================== */
    .banner {
      width: 100%;
      background-color: var(--bg-secondary);
      padding: 12px 0;
      font-family: 'Montserrat', Helvetica, sans-serif;
      {% comment %} border-top: 1px solid var(--accent-color); {% endcomment %}
      border-bottom: 1px solid var(--accent-color);
      color: var(--secondary-text);
      font-weight: 600;
      overflow: hidden;
    }

    .banner-track {
      display: flex;
      white-space: nowrap;
      align-items: center;
      gap: 2rem;
      animation: banner-scroll 30s linear infinite;
      font-size: 1.1rem;
      user-select: none;
    }

    .banner-track:hover,
    .banner-track:focus {
      animation-play-state: paused;
    }

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

    .banner-item {
      padding: 0 2rem;
      opacity: 0.95;
    }
    .banner-item:hover {
      opacity: 1;
    }

    @media (max-width: 576px) {
      .banner-track {
        font-size: 1rem;
        gap: 1rem;
      }
      .banner-item {
        padding: 0 1rem;
      }
    }

    .w-fit { width: fit-content; }


    {% comment %} width horzitoanl scroll fix {% endcomment %}

    /* Prevent any horizontal overflow */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Hides horizontal scrollbar */
  box-sizing: border-box;
}

/* Make all elements include padding/border in width */
*, *::before, *::after {
  box-sizing: inherit;
}

/* Ensure images and videos scale inside container */
img, video {
  max-width: 100%;
  height: auto;
}

/* Fix banner-track and any scrolling flex container */
.banner-track {
  max-width: 100%;
  flex-shrink: 0;
}

/* Prevent other flex containers from overflowing */
.container, .row, .d-flex {
  max-width: 100%;
}