@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);body,html{overflow-x:hidden}.header,body{background:var(--bg-color)}#menu-icon,.logo,.navbar a,body{color:var(--text-color)}.btn,.navbar a,.skills-box{transition:.3s}.contact .sub-heading,.contact-container .contact-box,.heading,.skills{text-align:center}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;outline:0;scroll-behavior:smooth;font-family:Poppins,sans-serif}:root{--bg-color:#1f242d;--second-bg-color:#323946;--text-color:#fff;--main-color:#0ef}html{font-size:62.5%}section{min-height:100vh;padding:10rem 9% 2rem}.header{position:fixed;top:0;left:0;width:100%;padding:2rem 9%;display:flex;align-items:center;justify-content:space-between;z-index:100}.header .sticky{border-bottom:.1rem solid rgba(0,0,0,.2)}.logo{font-size:2.5rem;font-weight:600;cursor:default}.navbar a{font-size:1.7rem;margin-left:4rem}.navbar a.active,.navbar a:hover,.social-media a,span{color:var(--main-color)}.btn,.contact-box i:hover,.social-media a:hover{background:var(--main-color);color:var(--second-bg-color);box-shadow:0 0 1rem var(--main-color)}#menu-icon{font-size:3.6rem;display:none}.home{display:flex;align-items:center;justify-content:space-between}.home-content h3{font-size:3.2rem;font-weight:700}.home-content h3:nth-of-type(2){margin-bottom:2rem}.home-content h1{font-size:5.6rem;font-weight:700;line-height:1.3}.home-img img{width:30vw;animation:4s ease-in-out infinite floatImage}@keyframes floatImage{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4rem)}}.social-media a{display:inline-flex;justify-content:center;align-items:center;width:4rem;height:4rem;background:0 0;border:.2rem solid var(--main-color);border-radius:50%;font-size:2rem;margin:3rem 1.5rem 3rem 0;transition:.5s}.btn{display:inline-block;padding:1rem 2.8rem;border-radius:4rem;font-size:1.6rem;letter-spacing:.1rem;font-weight:600}.btn:hover{box-shadow:none}.about{display:flex;justify-content:center;align-items:center;gap:2rem;background:var(--second-bg-color)}.about-img img{width:30vw}.heading{font-size:4.5rem}.about-content h2{text-align:left;line-height:1.2}.about-content h3{font-size:2.6rem}.about-content p{font-size:1.6rem;margin:2rem 0 3rem}.skills{padding:6rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.skills-intro{margin:0 auto 3rem;opacity:.9;font-size:1.5rem}.skills-wrapper{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:2.5rem;margin-top:2rem;justify-content:center;margin-left:auto;margin-right:auto;max-width:900px}.skills-box{background:#101010;min-width:340px;padding:1.5rem;border-radius:15px}.skills-box:hover{transform:translateY(-10px);box-shadow:0 0 18px rgba(0,255,255,.2)}.skills-box h3{margin-bottom:1rem;color:#00eaff;font-weight:600;font-size:2.5rem}.skills-box ul{list-style:none;padding:0}.skills-box li{margin:.6rem 0;opacity:.9;display:flex;align-items:center;font-size:1.3rem;font-weight:600;justify-content:center;gap:8px}.skills-box li i{font-size:1.5rem;color:#00eaff}.project{background:var(--bg-color)}.project h2{margin-bottom:4rem}.project-container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.5rem}.project-container .project-box{position:relative;display:flex;margin-top:2rem;border-radius:2rem;overflow:hidden;box-shadow:0 0 1rem var(--second-bg-color);width:360px;height:260px;transition:transform .3s}.project-box img{width:100%;transition:.5s}.project-box:hover img{transform:scale(1.1)}.project-box .project-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.5);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 4rem;transform:translateY(100%);transition:.5s}.project-box:hover .project-layer{transform:translateY(0)}.project-layer h4{font-size:3rem;color:#242424}.project-layer p{font-size:1.8rem;font-weight:600;margin:.3rem 0 1rem;line-height:1.9rem;color:#0e0d0d}.project-layer a{display:inline-flex;justify-content:center;align-items:center;width:3rem;height:3rem;background:var(--text-color);border-radius:50%}.project-layer a i{font-size:2rem;color:var(--second-bg-color)}.contact{background:var(--second-bg-color)}.contact .sub-heading{font-size:2rem;margin:4rem 0 10rem;letter-spacing:.1rem;font-weight:500}.contact-container{display:flex;width:100%;justify-content:space-evenly;align-items:center}.contact-box i{display:inline-flex;justify-content:center;background:0 0;align-items:center;width:8rem;height:8rem;font-size:3rem;border:.2rem solid var(--main-color);border-radius:50%;color:var(--main-color);transition:.3s}.contact-box h3{font-size:2rem;margin:3rem 0 2rem;text-transform:uppercase}.contact-box h4{font-size:1.3rem}.footer{display:flex;justify-content:space-between;align-items:center;background:var(--bg-color);padding:2rem 9%}.footer-text{font-size:1.6rem}.footer-iconTop a{display:inline-flex;justify-content:center;align-items:center;padding:.8rem;background:var(--main-color);border-radius:.8rem;transition:.5s}.footer-iconTop a:hover{box-shadow:0 0 1rem var(--main-color)}.footer-iconTop a i{font-size:2.4rem;color:var(--second-bg-color)}body::-webkit-scrollbar{display:none}@media (max-width:1200px){html{font-size:55%}}@media (max-width:991px){.header,footer{padding:2rem 3%}section{padding:10rem 3% 2rem}.project{padding-bottom:7rem}.contact{min-height:auto}}@media (max-width:768px){#menu-icon,.navbar a,.navbar.active{display:block}.navbar{position:absolute;top:100%;left:0;right:0;width:100%;padding:1rem 3%;background:var(--bg-color);border-top:.1rem solid rgba(0,0,0,.2);box-shadow:0 .5rem 1rem rgba(0,0,0,.2);display:none;overflow-x:hidden}.navbar a{font-size:2rem;margin:3rem 0}.home{flex-direction:column}.home-content h3{font-size:2.6rem}.home-content h1{font-size:5rem}.about img,.home-img img{width:70vw;margin-top:4rem}.about{flex-direction:column-reverse}.skills-wrapper{grid-template-columns:1fr}.project h2{margin-bottom:3rem}.project-container{gap:1.5rem}}@media(max-width:617px){.project-container{grid-template-columns:1fr}}@media(max-width:450px){html{font-size:50%}.contact-box{width:100%}}@media(max-width:365px){.home-img,.home-img img{width:90vw}.footer{flex-direction:column-reverse}.footer p{text-align:center;margin-top:2rem}}