/* Base overrides kept minimal since Tailwind is used */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #1a7b87;
  --secondary: #2596a8;
  --accent: #3bb5c9;
  --light: #e8f4f6;
  --dark: #1a3a42;
  --gold: #d4af37;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: #2c3e50
}

/* Mobile-friendly defaults */
body {
  overflow-x: hidden
}

img,
video {
  max-width: 100%;
  height: auto
}

/* Clients carousel - smooth, CSS-only marquee for better mobile performance */
@keyframes marqueeX {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.logo-carousel {
  position: relative;
  overflow: hidden
}

.logo-track {
  display: flex;
  align-items: center;
  will-change: transform;
  animation: marqueeX 30s linear infinite
}

.logo-track:hover {
  animation-play-state: paused
}

.logo-badge {
  margin-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06)
}

.logo-badge img {
  height: 64px;
  width: auto;
  object-fit: contain
}

.logo-badge .label {
  max-width: 180px;
  padding: .25rem .75rem;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/***** Custom utilities complementing Tailwind *****/
.hero-overlay {
  background: linear-gradient(135deg, rgba(26, 123, 135, .85) 0%, rgba(37, 150, 168, .75) 50%, rgba(59, 181, 201, .85) 100%)
}

.wave-mask {
  opacity: .08;
}