1  .project-container {
 2    display: flex;
 3    align-items: center;
 4    justify-content: center;
 5    padding: 20px;
 6    margin-top: 100px;
 7    margin-left: 30px;
 8  }
 9  
10  .project-content {
11    display: flex;
12    align-items: center;
13  }
14  
15  .project-image {
16    flex: 1;
17    margin-right: 20px;
18  }
19  
20  .project-image img {
21    width: 100%;
22    height: auto;
23    max-width: 500px; /* Adjust the max width as needed */
24    border-radius: 10px;
25    display: block;
26  }
27  
28  .project-text {
29    flex: 1;
30    text-align: left;
31  }
32  
33  .project-text h1 {
34    font-size: 2.5em;
35    color: #333;
36    margin-bottom: 20px;
37  }
38  
39  .project-text p {
40    font-size: 1.2em;
41    color: #666;
42    line-height: 1.6;
43    margin-bottom: 15px;
44  }
45  
46  .project-buttons {
47    margin-top: 20px;
48  }
49  
50  .project-button {
51    display: inline-block;
52    margin-right: 10px;
53    padding: 10px 20px;
54    background-color: #007bff;
55    color: white;
56    text-decoration: none;
57    border-radius: 5px;
58    font-size: 1em;
59    transition: background-color 0.3s ease;
60  }
61  
62  .project-button:hover {
63    background-color: #0056b3;
64  }
65  
66  .project-button:last-child {
67    margin-right: 0;
68  }
69  
70  /* Add responsiveness */
71  @media (max-width: 768px) {
72    .project-content {
73      flex-direction: column;
74      align-items: flex-start;
75    }
76  
77    .project-image {
78      margin-right: 0;
79      margin-bottom: 20px; /* Add space between image and text on small screens */
80      max-width: 100%; /* Allow the image to take full width on small screens */
81    }
82  
83    .project-text {
84      text-align: center;
85    }
86  
87    .project-buttons {
88      text-align: center;
89    }
90  }