/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }

body { line-height:1.6; color:#333; background:#f9f9f9; scroll-behavior: smooth; }

a { text-decoration:none; color:#fff; }

header.hero {
    display:flex; justify-content:center; align-items:center;
    height:100vh; background:linear-gradient(135deg, #6a11cb, #2575fc);
    color:#fff; text-align:center;
    flex-direction:column;
    overflow:hidden;
}

header.hero .logo { width:120px; margin-bottom:20px; border-radius:50%; }

header.hero h1 { font-size:3rem; margin-bottom:10px; }

header.hero p { font-size:1.2rem; margin-bottom:20px; }

header.hero .btn {
    padding:12px 30px; background:#fff; color:#2575fc; border-radius:25px;
    font-weight:bold; transition:0.3s;
}

header.hero .btn:hover { background:#2575fc; color:#fff; }

section { padding:80px 20px; max-width:1100px; margin:0 auto; }

.projects h2, .contact h2 { text-align:center; margin-bottom:40px; font-size:2rem; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }

.card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:0.3s; }

.card img { width:100%; display:block; }

.card h3 { padding:15px; font-size:1.2rem; }

.card p { padding:0 15px 15px; font-size:0.95rem; color:#666; }

.card:hover { transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }

.contact form {
    max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:15px;
}

.contact input, .contact textarea {
    padding:12px; border-radius:8px; border:1px solid #ccc; font-size:1rem; width:100%;
}

.contact button {
    padding:12px; border:none; border-radius:25px;
    background:#2575fc; color:#fff; font-weight:bold; cursor:pointer;
    transition:0.3s;
}

.contact button:hover { background:#6a11cb; }

footer { text-align:center; padding:20px; background:#222; color:#fff; }

/* Fade-in Animations */
.fade-in { opacity:0; transform: translateY(20px); animation:fadeInUp 1s forwards; }
.delay1 { animation-delay:0.3s; }
.delay2 { animation-delay:0.6s; }
.delay3 { animation-delay:0.9s; }
.delay4 { animation-delay:1.2s; }
.delay5 { animation-delay:1.5s; }
.delay6 { animation-delay:1.8s; }
.delay7 { animation-delay:2.1s; }
.delay8 { animation-delay:2.4s; }

@keyframes fadeInUp {
    to { opacity:1; transform: translateY(0); }
}

/* Responsive */
@media(max-width:768px){
    header.hero h1 { font-size:2.2rem; }
    header.hero p { font-size:1rem; }
}