:root {
      --concert-blue: #0C4280;
      --concert-light-blue: #159ED8;
      --concert-ice: #FEFEFF;
  }

  body {
      font-family: 'Inter', sans-serif;
      background-color: var(--concert-ice);
  }

  /* Header Styles */
  #mainHeader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.95);
  }

  /* Modal Styles - Ensure they're above header */
  .modal-overlay,
  [id$="Modal"] {
      z-index: 9999 !important;
  }

  /* Modal backdrop */
  [id$="Modal"] .fixed.inset-0 {
      z-index: 9998;
  }

  /* Modal content */
  [id$="Modal"] .inline-block {
      z-index: 9999;
      position: relative;
  }

  /* Navigation Styles */
  .nav-link {
      position: relative;
  }

  .nav-link:hover::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--concert-light-blue);
      transition: all 0.2s ease;
  }

  .nav-link.active {
      color: var(--concert-blue);
      font-weight: 600;
  }

  .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--concert-blue);
  }

  /* Section Management */
  .section-content {
      display: none;
  }

  .section-content.active {
      display: block;
  }

  .btn-concert {
      background-color: var(--concert-blue);
      color: #ffffff;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .btn-concert:hover {
      background-color: #083164;
  }

  .btn-concert:focus {
      box-shadow: 0 0 0 3px rgba(21, 158, 216, 0.35);
      outline: none;
  }

  .link-concert {
      color: var(--concert-light-blue);
      transition: color 0.2s ease;
      cursor: pointer;
  }

  .link-concert:hover {
      color: var(--concert-blue);
  }

  .input-concert {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input-concert:focus {
      border-color: var(--concert-light-blue);
      box-shadow: 0 0 0 3px rgba(21, 158, 216, 0.25);
      outline: none;
  }

  .brand-card {
      background-color: rgba(21, 158, 216, 0.08);
  }

  .border-brand {
      border-color: rgba(12, 66, 128, 0.2);
  }

  .hidden {
      display: none !important;
  }

  .spinner {
      border: 3px solid rgba(12, 66, 128, 0.1);
      border-left-color: var(--concert-light-blue);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  .filters-container {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
  }

  .filter-input {
      flex: 1;
      min-width: 200px;
  }

  .pagination-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid #e5e7eb;
  }

  /* Mobile Menu */
  .mobile-nav-link:hover {
      background-color: rgba(21, 158, 216, 0.1);
  }

  /* FAQ Styles */
  .faq-button:hover {
      color: var(--concert-blue);
  }

  .faq-button[aria-expanded="true"] .fa-chevron-down {
      transform: rotate(180deg);
  }

  /* Card Hover Effects */
  .hover\:shadow-lg:hover {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  /* Gradient Backgrounds */
  .bg-gradient-to-r {
      background-image: linear-gradient(to right, var(--concert-blue), var(--concert-light-blue));
  }

  /* Animation for mobile menu */
  #mobileMenu {
      transition: all 0.3s ease-in-out;
      max-height: 0;
      overflow: hidden;
  }

  #mobileMenu.show {
      max-height: 500px;
  }

  /* Footer responsive adjustments */
  @media (max-width: 768px) {
      #mainFooter .grid {
          grid-template-columns: 1fr;
          gap: 2rem;
      }

      #mainHeader .flex {
          padding: 0.75rem 0;
      }

      #mainHeader h1 {
          font-size: 1.125rem;
      }

      .main-view {
          padding-top: 80px;
      }
  }

  /* Smooth scrolling */
  html {
      scroll-behavior: smooth;
  }

  .pagination-btn {
      border: 1px solid #d1d5db;
      color: #374151;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .pagination-btn:hover:not(:disabled) {
      background-color: var(--concert-light-blue);
      color: white;
      border-color: var(--concert-light-blue);
  }

  .pagination-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }

  .modal-overlay {
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s ease;
  }

  /* Tabs Styling */
  .tab-button {
      color: #6b7280;
      border-color: transparent;
      cursor: pointer;
      background: none;
  }

  .tab-button:hover:not(.active) {
      color: #374151;
      border-color: #d1d5db;
  }

  .tab-button.active {
      color: var(--concert-blue);
      border-color: var(--concert-blue);
  }

  .tab-content {
      animation: fadeIn 0.3s ease-in;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }