.app-nav ul li {
  width: max-content;
}
body {
  font-family: 'Inter', Arial, sans-serif;
}
/* Body and Typography */
body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f7f8fa;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Header Styling */
h1, h2, h3 {
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  letter-spacing: 0.02em;
}

h1 i, h2 i, h3 i {
  color: #0078d4;
  margin-right: 0.5em;
}

/* Navigation Bar */
.app-nav {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 1em 2em;
}

.app-nav ul {
  list-style: none;
  display: flex;
  gap: 2em;
  margin: 0;
  padding: 0;
}

.app-nav ul li {
  width: max-content;
}

.app-nav a {
  text-decoration: none;
  color: #0078d4;
  font-weight: 500;
  transition: color 0.2s;
}

.app-nav a:hover {
  color: #005fa3;
}

/* Card Component */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  padding: 2em;
  margin: 2em 0;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Button Styling */
.button {
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75em 1.5em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.button:hover {
  background: #005fa3;
}

/* Font Awesome Icon Styling */
.fa {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Responsive Layout */
@media (max-width: 600px) {
  .app-nav ul {
    flex-direction: column;
    gap: 1em;
  }
  .card {
    padding: 1em;
  }
}
/* ===== Global Styles ===== */
:root {
    --color-background: #ffffff;
    --color-background-soft: #f5f5f5;
    --color-text: #333333;
    --color-border: #e0e0e0;
    --vt-c-indigo: #5c6bc0;
    --vt-c-white: #ffffff;
    --vt-c-text-light-1: #7986cb;
}

/* ===== Docsify Navigation & Button Styles ===== */

/* Navigation Links */
.sidebar-nav {
    display: flex;           /* make links appear in a row */
    gap: 1.5rem;             /* space between links */
    list-style: none;        /* remove bullet points */
    padding-left: 0;         /* remove default padding */
}

.sidebar-nav li a {
    color: var(--color-text);        /* default link color */
    text-decoration: none;           /* remove underline */
    font-weight: 500;                /* medium font */
    transition: color 0.3s ease;    /* smooth hover effect */
}

.sidebar-nav li a:hover,
.sidebar-nav li a.active {
    color: var(--vt-c-indigo);       /* color on hover or active link */
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--vt-c-indigo);
    color: var(--vt-c-white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn:hover {
    background: var(--vt-c-text-light-1); /* hover effect for button */
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .sidebar-nav {
        flex-direction: column;  /* stack links vertically */
        display: none;           /* hide links initially */
    }

    .sidebar-nav.active {
        display: flex;           /* show when hamburger menu is active */
    }
}
/* Sidebar Download Button */
.sidebar .btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--vt-c-indigo);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.sidebar .btn:hover {
  background: var(--vt-c-text-light-1);
}