/* =========================
   PROJECT BLOKKEN
============================= */

.projects {

max-width: 1100px;
margin: 20px auto;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 320px));

justify-content: center;

gap: 30px;

position: relative;

}


/* lichtbundel */

.projects::before {

content: "";

position: absolute;

top: -120px;
left: 50%;

transform: translateX(-50%);

width: 900px;
height: 500px;

background: radial-gradient(
ellipse,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0.03) 40%,
rgba(0,0,0,0) 70%
);

pointer-events: none;

z-index: 0;

}


/* project card */

.project {

position: relative;
z-index: 1;

background: rgba(18,18,18,0.72);

padding: 30px;

border-radius: 10px;

border: 1px solid rgba(255,255,255,0.06);

text-decoration: none;
color: inherit;

transition: transform 0.35s ease, box-shadow 0.35s ease;

will-change: transform;

backdrop-filter: blur(3px);

box-shadow: 0 8px 30px rgba(0,0,0,0.55);

}

.project h2 {

font-family: 'Roboto Slab', serif;
margin-top: 0;

color: #ffffff;

text-align: center;

}

.project p {
color: #cfcfcf;
}

.project:hover {

transform: translateY(-8px);

background: rgba(40,40,40,0.95);

box-shadow: 0 20px 60px rgba(0,0,0,0.8);

}


/* =========================
   PROJECT RESPONSIVE
============================= */

@media (max-width:700px){

.projects {

margin: 40px auto 60px auto;

gap: 20px;

}

.project {
padding: 20px;
}

.project h2 {

font-size: 20px;

margin-bottom: 8px;

letter-spacing: 0.4px;

}

.project p {

font-size: 14px;

line-height: 1.5;

}

}

@media (min-width:1400px){

.projects{
max-width: 1200px;
}

}