html{background-color:#fffcfc}.header-box{background-color:#fffcfc;transform:rotate(-30deg) translate(-170px) translatey(-50px);width:500px;display:flex;align-items:center;flex-direction:column;padding-right:100px;padding-left:100px;animation:scroll 1.5s;border-top:solid black 3px;border-bottom:solid black 3px;transition:all ease .5s;position:fixed;overflow:hidden;z-index:1}.header-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#8ac87c;transform:translate(100%);transition:transform .5s ease}.header-box:hover:before{transform:translate(0)}.header-box:not(:hover):before{transform:translate(-100%)}.header-title{display:flex;align-items:center;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic;font-size:xx-large;color:#000;animation:fade 2.5s;position:relative;z-index:1}@keyframes scroll{0%{transform:rotate(-30deg) translate(500px) scale(1) translatey(-50px)}50%{transform:rotate(-30deg) translate(500px) scale(1) translatey(-50px)}to{transform:rotate(-30deg) translate(-170px) scale(1) translatey(-50px)}}.header-video{position:absolute;transform:translatey(335px) rotate(-55deg) translate(380px);opacity:100%;pointer-events:none;z-index:1;position:fixed}@media (max-width: 768px){.header-box{position:relative}.header-video{position:relative;transform:translatey(250px) rotate(-55deg) translate(380px);opacity:100%;pointer-events:none;z-index:101}}body.popup-open{overflow:hidden}.hero-section{overflow-x:hidden}.hero-title{position:relative;top:250px;left:80;width:100%;text-align:center;max-width:1200px;margin:0 auto;padding-left:50px;font-family:futura-pt,sans-serif;font-weight:700;font-style:italic;font-size:3rem;color:#000;z-index:0;will-change:transform,opacity;animation:fade 2.5s ease}.card-container{padding:2rem;margin-left:auto;max-width:60%;padding-right:100px;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .8s ease-out;padding-top:120px;margin-top:150px}.card-container.loaded{opacity:1;transform:translateY(0)}.content-layout{position:relative}.card-section-container{display:flex;align-items:flex-start;max-width:1600px;margin:0 auto;padding:0 2rem}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:1200px;margin:0 auto}.card{position:relative;background-color:#fffcfc;padding:2rem 2rem 8rem;overflow:visible;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;cursor:pointer}.card:hover{background-color:#8ac87c}.card-0{animation:fadeIn .5s ease .2s forwards}.card-1{animation:fadeIn .5s ease .35s forwards}.card-2{animation:fadeIn .5s ease .5s forwards}.card-3{animation:fadeIn .5s ease .65s forwards}.card-4{animation:fadeIn .5s ease .8s forwards}.card-5{animation:fadeIn .5s ease .95s forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0%}50%{opacity:0%}to{opacity:100%}}.card-title{font-size:1.5rem;margin-bottom:1rem;color:#000;animation:fade 2.5s ease}.card-content{color:#000;line-height:1.5;animation:fade 2.5s ease}.animate-border{position:relative}.animate-border:before,.animate-border:after,.animate-border>span:before,.animate-border>span:after{content:"";position:absolute;background-color:#000;transition:transform .5s ease;z-index:1;pointer-events:none}.animate-border>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}.animate-border:before{top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left;transition-delay:.1s}.animate-border:after{top:0;right:0;width:2px;height:100%;transform:scaleY(0);transform-origin:top;transition-delay:.3s}.animate-border>span:before{content:"";bottom:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:right;transition-delay:.5s}.animate-border>span:after{content:"";bottom:0;left:0;width:2px;height:100%;transform:scaleY(0);transform-origin:bottom;transition-delay:.7s}.card-0.animate-border:before{animation:drawBorder .4s ease .3s forwards}.card-0.animate-border:after{animation:drawBorder .4s ease .5s forwards}.card-0.animate-border>span:before{animation:drawBorder .4s ease .7s forwards}.card-0.animate-border>span:after{animation:drawBorder .4s ease .9s forwards}.card-1.animate-border:before{animation:drawBorder .4s ease .45s forwards}.card-1.animate-border:after{animation:drawBorder .4s ease .65s forwards}.card-1.animate-border>span:before{animation:drawBorder .4s ease .85s forwards}.card-1.animate-border>span:after{animation:drawBorder .4s ease 1.05s forwards}.card-2.animate-border:before{animation:drawBorder .4s ease .6s forwards}.card-2.animate-border:after{animation:drawBorder .4s ease .8s forwards}.card-2.animate-border>span:before{animation:drawBorder .4s ease 1s forwards}.card-2.animate-border>span:after{animation:drawBorder .4s ease 1.2s forwards}.card-3.animate-border:before{animation:drawBorder .4s ease .75s forwards}.card-3.animate-border:after{animation:drawBorder .4s ease .95s forwards}.card-3.animate-border>span:before{animation:drawBorder .4s ease 1.15s forwards}.card-3.animate-border>span:after{animation:drawBorder .4s ease 1.35s forwards}.card-4.animate-border:before{animation:drawBorder .4s ease .75s forwards}.card-4.animate-border:after{animation:drawBorder .4s ease .95s forwards}.card-4.animate-border>span:before{animation:drawBorder .4s ease 1.15s forwards}.card-4.animate-border>span:after{animation:drawBorder .4s ease 1.35s forwards}.card-5.animate-border:before{animation:drawBorder .4s ease .75s forwards}.card-5.animate-border:after{animation:drawBorder .4s ease .95s forwards}.card-5.animate-border>span:before{animation:drawBorder .4s ease 1.15s forwards}.card-5.animate-border>span:after{animation:drawBorder .4s ease 1.35s forwards}@keyframes drawBorder{to{transform:scaleX(1) scaleY(1)}}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeOutOverlay{0%{opacity:1}to{opacity:0}}.card-info-content{opacity:0;transition:opacity 1s ease;transition-delay:1s;padding:2rem;flex:1;overflow-y:auto;overflow-x:hidden;max-height:100%}.card-info-expanded{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:min(44vw,1200px)!important;height:min(80vh,800px)!important;opacity:1;z-index:1000;overflow:hidden;display:flex;flex-direction:column}.card-info-expanded .card-info-content{opacity:1}.close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;z-index:1010;opacity:0;transition:opacity .3s ease;transition-delay:.2s}.card-info-expanded .close-button{opacity:1}.info-title{margin-top:0;margin-bottom:1.5rem;font-size:1.75rem}.info-image-container{margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center}.info-image{width:70%;max-height:auto;object-fit:cover;border:solid black 3px}.info-description{margin-bottom:1.5rem;line-height:1.6}.info-technologies h3{margin-bottom:.75rem}.tech-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tech-tag{background-color:#8ac87c;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:500}.info-link{margin-bottom:2rem}.info-link a{display:inline-block;background-color:#000;color:#fff;padding:.75rem 1.5rem;border-radius:4px;text-decoration:none;font-weight:600;transition:background-color .2s ease}.info-link a:hover{background-color:#333}@media (max-width: 900px){.card-grid{grid-template-columns:1fr}.card-container{max-width:90%;padding-right:2rem;padding-top:110px}.hero-title{font-size:1.5rem;padding-left:0rem;padding-bottom:0}.card-info-expanded{width:95vw!important;height:90vh!important}.info-image{width:100%}}.card-info-container{border:none;position:absolute;background-color:#fffcfc;overflow:visible;font-family:futura-pt,sans-serif;font-weight:700;font-style:italic;z-index:1000;transform-origin:center;animation:fade .4s;will-change:left,top,width,height,opacity}.card-info-container.animate-border:before,.card-info-container.animate-border:after,.card-info-container.animate-border>span:before,.card-info-container.animate-border>span:after{content:"";position:absolute;background-color:#000;transition:transform .5s ease;z-index:1;pointer-events:none}.card-info-container.animate-border>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}.card-info-container.animate-border:before{top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left}.card-info-container.animate-border:after{top:0;right:0;width:2px;height:100%;transform:scaleY(0);transform-origin:top}.card-info-container.animate-border>span:before{bottom:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:right}.card-info-container.animate-border>span:after{bottom:0;left:0;width:2px;height:100%;transform:scaleY(0);transform-origin:bottom}.card-info-container.card-info-expanded.animate-border:before{animation:drawBorder .4s ease .3s forwards}.card-info-container.card-info-expanded.animate-border:after{animation:drawBorder .4s ease .5s forwards}.card-info-container.card-info-expanded.animate-border>span:before{animation:drawBorder .4s ease .7s forwards}.card-info-container.card-info-expanded.animate-border>span:after{animation:drawBorder .4s ease .9s forwards}.card-info-expanded .card-info-content{padding:2rem}
