.navbar{z-index:9999;padding-top:2.5rem;padding-bottom:2.5rem;transition:background-color .2s,padding .2s,transform .2s}.navbar.scrolled-state{background-color:rgb(0 0 0/var(--tw-bg-opacity));--tw-bg-opacity:.6;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));border-bottom:3px solid #28282880;padding-top:1.25rem;padding-bottom:1.25rem}.navbar.nav-hide{transform:translateY(-100%)}.nav-link{position:relative}@media not all and (min-width:640px){.nav-link{display:none}}.nav-link:before,a.nav-btn:before{content:"";--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity));width:0;height:2px;transition:width .5s;position:absolute;bottom:-5px;left:-10%}.nav-link:hover:before,.nav-btn:hover:before{width:120%}.mobile-nav-panel{z-index:50;background-color:rgb(0 0 0/var(--tw-bg-opacity));--tw-bg-opacity:.7;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);flex-direction:column;justify-content:center;align-items:center;gap:3rem;display:flex;position:fixed;inset:0}@media (min-width:640px){.mobile-nav-panel{display:none}}.mobile-nav-panel{opacity:0;transition:transform .5s,opacity .5s;transform:translateY(-100%)}.mobile-nav-panel.opened{opacity:1;transform:translateY(0)}.mobile-nav-panel .nav-btn{letter-spacing:3px;opacity:0;font-size:2.25rem;line-height:2.5rem;transition:transform .2s,opacity .2s;position:relative;transform:translate(-100%)}.mobile-nav-panel.opened .nav-btn{opacity:1;transition-delay:0s;transform:translate(0%)}
.project-cont{align-items:center;width:100%;max-width:1300px;height:400px;margin-bottom:2.5rem;display:flex;position:relative}@media not all and (min-width:1024px){.project-cont{flex-direction:column-reverse;height:fit-content}}.project-cont .left-section{z-index:10;--tw-text-opacity:1;width:55%;height:100%;color:rgb(40 44 53/var(--tw-text-opacity));flex-direction:column;justify-content:center;display:flex;position:relative}@media not all and (min-width:1024px){.project-cont .left-section{width:100%}}.project-cont .left-section:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.project-cont .right-section{z-index:0;aspect-ratio:16/9;border:1px solid #4a4a6240;width:50%;max-height:400px;position:absolute}@media not all and (min-width:1024px){.project-cont .right-section{border-bottom-width:0;width:100%;position:relative}}.project-cont .right-section .right-overlay{background-color:rgb(0 0 0/var(--tw-bg-opacity));--tw-bg-opacity:.8;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));flex-direction:column;justify-content:space-between;padding:1rem;transition:background-color .2s;display:flex;position:absolute;inset:0}@media (min-width:1024px){.project-cont .right-section .right-overlay{display:none}}.project-cont:hover .right-section .right-overlay{--tw-bg-opacity:0}.project-cont .right-section .right-overlay .top h2,.project-cont .right-section .right-overlay .tech-stack-cont span{transition:transform .2s}.project-cont:hover .right-section .right-overlay .top h2{transform:translateY(-80px)}.project-cont:hover .right-section .right-overlay .tech-stack-cont span{transform:translateY(200%)}.project-cont .description{border:0 solid #4a4a6240}@media not all and (min-width:1024px){.project-cont .description{border-bottom-width:1px;border-left-width:1px;border-right-width:1px}}.project-cont .glass-border{border:1px solid #4a4a6240}@media (min-width:1024px){.project-cont .glass-border{border-width:0}}@media screen and (min-width:1024px){.project-cont[data-align=left] .right-section{left:50%}.project-cont[data-align=right] .right-section{left:0%}.project-cont[data-align=right] .left-section{position:absolute;left:45%}.project-cont[data-align=right] .left-section *{text-align:right}.project-cont[data-align=right] .left-section .tech-stack-cont,.project-cont[data-align=right] .left-section .links-cont{justify-content:flex-end}}