:root {
  --primary-color: #007BFF;           /* Main blue color */
  --primary-hover: #0056b3;          /* Darker blue for hover */
  --secondary-color: #ff4500;        /* Orange for signup CTA */
  --secondary-hover: #e03d00;        /* Darker orange for hover */
  --accent-red: #ff0019;             /* Red for CTA */
  --accent-red-hover: #CE0E0E;       /* Darker red for CTA hover */
  --login-blue: #0066cc;             /* Login button blue */
  --accent-blue: #0066cc;             /* Login button blue */
  --login-blue-hover: #004c99;       /* Login button hover */
  --text-color: #333;                /* Default text color */
  --text-muted: #6c757d;             /* Muted text color */
  --white: #fff;                     /* White */
  --black: #000;                     /* Black */
  --gray: #666;                      /* Gray for card text */
  --light-gray: #2c2c2c;                /* Light gray for borders */
  --dark-gray: #1a1a1a;              /* Darker gray */
  --bg-light: #f8f9fa;               /* Light background */
  --bg-dark: #212529;                /* Dark background */
  --bg-dark-alt: #343a40;            /* Alternative dark background */
  --navbar-bg: #1a1a1a;              /* Navbar background */
  --form-bg: #373b3e;                /* Form container background */
  --code-bg: #7B7B7B;                /* Code block background */
  --dark-mode-bg: #121212;           /* Dark mode background */
  --success-color: #28a745;          /* Green for valid states */
  --error-color: #dc3545;            /* Red for invalid states */
  --navbar-text: #f8f9fa;            /* Navbar text color */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Default shadow color */

  /* Typography */
  --font-family: Arial, sans-serif;  /* Default font */
  --font-size-base: 1rem;            /* Base font size */
  --font-size-sm: 0.8rem;           /* Small text */
  --font-size-md: 0.95rem;          /* Medium text */
  --font-size-lg: 1.2rem;           /* Large text */
  --font-size-xl: 1.4rem;           /* Extra large (navbar brand) */
  --font-size-xxl: 2rem;            /* Card title */
  --font-size-xxxl: 2.5rem;         /* Pricing card title */

  /* Spacing */
  --spacing-xs: 5px;                 /* Extra small spacing */
  --spacing-sm: 10px;                /* Small spacing */
  --spacing-md: 15px;                /* Medium spacing */
  --spacing-lg: 20px;                /* Large spacing */
  --spacing-xl: 30px;                /* Extra large spacing */
  --margin-sm: 5px;                 /* Small margin */
  --margin-md: 10px;                /* Medium margin */
  --margin-lg: 20px;                /* Large margin */
  --padding-sm: 8px;                /* Small padding */
  --padding-md: 10px;               /* Medium padding */
  --padding-lg: 20px;               /* Large padding */

  /* Borders */
  --border-radius-sm: 4px;          /* Small radius */
  --border-radius-md: 5px;          /* Medium radius */
  --border-radius-lg: 10px;         /* Large radius */
  --border-radius-xl: 25px;         /* Extra large radius (navbar) */
  --border-radius-circle: 50px;     /* Circle radius (buttons) */
  --border-width: 1px;              /* Default border width */
  --border-width-lg: 2px;           /* Thicker border */
  --border-color: #ccc;             /* Default border color */
  --border-light: #dee2e6;          /* Light border for form sections */

  /* Sizes */
  --icon-size-sm: 23px;             /* Small icon size */
  --icon-size-md: 1.2rem;          /* Medium icon size */
  --logo-size: 40px;               /* Logo container size */
  --social-icon-size: 35px;        /* Social media icon size */
  --navbar-logo-size: 30px;        /* Navbar logo size */
  --input-width: 100%;             /* Full width inputs */
  --container-width: 90%;          /* Default container width */

  /* Shadows */
  --shadow-sm: 0 0 10px rgba(0, 0, 0, 0.1);      /* Small shadow */
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.3);     /* Medium shadow */
  --shadow-hover: 0 4px 15px rgba(139, 0, 19, 0.5); /* CTA hover shadow */
  --shadow-login: 0 4px 10px rgba(0, 102, 204, 0.2); /* Login button shadow */
  --shadow-signup: 0 4px 10px rgba(255, 69, 0, 0.2); /* Signup button shadow */

  /* Transitions */
  --transition-fast: 0.3s ease;     /* Fast transition */
  --transition-slow: 0.4s ease;     /* Slow transition */
  --transition-ease-in-out: 0.3s ease-in-out; /* Ease in-out transition */

  /* Heights */
  --row-height: 50px;              /* Table row height */
  --card-img-height: 400px;        /* Card image height */
}
/*START: DARK MODE*/
.dark-mode {
    background-color: var(--dark-mode-bg);
    color: #ffffff;
}
/*END: DARK MODE */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #eef2f6;
    color: #1f2a44;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

.sidebar {
    width: 250px;
    background: #1f2a44;
    color: #ffffff;
    height: 100vh;
    padding: 20px;
    transition: width 0.3s ease;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}

.sidebar.collapsed {
    width: 70px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.sidebar-brand {
    font-size: 1.25rem;
    font-weight: 600;
}

.sidebar.collapsed .sidebar-brand {
    display: none;
}

.toggle-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
}

.sidebar-menu li {
    margin-bottom: 15px;
}

.sidebar-menu a {
    color: #d1d5db;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sidebar-menu a:hover {
    background: #3b82f6;
    color: #ffffff;
}

.sidebar.collapsed .menu-text {
    display: none;
}

.main-content {
    flex: 1;
    margin-left: 250px;
    height: 100vh;
    overflow-y: auto;
    transition: margin-left 0.3s ease;
    padding: 20px;
}

.main-content.expanded {
    margin-left: 70px;
}

.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}