:root {
      --primary-color: #3b71ca;
      --primary-color-hover: #2b5a9e;
      --bg-color-light: rgba(59, 113, 202, 0.1);
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: #fcfcfc;
    }

    [data-mdb-theme="dark"] body {
      background-color: #121212;
    }

    .main-container {
      margin-top: 100px;
    }

    /* Custom Navbar */
    .navbar-custom {
      background-color: #ffffff !important;
      padding: 0.5rem 1.5rem;
      border-radius: 0 0 16px 16px;
      margin: 0 1rem;
    }
    [data-mdb-theme="dark"] .navbar-custom {
        background-color: #1e1e1e !important;
    }
    
    .nav-btn {
      color: #4f4f4f !important;
      border-radius: 8px;
      padding: 0.4rem 1rem;
      margin-left: 0.5rem;
      text-transform: none;
      font-weight: 500;
      box-shadow: none;
      background: transparent;
    }
    [data-mdb-theme="dark"] .nav-btn {
        color: #e0e0e0 !important;
    }
    
    .nav-btn:hover, .nav-btn.active {
      background-color: var(--bg-color-light);
      color: var(--primary-color) !important;
      box-shadow: none;
    }

    /* Sticky Sidebar setup for Home (Desktop only) */
    @media (min-width: 768px) {
      .sidebar-sticky {
        position: sticky;
        top: 100px;
        height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: none; 
      }
      .sidebar-sticky::-webkit-scrollbar {
        display: none; 
      }
    }

    /* Typography & Utilities */
    .text-primary-custom { color: var(--primary-color) !important; }
    .bg-primary-soft { background-color: var(--bg-color-light); }
    
    .btn-custom {
      background-color: transparent;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
    }
    .btn-custom:hover {
      background-color: var(--primary-color);
      color: white;
    }

    /* Avatar Status Dot */
    .status-dot {
      width: 22px;
      height: 22px;
      background-color: #2ecc71;
      border: 3px solid #ffffff;
      border-radius: 50%;
      position: absolute;
      bottom: 15px;
      right: 15px;
    }
    [data-mdb-theme="dark"] .status-dot {
      border-color: #262626; 
    }

    /* Tech Stack Badges */
    .tech-badge {
      background-color: #f1f3f5; /* Light grey background */
      border: 1px solid #dee2e6; 
      /*color: #111827; /* Dark navy/almost black text */
      color: #3b71ca; /* Exact app blue color */
      border-radius: 6px;
      padding: 0.35rem 0.75rem;
      font-size: 0.85rem;
      font-weight: 500;
      margin: 0.25rem;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .tech-badge i {
      /*color: #111827 !important; /* Forces the icon to match the text color */
      color: #3b71ca !important; /* Forces the icon to match the app blue color */
      font-size: 0.95rem;
    }

    .tech-badge-img {
      width: 1.2rem; /* Keeps it roughly the same size as the FA icons (approx 19px) */
      height: 1.2rem;
      object-fit: contain; /* Ensures your uploaded logos don't get stretched or squished */
    }

    /* Dark Theme Overrides */
    [data-mdb-theme="dark"] .tech-badge {
      background-color: transparent; /* Removes the light background in dark mode */
      border-color: #444;
      /*color: #e0e0e0;*/
      color: #6ea8fe; /* A slightly brighter blue for dark mode readability */
    }

    [data-mdb-theme="dark"] .tech-badge i {
      /*color: #e0e0e0 !important; /* Ensures icons turn light in dark mode */
      color: #6ea8fe !important;
    }
    /* Experience Card Hover Effect */
    .experience-card {
      transition: background-color 0.3s ease;
      border-radius: 16px; /* Gives the rounded corners seen in image_9fb774.png */
      padding: 1.25rem; /* Adds breathing room so the hover background surrounds the text */
      margin-left: -1.25rem; /* Offsets the padding so it aligns with the rest of the page */
      margin-right: -1.25rem;
    }

    /* Light Theme Hover (Light Blue) */
    .experience-card:hover {
      background-color: var(--bg-color-light) !important; 
    }

    /* Dark Theme Hover (Light-Dark) */
    [data-mdb-theme="dark"] .experience-card:hover {
      background-color: #2c2c2c !important; /* Matches the elevated dark surface in image_9fb774.png */
    }
    /* Work Logo */
    .work-logo {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: bold;
      color: white;
    }