@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
color: white;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
transition: background 0.3s;
}
.btn-primary:hover {
background: #0056b3;
}


/* SECTIONS */
section {
padding: 60px 10%;
}
section h2 {
font-size: 32px;
margin-bottom: 20px;
}


/* PROJECTS */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.project-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.project-card:hover {
transform: translateY(-5px);
}


/* CONTACT FORM */
.contact-section p {
margin-bottom: 30px;
}
.contact-form {
background: white;
padding: 30px;
border-radius: 8px;
max-width: 600px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 16px;
}


.response-message {
margin-top: 15px;
font-weight: bold;
color: green;
}


/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #111;
color: white;
margin-top: 40px;
}