header{z-index:1000;background-color:#fffffff2;width:100%;position:fixed;top:0;left:0}header .container{flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:4rem;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem;box-shadow:0 1.125rem 1.5rem -1.5rem #0307124d}header .container-logo{align-items:center;gap:.25rem;display:flex}header .container-logo img{margin-bottom:4px}header .container-logo h1{text-transform:lowercase;letter-spacing:-1px;color:var(--black);margin:-10px 0 0;font-size:2.7rem;font-weight:900}header nav ul{justify-content:center;align-items:center;gap:.5rem;list-style:none;display:flex}header nav ul li a{color:var(--black);text-transform:uppercase;letter-spacing:1px;border-radius:2px;padding:10px 20px;font-size:1rem;font-weight:900;text-decoration:none;transition:all .3s;display:inline-block}header nav ul li a:hover{background-color:var(--black);color:#fff;transition:all .3s}header nav ul li a:hover svg{fill:#fff;transition:all .3s}.menu-toggle{cursor:pointer;z-index:1001;background:0 0;border:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;padding:0;display:none;position:absolute;top:16px;right:7%}.menu-toggle span{background-color:var(--black);transform-origin:50%;border-radius:3px;width:100%;height:3px;transition:all .3s}.menu-toggle.active span:first-child{transform:rotate(45deg)translate(8px,8px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg)translate(7px,-7px)}.menu-overlay{opacity:0;visibility:hidden;z-index:1001;background:#000000bf;width:100%;height:100vh;transition:opacity .3s,visibility .3s;position:fixed;top:0;left:0}.menu-overlay.active{opacity:1;visibility:visible}.mobile-menu{z-index:1002;background-color:#fffffff2;width:90%;height:100vh;transition:transform .3s;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:2px 0 10px #0000001a}.mobile-menu.open{transform:translate(0)}.mobile-menu nav{justify-content:center;align-items:center;height:100vh;padding:5rem 2rem 2rem;display:flex}.mobile-menu nav ul{flex-direction:column;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.mobile-menu nav ul li a{color:var(--black);text-transform:uppercase;letter-spacing:1px;border-radius:5px;align-items:center;gap:1rem;padding:15px 20px;font-size:1.8rem;font-weight:900;text-decoration:none;transition:all .3s;display:flex}.mobile-menu nav ul li a:hover{background-color:var(--black);color:#fff}.mobile-menu nav ul li a:hover svg{stroke:#fff;width:2rem}@media (max-width:768px){.desktop-nav{display:none}.menu-toggle{display:flex}}@media (min-width:769px){.mobile-menu,.menu-overlay{display:none}}@media (max-width:768px){header .container-logo{margin-top:5px}header .container-logo img{max-width:30px;margin-bottom:5px}header .container-logo h1{font-size:2rem}}
#hero{margin:26vh auto 11vh}#hero .container{justify-content:center;display:flex}#hero .container-image{flex-direction:column;gap:20px;width:100%;max-width:1260px;height:auto;display:flex;position:relative}#hero img.desktop,#hero img.mobile{max-width:100%;height:auto}#hero .tagline{text-align:center;justify-content:center;align-items:center;width:100%;margin-top:40px;padding:20px;font-size:2rem;font-weight:900;line-height:1;display:flex}#hero .tagline a:hover{background:0 0}#hero .tagline svg{fill:var(--black);transition:all .3s}#hero .tagline svg:hover{transform:translateY(15px)}#hero .link:hover{background-color:var(--black);color:#fff;transition:all .3s}@media (orientation:landscape){#hero img.mobile{display:none}}@media (orientation:portrait){#hero{margin:34vh auto 25vh;padding:0 7%}#hero img.desktop{display:none}}
#portfolio{margin-bottom:60px}#portfolio .container{flex-direction:column;gap:40px;display:flex}#portfolio .project{width:100%;color:var(--black);background:#fff;margin-bottom:120px;transition:all .3s ease-in-out}#portfolio .project:hover{background:var(--project-color);color:#fff;border-color:var(--project-color);box-shadow:0 10px 15px #00000026}#portfolio .project:nth-child(odd) .row{flex-direction:row-reverse}#portfolio .project .row{gap:60px;width:100%;display:flex}#portfolio .project .row .col-1{aspect-ratio:16/9;width:100%;margin:-20px 0 10px;position:relative}#portfolio .project .row .col-1 img{object-fit:contain;transition:transform .2s ease-in-out}#portfolio .project:hover .row .col-1 img{transform:scale(1.075)}#portfolio .project .row .col-2{width:100%;padding-bottom:40px}#portfolio .project .row .col-2 h2{font-size:2.5rem;font-family:var(--font-space-grotesk);letter-spacing:-1px;margin-bottom:0}#portfolio .project .row .col-2 p{font-size:1.3rem}#portfolio .project .row .col-2 .cta{margin-top:30px}#portfolio .project .row .col-2 .cta a{color:var(--black);border:2px solid var(--black);border-radius:2px;align-items:center;gap:10px;width:100%;max-width:185px;padding:10px 20px;font-size:1.2rem;font-weight:600;text-decoration:none;transition:all .1s ease-in-out;display:flex}#portfolio .project:hover .row .col-2 .cta a svg{fill:#fff}#portfolio .project:hover .row .col-2 .cta a{color:#fff;border-color:#fff}#portfolio .project:hover .row .col-2 .cta a:hover svg{fill:var(--project-color)}#portfolio .project:hover .row .col-2 .cta a:hover{color:var(--project-color);background:#fff;border-color:#fff}@media (orientation:portrait){#portfolio .project .row{flex-direction:column!important}#portfolio .project{margin-bottom:80px;padding-bottom:40px}#portfolio .project:last-child{margin-bottom:0}#portfolio .project .row{gap:0}#portfolio .project .row .col-2{padding:0 7%}#portfolio .project .row .col-2 h2{margin:0}#portfolio .project .row .col-2 .cta a{width:100%}#portfolio .services{overflow-x:hidden}}
#services{color:#f5f5f5;margin:0;padding:0 0 120px;position:relative;overflow:hidden}#services .container{background:#141414;border-radius:10px;padding:70px 50px}.tech-scroll-1{background:linear-gradient(to bottom,#fff 51%,var(--black)49%);align-items:center;width:100%;height:200px;margin-bottom:60px;display:flex;position:relative;overflow:hidden}.tech-scroll-1 .tech-scroll-content{white-space:nowrap;gap:4rem;animation:60s linear infinite scroll;display:flex}.tech-scroll-1 .tech-word{text-transform:uppercase;background:linear-gradient(#000 51%,#fff 49%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;flex-shrink:0;font-size:7rem;font-weight:700;display:inline-block;position:relative}.tech-scroll-2{background:#fff;align-items:center;width:100%;margin-bottom:-7px;display:flex;position:relative;overflow:hidden}.tech-scroll-2 .tech-scroll-content{white-space:nowrap;gap:4rem;animation:80s linear infinite scroll-reverse;display:flex}.tech-scroll-2 .tech-word{text-transform:uppercase;color:#3f3f3f;letter-spacing:-1px;flex-shrink:0;font-size:2rem;font-weight:900;line-height:1;display:inline-block;position:relative}.tech-scroll-3{align-items:center;width:100%;margin-bottom:90px;display:flex;position:relative;overflow:hidden}.tech-scroll-3 .tech-scroll-content{white-space:nowrap;gap:4rem;animation:180s linear infinite scroll;display:flex}.tech-scroll-3 .tech-word{text-transform:uppercase;color:#f0f0f0;letter-spacing:-3px;flex-shrink:0;font-size:4rem;font-weight:900;line-height:1;display:inline-block;position:relative}#services p{margin:0;font-size:1.3rem;font-weight:300}#services p strong{font-weight:900}.services-header{margin-bottom:60px}.services-header h2{max-width:800px;margin:0 0 60px;font-size:3rem;line-height:1}.services-container{flex-wrap:wrap;gap:2rem;display:flex}.services-item{border:2px solid var(--black);border-radius:10px;gap:1rem;width:48%;padding:5px 25px 5px 20px;transition:all .3s;display:flex}.services-item:hover{cursor:pointer;border-color:#fff}.services-item img{max-width:70px}.services-item .services-item-icon{justify-content:center;align-items:center;display:flex}.services-item .services-item-content{flex-direction:column;justify-content:center;gap:.5rem;display:flex}.services-item h3{color:#fff;margin:0;font-size:1.5rem}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes scroll-reverse{0%{transform:translate(-50%)}to{transform:translate(0)}}@media (max-width:768px){.tech-word{font-size:5rem}.tech-scroll{height:120px}.tech-scroll-content{gap:2rem}#services .tech-scroll-3{margin-bottom:45px}#services{padding-bottom:30px}#services .container{margin:0 7%;padding:14% 7%!important}#services .container .services-header{margin-bottom:30px}#services .container .services-header h2{font-size:2.5rem}#services .container .services-container{flex-direction:column}#services .container .services-container .services-item{text-align:center;flex-direction:column;width:100%;padding:0}}
#clients{padding:0 0 80px}#clients .container{flex-direction:row;gap:2rem;max-width:900px;display:flex}#clients .col-1,#clients .col-2{flex-direction:column;justify-content:center;display:flex}#clients h2{letter-spacing:-2px;width:100%;max-width:350px;font-size:4.5rem;font-weight:700;line-height:4rem;transition:all .3s}#clients .clients-container{flex-wrap:wrap;justify-content:end;gap:2rem;width:100%;display:flex}#clients .client{justify-content:center;align-items:center;width:33%;height:120px;display:flex;position:relative}#clients .client-image{object-fit:contain}#clients .clients-container .client img{max-width:140px;max-height:80px}@media (orientation:portrait){#clients{margin-bottom:40px;padding:0 7% 7%}#clients .col-1,#clients .col-2{width:100%}#clients h2{text-align:center;margin-bottom:0;font-size:3rem;line-height:1}#clients .container .row{flex-direction:column}#clients .clients-container .client{width:45%;padding:5%}}
#contact{background:var(--black);color:#fff;text-align:center;border-radius:10px;max-width:900px;margin:0 auto 80px;padding:65px 25px}#contact h2{text-align:center;max-width:450px;margin:0 auto 3rem;font-size:3rem;line-height:1}#contact p{text-align:center;justify-content:center;align-items:center;gap:1rem;max-width:350px;margin:0 0 1rem;font-size:1.5rem;line-height:1;display:flex}@media (orientation:portrait){#contact{margin:7% 7% 80px;padding:7%}#contact h2{text-align:center;font-size:2.5rem;line-height:1}#contact p{font-size:1.3rem}}
.btn-circle{z-index:1000;cursor:pointer;background-color:#24cc24;border-radius:50%;justify-content:center;align-items:center;width:55px;height:55px;transition:all .3s;animation:2s infinite pulse-animation;display:flex;position:fixed;bottom:30px;right:20px;box-shadow:0 0 1px 1px #0000001a}.btn-circle:hover{background-color:#1eac1e;transform:scale(1.1)}.btn-circle a{margin-top:4px}.btn-circle svg{fill:#fff;width:30px;height:30px}@keyframes pulse-animation{0%{box-shadow:0 0 #0003}to{box-shadow:0 0 0 20px #0000}}