@font-face{font-family:Metropolis;src:url(/assets/Metropolis-Regular-CzBvJ1n5.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Metropolis;src:url(/assets/Metropolis-Bold-DM16brCS.otf) format("opentype");font-weight:700;font-style:bold}@font-face{font-family:Metropolis;src:url(/assets/Metropolis-SemiBold-CjwwsEGE.otf) format("opentype");font-weight:600;font-style:semibold}*{margin:0;padding:0;box-sizing:border-box;font-family:Metropolis,sans-serif;font-size:16px;line-height:30px}html,body{width:100%;background-color:#e6dcc8;overflow-x:hidden}a{text-decoration:none;color:inherit;cursor:pointer}h1{font-size:5rem;font-weight:700;color:#545456;letter-spacing:-.1875rem;line-height:5rem}h2{font-weight:600;font-size:1.875rem;letter-spacing:2%;color:#545456}h3{font-weight:400;font-size:1.25rem;line-height:1.875rem;color:#545456}p,li{font-size:1rem;color:#545456;line-height:1.875rem}@media only screen and (max-width: 768px){h1{font-size:4rem;line-height:4rem}h2{font-size:1.75rem;line-height:2rem}h3{font-size:1.125rem;line-height:1.5625rem}p,li{font-size:.874rem;line-height:1.5rem}}@media only screen and (max-width: 480px){h1{font-size:3.5rem;line-height:3.5rem}h3{font-size:1rem;line-height:1.4rem}p,li{font-size:.8125rem;line-height:1.25rem}}.navbar{max-width:1160px;width:calc(100% - 80px);margin:1.25rem auto;position:fixed;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#ffffffa8;border-radius:15px;z-index:10000}.logo{height:2.5rem}nav ul{list-style:none;display:flex;gap:2rem}nav ul li{color:#545456;font-size:1.125rem;line-height:2rem;border-bottom:transparent 2px solid;cursor:pointer;transition:all .4s ease-in-out}nav ul li:hover{border-bottom:#545456 2px solid}nav .socials{display:flex;gap:2rem}nav .socials img{height:25px;cursor:pointer;transition:all .3s ease-in-out}nav .socials img:hover{transform:scale(1.1)}.hamburger{display:none;flex-direction:column;cursor:pointer;width:32px;height:32px;justify-content:center;align-items:center;z-index:20}.hamburger span{display:block;width:25px;height:3px;margin:2.5px 0;background:#545456;border-radius:2px;transition:.3s}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.dropdown-menu{display:flex;position:absolute;top:4.5rem;left:50%;transform:translate(-50%,-30px);width:90vw;max-width:700px;background:#f2ede2;border-radius:15px;box-shadow:0 8px 32px #00000026;padding:2rem 1rem 1rem;z-index:15;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.4,2,.6,1),transform .6s cubic-bezier(.4,2,.6,1)}.dropdown-menu ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:2.5rem;align-items:center}.dropdown-menu a{color:#545456;font-size:1.125rem;line-height:2rem}.dropdown-menu .socials{gap:1.5rem;justify-content:center}.dropdown-menu.show{opacity:1;gap:1.5rem;transform:translate(-50%);pointer-events:auto}@media (min-width: 769px){.dropdown-menu,.hamburger{display:none!important}.desktop-menu,.desktop-socials{display:flex}}@media (max-width: 768px){.desktop-menu,.desktop-socials{display:none!important}.hamburger{display:flex}.dropdown-menu{max-width:700px;left:50%;transform:translate(-50%,-30px)}.navbar{max-width:700px;width:calc(100% - 60px);margin:1rem 2rem}}@media (max-width: 480px){nav .navbar{max-width:440px;width:calc(100% - 30px);margin:1rem}.dropdown-menu ul{gap:1.5rem}}.footer{max-width:1160px;height:100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.go-up img{height:30px;padding:5px;background-color:#545456;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}@media only screen and (max-width: 768px){.footer{max-width:700px;margin:0 1.125rem}}@media only screen and (max-width: 480px){.footer{max-width:400px;margin:0 1rem}}.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);width:min(1160px,calc(100% - clamp(2rem,8vw,5rem)));min-height:clamp(620px,90vh,900px);margin:0 auto;padding:6rem 0 2rem}.hero-left,.hero-right{min-width:0}.hero-left-text{opacity:0;transform:translate(-2rem);transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.hero-left-text.slide-in-left{opacity:1;transform:translate(0)}.hero-left-text h1{font-size:clamp(2.5rem,5vw,3.5rem);line-height:1}.hero p{width:min(100%,25rem);margin:2rem 0}.hero-right{position:relative;align-self:stretch;min-height:24rem}.portrait{position:absolute;top:60%;right:0;width:auto;height:min(70vh,38rem);max-width:100%;transform:translateY(-50%);object-fit:contain;z-index:1;display:block;opacity:0;pointer-events:none;transition:width 2s,height 2s,transform 2s,opacity 2s}.portrait.visible{opacity:1;pointer-events:auto}.ellipse-yellow,.union-blue,.union-yellow,.ellipse-blue-big,.union-grey{position:absolute;z-index:1}.ellipse-yellow{width:30px;top:18%;left:20%}.union-blue{width:20px;top:40%;left:8%}.union-grey{width:25px;top:18%;right:4%}.union-yellow{width:30px;bottom:15%;left:0%}.ellipse-blue-big{width:40px;bottom:50%;right:5%}.hero-container-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem}.hero-container-buttons button{padding:.8rem 1.5rem;border:2px solid transparent;border-radius:10px;background-color:#ffc00d;color:#fff;font-size:1rem;cursor:pointer;transition:all .5s ease-in-out}.hero-container-buttons button:hover{border-color:#ffc00d;background-color:transparent;color:#ffc00d}@media (max-width: 900px){.hero{grid-template-columns:minmax(0,1fr);gap:1.5rem;min-height:0;padding:7rem 0 1.5rem}.hero-left-text h1{max-width:12ch;font-size:clamp(2rem,9vw,3rem);margin-bottom:0}.hero p{font-size:clamp(.875rem,3vw,.9rem);margin:2rem 0}.hero-right{min-height:clamp(18rem,75vw,28rem)}.portrait{right:50%;height:100%;top:55%;transform:translate(50%,-50%)}.ellipse-yellow{top:12%;left:15%}.union-blue{top:35%;left:70%}.union-grey{top:48%;right:75%}.union-yellow{bottom:10%;left:12%}.ellipse-grey{bottom:15%;right:20%}.ellipse-blue-big{bottom:35%;right:10%}}@media (max-width: 480px){.ellipse-yellow{top:12%;left:15%}.union-blue{top:30%;width:15px;left:70%}.union-grey{width:20px;top:48%;right:85%}.union-yellow{width:20px;bottom:10%;left:8%}.ellipse-blue-big{bottom:35%;right:10%;width:35px}}@media (max-width: 380px){.hero-right{min-height:17rem}.hero-container-buttons{gap:.75rem}.hero-container-buttons button{padding:.7rem .9rem;font-size:.9rem}}.lastproject-container{background-color:#fff}.lastproject{max-width:1160px;width:calc(100% - 80px);padding-top:5rem;padding-bottom:5rem;display:flex;flex-direction:column;margin:0 auto}.lastproject h2{font-size:1.5625rem;font-weight:400;margin-bottom:1.875rem;letter-spacing:2%;color:#545456;text-align:center}.lastprojectcard-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 auto;gap:20px}.lastprojectcard-box{display:flex;margin:0 auto;flex-direction:column;text-decoration:none;cursor:pointer;width:500px;height:400px;border-radius:10px;align-items:center;justify-content:space-between;overflow:hidden}.cardlastproject span{font-size:1rem;line-height:1.5;font-weight:400;color:#fff;padding:40px}.mockup{width:80%;height:auto;border-radius:10px;margin-bottom:-40px}.mockup:hover{transform:scale(1.1) rotate(5deg);transition:ease-in-out .5s}.lastprojectcard:hover{transform:scale(1.05)}.techno{margin-top:.325rem;margin-bottom:10px;display:flex;gap:10px}.techno span{font-size:.75rem;font-weight:700;padding:5px 10px;border-radius:50px}.techno #html{color:#e96228;border:#E96228 2px solid}.techno #css{color:#2862e9;border:#2862E9 2px solid}.techno #javascript{color:#d3b22e;border:#d3b22e 2px solid}.techno #react{color:#09d2f6;border:#09D2F6 2px solid}@media only screen and (max-width: 768px){.lastproject{max-width:700px;padding:3.125rem 1.25rem}.lastprojectcard-box{gap:10px}.lastproject h2{font-size:1.25rem;margin-bottom:1.5625rem}.lastproject-text h3{font-size:1.125rem}.lastproject-text p{font-size:.874rem}}@media only screen and (max-width: 480px){.lastproject{max-width:440px;margin:0 1rem}.lastprojectcard-box{flex-direction:column;align-content:center;margin:0 auto;gap:20px}.lastprojectcard{max-width:80%}.lastproject h2{margin-bottom:1.25rem}}.Whywork{width:100%;display:flex;justify-content:center;align-items:center;background-color:#fff}.Whywork-container{max-width:1160px;width:calc(100% - 80px);display:flex;flex-direction:row;padding:100px 0;gap:30px;margin:0 auto}.Whywork-left,.Whywork-right{width:0;min-width:0;display:flex;flex-direction:column;flex:1 1 0}.Whywork-left{display:flex;flex-direction:column;gap:2.5rem;justify-content:center;max-width:45%}.Whywork-left h2{font-size:2.5rem;font-weight:700;line-height:2.8125rem;letter-spacing:-5%}.Whywork-left-text,.Whywork-left-list{display:flex;flex-direction:column;gap:1.25rem}.Whywork-right{display:flex;align-items:center;justify-items:center;max-width:55%;width:100%;min-width:0;height:auto}.Auto{width:100%;max-width:495px;aspect-ratio:495 / 470}.Auto svg{display:block;width:100%;height:100%}@media only screen and (max-width: 768px){.Whywork-container{max-width:700px;padding:60px 0}.Whywork-left{gap:2rem;max-width:70%}.Whywork-left h2{font-size:2rem;line-height:2rem}.Whywork-right{max-width:50%;justify-content:center}}@media only screen and (max-width: 480px){.Whywork-container{flex-direction:column;width:calc(100% - 80px);max-width:440px;padding:50px 0}.Whywork-left{width:100%;max-width:100%;gap:1.5rem}.Whywork-left h2{font-size:1.75rem;line-height:2.25rem}.Whywork-left-text{width:100%;margin:1.25rem 0}.Whywork-right{width:100%;max-width:100%;justify-content:center}.Auto{max-width:100%;width:70%;aspect-ratio:auto}}.about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);width:min(1160px,calc(100% - clamp(2rem,8vw,5rem)));min-height:clamp(560px,80vh,760px);min-height:clamp(560px,80svh,760px);margin:0 auto;padding:6rem 0 2rem}.about-hero-left,.about-hero-right{min-width:0;opacity:0;transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.about-hero-left{transform:translate(-2rem)}.about-hero-right{position:relative;align-self:stretch;display:flex;justify-content:center;align-items:center;transform:translate(2rem)}.about-hero-left.slide-in-left,.about-hero-right.slide-in-right{opacity:1;transform:translate(0)}.title-about{display:flex;align-items:center;gap:.6rem}.title-about h1{margin:0}.description{max-width:29.375rem}.description h3{margin:1rem 0}.background-img{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.design-img,.code-img{position:relative;width:55%;object-fit:contain}.design-img{bottom:5%}.code-img{top:5%}@media (max-width: 900px){.about-hero{grid-template-columns:minmax(0,1fr);gap:1rem;min-height:0;padding:7rem 0 2rem}.title{font-size:clamp(2.6rem,9vw,3.5rem)}.point{font-size:clamp(3.8rem,11vw,5rem)}.description h3{margin:.7rem 0}.about-hero-right{min-height:clamp(14rem,60vw,24rem)}.design-img,.code-img{width:42%}}.mystory{margin:0 auto;background-color:#fff;padding:100px 0}.mystory h2{margin-bottom:1.875rem}.container{display:flex;flex-direction:row;justify-content:center;align-items:center;max-width:1160px;margin:0 auto;gap:40px}.mystory-left,.mystory-right{flex:1;width:0;min-width:0}.mystory-left{display:flex;flex-direction:column;justify-content:center}.mystory-right{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;min-width:0;width:0;flex:1;opacity:0;transform:translate(80px);transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.mystory-right.slide-in-right{opacity:1;transform:translate(0)}.office{position:relative;display:flex;flex-direction:column;align-items:flex-end}.office p{text-align:right;margin-top:15px}.office img:not(.meworking){width:400px;height:auto;border-radius:3%;z-index:1;display:block}.meworking{position:absolute;height:180px;border-radius:50%;border:5px solid #ffff;bottom:30px;right:370px;z-index:2}@media only screen and (max-width: 768px){.mystory{padding:70px 0}.container{max-width:700px;width:calc(100% - 60px);margin:0 2rem;flex-direction:column;flex-wrap:wrap;height:auto}.mystory-left,.mystory-right{width:100%}.mystory-right{align-items:center}.meworking{height:150px;bottom:20px;z-index:2}}@media only screen and (max-width: 480px){.mystory{padding:50px 0}.container{max-width:440px;width:calc(100% - 30px);margin:0 1rem;flex-direction:column;flex-wrap:wrap;gap:2rem;height:auto}.office img:not(.meworking){width:300px}.meworking{height:120px;bottom:20px;left:0%}}.designcode-container{display:flex;margin:100px auto;flex-direction:row;align-items:center;gap:20px;max-width:1160px}.designcode-container img{width:40%;height:100%}@media only screen and (max-width: 768px){.designcode-container{max-width:700px;width:calc(100% - 60px);margin:0 2rem;padding:70px 0;gap:10px;flex-direction:column;flex-wrap:wrap;height:auto}.designcode-container img{width:50%}.designcode-container h2{font-size:1.5625rem;line-height:3rem}}.myskills-container{background-color:#fff;padding:100px 0}.myskills-block{display:flex;margin:0 auto;flex-direction:column;align-items:flex-start;max-width:1160px;gap:30px}.myskills-block img{width:100%;height:auto}@media only screen and (max-width: 768px){.myskills-container{padding:70px 0}.myskills-block{max-width:700px;width:calc(100% - 60px);margin:0 1.25rem}}.portfolio-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);width:min(1160px,calc(100% - clamp(2rem,8vw,5rem)));min-height:clamp(560px,80vh,760px);min-height:clamp(560px,80svh,760px);margin:0 auto;padding:6rem 0 2rem}.portfolio-hero-left,.portfolio-hero-right{min-width:0;opacity:0;transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.portfolio-hero-left{display:flex;flex-direction:column;gap:1.5rem;justify-content:center;transform:translate(-2rem)}.portfolio-hero-right{display:flex;justify-content:center;align-items:center;transform:translate(2rem)}.portfolio-hero-left.slide-in-left,.portfolio-hero-right.slide-in-right{opacity:1;transform:translate(0)}.title-portfolio{display:flex;align-items:center;gap:.6rem}.title-portfolio h1{margin:0}.description-portfolio{max-width:29.375rem}.porfolio-img{width:min(90%,34rem);height:auto;object-fit:contain}@media (max-width: 900px){.portfolio-hero{grid-template-columns:minmax(0,1fr);gap:1rem;min-height:0;padding:7rem 0 2rem}.title{font-size:clamp(2.6rem,9vw,3.5rem)}.point{font-size:clamp(3.8rem,11vw,5rem)}.portfolio-hero-right{min-height:clamp(14rem,60vw,24rem)}.porfolio-img{width:min(75%,25rem);max-height:22rem}}.portfolio-container{background-color:#fff;width:100%}.portfolio{max-width:1160px;padding:100px 0;display:flex;flex-direction:column;gap:30px;margin:0 auto}.portfoliocard-box{width:100%;display:flex;align-items:center;gap:20px;margin:0;padding:20px 0}.portfolio-left,.portfolio-right{flex:1 1 0}.portfolio-left{display:flex;flex-direction:column;gap:18px;justify-content:center;max-width:45%}.portfolio-right{display:flex;align-items:center;justify-content:center;max-width:55%;width:100%;min-width:0;height:420px;border-radius:12px;overflow:hidden;background:#f6f7fb}.portfoliocard-title{display:flex;align-items:center;gap:15px}.icon-minus{width:25px;height:auto;display:block}.task{font-size:1.1rem;font-weight:600;color:#0d43ff}.icon-github{width:25px;height:auto;display:block;transition:all .5s ease-in-out}.icon-github:hover{transform:scale(1.2)}.portfoliocard-title h3{font-size:1.7rem;font-weight:600;margin:0;color:#545456}.project-description,.project-details{font-size:1rem;line-height:1.7;font-weight:400;color:#555;margin:0}.project-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}.project-link{display:inline-flex;align-items:center;justify-content:center;background:#0d43ff;color:#fff;text-decoration:none;border-radius:999px;padding:10px 16px;font-size:.85rem;font-weight:600;transition:opacity .2s ease}.project-link:hover{opacity:.9}.project-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.stack-item{display:inline-flex;align-items:center;background:#f3f6ff;color:#1d2a63;border-radius:999px;padding:8px 12px;font-size:.8rem;font-weight:600}.mockup-project{width:100%;height:100%;max-width:760px;border-radius:10px;object-fit:contain;object-position:center;display:block}@media only screen and (max-width: 1160px){.portfolio{margin:0 30px}.portfoliocard-box{gap:20px}.portfolio-left{max-width:42%}.portfolio-right{max-width:58%}.portfoliocard-title h3{font-size:1.45rem}.project-description,.project-details{font-size:.95rem}}@media only screen and (max-width: 768px){.portfolio{max-width:700px;padding:60px 0}.portfoliocard-box{flex-direction:column;gap:20px;margin:0 10px}.portfolio-left,.portfolio-right{max-width:100%;width:100%}.portfoliocard-title{align-items:center;gap:10px}.portfoliocard-title h3{font-size:1.25rem}.icon-github{width:20px}.task{font-size:1rem}.project-description,.project-details{font-size:.9rem}}@media only screen and (max-width: 480px){.portfolio{max-width:440px;padding:50px 0}.portfoliocard-title h3{font-size:1.1rem}.icon-github{width:18px}.project-stack{gap:8px}.stack-item{font-size:.72rem;padding:7px 10px}}.contact-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);width:min(1160px,calc(100% - clamp(2rem,8vw,5rem)));min-height:clamp(560px,80vh,760px);min-height:clamp(560px,80svh,760px);margin:0 auto;padding:6rem 0 2rem}.contact-hero-left{display:flex;flex-direction:column;gap:1.5rem;justify-content:center;min-width:0;opacity:0;transform:translate(-2rem);transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.contact-hero-left.slide-in-left,.contact-img.slide-in-right{opacity:1;transform:translate(0)}.contact-hero-right{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;min-height:20rem}.contact-img{position:relative;z-index:1;width:min(60%,18rem);height:auto;object-fit:contain;opacity:0;transform:translate(2rem);transition:opacity .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.title-contact{display:flex;align-items:center;gap:.6rem}.contact-hero-left h1{margin:0}.title{font-size:clamp(2.8rem,6vw,4.5rem)}.point{color:#ffc00d;font-size:clamp(4rem,8vw,6rem)}.description-contact{max-width:29.375rem}.ellipseyellow,.ellipseblue,.unionblue,.uniongrey,.ellipseyellowbig{position:absolute;z-index:2}.ellipseyellow{top:17%;right:70%;height:15px}.ellipseblue{bottom:30%;left:15%;height:35px}.unionblue{top:20%;right:15%;height:20px}.uniongrey{right:45%;bottom:20%;height:30px}.ellipseyellowbig{right:10%;bottom:50%;height:45px}@media (max-width: 900px){.contact-hero{grid-template-columns:minmax(0,1fr);gap:1rem;min-height:0;padding:7rem 0 2rem}.title{font-size:clamp(2.6rem,9vw,3.5rem)}.point{font-size:clamp(3.8rem,11vw,5rem)}.contact-hero-right{min-height:clamp(14rem,60vw,24rem)}.contact-img{width:min(55%,15rem);max-height:20rem}.ellipseyellow{top:10%;left:12%}.ellipseblue{bottom:12%;left:20%;height:25px}.unionblue{top:30%;right:15%}.ellipseyellowbig{right:20%;bottom:10%;height:30px}.uniongrey{top:0;right:50%;height:20px}}.contact-form{background-color:#fff;padding:100px 0;margin:0 auto;display:flex}form{width:1160px;margin:0 auto}.top-form{display:flex;flex-direction:row;justify-content:space-between;gap:30px;align-items:stretch}.form-left,.form-right{display:flex;flex:1;flex-direction:column}.form-right textarea{padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;flex:1}.form-left input{width:100%;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;flex:1}.contact-form button{background-color:#0d43ff;color:#fff;padding:10px 30px;border:2px solid transparent;border-radius:10px;box-shadow:#545456 5px 5px 20px -10px;transition:ease-in-out .5s}.contact-form button:hover{transform:scale(1.05);border:2px solid #0D43FF;background-color:transparent;color:#0d43ff}.contact-form label{color:#545456;font-weight:400}@media screen and (max-width: 768px){.contact-form{padding:70px 0}form{max-width:700px;width:calc(100% - 60px);margin:0 2rem;flex-direction:column;flex-wrap:wrap;height:auto}.form-right textarea{padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;flex:1}form label,button,.form-right textarea,.form-left input{font-size:.874rem;line-height:1.5rem}}@media screen and (max-width: 480px){.contact-form{padding:50px 0}form{max-width:440px;width:calc(100% - 30px);margin:0 1rem;flex-direction:column;flex-wrap:wrap;gap:1rem;height:auto}form label,button,.form-right textarea,.form-left input{font-size:.8125rem;line-height:1.25rem}}
