.projects-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 80vh;
}

/* Technology */
.tech-section {
  margin-bottom: 30px;
  
}

.tech-section h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #333;
}

.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech {
  display: flex;
  align-items: center;
  gap: 8px; 
  background: rgba(255,255,255,0.8);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  border: 1px solid #ccc;
  transition: background 0.3s;
}

.tech i {
  font-size: 18px;
  color: inherit; 
}

.tech.js i { color: #f0db4f; }
.tech.html i { color: #e34f26; }
.tech.react i { color: #61dafb; }
.tech.node i { color: #3c873a; }
.tech.mysql i { color: #00758f; }
.tech.java i { color: #5382a1; }
.tech.php i { color: #777bb4; }
.tech.excel i { color: #217346; }
.tech.movavi i { color: #1e90ff; }

.tech:hover {
  background: #ddd;
}

/* Project cardy */
.projects-section {
  display: flex;
  flex-wrap: wrap;       
  gap: 20px;              
  justify-content: center; 
}

.animations-section {
  display: flex;
  flex-wrap: wrap;        
  gap: 20px;              
  justify-content: center; 
}

.project-card {
  flex: 1 1 45%;       
  box-sizing: border-box;  
  background: #fafafa;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.8);
}

.project-card img{
  width: 100%;
  height: clamp(100px,30vw, 200px); 
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.project-card iframe{
  width: 100%;
  height: clamp(100px,30vw, 200px); 
  border-radius: 12px;
  border: none; 
  display: block;
  margin: 0 auto;
}

/* Zawartość project cardów, technologie, obrazki*/
.tech-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
}

.tech-line i,
.tech-line img {
  font-size: 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Kolory FA ikon */
.js-icon {
  color: #f0db4f;      
  text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,  
     -1px  1px 0 #000,  
      1px  1px 0 #000;  
}
.html-icon { color: #e34f26; }
.react-icon { color: #61dafb; }
.node-icon { color: #3c873a; }
.mysql-icon { color: #00758f; }
.android-icon { color: #3ddc84; }
.movavi-icon { color: #1e90ff; }

.project-tech i:hover,
.project-tech img:hover {
  transform: scale(1.2);
}

/* Przyciski live demo i github */
.project-links {
  display: flex;
  gap: 10px;
  justify-content: left;
  margin-top: 10px;
}

.project-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 1 Live Demo */
.project-links .btn-demo {
  background: #007acc;
  color: #fff;
}

.project-links .btn-demo:hover {
  background: #0095ff;
  box-shadow: 0 0 10px rgba(0, 149, 255, 0.5);
}

/* 2 GitHub */
.project-links .btn-github {
  background: #24292e;
  color: #fff;
}

.project-links .btn-github:hover {
  background: #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.project-links .btn-github i {
  font-size: 16px;
}

/* Outro */
.outro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.outro-section h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 5px;
}

.outro-section p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

.outro-section a {
  color: #1e90ff;
  text-decoration: none;
  font-weight: 600;
}

.outro-section a:hover {
  text-decoration: underline;
}