# Brand color variables and utility classes

/*
 * These CSS custom properties define the core color palette for the Tellap Technology
 * Solutions website. The values were extracted from the provided logo and refined to
 * create a harmonious system. To adjust the look and feel of the site you only
 * need to modify these values. The rest of the site leverages the Tailwind CSS
 * utility framework for layout and sizing.
 */

:root {
  --color-primary: #1A75BB;        /* medium blue derived from logo dots */
  --color-primary-dark: #1A4869;   /* deep blue used for dark backgrounds and text */
  --color-primary-light: #98ACBC;  /* light blue for subtle accents and backgrounds */
  --color-text: #333333;           /* high contrast body text color */
  --color-muted: #666666;          /* muted grey for secondary text */
  --color-accent: #F29C38;         /* warm accent for call‑to‑action highlights */
}

/* Utility classes for browsers that don't support Tailwind's custom
   configuration. These classes can be used within plain HTML or
   additional CSS rules. They are intentionally minimal since most
   styling comes from Tailwind.
*/

.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-primary-light { color: var(--color-primary-light); }
.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }

/*
 * Logo carousel animation
 * The partners section uses a horizontally scrolling row of logos to
 * showcase technology partners. To create a smooth, continuous scroll
 * effect we apply the scroll animation to the track container and
 * duplicate the set of logos in the markup. Adjust the duration to
 * speed up or slow down the movement. The negative translateX value
 * should be half of the track’s total width so the duplicate set
 * begins where the first ends.
 */
/* Adjusted speed: reduce duration for smoother scrolling on mobile devices */
/* Increase the scroll speed on mobile by reducing duration */
.logo-track {
  animation: scroll 15s linear infinite;
  /* prevent wrapping so logos stay on one line */
  white-space: nowrap;
}

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