@keyframes devDotOn{0%,49.9%{opacity:1}50%,to{opacity:0}}@keyframes devDotOff{0%,49.9%{opacity:0}50%,to{opacity:1}}.wip{text-align:center;height:100%;align-content:center}.top-section{width:100%}.top-section p{max-width:40rem}.top-section .content{width:80%}.top-section .content .title{padding-bottom:8rem;text-align:left}.top-section .content .title h2,.top-section .content .title h1{margin:0}.top-section .content ul{padding:0}.top-section .content .project{list-style:none;display:flex;justify-content:space-evenly;margin-bottom:250px;align-items:center}.top-section .content .project .wrapImg{list-style:none;display:flex;justify-content:space-evenly;width:45%;position:relative;align-items:center;max-width:500px;height:350px}.top-section .content .project .wrapImg .monitorImg{position:absolute;width:100%;height:20rem;background-color:#ddf0ff;z-index:10;border-radius:20px;border:.5rem solid rgb(0,15,66);transition:.3s ease;overflow:hidden}.top-section .content .project .wrapImg .monitorImg .searchBar{width:90%;height:12%;background-color:#fff;border-radius:10px;margin:1.5rem auto;display:flex;align-items:center;gap:1rem}.top-section .content .project .wrapImg .monitorImg .searchBar p{font-size:.7rem;margin-left:1rem}.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl{display:flex;width:30%;height:60%}.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl input,.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl a{box-sizing:border-box;margin:0;padding:0;font:Inter;border:none;color:#141414}.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl input{flex:1;border:2px solid #ddf0ff;border-right:none;border-radius:5px 0 0 5px;padding:0 10px;width:70%;border-color:#ddf0ff;height:100%;font-size:.7rem;line-height:normal}.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl input:focus{outline:none;box-shadow:none}.top-section .content .project .wrapImg .monitorImg .searchBar .inputEl a{display:flex;width:20%;border:2px solid #ddf0ff;border-left:none;border-radius:0 5px 5px 0;background-color:#ddf0ff;cursor:pointer;font-size:.5rem;align-items:center;justify-content:center}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode{border:none;cursor:pointer;margin-left:auto;margin-right:1rem;background-color:transparent}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode .weatherOrbitTrack{display:block;width:1.3rem;height:1.3rem;overflow:hidden;position:relative}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode .weatherOrbitPivot{position:absolute;top:calc(50% + 1.3rem);left:50%;width:0;height:0;transform-origin:0 0;transition:transform .65s cubic-bezier(.4,0,.2,1)}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode .weatherOrbitIcon{position:absolute;width:1.3rem;height:1.3rem;left:-.65rem;display:flex;align-items:center;justify-content:center;transition:transform .65s cubic-bezier(.4,0,.2,1)}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode .weatherOrbitIcon.moonIcon{top:-1.95rem}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode .weatherOrbitIcon.sunIcon{top:.65rem}.top-section .content .project .wrapImg .monitorImg .searchBar .weatherDarkMode svg{width:.7rem;height:.7rem;border-radius:50px;padding:.3rem;color:#141414}.top-section .content .project .wrapImg .monitorImg .weatherContent{width:90%;height:50%;display:flex;justify-content:space-between;margin:auto}.top-section .content .project .wrapImg .monitorImg .weatherContent .left{width:55%;height:100%}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1{height:70%;width:100%;background-color:#fff;border-radius:10px;margin-bottom:1rem;background-image:linear-gradient(#0006,#0006),url(https://cdn.pixabay.com/photo/2018/09/03/13/11/vienna-3651186_1280.jpg);background-size:cover;background-position:center}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1 div{padding:.5rem;display:flex;align-items:center;gap:.4rem}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1 div .mainInfo{display:block!important;padding:0;align-content:center}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1 div .mainInfo p{margin:0;color:#fff;font-size:.8rem}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1 div .mainInfo p:last-child{font-size:.6rem;font-weight:300}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el1 div img{height:2rem}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el2{height:30%;width:100%;border-radius:10px;display:flex;justify-content:space-between}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el2 div{width:30%;height:100%;background-color:#fff;border-radius:10px;position:relative}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el2 div p{margin:0;font-size:.5rem;text-align:center;top:50%;left:50%;transform:translate(-50%);position:absolute;width:-moz-fit-content;width:fit-content}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el2 div p:first-child{text-align:left;font-weight:600;top:10%;left:10%;transform:translate(0)}.top-section .content .project .wrapImg .monitorImg .weatherContent .right{width:35%;height:calc(100% + 1rem);background-color:#fff;border-radius:10px}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1{height:100%}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .top{display:flex;gap:.4rem;margin:0 .5rem;height:20%;align-items:center}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .top p{font-size:.6rem;margin:0;font-weight:600;border-bottom:1px solid transparent}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .top p:first-child{border-bottom:1px solid rgb(20,20,20)}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom{display:flex;flex-direction:column;justify-content:space-between;height:80%}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl{display:flex;align-items:center;width:100%;height:80%;justify-content:space-evenly}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl:not(:last-child){border-bottom:1px solid #ddf0ff}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl div{display:flex;align-items:center;gap:.5rem}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl div img{width:1rem;height:1rem}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl div p{font-size:.6rem;margin:0}.top-section .content .project .wrapImg .monitorImg .weatherContent .right .el1 .bottom .bottomEl div .celsius{font-weight:600}.top-section .content .project .wrapImg .monitorImg .weatherFooter{position:absolute;width:90%;height:12%;background-color:#fff;border-radius:10px 10px 0 0;bottom:0;left:50%;transform:translate(-50%)}.top-section .content .project .wrapImg .monitorImg .weatherFooter p{font-size:.7rem;text-align:center;margin:0;font-weight:600;margin-top:.3rem}.top-section .content .project .wrapImg .monitorImg .weatherFooter p:last-child{font-weight:400;margin-top:0}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;padding:.5rem .8rem;border-radius:12px 12px 0 0;background-color:#1f2937}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckLogo{color:#fff;font-size:.6rem;font-weight:700}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks{display:flex;align-items:center;gap:.6rem}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks span{color:#fff;font-size:.45rem;font-weight:600;letter-spacing:.02em}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks .truckNavTasks{cursor:pointer;padding:.12rem .3rem;border-radius:3px;transition:background .15s ease}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks .truckNavTasks:hover,.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks .truckNavTasks.active{background-color:#ffffff26}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckNav .truckNavLinks .truckLogout{background-color:#ef4444;padding:.15rem .4rem;border-radius:3px}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckLogoBack{cursor:pointer;opacity:.75}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckLogoBack:hover{opacity:1}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage{position:absolute;top:1.6rem;left:0;right:0;bottom:0;background-color:#111827;padding:.5rem .55rem;display:flex;flex-direction:column;gap:.22rem;overflow:hidden}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage .truckTasksLabel{color:#fff6;font-size:.5rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.1rem}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage .truckTaskRow{display:flex;align-items:center;gap:.45rem;background-color:#ffffff0d;border-radius:4px;padding:.45rem .55rem}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage .truckTaskRow .truckTaskDot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage .truckTaskRow .truckTaskRowLabel{flex:1;font-size:.55rem;color:#fff;font-weight:500}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckTasksPage .truckTaskRow .truckTaskBadge{font-size:.42rem;font-weight:700;padding:.1rem .28rem;border-radius:3px;color:#fff}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckHeroText{position:absolute;bottom:0;left:0;right:0;padding:.8rem}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckHeroText p{max-width:none}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckHeroText .truckHeroTitle{margin:0;color:#fff;font-size:.75rem;font-weight:700}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckHeroText .truckHeroSub{margin:.2rem 0 .5rem;color:#ffffffd9;font-size:.5rem}.top-section .content .project .wrapImg .monitorImg.truckMonitor .truckHeroText .truckHeroBtn{display:inline-block;border:1.5px solid white;color:#fff;font-size:.45rem;font-weight:600;padding:.25rem .6rem;border-radius:5px;text-decoration:none}.top-section .content .project .wrapImg .darkmode{background-color:#141414!important;transition:.3s ease}.top-section .content .project .wrapImg .darkmode .searchBar,.top-section .content .project .wrapImg .darkmode .el2 div,.top-section .content .project .wrapImg .darkmode .weatherFooter,.top-section .content .project .wrapImg .darkmode .right{background-color:#383838!important;transition:.3s ease;color:#fff}.top-section .content .project .wrapImg .darkmode .inputEl a{background-color:#141414!important;color:#fff!important;border-color:#141414!important;transition:.3s ease}.top-section .content .project .wrapImg .darkmode .inputEl input{background-color:#5a5a5a!important;color:#fff!important;border-color:#141414!important;transition:.3s ease}.top-section .content .project .wrapImg .darkmode .inputEl input::-moz-placeholder{color:#ddd;-moz-transition:.3s ease;transition:.3s ease}.top-section .content .project .wrapImg .darkmode .inputEl input::placeholder{color:#ddd;transition:.3s ease}.top-section .content .project .wrapImg .darkmode .weatherDarkMode svg{transition:color .15s ease;color:#fff!important}.top-section .content .project .wrapImg .darkmode .top p:first-child{border-color:#fff!important;transition:.3 ease}.top-section .content .project .wrapImg:hover .icon{top:-4.5rem;transition:.4s ease}.top-section .content .project .wrapImg:hover .icon.cityboardIcon{top:-6.5rem;transition:none}.top-section .content .project .wrapImg:hover .phoneIcon{top:5rem}.top-section .content .project .wrapImg:hover .project-image:after{opacity:0;transition:.3s ease}.top-section .content .project .wrapImg .phoneWrap:hover~.icon.phoneIcon{top:-6.5rem;transition:.4s ease}.top-section .content .project .wrapImg .icon{position:absolute;z-index:1;top:3rem;left:0;right:0;display:flex;gap:10px;justify-content:center;align-items:center;transition:.4s ease;padding-bottom:1rem}.top-section .content .project .wrapImg .icon svg{width:30px;height:30px;color:#fff;border-radius:10px;padding:10px}.top-section .content .project .wrapImg .icon.phoneIcon svg{background-color:#f0b429;color:#000}.top-section .content .project .wrapImg .icon.cityboardIcon svg{background-color:#e53935;color:#fff}.top-section .content .project .wrapImg .icon.truckIcon svg{background-color:#1f2937}.top-section .content .project .wrapImg .icon.weatherIcon svg{background-color:#62a1ff}.top-section .content .project .wrapImg .icon.vecIcon svg{background-color:#002880;color:#fff}.top-section .content .project .wrapImg .icon.cityboardIcon{top:-6.5rem;transition:none}.top-section .content .project .wrapImg .icon h2{margin:0}.top-section .content .project .wrapImg .phoneWrap{position:absolute;width:12.65rem;height:25.3rem;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%)}.top-section .content .project .wrapImg .phoneWrap .phoneBody{width:100%;height:100%;background-color:#18181c;border-radius:3.5rem;border:1.5px solid rgba(255,255,255,.1);position:relative}.top-section .content .project .wrapImg .phoneWrap .phoneBody:before{content:"";position:absolute;left:-4px;top:5.8rem;width:3px;height:2.2rem;background-color:#2d2d32;border-radius:2px 0 0 2px;box-shadow:0 3.2rem #2d2d32}.top-section .content .project .wrapImg .phoneWrap .phoneBody:after{content:"";position:absolute;right:-4px;top:7.6rem;width:3px;height:4.1rem;background-color:#2d2d32;border-radius:0 2px 2px 0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen{position:absolute;inset:.65rem .5rem;background-color:#0c0c12;border-radius:3rem;overflow:hidden;display:flex;flex-direction:column}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .phoneTopBar{display:flex;justify-content:center;align-items:center;gap:.55rem;padding-top:1.1rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .phoneTopBar .phoneSpeaker{width:2.9rem;height:3px;background-color:#ffffff1a;border-radius:2px}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .phoneTopBar .phoneCamera{width:6px;height:6px;border-radius:50%;background-color:#ffffff1a}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .phoneHomeBar{position:absolute;bottom:.55rem;left:50%;transform:translate(-50%);width:4.1rem;height:2.5px;background-color:#ffffff2e;border-radius:2px}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp{flex:1;display:flex;flex-direction:column;background-color:#0d0d0f;overflow:hidden}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp p{max-width:none;margin:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp svg{background:none!important;padding:0!important;border-radius:0!important}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader{display:flex;justify-content:space-between;align-items:flex-start;padding:.35rem .55rem .15rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader .apexAppTitle{color:#fff;font-size:.68rem;font-weight:800;line-height:1}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader .apexAppSub{color:#ffffff73;font-size:.3rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader .apexHeaderIcons{display:flex;gap:.2rem;margin-top:.08rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader .apexHeaderIcons .apexIconBtn{width:1rem;height:1rem;background-color:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.42rem;font-weight:700;color:#fff}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexHeader .apexHeaderIcons .apexIconBtn svg{width:.32rem!important;height:.32rem!important;color:#fff}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexSeparator{height:1px;background-color:#ffffff14;margin:0 .55rem .2rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexTabs{display:flex;margin:0 .55rem .25rem;background-color:#ffffff12;border-radius:2rem;padding:.1rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexTabs .apexTab{flex:1;border-radius:2rem;padding:.2rem 0;font-size:.36rem;font-weight:600;text-align:center;color:#fff6}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexTabs .apexTab.apexTabActive{background-color:#f0b429;color:#1a1204}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll{flex:1;overflow:hidden;padding:0 .5rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallLabel{color:#f0b429;font-size:.3rem;font-weight:700;letter-spacing:.05em;margin-bottom:.18rem!important;display:flex;align-items:center;gap:.15rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallLabel svg{width:.3rem!important;height:.3rem!important;color:#f0b429}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallengeCard{background-color:#ffffff0f;border-radius:.4rem;padding:.3rem .4rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:.18rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallengeCard .apexCardTitle{color:#fff;font-size:.4rem;font-weight:700;margin-bottom:.06rem!important;line-height:1.1}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallengeCard .apexCardSub{color:#ffffff61;font-size:.3rem;margin-bottom:.06rem!important;line-height:1.2}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallengeCard .apexXP{color:#f0b429;font-size:.35rem;font-weight:700;line-height:1.1}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexChallengeCard .apexCircle{width:.65rem;height:.65rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexFilterRow{display:flex;justify-content:space-between;align-items:center;background-color:#ffffff0f;border-radius:.4rem;padding:.28rem .4rem;margin-bottom:.15rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexFilterRow .apexFilterLeft{display:flex;align-items:center;gap:.2rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexFilterRow .apexFilterLeft .apexFilterLabel{color:#fff;font-size:.38rem;font-weight:700}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexFilterRow .apexFilterLeft .apexFilterBadge{background-color:#f0b429;color:#1a1204;font-size:.28rem;font-weight:700;width:.55rem;height:.55rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexFilterRow .apexFilterRight{color:#fff6;font-size:.3rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard{border-radius:.4rem;overflow:hidden;margin-top:.15rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard .apexRouteImg{height:3rem;background-size:cover;background-position:center}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard .apexRouteInfo{background-color:#ffffff0f;padding:.25rem .4rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard .apexRouteInfo .apexRouteName{color:#fff;font-size:.4rem;font-weight:700;margin-bottom:.04rem!important}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard .apexRouteInfo .apexRouteDiff{color:#ffffff6b;font-size:.3rem;margin-bottom:.04rem!important}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexScroll .apexRouteCard .apexRouteInfo .apexRouteStats{color:#ffffff52;font-size:.28rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav{display:flex;justify-content:space-around;align-items:flex-end;padding:.28rem 0 1.1rem;border-top:1px solid rgba(255,255,255,.07);background-color:#0d0d0f;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavItem{flex:1;display:flex;flex-direction:column;align-items:center;gap:.06rem;color:#ffffff4d}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavItem span{font-size:.26rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavItem svg{width:.48rem!important;height:.48rem!important;color:inherit}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavItem.apexNavActive{color:#f0b429}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavCenter .apexNavCenterIcon{width:1.15rem;height:1.15rem;background-color:#ffffff1f;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);transform:translateY(-.12rem);margin-bottom:.04rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .apexApp .apexBottomNav .apexNavCenter .apexNavCenterIcon svg{width:.48rem!important;height:.48rem!important}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp{flex:1;display:flex;flex-direction:column;background-color:#0c0c0c;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp::-webkit-scrollbar{display:none}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp p{max-width:none;margin:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp svg{background:none!important;padding:0!important;border-radius:0!important}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tStatusBar{padding:.5rem .65rem .1rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tStatusBar span{font-size:.56rem;color:#fff;font-weight:600}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps{display:flex;align-items:center;background-color:#151515;padding:.4rem .5rem;gap:.06rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStep{display:flex;flex-direction:column;align-items:center;gap:.08rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStep .tStepDot{width:.9rem;height:.9rem;border-radius:50%;background-color:#e53935;color:#fff;font-size:.42rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStep .tStepDot.tDotGray{background-color:#444}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStep span{font-size:.36rem;color:#aaa}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStep.tGray span{color:#555}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStepBar{flex:1;height:.08rem;background-color:#e53935;margin-bottom:.46rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSteps .tStepBar.tBarGray{background-color:#444}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tBlock{padding:.4rem .5rem .16rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tLabel{font-size:.34rem;color:#666;letter-spacing:.04em;display:block;margin-bottom:.2rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirDesc{font-size:.32rem;color:#555;line-height:1.4;margin-bottom:.24rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tCityRow{display:flex;gap:.14rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tCityRow .tCityChip{flex:1;padding:.22rem 0;border:1px solid #333;border-radius:.3rem;font-size:.42rem;color:#777;text-align:center}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tCityRow .tCityChip.tChipActive{border-color:#e53935;color:#fff}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSearchInput{display:flex;align-items:center;gap:.2rem;background-color:#1a1a1a;border:1px solid #2a2a2a;border-radius:.35rem;padding:.28rem .44rem;margin-bottom:.2rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSearchInput span{font-size:.44rem;color:#666}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tSearchInput span:last-child{color:#fff}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tResultCard{display:flex;align-items:center;gap:.28rem;background-color:#181818;border:1px solid #2a2a2a;border-radius:.35rem;padding:.28rem .42rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tResultCard .tResultLine{width:.09rem;height:.9rem;background-color:#e53935;border-radius:2px;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tResultCard .tResultTitle{font-size:.44rem;color:#fff;font-weight:600}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tResultCard .tResultSub{font-size:.34rem;color:#666}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirChosen{display:flex;align-items:center;gap:.26rem;border:1px solid #e53935;background-color:#e539351f;border-radius:.35rem;padding:.28rem .44rem;margin-bottom:.14rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirChosen span{font-size:.42rem;color:#fff}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirChosen .tRadioOn{width:.55rem;height:.55rem;border-radius:50%;border:2px solid #e53935;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirItem{display:flex;align-items:center;gap:.2rem;background-color:#151515;border:1px solid #222;border-radius:.35rem;padding:.26rem .4rem;margin-bottom:.12rem}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirItem span{font-size:.38rem;color:#bbb}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirItem .tRadioOff{width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid #555;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tDirItem .tLineBadge{background-color:#e53935;color:#fff!important;font-size:.34rem!important;font-weight:700;padding:.06rem .18rem;border-radius:.12rem;flex-shrink:0}.top-section .content .project .wrapImg .phoneWrap .phoneBody .phoneScreen .transitApp .tBlockLabel{background-color:#131313;border-top:1px solid #1e1e1e;padding:.4rem .5rem;margin-top:auto;flex-shrink:0}.top-section .content .project .wrapImg.phoneIcon{top:5rem}.top-section .content .project .wrapImg.truckIcon svg{background-color:#1f2937}.top-section .content .project .wrapImg .mockupGroup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:flex-start;gap:.8rem;z-index:10}.top-section .content .project .wrapImg .mockupGroup .phoneWrap{position:relative;left:unset;top:unset;transform:none}.top-section .content .project .wrapImg .mockupGroup .devWrap{position:relative;left:unset;top:unset;transform:none;order:-1}.top-section .content .project .wrapImg .mockupGroup:hover~.icon.cityboardIcon{top:-6.5rem;transition:.4s ease}.top-section .content .project .wrapImg .devWrap{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;z-index:5;height:25.3rem}.top-section .content .project .wrapImg .devWrap .devCasing{background-color:#6e1020;border-radius:.45rem;padding:.26rem;box-shadow:2px 6px 16px #0000008c}.top-section .content .project .wrapImg .devWrap .devScreen{background-color:#040404;border-radius:.18rem;width:8rem;padding:.55rem .4rem;display:flex;flex-direction:column;gap:.22rem;font-family:Poppins,sans-serif}.top-section .content .project .wrapImg .devWrap .devRow{display:flex;align-items:center;gap:.18rem}.top-section .content .project .wrapImg .devWrap .devNum{font-size:.62rem;font-weight:800;color:#f5d900;min-width:1.4rem;line-height:1;flex-shrink:0}.top-section .content .project .wrapImg .devWrap .devNumSub{font-size:.38rem;vertical-align:bottom}.top-section .content .project .wrapImg .devWrap .devDestCol{flex:1;display:flex;flex-direction:column}.top-section .content .project .wrapImg .devWrap .devDestRow{display:flex;justify-content:space-between;align-items:center}.top-section .content .project .wrapImg .devWrap .devDest{font-size:.34rem;color:#f5d900;font-weight:600;line-height:1.2;flex:1}.top-section .content .project .wrapImg .devWrap .devInd{position:relative;width:12px;height:12px;flex-shrink:0}.top-section .content .project .wrapImg .devWrap .devInd .devIndDot{display:block;position:absolute;width:5px;height:5px;background-color:#f5d900;animation:devDotOn 2s linear infinite}.top-section .content .project .wrapImg .devWrap .devInd .devIndDot:first-child{bottom:0;left:0}.top-section .content .project .wrapImg .devWrap .devInd .devIndDot.devIndDotB{top:0;right:0;animation:devDotOff 2s linear infinite}.top-section .content .project .wrapImg .devWrap .devMin{font-size:.62rem;font-weight:800;color:#f5d900;width:12px;text-align:center;flex-shrink:0}.top-section .content .project .wrapImg .devWrap .devDivider{height:1px;background-color:#f5d9001f}.top-section .content .project .wrapImg .devWrap .devLeg{flex:1;width:1.2rem;background-color:#6e1020;border-radius:0 0 .3rem .3rem;margin-right:.45rem;box-shadow:2px 4px 10px #00000059}.top-section .content .project .monitorStand{position:absolute;bottom:1rem}.top-section .content .project .monitorStand .leg{position:absolute;width:1.5rem;height:4rem;background-color:#000f42;left:50%;transform:translate(-50%)}.top-section .content .project .monitorStand .support{position:absolute;width:5rem;height:1rem;background-color:#000f42;left:50%;transform:translate(-50%);bottom:-4rem;border-radius:6px}.top-section .content .project .project-desc{height:-moz-fit-content;height:fit-content;min-width:30rem;margin-left:1rem}.top-section .content .project .project-desc .dev-icons{display:flex;justify-content:center;gap:2rem}.top-section .content .project .project-desc .dev-icons span p{font-weight:600;text-align:center;font-size:1rem}.top-section .content .project .project-desc .dev-icons span{text-align:center;min-width:5rem}.top-section .content .project .project-desc .dev-icons span svg{width:3rem}.top-section .content .project .project-desc p{margin-top:0;margin-bottom:1rem}.top-section .content .project .project-desc h2{font-weight:600;font-size:1.5rem;background-color:#000f42;color:#fff;width:-moz-fit-content;width:fit-content;margin:auto;padding:.3rem .7rem;margin-bottom:1rem;border-radius:.5rem}.top-section .content .project .project-desc div{display:flex;gap:15px}.top-section .content .project .project-desc div a{width:-moz-fit-content;width:fit-content}.top-section .content .project .project-desc .project-links{display:flex}.top-section .content .project .project-desc .project-links .live-btn{background-color:red;color:#fff;font-weight:600;padding:.5rem 1rem}.top-section .content .project .project-desc .project-links .live-btn:hover{background-color:#be0000}.top-section .content .project .project-desc .project-links a{background-color:#90cfff;text-decoration:none;padding:.5rem;border-radius:.5rem;color:#000}.top-section .content .project .project-desc .project-links .github-private-wrap{width:-moz-fit-content;width:fit-content}.top-section .content .project .project-desc .project-links .github-private-wrap .github-private-btn{width:-moz-fit-content;width:fit-content;height:100%;box-sizing:border-box}.top-section .content .project .project-desc p{max-width:30rem}.top-section .content .project .project-desc p a{display:block}.github-private-wrap{position:relative}.github-private-wrap .github-private-btn{background-color:#90cfff;text-decoration:none;padding:.5rem;border-radius:.5rem;color:#000;display:block;cursor:not-allowed;transition:opacity .2s ease,filter .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.github-private-wrap .github-tooltip{position:absolute;bottom:calc(100% + .6rem);left:50%;transform:translate(-50%);background-color:#191919;color:#fff;font-size:.78rem;padding:.6rem .85rem;border-radius:8px;width:13rem;line-height:1.45;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:100;text-align:center;box-shadow:0 4px 16px #00000040}.github-private-wrap .github-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#191919}.github-private-wrap:hover .github-private-btn{opacity:.35;filter:grayscale(1)}.github-private-wrap:hover .github-tooltip{opacity:1}@media only screen and (max-width: 1100px){.top-section{margin-top:10rem!important;display:flex;flex-direction:column;align-items:center}.top-section .content{width:100%;max-width:700px;padding:0 1.5rem;box-sizing:border-box}.content .title{padding-bottom:7rem!important;text-align:center}.content .title h1,.content .title h2{font-size:2rem!important}.top-section .content .project{display:block!important}.top-section .content .project .wrapImg{display:block;height:25rem;width:100%!important;max-width:400px;margin:auto;margin-bottom:6rem}.top-section .content .project .wrapImg .monitorImg{top:0;left:0;box-sizing:border-box}.top-section .content .project .wrapImg .icon:not(.phoneIcon){top:-5rem!important}.top-section .content .project .wrapImg .icon.phoneIcon,.top-section .content .project .wrapImg:hover .icon.phoneIcon,.top-section .content .project .wrapImg .phoneWrap:hover~.icon.phoneIcon{top:-5.5rem!important}.top-section .content .project .wrapImg .searchBar{margin:1rem!important}.top-section .content .project .monitorStand{top:20rem;bottom:auto;left:50%;transform:translate(-50%)}.top-section .content .project .project-desc{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;min-width:unset;text-align:center;padding:0 1rem}.top-section .content .project .project-desc h2{font-size:1.6rem;text-align:center;word-break:break-word}.top-section .content .project .project-desc p{margin:0 auto;max-width:100%;word-break:break-word;margin-bottom:1rem}.top-section .content .project .project-desc div,.top-section .content .project .project-desc .project-links{justify-content:center}}@media (max-width: 768px){.inputEl input{pointer-events:none}.top-section .content .project .wrapImg .monitorImg .weatherContent .left .el2 div p{font-size:.43rem}}