/* =========================
THEME DESIGN TOKENS
========================= */

:root {

  /* PRIMARY BRAND COLORS */

  --color-primary: #6c5ce7;
  --color-primary-dark: #5a4be0;
  --color-accent: #ffc107;
   --color-primary-grad: #7b68ee;

  /* BACKGROUND COLORS */

  --bg-body: #f7f8fc;
  --bg-section-light: #f8f9ff;
  --bg-white: #ffffff;
  --bg-hero-start: #eef0ff;

  /* TEXT COLORS */

  --text-main: #1f2937;
  --text-muted: #6b7280;
  --text-soft: #5b6472;
  --text-footer: #cbd5f5;

  /* FOOTER COLORS */

  --footer-bg: #0f172a;
  --footer-icon-bg: #1e293b;
  --footer-text: #ffffff;
  --footer-border: rgba(255,255,255,0.1);

  /* GENERIC COLORS */

  --color-white: #ffffff;
  --color-black: #000000;
  --bg-hero-start: #eef0ff;

  /* BORDER COLORS */

  --border-light: #e5e7eb;

  /* SHADOWS */

  --shadow-soft: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-card: 0 5px 20px rgba(0,0,0,0.05);
  --shadow-medium: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-heavy: 0 20px 40px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.08);

  /* BORDER RADIUS */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-xxl: 16px;
  --radius-pill: 20px;
  --radius-round: 30px;

  /* TRANSITIONS */

  --transition: all 0.3s ease;
}

/* =========================
CSS RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
BODY
========================= */

body{
  font-family:"Poppins",sans-serif;
  background:var(--bg-body);
  color:var(--text-main);
  line-height:1.6;
}

/* =========================
LAYOUT CONTAINER
========================= */

.container{
  width:1200px;
  max-width:92%;
  margin:auto;
}

/* =========================
GLOBAL ELEMENTS
========================= */

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

/* =========================
GLOBAL ICON STYLE
========================= */

.material-symbols-outlined{
  font-size:24px;
  cursor:pointer;
}