/* Color palette */
  :root {
    --primary: #2266c2;
    --primary-light: #3377d3;
    --primary-dark: #1a5099;

    --gold: #d4a373;
    --gold-light: #deb088;
    --gold-dark: #ca965e;

    --terracotta: #f7d488;
    --terracotta-light: #f9dea6;
    --terracotta-dark: #f5ca6a;

    --white: #ffffff;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Base styles */
  body {
    background-color: var(--gray-50);
    color: var(--gray-900);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    transition: background-color 0.4s ease, color 0.4s ease;

  }


  /*body {*/
  /*  font-family: Arial, sans-serif;*/
  /*  background-color: #f5f5f5;*/
  /*}*/

  .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px;
    background-color: var(--white);
    border-bottom: 2px solid var(--primary);
    transition: background-color 0.4s ease, border-color 0.4s ease;
    position: relative;
  }

  .logo {
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary-dark);
    transition: color 0.3s ease;
    font-family: 'Georgia', serif;
  }

  .logo:hover,
  .logo:focus {
    color: var(--primary-light);
  }

  .nav-links {
    display: flex;
    align-items: center;
  }

  .nav-links a {
    margin: 0 10px !important;
    text-decoration: none !important;
    color: var(--gray-700);
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
  }

  .nav-links a:hover,
  .nav-links a:focus {
    color: var(--primary);
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 5px;
  }

  .icon-button,
  #currency {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition:
            background-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.15s ease;
    box-shadow: 0 3px 6px rgba(34, 102, 194, 0.4);
  }

  .icon-button:hover,
  #currency:hover,
  .icon-button:focus,
  #currency:focus {
    background-color: var(--primary-light);
    box-shadow: 0 5px 12px rgba(51, 119, 211, 0.6);
    outline: none;
    transform: scale(1.05);
  }

  .icon-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 5px rgba(26, 80, 153, 0.7);
  }

  #currency {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20fill%3D'%23fff'%20height%3D'10'%20viewBox%3D'0%200%2010%206'%20width%3D'10'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
  }

  #darkModeToggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gray-700);
    padding: 5px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
  }

  #darkModeToggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* Mobile Responsive Styles */
  @media (max-width: 991px) {
    .header-bar {
      padding: 20px 20px;
      flex-wrap: wrap;
    }

    .mobile-menu-toggle {
      display: block;
      order: 2;
    }

    .nav-links.override-navbar {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: var(--white);
      border-top: 1px solid #ddd;
      flex-direction: column;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      order: 4;
      width: 100%;
    }

    .nav-links.override-navbar.show {
      display: flex;
    }

    .nav-links.override-navbar a {
      margin: 10px 0 !important;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      text-align: center;
    }

    .nav-links.override-navbar a:last-child {
      border-bottom: none;
    }

    .header-right {
      gap: 10px;
      order: 3;
    }

    .logo {
      font-size: 1.4rem;
      order: 1;
    }
  }

  @media (max-width: 480px) {
    .header-bar {
      padding: 15px 15px;
    }

    .logo {
      font-size: 1.2rem;
    }

    .header-right {
      gap: 8px;
    }

    #currency,
    .icon-button {
      padding: 4px 8px;
      font-size: 0.85rem;
    }

    #darkModeToggle {
      font-size: 16px;
    }
  }


  /* Language dropdown */
  .lang-container {
    position: relative;
  }

  #langBtn {
    padding: 8px 10px;
  }

  #langDropdown {
    position: absolute;
    top: 110%;
    right: 0;
    background-color: var(--white);
    border: 2px solid var(--primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    box-shadow: 0 5px 15px rgba(34, 102, 194, 0.4);
    transition: opacity 0.3s ease;
    opacity: 1;
    z-index: 1000;
  }
  #langDropdown.hidden {
    opacity: 0;
    pointer-events: none;
  }

  #langDropdown button {
    background: none;
    border: none;
    padding: 8px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.25s ease;
  }
  #langDropdown button:hover,
  #langDropdown button:focus {
    background-color: var(--primary-light);
    color: var(--white);
    outline: none;
  }

  /* Dark mode overrides */
  body.dark-mode {
    /*background-color: var(--gray-900);*/
    background: #172033;
    color: var(--gray-100);
  }

  body.dark-mode .header-bar {
    background-color: var(--gray-800);
    border-bottom-color: var(--gold);
  }

  body.dark-mode .logo {
    color: var(--gold-light);
  }
  body.dark-mode .logo:hover,
  body.dark-mode .logo:focus {
    color: var(--gold);
  }

  body.dark-mode .nav-links a {
    color: var(--gray-300);
  }
  body.dark-mode .nav-links a:hover,
  body.dark-mode .nav-links a:focus {
    color: var(--gold);
  }
  body.dark-mode .nav-links.override-navbar.show{
    background: var(--gray-800);
  }
  body.dark-mode .icon-button,
  body.dark-mode #currency {
    background-color: var(--primary-dark);
    color: var(--gold-light);
    box-shadow: 0 3px 6px rgba(22, 46, 77, 0.8);
  }
  body.dark-mode .icon-button:hover,
  body.dark-mode #currency:hover,
  body.dark-mode .icon-button:focus,
  body.dark-mode #currency:focus {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 5px 14px rgba(51, 119, 211, 0.9);
  }
  body.dark-mode .icon-button:active {
    box-shadow: 0 2px 5px rgba(26, 80, 153, 0.9);
  }

  body.dark-mode #langDropdown {
    background-color: var(--gray-800);
    border-color: var(--gold-dark);
    box-shadow: 0 5px 15px rgba(245, 202, 106, 0.4);
  }
  body.dark-mode #langDropdown button:hover,
  body.dark-mode #langDropdown button:focus {
    background-color: var(--gold-dark);
    color: var(--gray-900);
  }