:root {
          --primary-color: #3979AC;
          --secondary-color: #484848;
          --accent-color: #3979AC;
          --info-color: #50B5FF;
          --success-color: #589750;
          --warning-color: #FFC107;
          --danger-color: #E3585F;
          --light-color: #f9fafb;
          --dark-color: #0a131f;
          --text-primary: #1a1a1a;
          --text-secondary: #637381;
          --border-color: rgba(57, 121, 172, 0.1);
      }
      
      body {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
          color: var(--text-primary);
          line-height: 1.6;
          background-color: var(--light-color);
          font-weight: 400;
      }
      
      /* Modern Typography */
      h1, h2, h3, h4, h5, h6 {
          font-weight: 600;
          letter-spacing: -0.02em;
      }

      .display-4 {
          font-weight: 700;
          letter-spacing: -0.03em;
      }
      
      .lead {
          font-weight: 400;
      }
      
      /* Minimalist Header */
      .navbar {
          height: 80px;
          box-shadow: none;
          border-bottom: 1px solid var(--border-color);
      }
      
      .navbar-brand {
          font-weight: 600;
          font-size: 1.25rem;
          letter-spacing: -0.01em;
      }
      
      .nav-link {
          font-weight: 500;
          color: var(--text-secondary);
      }
      
      .nav-link:hover {
          color: var(--primary-color);
      }
      
      /* Modern Hero Section */
      .blog-hero {
          background: linear-gradient(135deg, var(--primary-color) 0%, #0B163F 100%);
          padding: 8rem 0;
          position: relative;
      }
      
      /* Minimalist Cards */
      .card {
          border: none;
          border-radius: 8px;
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      }
      
      .card:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      }
      
      .card-title {
          font-weight: 600;
      }
      
      /* Modern Badge Design */
      .badge {
          font-weight: 500;
          padding: 0.5em 1em;
          border-radius: 4px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          font-size: 0.7rem;
      }
      
      .badge-engineering {
          background-color: rgba(57, 121, 172, 0.1);
          color: var(--primary-color);
      }
      
      .badge-best-practices {
          background-color: rgba(88, 151, 80, 0.1);
          color: var(--success-color);
      }
      
      .badge-research {
          background-color: rgba(57, 121, 172, 0.1);
          color: var(--accent-color);
      }
      
      .badge-grants {
          background-color: rgba(227, 88, 95, 0.1);
          color: var(--danger-color);
      }
      
      .badge-data {
          background-color: rgba(80, 181, 255, 0.1);
          color: var(--info-color);
      }
      
      .badge-events {
          background-color: rgba(255, 193, 7, 0.1);
          color: var(--warning-color);
      }
      
      /* Section Headers */
      .section-header {
          margin-bottom: 3rem;
          position: relative;
      }
      
      .section-header::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 0;
          width: 48px;
          height: 3px;
          background-color: var(--primary-color);
      }
      
      /* Utilities */
      .text-gradient {
          background: linear-gradient(90deg, var(--primary-color), var(--success-color));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
      }
      
      /* Footer */
      .footer {
          background-color: var(--primary-color);
          color: rgba(255, 255, 255, 0.8);
          padding: 6rem 0 2rem;
      }
      
      .footer h4 {
          color: white;
          font-weight: 600;
          font-size: 1rem;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          margin-bottom: 1.5rem;
      }
      
      .footer a {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          transition: color 0.2s ease;
      }
      
      .footer a:hover {
          color: white;
      }
      
      /* Search Component */
      .search-component {
          background: white;
          border-radius: 8px;
          padding: 8px;
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }
      
      .search-component input {
          border: none;
          padding: 16px;
      }
      
      .search-component input:focus {
          box-shadow: none;
      }
      
      .search-component button {
          border-radius: 6px;
          padding: 0.6rem 1.5rem;
      }

    /* Article Typography and Spacing */
    .article-content {
      font-size: 1.125rem;
      line-height: 1.8;
  }
  
  .article-content h2 {
      font-size: 1.75rem;
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
  }
  
  .article-content h3 {
      font-size: 1.5rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
  }
  
  .article-content p {
      margin-bottom: 1.5rem;
  }
  
  .article-content ul, .article-content ol {
      margin-bottom: 1.5rem;
      padding-left: 1.25rem;
  }
  
  .article-content blockquote {
      font-size: 1.125rem;
      border-left: 4px solid var(--primary-color);
  }
  
  .article-content img {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
      margin: 2rem 0;
  }
  
  /* Table of Contents */
  #toc a {
      color: var(--text-primary);
      transition: color 0.2s;
  }
  
  #toc a:hover {
      color: var(--primary-color);
  }
  
  /* Related Articles */
  .card h5 a {
      color: var(--text-primary);
      transition: color 0.2s;
  }
  
  .card h5 a:hover {
      color: var(--primary-color);
  }

  /* Events Page Specific Styles */
  .event-date-badge {
      background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
      color: white;
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
      min-width: 80px;
  }

  .event-card {
      border-left: 4px solid var(--primary-color);
      transition: all 0.3s ease;
  }

  .event-card:hover {
      border-left-color: var(--success-color);
      transform: translateX(4px);
  }

  .event-meta {
      font-size: 0.875rem;
      color: var(--text-secondary);
  }

  .event-meta i {
      width: 16px;
      text-align: center;
  }

  .upcoming-event-card {
      border: 1px solid rgba(88, 151, 80, 0.2);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(88, 151, 80, 0.02));
  }

  .past-event-card {
      border: 1px solid rgba(72, 72, 72, 0.1);
      background: rgba(248, 249, 250, 0.5);
  }

  .event-actions .btn {
      font-size: 0.875rem;
      font-weight: 500;
  }

  /* Event Icon Containers */
  .event-icon-container {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      margin-bottom: 1rem;
  }

  .event-status-badge {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.025em;
      border-radius: 20px;
      padding: 0.35rem 0.75rem;
  }

  /* Empty State Styling */
  .events-empty-state {
      padding: 4rem 2rem;
      text-align: center;
  }

  .events-empty-state i {
      margin-bottom: 2rem;
      opacity: 0.4;
  }

  /* Topics Grid */
  .topics-grid .col-md-6:nth-child(odd) .event-icon-container {
      background-color: rgba(57, 121, 172, 0.08);
  }

  .topics-grid .col-md-6:nth-child(even) .event-icon-container {
      background-color: rgba(88, 151, 80, 0.08);
  }

  /* Responsive adjustments for events */
  @media (max-width: 768px) {
      .event-card {
          margin-bottom: 1.5rem;
      }
      
      .event-date-badge {
          margin-bottom: 1rem;
      }
      
      .event-actions {
          flex-direction: column;
      }
      
      .event-actions .btn {
          margin-bottom: 0.5rem;
      }
  }

  /* Animation for event cards */
  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .event-card {
      animation: slideUp 0.5s ease-out;
  }

  /* Custom scrollbar for better aesthetics */
  ::-webkit-scrollbar {
      width: 6px;
  }

  ::-webkit-scrollbar-track {
      background: var(--light-color);
  }

  ::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
  }