*,:before,:after{box-sizing:border-box}body{color:#e5e7eb;background-color:#020617;margin:0;font-family:Inter,Arial,sans-serif}.hero-text h1{-webkit-text-fill-color:transparent;background-image:url(../media/img.67ee4e19.jpg);background-position:0%;background-size:200%;-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:600;animation:10s linear infinite moveBg}@keyframes moveBg{0%{background-position:0%}to{background-position:100%}}.hero-container{flex-direction:column;justify-content:center;align-items:center;min-height:60vh;padding:15px;display:flex;position:relative}.hero-wrapper{background:linear-gradient(135deg,#0f172a,#ffffff0d) 0 0/200% 200%;border-radius:16px;width:100%;max-width:1200px;padding:4rem;animation:10s infinite alternate moveGradient;position:relative;box-shadow:0 25px 60px #0009}.image-container:hover{color:#020617;opacity:.8;background-image:url(../media/img.67ee4e19.jpg);background-size:cover;animation:10s linear infinite moveBg}.hero-content{z-index:1;justify-content:space-between;align-items:center;gap:48px;display:flex;position:relative}.hero-text{max-width:600px}.hero-text h1 span{color:#38bdf8}.hero-text h2{margin-top:12px;font-size:1.75rem;font-weight:500}.hero-text p{color:#cbd5f5;margin-top:20px;font-size:1rem;line-height:1.3}.role:after{content:"Full Stack Developer";color:#38bdf8;font-weight:600;animation:4s ease-in-out infinite changespan}@keyframes changespan{0%{content:"Full Stack Developer"}50%{content:"Software Engineer"}to{content:"Full Stack Developer"}}.hero-buttons{gap:16px;margin-top:28px;display:flex}.btn{border-radius:10px;padding:12px 22px;font-weight:600;text-decoration:none;transition:all .25s}.btn.primary{color:#020617;background:#38bdf8}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #38bdf866}.btn.secondary{color:#e5e7eb;border:1px solid #fff3}.btn.secondary:hover{background:#ffffff1a}.image-container{z-index:1;border:5px solid #38bdf8b3;border-radius:20px;width:280px;height:280px;transition:transform .3s;animation:4s ease-in-out infinite float;position:absolute;top:50%;right:-60px;overflow:hidden;transform:translateY(-50%);box-shadow:0 0 35px #38bdf859,0 15px 50px #0009}.image-container:hover{transform:translateY(-50%)scale(1.05)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@media (max-width:768px){.image-container{width:200px;height:200px;margin-bottom:20px;position:relative;top:auto;right:auto;transform:none}}.image-container img{object-fit:cover}@keyframes moveGradient{0%{background-position:0%}to{background-position:100%}}@media (max-width:768px){.hero-wrapper{padding:0}.hero-content{text-align:center;flex-direction:column-reverse;gap:10px;padding:30px 8px}.hero-text h1{margin-bottom:6px;font-size:1.6rem}.hero-text h2{font-size:.5rem}.hero-text p{text-align:left;margin:0;font-size:.9rem;font-style:oblique}.btn{padding:8px 12px}.btn.primary,.btn.secondary{padding:8px auto;font-size:12px}.image-container{width:200px;height:200px}}