@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}*:before,*:after{box-sizing:border-box}html,body{font-family:Montserrat,sans-serif;scroll-behavior:smooth;overscroll-behavior-x:none;overscroll-behavior-y:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;max-width:100vw;min-height:100vh;color:#000;overflow-x:hidden;background:linear-gradient(135deg,#d4eac8,#c0d8e0,#2b9243);background-size:400% 400%;animation:gradientShift 10s ease infinite}.App{overflow-x:hidden}.navbar{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;position:fixed;top:0;width:100%;background-color:transparent;z-index:1000;transition:background-color 1s ease,transform 1s ease}.navbar.hidden{transform:translateY(-100%)}.navbar .logo{font-size:2rem;color:#000}.navbar .logo img{width:20vw;max-width:1000px;height:auto;max-height:auto}.navbar .nav-links{display:flex;gap:20px;list-style:none;margin-left:auto;font-size:1.1rem;font-weight:500}.navbar .nav-links li{position:relative}.navbar .nav-links li a{color:#000;text-decoration:none;font-size:1.1rem;letter-spacing:.05em;padding:10px 20px;position:relative;transition:color .3s ease,transform .3s ease}.navbar .nav-links li a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background-color:#2b9243;transition:width .3s ease,left .3s ease}.navbar .nav-links li a:hover{color:#2b9243}.navbar .nav-links li a:hover:after{width:100%;left:0}.navbar .menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:25px;height:20px;cursor:pointer}.navbar .menu-toggle .bar{height:4px;background-color:#333;width:100%;border-radius:10px}@media screen and (max-width: 768px){.navbar .nav-links{display:none}.navbar .menu-toggle{display:flex}.navbar .logo img{max-height:100px}.navbar.open .nav-links{display:flex;flex-direction:column;gap:20px;position:absolute;top:60px;right:0;background-color:#ffffffe6;width:200px;padding:30px;box-shadow:0 2px 10px #0003}.navbar.open .menu-toggle .bar{transform:rotate(45deg)}.navbar.open .menu-toggle .bar:nth-child(2){opacity:0}.navbar.open .menu-toggle .bar:nth-child(3){transform:rotate(-45deg)}}.hero-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1}.hero-section h1{color:#000;margin:0;font-size:5rem;text-shadow:1px 1px 3px #0C372F}.hero-section p{margin-top:1rem;color:#000;font-size:2.25rem;font-weight:500;text-shadow:1px 1px 3px #0C372F}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media (max-width: 768px){.hero-section{padding:0 15px}.hero-section h1{font-size:2rem}.main_nav ul{display:none;flex-direction:column;background:#fff;position:absolute;top:70px;right:0;width:200px;box-shadow:0 2px 10px #0003}.main_nav ul.open{display:flex}.menu-toggle{display:block}}section{padding:0 20px;text-align:center}h2{font-size:3rem;margin:0}.about-section{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:2rem;grid-template-areas:"about-title about-title" "microgrid about";padding:2rem}.about-title{grid-area:about-title;text-align:center}.about-title h2{margin:0}.microgrid{grid-area:microgrid;transform:scale(1.25);transform-origin:top left}.microgrid,.about{max-height:500px;overflow:hidden}.about p{grid-area:about;font-size:1.4rem;line-height:1.85;padding-top:90px}@media (max-width: 768px){.about-section{grid-template-columns:1fr;grid-template-areas:"about-title" "microgrid" "about"}}@property --gradient-angle{syntax: "<angle>"; initial-value: 0turn; inherits: false;}.projects-section h2{padding-top:25px;padding-bottom:25px}.card{animation:9s gradient-angle infinite linear;border:3px solid transparent;background-image:linear-gradient(#0c372f,#2b9243),conic-gradient(from var(--gradient-angle),#2b9243 0%,#2b9243 15%,#000000 35%,#000000 65%,#2b9243 85%,#2b9243 100%);background-clip:padding-box,border-box;background-origin:padding-box,border-box;color:#d4eac8;padding:20px;border-radius:10px}@keyframes gradient-angle{to{--gradient-angle: 1turn}}.container{display:grid;justify-content:center;margin-inline:auto;grid-auto-flow:column;gap:16px 40px}@media (width < 970px){.container{grid-auto-flow:row}}.grid{transform:scale(.5);margin:0;padding:0;transition:transform .3s ease,filter .3s ease,box-shadow .3s ease;border-radius:8px;box-shadow:0 0 20px #0c372f}.fade-in .grid{opacity:0;transition:opacity 1s ease-in-out}.fade-in.visible .grid{opacity:1}.card{display:grid;max-width:240px;padding:20px;text-decoration:none;color:currentColor;border-radius:20px;place-content:center;place-items:center;aspect-ratio:1/1;row-gap:16px;box-shadow:0 4px 12px #0000004d}.card h3{font-size:18px;font-weight:700;font-style:normal;font-optical-sizing:auto;color:#c0d8e0}.card p{font-size:12px;color:#c0d8e0}.clients-section{padding-top:30px}.clients-section h2{padding-bottom:20px}.clients-list p{font-size:1.4rem;line-height:1.85;padding-bottom:20px}.contact-section{background:linear-gradient(#0c372f,#2b9243);padding:25px 20px 10px;border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:600px;margin:0 auto;text-align:center;border:2px solid black}.contact-section h2{font-size:2em;color:#c0d8e0;margin-bottom:10px}.contact-form{display:flex;flex-direction:column;gap:20px;padding:20px}.form-group{display:flex;flex-direction:column;gap:5px;text-align:left}label{font-size:1.1em;color:#c0d8e0}input[type=text],input[type=email]{padding:12px;font-size:1em;border:1px solid #c0d8e0;border-radius:4px;transition:border-color .3s ease;background-color:#c0d8e0}input[type=text]:focus,input[type=email]:focus{border-color:#2b9243;outline:none}button.submit-btn{padding:12px 24px;background-color:#2b9243;color:#c0d8e0;font-size:1.2em;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}button.submit-btn:hover{background-color:#000}button.submit-btn:active{background-color:#0c372f}.footer{padding-top:20px;text-align:center}svg{min-height:400px;height:24vh;max-height:100%;max-width:100%}html{--delay: 2s}html{--drawDuration: 1.5s;--rotateDuration: 9s;--rotateCount: infinite;--maskRotateCount: 1.67;--maskDrawDuration: 3s;--maskRotateDelay: 5s}@supports (transform-box: fill-box){svg path,svg polyline,svg line:not([mask]),svg polygon,svg rect,svg circle:not([mask]):not(.grow):not(.mask){stroke-dasharray:1 1.2;stroke-dashoffset:1.1}svg.anim path,svg.anim polyline,svg.anim line:not([mask]),svg.anim polygon,svg.anim rect,svg.anim circle:not([mask]):not(.grow):not(.mask){animation:draw var(--drawDuration) ease-out forwards var(--delay)}svg .rotate{transform-box:fill-box;transform-origin:50% 50%}svg.anim .rotate{animation:rotate var(--rotateDuration) var(--rotateCount) linear forwards var(--delay)}svg .rotate-reverse{transform-box:fill-box;transform-origin:50% 50%}svg.anim .rotate-reverse{animation:rotate var(--rotateDuration) var(--rotateCount) reverse linear forwards var(--delay)}svg .mask-circ-dashed-blade{stroke-dasharray:0 .3333;stroke-dashoffset:.08}svg.anim .mask-circ-dashed-blade{animation:mask-draw var(--maskDrawDuration) 1 linear forwards var(--delay),mask-rotate reverse var(--rotateDuration) var(--maskRotateCount) linear forwards var(--maskRotateDelay)}svg .mask-circ-dashed-blade-offset{stroke-dasharray:0 .3333;stroke-dashoffset:0}svg.anim .mask-circ-dashed-blade-offset{animation:mask-draw var(--maskDrawDuration) 1 linear forwards var(--delay),mask-rotate-3 reverse var(--rotateDuration) var(--maskRotateCount) linear forwards var(--maskRotateDelay)}svg .mask-circ-dashed{stroke-dasharray:1;stroke-dashoffset:1}svg.anim .mask-circ-dashed{animation:draw var(--drawDuration) linear forwards var(--delay)}svg .grow{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);opacity:0}svg.anim .grow{animation:grow var(--drawDuration) linear forwards var(--delay)}svg .scale-x{transform-box:fill-box;transform-origin:0% 50%;transform:scaleX(0);opacity:0}svg.anim .scale-x{animation:scale-x var(--drawDuration) ease-out forwards var(--delay)}svg .scale-y{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);opacity:0}svg.anim .scale-y{animation:scale-y var(--drawDuration) ease-out forwards var(--delay)}}@keyframes draw{to{stroke-dasharray:1 0;stroke-dashoffset:0}}@keyframes mask-draw{to{stroke-dasharray:.1667 .1667}}@keyframes mask-rotate{to{stroke-dashoffset:1.08}}@keyframes mask-rotate-3{to{stroke-dashoffset:1}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes grow{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-x{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes scale-y{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{opacity:0;animation:fadeIn .85s ease-in-out forwards}