.portfolio-wrapper { padding: 80px 5%; background: #0f0f0f; color: #ffffff; font-family: sans-serif; }
.header-text { text-align: center; margin-bottom: 50px; color: #ffffff; }
.header-text h2 { font-size: 3rem; text-transform: uppercase; margin-bottom: 10px; }
.header-text p { color: #cccccc; font-size: 1.1rem; }
.modern-grid {
display: grid;
/* 3 cards per row */
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.card {
position: relative;
height: 400px;
border-radius: 15px;
overflow: hidden;
display: block;
transition: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
}
.card img {
width: 100%; height: 100%;
object-fit: cover;
transition: 0.6s;
}
.card:hover img { transform: scale(1.1); }
.card-overlay {
position: absolute;
bottom: 0; left: 0; width: 100%;
padding: 30px;
background: linear-gradient(transparent, rgba(0,0,0,0.9));
opacity: 0;
transition: 0.5s;
}
.card:hover .card-overlay { opacity: 1; }
/* Text Coloring */
.card-overlay h3 { color: #ffffff; margin: 5px 0 0 0; font-size: 1.5rem; }
.card-overlay span { color: #00d4ff; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; }
/* Mobile Responsive (Tab/Mobile par 1 ya 2 cards) */
@media (max-width: 900px) { .modern-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .modern-grid { grid-template-columns: repeat(1, 1fr); } }
