@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import "tailwindcss";

*,
*::before,
*::after {
   box-sizing: border-box !important;
}

html,
body {
   scroll-behavior: smooth;
   overflow-x: hidden;

}

:root {
   /* =========================
     BRAND COLORS
     Bold, authoritative, and professional
  ========================= */
   --color-primary: #0B6DFF;
   --color-primary-dark: #0047B3;
   --color-primary-light: #33A1FF;

   --color-accent: #00D4FF;
   --color-accent-dark: #00A9CC;
   --color-accent-light: #8EF3FF;

   --color-white: #FFFFFF;

   /* =========================
     BACKGROUND COLORS
  ========================= */
   --bg-main: #FFFFFF;
   --bg-section-alt: #F4F9FF;
   --bg-dark: #001A4D;

   /* =========================
     TEXT COLORS
  ========================= */
   --text-primary: #0A1F44;
   --text-secondary: #5A6B85;
   --text-inverse: #FFFFFF;

   /* =========================
     BORDER & UI ELEMENTS
  ========================= */
   --border-color: #D9E8FF;
   --input-bg: #F8FBFF;

   /* =========================
     BUTTONS
  ========================= */
   --btn-primary-bg: #0B6DFF;
   --btn-primary-text: #FFFFFF;
   --btn-primary-hover: #0047B3;

   --btn-secondary-bg: transparent;
   --btn-secondary-text: #0B6DFF;
   --btn-secondary-border: #0B6DFF;

   /* =========================
     GRADIENTS (optional)
  ========================= */
   --gradient-primary: linear-gradient(135deg, #001A4D, #0B6DFF);
   --gradient-accent: linear-gradient(135deg, #00D4FF, #8EF3FF);
}

body {
   margin: 0;
   padding: 0;
   font-family: "Outfit", sans-serif;
   color: var(--text-primary);
}