body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; background-color: #F4F4F4; }
    header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #F4F4F4; color: black; } 
    nav { display: flex; align-items: center; } 
    nav a { color: black; text-decoration: none; margin-left: 15px; } 
    nav a:hover { color: grey; } 
    .white-space { height: 30px;  background-color: white; width: 100%; }

    .main-section { display: flex; gap: 20px; padding: 20px; }
    .intro-content { flex: 2; }
    .intro-section { flex: 2; display: flex; gap: 20px; padding: 20px; border: 1px solid #ccc; align-items: center; background-color: white; border-radius: 12px; 
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; } 
    .intro-section h1 { font-size: 32px; } 
    .black-text { color: black !important; } 
    .grey-text { color: gray !important; } 
    .intro-section p { color: gray; font-size: 16px; } 
    .intro-section:hover { transform: scale(1.05); }

    .search-form { margin-bottom: 20px; }

    .search-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 15px; background: #F8F8F8; border-radius: 12px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; } 
    .search-container:hover { transform: scale(1.02); } 
    .search-container input, .search-container select { padding: 12px; font-size: 16px; border: none; border-radius: 8px; background: #E5E5E5; color: #1C1C1E; outline: none; transition: all 0.2s ease-in-out; } 
    .search-container select { cursor: pointer; } 
    .search-container input:focus, .search-container select:focus { background: #D9D9D9; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); } 
    .search-container button { padding: 12px 20px; font-size: 16px; font-weight: bold; color: white; background: black; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease-in-out; } 
    .search-container button:hover { background: #007BFF; }
    
    .viz-section { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; border: 1px solid #ccc; background-color: black; border-radius: 12px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; max-width: 300px; height: 300px; } 
    .viz-section:hover { transform: scale(1.05); } 
    canvas#projectsPieChart { max-width: 100%; max-height: 100%; width: auto; height: auto; }
    

    .projects-grid {
      flex: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr); 
      gap: 20px;
      padding: 20px;
    }
    .project-card { flex: 0 0 calc(33.33% - 10px); background: white; padding: 20px; text-align: left; border-radius: 8px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
      transition: transform 0.3s ease-in-out; height: 450px; display: flex; flex-direction: column; justify-content: flex-start; } 
    .project-card h3 { font-size: 32px; font-weight: bold; color: black; margin: 0 0 12px 0; text-decoration: none; } 
    .project-card h3 a { text-decoration: none; color: black; } 
    .project-card p { font-size: 16px; color: grey; margin: 0 0 15px 0; height: 350px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } 
    .project-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-top: auto; }
    .project-card:hover { transform: scale(1.05);box-shadow: 0px 0px 15px 4px rgba(0, 123, 255, 0.6); }

    .space {
      height: 30px; /* Same height as header */
      width: 100%;
    }

    .footer { display: flex; justify-content: center; align-items: center; padding: 20px; background: white; width: 100%; border-top: 1px solid #ddd; } 
    .footer-links { display: flex; gap: 30px; font-size: 18px; } 
    .footer-links a { text-decoration: none; color: black; font-weight: bold; transition: color 0.3s ease; } 
    .footer-links a:hover { color: grey; }