*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;scroll-behavior:smooth;font-family:Poppins,sans-serif;zoom:98%}:root{--bg-color: #ffffff;--second-bg-color: #f0f0f0;--text-color: #000000;--main-color: rgb(63, 12, 180)}@media (prefers-color-scheme: dark){:root{--bg-color: #121212;--second-bg-color: #323946;--text-color: #fff}}html{font-size:78%;overflow-x:hidden}body{background:var(--bg-color);color:var(--text-color)}section{min-height:100vh;padding:10rem 9% 2rem}.header{position:fixed;top:0;left:0;width:100%;padding:2rem 9%;background:var(--bg-color);display:flex;justify-content:space-between;align-items:center;z-index:100;border-bottom:.1rem solid rgba(0,0,0,.2)}.logo{font-size:1.8rem;color:var(--text-color);font-weight:600;cursor:default}#menu-icon{font-size:3.6rem;color:var(--text-color);display:none}.navbar{display:flex}.navbar a{font-size:1.5rem;color:var(--text-color);margin-left:4rem;transition:.3s;cursor:pointer}.navbar a:hover,.navbar a.active{color:var(--main-color)}.home{display:flex;justify-content:center;align-items:center}.home-content h3{font-size:3.2rem;font-weight:700}.home-content h3 :nth-of-type(2){margin-bottom:2rem}span{color:#9853d8}.home-content h1{font-size:3.8rem;font-weight:700;line-height:1.3}.home-img img{width:35vw;animation:floatImage 4s ease-in-out infinite}@keyframes floatImage{0%{transform:translateY(0)}50%{transform:translateY(-2.4rem)}to{transform:translateY(0)}}.home-content p{font-size:1.6rem}.social-media a{display:inline-flex;justify-content:center;align-items:center;width:4rem;height:4rem;background:transparent;border:.2rem solid #0ef;border-radius:50%;font-size:2rem;color:#0ef;margin:3rem 1.5rem 3rem 0;transition:.5s ease}.social-media a:hover{background:#0ef;color:var(--second-bg-color)}.btn{display:inline-block;padding:1rem;background:var(--main-color);border-radius:4rem;color:#f5f5f5;font-weight:600;letter-spacing:.1rem;transition:.5s ease;margin-top:2rem}.btn:hover{box-shadow:0 0 1rem var(--main-color)}@media (max-width: 768px){.navbar{display:none;position:absolute;top:100%;left:0;width:100%;flex-direction:column;background-color:var(--bg-color);padding:1rem 0;border-top:.1rem solid rgba(0,0,0,.2)}.navbar.active{display:flex}.navbar a{margin:1rem 0;font-size:1.6rem}#menu-icon{display:block}}@media (max-width: 480px){html{font-size:60%}.home-content h1{font-size:2.5rem}}.about{display:flex;justify-content:center;align-items:center;gap:2rem;background:var(--second-bg-color)}.about-img img{width:30vw;height:auto}.heading{text-align:center;font-size:3.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}.services h2{margin-bottom:5rem}.services-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}.services-container .services-box{flex:1 1 30rem;background:var(--second-bg-color);padding:3rem 2rem 4rem;border-radius:2rem;text-align:center;border:.2rem solid var(--bg-color)}.services-container .services-box:hover{border-color:#28b0b9}#more,#more1,#more2,#more3,#more4,#more5{display:none;color:var(--text-color)}#dots,#dots1,#dots2,#dots3,#dots4,#dots5{color:var(--text-color)}.services-box i{font-size:7rem;color:#28b0b9}.services-box h3{font-size:2.4rem}.services-box p,.services-box p span{margin:1rem 0 3rem}.portfolio{background-color:var(--second-bg-color)}.portfolio h2{margin-bottom:4rem}.portfolio-container{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:2.5rem}.portfolio-container .portfolio-box{position:relative;border-radius:2rem;box-shadow:0 0 1rem var(--bg-color);overflow:hidden;display:flex}.portfolio-box img{width:100%;transition:.5s ease}.portfolio-box:hover img{transform:scale(1.1)}.portfolio-box .portfolio-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(#0000001a,#28b0b9);display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 4rem;transform:translateY(100%)}.portfolio-box:hover .portfolio-layer{transform:translateY(0);transition:.5s ease}.portfolio-layer h4{font-size:3rem}.portfolio-layer p{font-size:1.6rem;margin:.3rem 0 1rem}.portfolio-layer a{display:inline-flex;justify-content:center;align-items:center;width:5rem;height:5rem;background:var(--text-color);border-radius:50%}.portfolio-layer a i{font-size:2rem;color:var(--second-bg-color)}.contact h2{margin-bottom:3rem}.contact form{max-width:70rem;margin:1rem auto 3rem;text-align:center}.contact form .input-box{display:flex;justify-content:space-between;flex-wrap:wrap}.contact form .input-box input,.contact form textarea{width:100%;padding:1.5rem;font-size:1.6rem;color:var(--text-color);background:var(--second-bg-color);border-radius:.8rem;margin:.7rem 0}.contact form .input-box input{width:49%}.contact form textarea{resize:none}.contact form .btn{margin-top:2rem;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.footer .footer-iconTop{display:flex;align-items:center}.footer .footer-iconTop a{margin-right:2rem;color:var(--text-color);transition:all .3s ease;position:relative}.footer-icon a{display:inline-flex;justify-content:center;align-items:center;font-size:2rem;margin-right:1rem}.footer-icon a:hover{color:var(--main-color)}.footer{display:flex;justify-content:space-between;align-items:center;padding:2rem 9%;background:var(--second-bg-color);color:var(--text-color)}.footer-text p{margin:0;font-size:1.8rem}.footer-iconTop{display:flex;align-items:center}.footer-iconTop a{display:inline-flex;justify-content:center;align-items:center;font-size:3rem;transition:all .3s ease;color:var(--text-color);margin-left:1rem}.footer-iconTop a:hover{transform:translateY(-.2rem)}@media (max-width: 768px){html{font-size:70%}.header{padding:1.5rem 5%}.logo{font-size:1.6rem}.navbar a{font-size:1.4rem;margin-left:2rem}.home-content h3{font-size:2.5rem}.home-content h1{font-size:3rem}.home-img img{width:50vw}.about{flex-direction:column}.about-img img{width:80vw}.portfolio-container{grid-template-columns:1fr}.portfolio-layer h4{font-size:2.5rem}.portfolio-layer p{font-size:1.4rem}.contact form .input-box input{width:100%}.contact form .input-box{flex-direction:column}.footer{flex-direction:column;text-align:center}}@media (max-width: 480px){html{font-size:60%}.home-content h3{font-size:2rem}.home-content h1{font-size:2.5rem}.about-content h2,.services-box h3{font-size:2rem}.services-container .services-box{flex:1 1 100%}}