/* CSS Styles */
    :root {
      --primary-color: whitesmoke; /* whitesmoke */
      --secondary-color: #7035A3; /* purple */
      --tertiary-color: #F8EDDF; /* manilla */
    }

    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--primary-color);
      color: #333;
    }

    header {
      background-color: var(--tertiary-color);
      padding-top: 1rem;
      text-align: center;
      position: sticky; 
      top: 0; 
      left: 0; 
      width: 100%;
    }

    .container {
      padding: 2rem;
      display: flex; 
      flex-direction: column; 
      align-items: center;
      flex-grow: 1;
    }

    .card {
      background: white;
      border: 1px solid var(--secondary-color);
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 90%;
      overflow-wrap: break-word;
    }

    .card h3 {
      color: var(--secondary-color);
    }

    footer {
      background-color: var(--tertiary-color);
      text-align: center;
      padding: 1rem 0;
      bottom: 0;
      width: 100%;
      border-top: 1px solid var(--secondary-color);
    }

    button {
      background-color: var(--secondary-color);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover, .nav-bar-item:hover, .nav-bar-item-active {
      background-color: #4b0082; /* darker purple */
    }

    .nav-bar-item {
      font-weight: bold;
      color: white; 
      text-decoration: none;
      border-left: 1px solid var(--primary-color);
      border-right: 1px solid var(--primary-color);
      padding: 1rem;
      margin-right: -1px;
      height:stretch;
      align-content: center;
    }

    nav {
      display: flex;
      justify-content: center;
      background-color: var(--secondary-color); 
      color: white; 
      align-items: center; 
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    }

    .owner-image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 20px;
      border: 1px solid var(--secondary-color); /* Replace with your secondary color */
    }

    @media (max-width: 550px) {
      .slogan {
        display: none;
      }
    }

    /* Contact Modal CSS */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .modal {
      background: #f5f5f5;
      width: 95%;
      max-width: 600px;
      border-radius: 8px;
      padding: 1.25rem;
      box-shadow: 0 6px 24px rgba(0,0,0,0.2);
      border: 1px solid var(--secondary-color);
    }
    .modal h3 { margin-top: 0; color: var(--secondary-color);}
    .modal .row { display: flex; gap: 10px; }
    .modal label { display: block; font-size: 0.9rem; margin-bottom: 6px; }
    .modal input[type="text"],
    .modal input[type="email"],
    .modal textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--secondary-color);
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 0.95rem;
    }
    .modal textarea { min-height: 100px; resize: vertical; }
    .modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
    .modal .btn { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; }
    .modal .btn-primary { background:#7035A3; color:#fff; }
    .modal .btn-secondary { background:#e0e0e0; color:#222;
      border: 1px solid var(--secondary-color); }
    .modal-open { display: flex !important; }