html{scroll-behavior:smooth}body{color:#fff;background:#0f172a;margin:0;font-family:Arial,sans-serif}.navbar{z-index:100;background:#020617;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0}.logo{font-size:22px;font-weight:700}.nav-links{gap:25px;display:flex}.nav-links a{color:#38bdf8;font-weight:500;text-decoration:none;transition:all .3s}.nav-links a:hover{color:#fff}.hero{justify-content:space-between;align-items:center;min-height:90vh;padding:80px 60px;display:flex}.hero-left{max-width:550px}.hero h1{font-size:48px}.highlight{color:#38bdf8}.subtitle{color:#94a3b8;margin-top:10px;font-size:18px}.hero-desc{margin-top:15px;font-size:16px}.hero-buttons{margin-top:20px}.btn{border-radius:25px;padding:10px 18px;font-size:14px;font-weight:700;text-decoration:none;transition:all .3s}.github{color:#fff;background:linear-gradient(45deg,#6366f1,#ec4899)}.linkedin{color:#38bdf8;border:2px solid #38bdf8}.linkedin:hover{color:#000;background:#38bdf8}.hero-right{justify-content:center;align-items:center;display:flex}.image-circle{background:radial-gradient(circle,#8b5cf6,#020617);border-radius:50%;width:260px;height:260px;padding:5px;box-shadow:0 0 30px #8b5cf6}.image-circle img{object-fit:cover;border-radius:50%;width:100%;height:100%}.about{justify-content:center;padding:100px 20px;display:flex}.about-container{width:100%;max-width:800px}.about-title{color:#22c1c3;font-size:42px;font-weight:700}.about-text{color:#cbd5f5;font-size:17px;line-height:1.7}.skills-section{text-align:center;padding:60px 20px}.skills-section h2{margin-bottom:20px;font-size:28px}.skills-grid{flex-wrap:wrap;justify-content:center;gap:10px;max-width:800px;margin:auto;display:flex}.tech-btn{color:#38bdf8;background:#1e293b;border:1px solid #38bdf8;border-radius:20px;padding:6px 12px;font-size:13px;transition:all .3s}.tech-btn:hover{color:#000;background:#38bdf8;transform:scale(1.1)}.featured{text-align:center;padding:60px 20px}.featured-title{margin-bottom:20px;font-size:28px}.featured-card{background:#1e293b;border-radius:12px;max-width:600px;margin:auto;padding:20px}.featured-img{object-fit:cover;border-radius:10px;width:100%;max-height:300px;margin-bottom:15px}.projects-section{text-align:center;padding:60px 40px}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px;display:grid}.card{background:#1e293b;border-radius:14px;flex-direction:column;justify-content:space-between;align-items:center;min-height:350px;padding:20px;transition:all .3s;display:flex}.card:hover{transform:translateY(-8px);box-shadow:0 15px 35px #38bdf866}.view-btn{cursor:pointer;background:#38bdf8;border:none;border-radius:5px;margin:15px auto;padding:6px 12px;font-size:13px;font-weight:600;display:block}.view-btn:hover{background:#fff;transform:scale(1.05)}.project-buttons{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:15px;display:flex}.github-btn{color:#fff;background:#020617;border:1px solid #334155;border-radius:20px;padding:8px 16px}.github-btn:hover{background:#1e293b}.live-btn{color:#fff;background:linear-gradient(45deg,#3b82f6,#6366f1);border-radius:20px;padding:8px 16px}.live-btn:hover{transform:scale(1.05);box-shadow:0 0 12px #6366f199}.project-detail{text-align:center;padding:40px}.detail-img{border-radius:10px;width:100%;max-width:700px;margin-bottom:20px}.tech-stack{flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0;display:flex}.back-btn{color:#000;cursor:pointer;background:#38bdf8;border:none;border-radius:8px;margin-top:30px;padding:10px 20px;font-weight:700}.back-btn:hover{background:#fff;transform:scale(1.05)}.contact{text-align:center;padding:100px 20px}.contact-title{color:#facc15;font-size:36px}.contact-desc{color:#cbd5f5;max-width:600px;margin:20px auto}.contact-boxes{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.contact-card{color:#facc15;border:1px solid #facc15;border-radius:15px;padding:15px 25px;text-decoration:none}.contact-card:hover{color:#000;background:#facc15;transform:scale(1.05)}@media (width<=768px){.hero{text-align:center;flex-direction:column;padding:40px 20px}.hero-right{margin-top:30px}}