/* ============================================================
   Global — Custom CSS
   Conectivo
   ============================================================ */

/* ── Reset / base ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Colors */
  --color-blue: #3532d7;
  --color-blue-dark: #2a28ac;
  --color-blue-light: #eaeafb;
  --color-orange: #f47a27;
  --color-orange-light: #fce4d3;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Transparency */
  --color-orange-60: rgba(247, 161, 103, 0.6);
  --color-orange-50: rgba(247, 161, 103, 0.5);
  --color-orange-90: rgba(247, 161, 103, 0.9);
  --color-border: rgba(255, 255, 255, 0.3);
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-base: "Plus Jakarta Sans", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 3px 4px 10px 0px rgba(0, 0, 0, 0.1);
  --shadow-md: 3px 4px 10px 0px rgba(0, 0, 0, 0.3);

  /* Layout */
  --container-max: 1280px;
  --container-pad: 80px;

  /* Fixed header height — update this if the menu bar height changes */
  --header-height: 80px;

  /* About2 sticky top nav height — update if .about2__top height changes */
  --about2-top-height: 60px;
}

/* ── Typography helpers ──────────────────────────────────── */
body {
  font-family: var(--font-base);
}

/* ── Utility: visually hidden ────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sub-menu {
  border-radius: var(--border-radius);
}

.serviceTopSection-bg {
  display: flex;
  flex-direction: column;
  object-position: center center;
  justify-content: center;
  align-items: center;
}

.serviceTopSection-bg svg {
  width: 100%;
}