body { background-color: #000; color: #F4F4F4; font-family: 'Arial', sans-serif; margin: 0; padding: 0; }
header { background-color: #8B0000; padding: 20px; text-align: center; }
nav a { color: #F4FEF4; margin: 0 10px; text-decoration: none; font-weight: bold; }
.service-item, .case-study, .about-section, .contact-section { 
    background-color: #1a1a1a; border: 1px solid #F4F4F4; padding: 20px; margin: 20px auto; border-radius: 8px; max-width: 800px; 
}
.case-study { border-left: 5px solid #8B0000; }
h2, h3 { color: #F4F4F4; }
p, ul { color: #fff; line-height: 1.6; }
button { background-color: #8B0000; color: #F4F4F4; padding: 10px 20px; border: none; cursor: pointer; font-weight: bold; }
.social-links a { color: #F4F4F4; text-decoration: underline; }

/* ===== PORTFOLIO SECTION ===== */
#portfolio { padding: 80px 10%; background: #000; }
.portfolio-header { text-align: center; margin-bottom: 50px; }
.portfolio-header h2 { color: #FFD700; font-size: 36px; text-transform: uppercase; }
.portfolio-header p { color: #aaa; font-size: 18px; }
.portfolio-video { width: 100%; max-width: 900px; margin: 0 auto 50px; display: block; }
.portfolio-content { padding: 20px; }
.portfolio-content h3 { color: #FFD700; margin-bottom: 10px; }
.portfolio-content .role { color: #aaa; font-size: 13px; }
.portfolio-content .desc { color: #fff; font-size: 14px; line-height: 1.6; }
.portfolio-content .outcome { color: #FFD700; font-weight: bold; margin-top: 10px; }
/* ===== PORTFOLIO GRID + CARD + BUTTON ===== */
.portfolio-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 40px; 
}

.portfolio-card { 
  background: #111; 
  border-radius: 16px; 
  overflow: hidden; 
  border: 1px solid #222;
  transition: all 0.3s ease; 
  cursor: pointer;
}
.portfolio-card:hover { 
  transform: translateY(-10px); 
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); 
  border-color: #FFD700;
}

.portfolio-content { padding: 24px; }
.portfolio-content h3 { color: #FFD700; margin-bottom: 8px; font-size: 20px; }
.portfolio-content .role { color: #aaa; font-size: 14px; margin-bottom: 12px; }
.portfolio-content .desc { color: #ccc; font-size: 14px; line-height: 1.6; }
.portfolio-content .outcome { color: #FFD700; font-weight: 600; margin-top: 12px; }

.portfolio-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #FFD700;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
}
.portfolio-btn:hover {
  background: #fff;
  transform: scale(1.05);
}
.portfolio-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* ===== SHOP SECTION ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.product-card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #333;
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.price {
  color: #FFD700;
  font-size: 24px;
  font-weight: 700;
  margin: 15px 0;
}

.buy-btn {
  display: inline-block;
  background: #FFD700;
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}