.hero{width:100%;height:60vh}.hero-content{max-width:1200px;margin:auto;height:100%;color:#fff;padding:0 30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;animation:exit-to-left linear;animation-timeline:view();animation-range:exit 0% exit 80%}.hero-content h1{font-size:68px;margin-bottom:-10px}.hero-content p{font-size:28px}.hero-btn{padding:16px 18px;background-color:#ff4b57;color:#fff;font-size:14px;border:1px solid #ff4b57;cursor:pointer}.hero-btn:hover{background-color:transparent;color:#ff4b57;border:1px solid #ff4b57;filter:drop-shadow(0 0 8px #ff4b57) drop-shadow(0 0 4px #ff4b57);transition:all .4s ease-in-out}@keyframes exit-to-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-150px)}}.skills{width:100%;height:100%;padding:20px 0;margin:40px 0}.skills-content{max-width:1200px;margin:auto;display:flex;flex-direction:column;padding:0 30px}.skills-card-container{width:100%;height:100%;display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin:30px 0;animation:scrolling-up linear;animation-timeline:view();animation-range:entry 0% cover 40%}.skills-card{border:1px solid rgb(69,69,69);padding:20px;width:30vh;min-width:200px;min-height:150px}.skills-card p{color:#a4a2a2}.skills-card:hover{box-shadow:0 0 10px #4df9ff;transition:all .5s ease-in-out}.skills-card:hover .html-icon{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 0 8px #ff4b57);transition:all .5s ease-in-out}.skills-card:hover .css-icon{filter:brightness(0) saturate(100%) invert(36%) sepia(90%) saturate(2400%) hue-rotate(210deg) brightness(100%) contrast(100%) drop-shadow(0 0 8px #2965f1);transition:all .5s ease-in-out}.skills-card:hover .js-icon{filter:brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(1500%) hue-rotate(10deg) brightness(105%) contrast(100%) drop-shadow(0 0 8px #f0db4f);transition:all .5s ease-in-out}.skills-card:hover .vcs-icon{filter:brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(4000%) hue-rotate(340deg) brightness(100%) contrast(105%) drop-shadow(0 0 8px #f1502f);transition:all .5s ease-in-out}.skills-card:hover .react-icon{filter:brightness(0) saturate(100%) invert(75%) sepia(86%) saturate(1000%) hue-rotate(150deg) brightness(105%) contrast(101%) drop-shadow(0 0 8px #61dafb);transition:all .5s ease-in-out}.skills-card:hover .nodejs-icon{filter:brightness(0) saturate(100%) invert(55%) sepia(28%) saturate(1000%) hue-rotate(80deg) brightness(95%) contrast(95%) drop-shadow(0 0 8px #68a063);transition:all .5s ease-in-out}.skills-card:hover .express-icon{filter:drop-shadow(0 0 8px #ffffff);transition:all .5s ease-in-out}.skills-card:hover .mongodb-icon{filter:brightness(0) saturate(100%) invert(50%) sepia(60%) saturate(1200%) hue-rotate(85deg) brightness(90%) contrast(100%) drop-shadow(0 0 8px #4ea94b);transition:all .5s ease-in-out}@keyframes scrolling-up{0%{opacity:0;transform:translateY(250px)}to{opacity:1;transform:translateY(0)}}.projects{width:100%;height:100%;padding:20px 0;margin:40px 0}.projects-content{max-width:1200px;margin:auto;display:flex;flex-direction:column;padding:0 30px}.projects-card-container{width:100%;height:100%;display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;animation:right-to-left linear;animation-timeline:view();animation-range:entry 0% cover 40%;margin:40px}.projects-card{border:1px solid rgb(69,69,69);padding:20px;width:30vh;min-width:200px;min-height:150px}.projects-middle-card{background-color:#ff4b57}.projects-card button{width:100%;padding:15px;font-size:14px;font-weight:700;margin:10px 0;border:1px solid #ff4b57;background-color:transparent;color:#ff4b57;cursor:pointer}.projects-card button:hover{filter:drop-shadow(0 0 8px #ff4b57) drop-shadow(0 0 4px #ff4b57);transition:all .4s ease-in-out}.projects-card .btn-black{background-color:#000;color:#fff;border:1px solid #000}.projects-card .btn-black:hover{background-color:transparent;color:#000;border:1px solid #000;filter:drop-shadow(0 0 8px #000) drop-shadow(0 0 4px #000);transition:all .4s ease-in-out}.projects-card:hover{box-shadow:0 10px 10px #4df9ff;transition:all .5s ease-in-out}@keyframes right-to-left{0%{opacity:1;transform:translate(150px)}to{opacity:0;transform:translate(0)}}footer{width:100%;height:60px;background-color:#ff4b57}footer p{text-align:center;padding:20px 0;color:#fff}.contact-section{padding:60px 20px;background:#111;color:#fff;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.contact-container{max-width:600px;margin:0 auto;animation:left-to-right linear;animation-timeline:view();animation-range:entry 0% cover 40%}.contact-container h2{font-size:36px;margin-bottom:10px;color:#ff4b57}.contact-container p{font-size:16px;margin-bottom:40px;color:#ccc}.contact-form{display:flex;flex-direction:column;gap:20px}.form-group input,.form-group textarea{width:100%;padding:15px;border-radius:8px;border:none;outline:none;font-size:16px;transition:all .3s ease;background:#222;color:#fff}.form-group input::placeholder,.form-group textarea::placeholder{color:#888}.form-group input:focus,.form-group textarea:focus{background:#333;box-shadow:0 0 10px #61dafb}.btn-send{background:#ff4b57;color:#111;font-weight:700;padding:15px;border-radius:8px;border:none;cursor:pointer;font-size:18px;transition:all .3s ease}.btn-send:hover{background:#ff4b57;color:#fff;box-shadow:0 0 15px #ff4b57}.status-message{margin-top:20px;color:#61dafb;font-weight:700;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.contact-container h2{font-size:28px}.btn-send{font-size:16px}}@keyframes left-to-right{0%{opacity:1;transform:translate(-150px)}to{opacity:0;transform:translate(0)}}body{margin:0;background-color:#1a1a1a;color:#fff;font-family:Arial,Helvetica,sans-serif}.navbar{width:100%;padding:18px 0;background-color:#111;box-shadow:0 2px 10px #0000004d}.container{max-width:1200px;margin:auto;padding:0 30px;display:flex;justify-content:space-between;align-items:center}.logo{font-size:28px;font-weight:700;cursor:pointer}.logo a{text-decoration:none;color:#fff}.nav-menu{display:flex;gap:2.5rem}.nav-link{text-decoration:none;color:#ccc;font-size:18px;transition:color .3s ease}.nav-link:hover{color:#fff}.nav-link.active{color:#ff4b57;font-weight:700}.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}.hamburger span{width:28px;height:3px;background:#fff}@media(max-width:768px){.hamburger{display:flex}.nav-menu{position:absolute;top:68px;right:0;width:200px;background-color:#111;flex-direction:column;padding:20px;gap:1.5rem;display:none}.nav-menu.open{display:flex}}.error-container{text-align:center;max-width:600px;margin:30px auto auto;width:100%;animation:fadeIn .8s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.error-code{font-size:clamp(80px,20vw,180px);font-weight:900;color:#ff4b57;line-height:1;margin-bottom:-40px;text-shadow:0 0 30px #ff4b57;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.error-icon{width:clamp(120px,30vw,200px);height:clamp(120px,30vw,200px);margin:0 auto 30px;position:relative;animation:shake 4s ease-in-out infinite}@keyframes shake{0%,90%,to{transform:rotate(0)}92%,96%{transform:rotate(-5deg)}94%,98%{transform:rotate(5deg)}}.error-icon svg{width:100%;height:100%;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}.error-container h1{font-size:clamp(28px,5vw,48px);color:#ff4b57;margin-bottom:15px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.2)}.error-container p{font-size:clamp(16px,3vw,20px);color:#a3a0a0;margin-bottom:35px;line-height:1.6;text-shadow:0 1px 5px rgba(0,0,0,.1)}.btn-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.btn{display:inline-block;padding:15px 35px;text-decoration:none;font-size:16px;font-weight:600;border-radius:50px;transition:all .3s ease;cursor:pointer;border:none;box-shadow:0 5px 15px #0003}.btn-primary{background:#fff;color:#ff4b57}.btn-primary:hover{background:#fffffff2;transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.btn-secondary{background-color:#ff4b57;color:#fff;border:2px solid rgba(255,255,255,.5)}.btn-secondary:hover{background-color:#fc3a47;border-color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.decorative-circles{position:fixed;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:-1;overflow:hidden}.circle{position:absolute;border-radius:50%;background:#ffffff0d;animation:rise 15s infinite ease-in-out}.circle:nth-child(1){width:80px;height:80px;left:10%;bottom:-100px;animation-delay:0s}.circle:nth-child(2){width:120px;height:120px;left:70%;bottom:-150px;animation-delay:3s}.circle:nth-child(3){width:60px;height:60px;left:40%;bottom:-80px;animation-delay:6s}.circle:nth-child(4){width:100px;height:100px;left:85%;bottom:-120px;animation-delay:9s}.circle:nth-child(5){width:70px;height:70px;left:25%;bottom:-90px;animation-delay:12s}@keyframes rise{0%{bottom:-150px;opacity:0}50%{opacity:.5}to{bottom:110vh;opacity:0}}@media(max-width:600px){.btn{width:100%;max-width:250px}}