*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}html{scroll-behavior:smooth}.port-all{overflow:hidden}.about-sec{position:relative}.arrow-home{position:fixed;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#0c0c1d;bottom:30px;right:50px;cursor:pointer}.arrow-home a{text-decoration:none}.arrow-icon{color:#fff;font-size:18px}.color-div{display:flex;position:relative}.port-div{position:absolute;top:0;width:100%}.color-fir{width:650px;height:100vh;background-color:transparent}.color-sec{width:650px;height:100vh}footer{padding-top:30px;padding-bottom:30px;border-top:1px solid #0c0c1d;background-color:#0c0c1d}footer p{text-align:center;font-size:20px;font-weight:600;color:#fff}@media screen and (max-width:3050px){.color-fir,.color-sec{width:50%}}@media screen and (max-width:599px){.color-fir{height:50vh}.color-sec{height:85vh}}.project-div{margin:180px 140px}.pro-text{font-size:40px;color:#0c0c1d;margin-bottom:70px}.project-indiv{display:flex;align-items:center;gap:20px}.project-indiv h1{margin-bottom:20px;font-size:40px;font-weight:500;color:#0c0c1d}.project-indiv p{margin-bottom:20px;font-size:18px;color:#0c0c1d}.project-indiv img{width:350px;height:350px;object-fit:contain;border:2px solid #0c0c1d}.pro-skills{display:flex;gap:20px}.pro-skills a{text-decoration:none;color:#000}.text-pro{width:600px}.html-btn{width:70px;height:20px;color:#000;cursor:pointer;border:1px solid #0c0c1d;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:10px}.html-btn:hover{background-color:#0c0c1d;color:#fff}.css-btn{width:50px;height:20px;color:#000;cursor:pointer;border:1px solid #0c0c1d;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:10px}.css-btn:hover{background-color:#0c0c1d;color:#fff}.github-btn{width:90px;height:20px;color:#000;cursor:pointer;border:1px solid #0c0c1d;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:10px}.github-btn:hover{background-color:#0c0c1d;color:#fff}.js-btn{width:110px;height:20px;color:#000;cursor:pointer;border:1px solid #0c0c1d;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:10px}.js-btn:hover{background-color:#0c0c1d;color:#fff}.pro-m{margin-bottom:180px}@media screen and (max-width:3050px){.project-div{margin:180px auto;width:1000px}}@media screen and (max-width:1044px){.project-div{width:790px;margin:180px auto auto}}@media screen and (max-width:986px){.project-div{width:700px;margin:180px auto auto}.project-indiv p{width:350px}.pro-skills{display:grid;grid-template-columns:repeat(3,1fr);width:270px;column-gap:5px}}@media screen and (max-width:790px){.project-div{width:620px}.project-indiv p{width:300px}.project-indiv img{width:300px;height:300px}}@media screen and (max-width:664px){.project-div{width:530px}.project-indiv p{width:250px}.pro-skills{display:grid;grid-template-columns:repeat(2,1fr);width:180px;column-gap:5px}.project-indiv img{width:300px;height:400px}}@media screen and (max-width:664px){.project-div{width:530px}.project-indiv p{width:400px}.pro-skills{display:grid;grid-template-columns:repeat(3,1fr);width:180px;column-gap:5px}.project-indiv{flex-direction:column}.project-indiv img{width:500px;height:400px}.text-pro{width:500px;margin:auto}}@media screen and (max-width:531px){.project-div{width:450px}.project-indiv img{width:440px;height:400px}.text-pro{width:430px}}@media screen and (max-width:455px){.project-div{width:400px}.project-indiv img{width:400px;height:400px}.text-pro{width:400px}}@media screen and (max-width:400px){.project-div{width:350px}.project-indiv img{width:370px;height:350px}.text-pro{width:400px}.project-indiv h1{margin-bottom:20px;font-size:32px;font-weight:500;color:#0c0c1d}.project-indiv p{margin-bottom:20px;font-size:14px;color:#0c0c1d;width:350px}}.about-box{margin:70px 140px;width:980px}.about-box h1{font-size:40px;color:#0c0c1d}.about-box p{font-size:18px;color:#0c0c1d;margin-top:30px}@media screen and (max-width:3050px){.about-box{margin:70px auto}}@media screen and (max-width:1128px){.header-sec p{font-size:15.5px}.about-box{width:880px;margin:70px auto auto}}@media screen and (max-width:1035px){.about-box{width:800px}}@media screen and (max-width:982px){.about-box{width:720px}}@media screen and (max-width:787px){.about-box{width:620px}}@media screen and (max-width:664px){.about-box{width:550px}}@media screen and (max-width:584px){.about-box{width:470px}}@media screen and (max-width:511px){.about-box{width:400px}}@media screen and (max-width:400px){.about-box{width:360px}}.contact-div{margin:60px 140px}.con-text{font-size:40px;color:#0c0c1d}.contact-indivs{display:flex;align-items:center;gap:90px;margin-top:50px;width:1000px}.contact-indivs h1{font-size:70px;color:#0c0c1d}.mail-div{margin-top:25px}.mail-div h3{font-size:21px;color:#0c0c1d}@media screen and (max-width:3050px){.contact-div{margin:60px auto;width:900px}}@media screen and (max-width:1116px){.contact-div{width:900px;margin:auto auto 60px}}@media screen and (max-width:1007px){.contact-div{width:800px}}@media screen and (max-width:908px){.contact-div{width:700px}}@media screen and (max-width:774px){.contact-div{width:600px}.contact-indivs{gap:30px;width:700px}}@media screen and (max-width:745px){.contact-div{width:600px}.to-div{display:flex;gap:10px}.contact-indivs h1{font-size:60px}.contact-indivs{flex-direction:column;gap:30px;width:620px}.mail-grid{display:flex;gap:65px}}@media screen and (max-width:644px){.contact-div{width:500px}.contact-indivs{width:520px}.contact-indivs h1{font-size:55px}}@media screen and (max-width:559px){.contact-div,.contact-indivs{width:400px}.contact-indivs h1{font-size:50px}.mail-grid{display:flex;gap:45px}.con-text{text-align:center;font-size:50px}}@media screen and (max-width:488px){.contact-div{width:350px}.contact-indivs{width:360px}.contact-indivs h1{font-size:40px}.mail-grid{gap:15px}}@media screen and (max-width:423px){.contact-div,.contact-indivs{width:350px}.contact-indivs h1{font-size:45px}.mail-grid{gap:15px}}@media screen and (max-width:414px){.contact-indivs h1{font-size:42px}}@media screen and (max-width:400px){.contact-indivs h1{font-size:38px;text-align:center}.mail-grid{display:grid;grid-template-columns:repeat(2,1fr)}.contact-indivs{margin-top:30px}}.form-div{display:flex;flex-direction:column;gap:25px}.name-f{width:500px;height:50px;border:1px solid #0c0c1d;padding-left:25px;color:#0c0c1d;outline:none;border-radius:5px;font-size:14px}.name-f::placeholder{font-size:14px;color:#0c0c1d}.message-div{height:170px;width:500px;border:1px solid #0c0c1d;outline:none;border-radius:5px;padding-top:12px;padding-left:20px}.message-f{width:500;border:none;background-color:transparent;outline:none;font-size:14px;color:#0c0c1d}.message-f::placeholder{color:#0c0c1d;font-size:14px}.btn-message{width:500px;height:50px;background-color:#0c0c1d;color:#fff;border-radius:5px;border:none;font-size:14px;cursor:pointer}@media screen and (max-width:1007px){.name-f,.message-div,.btn-message{width:400px}}@media screen and (max-width:908px){.name-f,.message-div,.btn-message{width:300px}}@media screen and (max-width:774px){.form-div{gap:15px}}@media screen and (max-width:745px){.name-f,.message-div,.btn-message{width:500px}}@media screen and (max-width:554px){.name-f,.message-div,.btn-message{width:450px}}@media screen and (max-width:488px){.name-f,.message-div,.btn-message{width:400px}}@media screen and (max-width:400px){.name-f,.message-div,.btn-message{width:370px}}.header{display:flex;align-items:center;justify-content:space-between;margin:30px 140px}.logo{width:25px;height:25px;border:1px solid #0c0c1d;display:flex;align-items:center;justify-content:center;color:#0c0c1d}.header-sec{display:flex;gap:37px}.header-sec p{color:#fff}.header-sec a{text-decoration:none}.menu-bar,.menu{display:none}@media screen and (max-width:1239px){.header-sec p{font-size:15.5px}}@media screen and (max-width:1223px){.header-sec p{font-size:15px}}@media screen and (max-width:1207px){.header-sec p{font-size:14.5px}}@media screen and (max-width:1190px){.header-sec p{font-size:14.1px}}@media screen and (max-width:1177px){.header-sec p{font-size:13.5px}}@media screen and (max-width:1154px){.header-sec p{font-size:14.7px}.home-n{display:none}}@media screen and (max-width:1086px){.header-sec p{font-size:14px}.home-n{display:none}}@media screen and (max-width:1035px){.header-sec p{font-size:13.2px}.home-n{display:none}}@media screen and (max-width:1004px){.header-sec p{font-size:13.2px}.home-n{display:none}.menu-bar{display:block;cursor:pointer;z-index:20}.header-sec{display:none;position:relative}.menu{position:absolute;width:700px;display:flex;gap:30px;flex-direction:column;transform:translateY(-49vh);height:750px;background-color:#0c0c1d;z-index:10;padding:70px 120px;transition:1s ease-in-out}.not-open{position:absolute;width:750px;display:flex;gap:30px;flex-direction:column;transform:translateY(43vh);height:900px;background-color:#0c0c1d;z-index:10;padding:70px 120px;transition:1s ease-in-out}.not-open p{color:#fff;font-size:33px;padding:10px 20px}.not-open a{text-decoration:none}.menu p{color:#fff;font-size:33px;padding:10px 20px}.menu a{text-decoration:none}.menu-icon{width:30px;height:30px;color:#fff}.view-nav{height:400px;width:100%;display:flex}}@media screen and (max-width:884px){.header{margin:30px 80px}}@media screen and (max-width:824px){.not-open{width:650px}}@media screen and (max-width:781px){.not-open,.menu{width:550px}}@media screen and (max-width:696px){.header{margin:30px 20px}}@media screen and (max-width:593px){.not-open{height:700px;transform:translateY(30vh)}.menu{height:600px}}@media screen and (max-width:569px){.not-open,.menu{width:500px}}@media screen and (max-width:515px){.not-open,.menu{width:450px}}@media screen and (max-width:547px){.header{margin:30px 15px}}@media screen and (max-width:494px){.header{margin:30px 5px}}@media screen and (max-width:460px){.not-open,.menu{width:430px}}@media screen and (max-width:439px){.not-open,.menu{width:400px}}@media screen and (max-width:412px){.not-open,.menu{width:380px}}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:150px 0}.hero h3{font-size:22px;color:#0c0c1d}.motion-name{font-size:67px;color:#0c0c1d}.hero strong{color:#fff}@media screen and (max-width:3050px){.hero{margin:260px 0}}@media screen and (max-width:1280px){.hero{margin:140px 0}}@media screen and (max-width:1170px){.hero{margin:100px 0}}@media screen and (max-width:755px){.hero{margin:90px 0}.hero{height:20vh}.motion-name{font-size:58px}}.percentage-box{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:0 auto 50px;width:1020px}.skill-item{width:100%;max-width:350px}.load-box{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.load-box h4{font-size:16px;font-weight:500}.load-div{width:100%;height:10px;background-color:#dcdcdc;border-radius:5px;overflow:hidden}.fir-fill{background-color:#0c0c1d;height:100%;border-radius:5px 0 0 5px}@media (max-width: 1024px){.percentage-box{grid-template-columns:repeat(2,1fr);gap:20px;width:800px}}@media (max-width: 768px){.percentage-box{grid-template-columns:1fr;width:400px}.load-box h4{font-size:15px}}@media (max-width: 480px){.percentage-box{margin:0 15px;gap:15px}.load-box h4{font-size:14px}.load-div{height:8px}}.skill{margin:200px 140px 25px}.skill-indiv{display:grid;grid-template-columns:repeat(5,1fr);gap:35px;width:1050px;margin-top:40px}.skill h1{font-size:40px;color:#0c0c1d}.c-icons{font-size:120px;color:#0c0c1d}.java-icons{font-size:38px;font-weight:800;color:#0c0c1d}.css-box{display:flex;align-items:center}.skill-iconhtml{font-size:120px;color:#0c0c1d}.skill-icons{font-size:100px;color:#0c0c1d}.skill-iconcss{font-size:80px;color:#0c0c1d}.skill-iconsql{font-size:67px;color:#0c0c1d}.skill-icongit{font-size:80px;color:#0c0c1d}@media screen and (max-width:3050px){.skill{margin:200px auto 25px;width:1000px}}@media screen and (max-width:1128px){.skill-indiv{grid-template-columns:repeat(4,1fr)}.skill{margin:180px auto auto;width:880px}.c-icons{font-size:135px;color:#0c0c1d}.java-icons{font-size:53px;font-weight:800;color:#0c0c1d}.css-box{display:flex;align-items:center}.skill-iconhtml{font-size:135px;color:#0c0c1d}.skill-icons{font-size:115px;color:#0c0c1d}.skill-iconcss{font-size:95px;color:#0c0c1d}.skill-iconsql{font-size:82px;color:#0c0c1d}.skill-icongit{font-size:95px;color:#0c0c1d}}@media screen and (max-width:1035px){.skill{width:800px}}@media screen and (max-width:982px){.skill{width:720px}.c-icons{font-size:115px;color:#0c0c1d}.java-icons{font-size:33px;font-weight:800;color:#0c0c1d}.css-box{display:flex;align-items:center}.skill-iconhtml{font-size:115px;color:#0c0c1d}.skill-icons{font-size:95px;color:#0c0c1d}.skill-iconcss{font-size:75px;color:#0c0c1d}.skill-iconsql{font-size:62px;color:#0c0c1d}.skill-icongit{font-size:75px;color:#0c0c1d}}@media screen and (max-width:787px){.skill{width:620px}.skill-indiv{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width:664px){.skill{width:550px}.c-icons{font-size:95px;color:#0c0c1d}.java-icons{font-size:23px;font-weight:800;color:#0c0c1d}.css-box{display:flex;align-items:center}.skill-iconhtml{font-size:95px;color:#0c0c1d}.skill-icons{font-size:75px;color:#0c0c1d}.skill-iconcss{font-size:55px;color:#0c0c1d}.skill-iconsql{font-size:42px;color:#0c0c1d}.skill-icongit{font-size:55px;color:#0c0c1d}}@media screen and (max-width:584px){.skill{width:470px}}@media screen and (max-width:511px){.skill,.skill-indiv{width:400px}.c-icons{font-size:70px;color:#0c0c1d}.java-icons{font-size:20px;font-weight:800;color:#0c0c1d}.css-box{display:flex;align-items:center}.skill-iconhtml{font-size:70px;color:#0c0c1d}.skill-icons{font-size:50px;color:#0c0c1d}.skill-iconcss{font-size:30px;color:#0c0c1d}.skill-iconsql{font-size:20px;color:#0c0c1d}.skill-icongit{font-size:30px;color:#0c0c1d}}@media screen and (max-width:400px){.skill{width:370px}}