*{box-sizing:border-box;max-width:100%;scroll-behavior:smooth}body{margin:0;padding-top:60px;background-color:#121212;color:#fff;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;outline:none;overflow-x:hidden}.general{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;right:0;width:100%;padding:10px 20px;background-color:#000;color:#fff;z-index:100}.general .name{font-size:1.3rem;font-weight:700;color:#646cff}nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}nav ul li a{text-decoration:none;color:#fff;font-weight:500;transition:color .3s ease}nav ul li a:hover{color:#646cff}.menu-icon{display:none;font-size:2.5rem;width:20px;height:40px;cursor:pointer;color:#fff;flex-shrink:0;align-items:center;justify-content:center;margin-left:15px}@media (max-width: 768px){.menu-icon{display:block}.nav-menu{display:none;position:fixed;top:64px;right:0;width:200px;height:calc(100vh - 64px);background-color:#000;transform:translate(100%);transition:transform .3s ease-in-out;padding:25px;border-radius:8px 0 0 8px}.nav-menu.active{display:block;transform:translate(0)}.nav-menu ul{display:flex;flex-direction:column;gap:20px;margin:0;padding:0}.nav-menu ul li a{font-size:18px;color:#fff}}.div-content{display:flex;height:50%;background-color:whit;color:#fff}.span-div{width:50%;text-align:center;padding-top:13%}img{object-fit:contain;width:70%}.content{width:50%;margin:0 auto}button{margin-top:30px;padding:10px;background-color:#db1515;border:none;margin-right:5px}button a{text-decoration:none;color:#fff}.name{color:#fff;font-size:50px;font-weight:500;text-align:center}.greetings{color:#db1515}@media (max-width:768px){.div-content{flex-direction:column}.span-div{width:90%}img{width:100%;margin-top:30px}}@media (max-width:480px){.div-content{flex-direction:column}.span-div{width:950%}img{width:100%;margin-top:30px}}.about{color:#fff;width:80%;margin:0 auto;font-size:17px}h1{text-align:center;font-size:30px;color:#fff;margin-top:90px}.my-work{text-align:center;color:#fff;padding:10px}.my-work,button{color:#fff}.project-div{display:grid;grid-template-columns:1fr 1fr 1fr;color:#fff;margin-top:100px;row-gap:20px;column-gap:15px;width:100%}h3{margin-top:100px;color:#fff;text-align:center;font-size:30px}.project-div div{border:3px solid rgb(219,21,21);border-radius:15px}.project-div,button{border-radius:8px;border:none;padding:10px 18px;text-align:center;margin-top:20px}.project-div button{margin-bottom:15px}.project-name{text-align:center;font-weight:400}.first-tech{padding-top:8px}.second-tech{padding-top:61px}.third-tech{padding-top:80px}.fourth-tech{padding-top:77px}.fifth-tech{padding-top:62px}.project-imgf{height:40%}.project-imgw{height:39%}.project-imgg{height:50%}.project-imgm{height:43%}.project-imgt{height:50%}@media (max-width:1024px){.project-div{grid-template-columns:1fr 1fr}}@media (max-width:768px){.project-div{grid-template-columns:1fr}}@media (max-width:480px){.project-div{grid-template-columns:1fr}.project-imgw,.project-imgf{height:30%}.project-imgg{height:34%}.project-imgt{height:41%}}h2{padding-top:30px;color:#fff;text-align:center;margin-bottom:30px}.skill-div{text-align:center;margin-top:60px}.skill-div button{margin:0 20px;font-size:15px;font-weight:700;color:#fff;background-color:#db1515}.css{border-radius:70px;padding:25px 20px}.html{border-radius:70px;padding:25px 15px}.js{border-radius:70px;padding:25px}.react{border-radius:70px;padding:25px 15px}.vite{border-radius:70px;padding:25px 20px}.version{font-size:25px;color:#fff;margin-top:70px;text-align:center;font-weight:400}.div-li{color:#fff;margin-left:40px;font-size:15px}.skill-content{color:#fff;font-size:15px}@media (max-width:768px){.skill-div button{margin:0 10px;font-weight:100}.html{padding:20px 10px}.css{padding:20px 15px}.js{padding:20px}.react{padding:20px 10px}.vite{padding:20px 15px}}@media (max-width:480px){.skill-div button{margin:0 10px;font-weight:100}.html{padding:20px 10px}.css{padding:20px 15px}.js{padding:20px}.react{padding:20px 10px}.vite{padding:20px 15px}}@media (max-width:320px){.skill-div button{margin:0 8px;font-weight:100}.html{padding:20px 10px}.css{padding:20px 15px}.js{padding:20px}.react{padding:20px 10px}.vite{padding:20px 15px}}h4{text-align:center;color:#fff;margin-top:80px;font-size:30px;font-weight:300px}.contact{color:#fff;text-align:center}.contact,p{color:#fff;font-size:18px}.contact span{display:block;list-style:none;color:#fff}.contact,a{text-decoration:none;color:#00f}.contact-p{width:50%}footer{color:#fff;margin-top:40px}