@charset "UTF-8";@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickBold.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickBold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickExtrabold.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickExtrabold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickThinItalic.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickThinItalic.woff') format('woff');font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickItalic.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickItalic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'Mondapick Semiblod';src:url('https://www.jocapps.com/fonts/MondapickSemiblod.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickSemiblod.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickThin.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickThin.woff') format('woff');font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickExtraboldItalic.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickExtraboldItalic.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickBoldItalic.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickBoldItalic.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Mondapick;src:url('https://www.jocapps.com/fonts/MondapickRegular.woff2') format('woff2'),url('https://www.jocapps.com/fonts/MondapickRegular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:CandiceExp;src:url('https://www.jocapps.com/fonts/Candice-BoldExpanded.woff2') format('woff2'),url('https://www.jocapps.com/fonts/Candice-BoldExpanded.otf') format('opentype');font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}.titleheader{font-family:CandiceExp!important;line-height:1.25!important}.preloader{font-family:Mondapick!important;max-width:90%!important}.page-title{margin-top:200px!important;margin-bottom:-10px!important}*{outline:0!important}body{margin:0;padding-left:150px;padding-right:50px;font-family:Mondapick;font-size:17px;color:#414143;-webkit-transition:.4s ease-in-out;-moz-transition:.4s ease-in-out;-ms-transition:.4s ease-in-out;-o-transition:.4s ease-in-out;transition:.4s ease-in-out;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}a{color:#414143;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}a:hover{text-decoration:underline;color:#414143}a:active{text-decoration:underline}img{max-width:100%}p{line-height:1.5}textarea{width:100%;height:160px;border:1px solid #eee;padding:15px 20px}.color-dark{background-color:#414143}.color-dark .left-side ul{width:100vh;line-height:1;display:block;margin:50vh 0 0 -9px;padding:0;transform:rotate(-90deg);transform-origin:0 0;position:absolute;left:50%;top:50%;text-align:center}.color-dark .left-side ul li{display:inline-block;margin:0 10px;padding:0;list-style:none}.color-dark .left-side ul li a{display:block;font-size:13px;font-weight:600;position:relative;padding:0 2px;color:#fff}.color-dark .left-side ul li a:before{content:'';display:block;position:absolute;left:0;bottom:6px;height:1px;width:0;transition:width,background .25s}.color-dark .left-side ul li a:after{content:'';display:block;position:absolute;right:0;bottom:6px;height:1px;width:0;background:#fff;transition:width .25s}.color-dark .left-side ul li a:hover:before{width:100%;background:#fff;transition:width .25s}.color-dark .left-side ul li a:hover:after{width:100%;background:0 0;transition:none}.color-dark .logo img{-webkit-filter:invert(100%);filter:brightness(0) invert(1)}.color-dark .left-side .gotop img{-webkit-filter:invert(100%);filter:invert(100%)}.color-dark section .container h2{color:#fff}.color-light{background-color:#fff}.color-undefined{background-color:transparent}.overflow{overflow:hidden}.odometer{line-height:1}.odometer .odometer-digit{padding:0}.odometer .odometer-digit-inner{left:0}.pagination{width:100%;display:flex;flex-wrap:wrap}.pagination li.page-item{margin-right:5px}.pagination li.page-item:first-child a.page-link{padding-left:0}.pagination li.page-item.active a.page-link{border:1px solid #414143;background:0 0}.pagination li.page-item a.page-link{border:none;color:#414143;font-size:13px;font-weight:600;border-radius:50%}.pagination li.page-item a.page-link:hover{background:0 0;opacity:.5}.pagination li.page-item a.page-link:focus{border:none;background:0 0;box-shadow:none}.transition-overlay{width:100vw;height:100vh;position:fixed;right:calc(-100% - 200px);bottom:0;background:#414143;z-index:99;-webkit-transition:.3s cubic-bezier(0.86,0,0.07,1);-moz-transition:.3s;transition:.3s cubic-bezier(0.86,0,0.07,1);transition-duration:.5s;-webkit-transition-duration:.5s;visibility:hidden}.transition-overlay:before{content:"";width:0;height:0;border-style:solid;border-width:0 200px 100vh 0;border-color:transparent #414143 transparent transparent;position:absolute;left:-200px;top:0}.transition-overlay.active{right:0;visibility:visible}.jocappsorange{color:#F15B29!important}.preloader{position:fixed;top:0;left:0;margin:auto;width:100vw;height:100vh;background:#414143;opacity:1;-webkit-transition:.3s cubic-bezier(0.86,0,0.07,1);-moz-transition:.3s;transition:.3s cubic-bezier(0.86,0,0.07,1) 0.65s;transition-duration:.5s;-webkit-transition-duration:.5s;z-index:99}.preloader *{-webkit-transition:.3s cubic-bezier(0.86,0,0.07,1);-moz-transition:.3s;transition:.3s cubic-bezier(0.86,0,0.07,1);transition-duration:.5s;-webkit-transition-duration:.5s}.preloader:before{content:"";width:0;height:0;border-style:solid;border-width:0 200px 100vh 0;border-color:transparent #414143 transparent transparent;position:absolute;left:-200px;top:0}.preloader:after{content:"";width:0;height:0;border-style:solid;border-width:100vh 0 0 200px;border-color:transparent transparent transparent #414143;position:absolute;right:-200px;top:0}.preloader .inner{width:100vw;height:100vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;overflow:hidden}.preloader .inner .logo{display:inline-block;margin:0;animation:.6s fadeInUp}.preloader .inner .logo img{height:50px}.preloader .inner .percentage{width:100%;font-size:70vh;line-height:1;font-weight:800;color:#fff;position:absolute;top:50%;transform:translateY(-50%);text-align:center;opacity:.05;transition-delay:0.10s}.page-loaded .preloader{left:calc(-100% - 200px);visibility:hidden}.page-loaded .preloader .logo{transform:translateX(-100px);opacity:0}.page-loaded .preloader .percentage{margin-left:100px;opacity:0}body .navbar .inner{transform:translateY(-100%);transition-delay:1.2s}body .left-side{left:-100%;transition-delay:1.3s!important;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}body .header .headlines,body .header .page-title,body .page-header{opacity:1;transform:translateY(100%);transition-delay:1.4s!important;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;opacity:0}body .slider{transform:translateY(100%);transition-delay:1.5s!important;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;opacity:0}.page-loaded .header .navbar .inner{transform:translateY(0)}.page-loaded .header .headlines,.page-loaded .header .page-title,.page-loaded .page-header{transform:translateY(0);opacity:1}.page-loaded .slider{opacity:1;transform:translateY(0)}.page-loaded .left-side{left:0}.page-loaded .header-image,.page-loaded .map,.page-loaded figure.image{opacity:1;transform:translateY(0)}.burger{margin-top:1px;z-index:3;display:inline-block;width:50px;height:50px;padding:0;border:none;outline:0;cursor:pointer}.burger-svg__base{fill:#fff}.burger-svg__bars{fill:#414143}.navigation-menu{width:100%;height:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;position:fixed;right:calc(-100% + -200px);top:0;z-index:2;background:#414143;-webkit-transition:.3s cubic-bezier(0.86,0,0.07,1);-moz-transition:.3s;transition:.3s cubic-bezier(0.86,0,0.07,1);transition-duration:.5s;-webkit-transition-duration:.5s;visibility:hidden}.navigation-menu:before{content:"";width:0;height:0;border-style:solid;border-width:0 200px 100vh 0;border-color:transparent #414143 transparent transparent;position:absolute;left:-200px;top:0}.navigation-menu.active{right:0;visibility:visible}.navigation-menu.active .inner{opacity:1;transform:translateX(0)}.navigation-menu #map{width:600px;height:450px;display:none;border:none}.navigation-menu .inner{display:flex;flex-wrap:wrap;align-content:center;padding:80px 10% 0;color:#fff;transform:translateX(40%);opacity:0;-webkit-transition:.3s cubic-bezier(0.86,0,0.07,1);-moz-transition:.3s;transition:.3s cubic-bezier(0.86,0,0.07,1) 0.35s;transition-duration:.5s;-webkit-transition-duration:.5s}.navigation-menu .inner .side-menu{width:100%;float:right;display:none}.navigation-menu .inner .side-menu ul{float:right;margin:0;padding:0;text-align:right}.navigation-menu .inner .side-menu ul li{display:block;list-style:none;margin-bottom:5px}.navigation-menu .inner .side-menu ul li a{font-size:8vw;color:#fff;font-weight:600}.navigation-menu .inner .sides{flex:1;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center}.navigation-menu .inner .sides:last-child{padding-left:50px}.navigation-menu .inner h2{display:block;margin-bottom:20px;line-height:1.7;font-size:25px}.navigation-menu .inner h2 strong{font-weight:600}.navigation-menu .inner figure{display:block;margin:0;background:#fff;padding:6px;position:relative}.navigation-menu .inner figure a{width:50px;height:50px;line-height:44px;position:absolute;right:6px;top:6px;background:#fff;text-align:center}.navigation-menu .inner address{display:block;font-size:19px}.navigation-menu .inner address a{display:block;color:#fff;text-decoration:underline}@-webkit-keyframes reveal{0%{left:0;width:0}50%{left:0;width:100%}51%{left:auto;right:0}100%{left:auto;right:0;width:0}}@-webkit-keyframes reveal-inner{0%,50%{visibility:hidden;opacity:0}100%,51%{visibility:visible;opacity:1}}.titles{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;padding-right:50%;margin-bottom:80px}.titles h6{font-size:17px;font-weight:600;margin-bottom:20px;letter-spacing:2px}.titles p{font-size:20px;line-height:1.5;margin-bottom:0;font-weight:300}.custom-link{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.custom-link *{-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.custom-link a{display:inline-block;margin-right:15px;font-size:13px;font-weight:600;text-transform:uppercase}.custom-link a:hover{text-decoration:none}.custom-link span{width:20px;height:1px;background:#414143;display:inline-block;margin:0}.custom-link i{width:0;height:0;display:inline-block;margin-left:0;margin-right:auto;border-style:solid;border-width:4px 0 4px 4px;border-color:transparent transparent transparent #414143;opacity:1}.custom-link:hover a{margin-left:20px}.custom-link:hover span{width:50px;margin-left:20px}.custom-link:hover i{opacity:0}.header{width:100%;display:flex;flex-wrap:wrap;flex-direction:column}.header .navbar{width:100%;margin-bottom:0}.header .page-title{width:100%;margin-bottom:100px;margin-top:50px}.header .page-title h2{font-weight:700;font-size:8vw;margin-bottom:20px}.header .page-title h4{padding-right:40%;line-height:1.7}.header .headlines{width:100%;margin-bottom:100px;margin-top:200px}.header .headlines h1{font-size:8vw;font-weight:800;line-height:1;margin:0;padding-bottom:5px}.navbar{width:100%;display:flex;flex-wrap:wrap;position:relative;z-index:9;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.sticky-navbar{position:fixed;top:0;left:0}.navbar.hide{-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.navbar.light{color:#fff}.navbar.light .logo a img{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.navbar.light .main-menu ul li a{color:#fff}.navbar.light .main-menu ul li a:after,.navbar.light .main-menu ul li a:hover:before{background:#fff}.navbar .inner{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:30px 0;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.navbar .logo{margin-left:0}.navbar .logo a{margin:0}.navbar .logo a img{height:42px}.navbar .phone{margin-left:50px}.navbar .main-menu{margin-left:auto}.navbar .main-menu ul{margin:0;padding:0}.navbar .main-menu ul li{display:inline-block;margin:0 18px;padding:0}.navbar .main-menu ul li a{display:block;font-size:15px;font-weight:600;position:relative;padding:0 2px}.color-dark .inner .main-menu ul li a{display:block;font-size:15px;font-weight:600;position:relative;padding:0 2px;color:#fff}.color-undefined .hamburger-menu .mobileburgermenu .burger-svg__base{fill:white}.color-undefined .hamburger-menu .mobileburgermenu .burger-svg__bars{fill:#414143}.overflow .header .light{background-color:#414143!important}.navbar .main-menu ul li a:hover{text-decoration:none;color:#f15b29!important}.navbar .hamburger-menu{margin-right:0;margin-left:30px}.left-side{width:150px;height:100vh;position:fixed;left:0;top:0}.left-side .logo{width:100%;display:block;height:42px;text-align:center;margin-top:35px;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;opacity:0;transform:translateY(-30px)}.left-side .logo img{height:42px}.left-side .logo.sticky{opacity:1;transform:translateY(0)}.left-side ul{width:100vh;line-height:1;display:block;margin:50vh 0 0 -9px;padding:0;transform:rotate(-90deg);transform-origin:0 0;position:absolute;left:50%;top:50%;text-align:center}.left-side ul li{display:inline-block;margin:0 10px;padding:0;list-style:none}.left-side ul li a{display:block;font-size:13px;font-weight:600;position:relative;padding:0 2px}.left-side ul li a:hover{text-decoration:none;color:#f15b29!important}.left-side ul li a:hover:after{width:100%;background:0 0;transition:none}.left-side .gotop{width:50px;padding:14px;position:absolute;left:50px;bottom:35px;display:none}.left-side .gotop img{display:block}.slider{width:calc(100% + 50px);height:560px;display:flex;flex-wrap:wrap;background:#414143;margin-right:-50px;overflow:hidden;position:relative}.slider:hover .swiper-container .swiper-slide{margin-left:-10px}.slider:hover .swiper-button-next span{width:100%}.slider .swiper-container{width:100%;height:100%;position:relative}.slider .swiper-container .swiper-slide{width:calc(100% - 80px);display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;opacity:.3;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;overflow:hidden;background-size:cover;background-position:center}.slider .swiper-container .swiper-slide-active{opacity:1;z-index:2}.slider .swiper-container .swiper-slide-active .slide-inner{opacity:1}.slider .swiper-container .slide-inner{width:100%;padding:0 40% 0 100px;opacity:0;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.slider .swiper-container .slide-inner figure{display:block;margin-bottom:10px}.slider .swiper-container .slide-inner figure img{max-width:120px}.slider .swiper-container .slide-inner h2{font-size:52px;font-weight:600;color:#fff;margin-left:-3px}.slider .swiper-container .slide-inner .link{display:block;margin-top:50px}.slider .swiper-container .slide-inner .link a{display:inline-block;font-weight:600;color:#fff;font-size:13px;position:relative}.slider .swiper-container .slide-inner .link a:before{content:"";width:100%;height:6px;background:#fff;position:absolute;left:0;bottom:0;opacity:.3}.slider .swiper-container .slide-inner .link a:after{content:"";width:0;height:6px;background:#fff;position:absolute;right:0;bottom:0;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.slider .swiper-container .slide-inner .link a:hover{text-decoration:none}.slider .swiper-container .slide-inner .link a:hover:after{width:100%}.swiper-button-next{width:80px;height:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;position:absolute;left:auto;right:20px;top:0;z-index:2;background:0 0;text-align:right}.swiper-button-next span{width:50%;height:1px;margin-left:auto;background:#fff;display:inline-block;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}.swiper-button-next b{font-weight:600;display:block;font-size:12px;color:#fff;margin-top:5px}.swiper-pagination-bullet{opacity:1;background:0 0;position:relative;height:40px;width:40px;text-align:center;transform:scaleX(-1) scale(.7);margin:0}.swiper-pagination-bullet:before{content:"";width:100%;height:100%;border:3px solid rgba(255,255,255,.3);border-radius:50%;position:absolute;left:0;top:0}.swiper-pagination-bullet-active{color:#fff;background:0 0}.swiper-pagination-bullet-active:after{content:"";width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px}.swiper-pagination-bullet svg{position:absolute;top:0;right:0;width:40px;height:40px;transform:rotateY(-180deg) rotateZ(-90deg)}.swiper-pagination-bullet.swiper-pagination-bullet-active svg circle{stroke-width:3px;animation:6s linear forwards countdown}.swiper-pagination-bullet svg circle{stroke-dasharray:113px;stroke-dashoffset:0px;stroke-linecap:round;stroke-width:0;stroke:#fff;fill:none;animation:paused}.page-header{width:100%;display:flex;flex-wrap:wrap;background:#414143}.page-header .video-bg{width:100%}.page-header .video-bg video{width:100%;display:flex}.page-header iframe{width:100%;height:500px;display:block;border:none}.page-header figure{width:100%;margin:0}.page-header figure img{width:100%}.about-intro{width:100%;display:flex;flex-wrap:wrap;padding-top:150px}.about-intro h2{font-size:4vw;font-weight:700;margin-bottom:50px}.about-intro p{line-height:2;margin:0}.about-intro p:nth-child(2){margin-bottom:30px;font-weight:600}.works{width:100%;display:flex;flex-wrap:wrap;padding:80px 0}.works .titles{display:block;padding-right:15%;margin-bottom:20px}.works .titles h2{font-size:18px;font-weight:600;letter-spacing:2px;text-transform:uppercase}.works .titles p{font-size:20px;line-height:1.5;margin-bottom:40px;font-weight:300}.works ul{margin-bottom:0;margin-left:-30px;margin-right:-30px;padding:0}.works ul li{width:50%;margin:40px 0;padding:0 30px;list-style:none}.project-box,.project-box .project-image{width:100%;display:block}.project-box .project-image a{display:block}.project-box .project-image a img{width:92%;height:auto;border-radius:2%}@media (min-width:1240px){.container{max-width:1200px}.project-box .project-image a:hover img{width:96%;border-radius:2%;-webkit-transition:width .5s;transition:width .5s}}.project-box .project-content{width:100%;display:block}.project-box .project-content h3{font-size:27px;display:block}.project-box .project-content h3 a{display:block}.project-box .project-content h3 a:hover{text-decoration:none}.project-box .project-content small{display:block}.our-awards{width:100%;display:flex;flex-wrap:wrap;padding:150px 0}.our-awards .titles{text-align:center;padding:0 20%}.our-awards ul{width:100%;margin:0;padding:0;text-align:center}.our-awards ul li{width:20%;float:left;margin:0;padding:0;list-style:none}.our-awards ul li:last-child figure{border-right:0}.our-awards ul li figure{width:100%;margin-bottom:40px;padding:0 30%;border-right:1px solid rgba(40,40,40,.1)}.our-awards ul li figure img{max-width:100%;height:auto}.dark-mode .left-side .gotop img{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.our-awards ul li h5{font-weight:600;font-size:15px;margin-bottom:15px}.our-awards ul li small{display:block;opacity:.6;margin-bottom:5px}.our-awards ul li .odometer{font-size:60px;font-weight:800}.team{width:100%;display:flex;flex-wrap:wrap;padding:150px 0;color:#fff}.team figure{display:block;margin:0}.team figure img{width:100%;display:block;margin-bottom:20px}.team figure figcaption{display:block;margin:0}.team figure figcaption span{display:block;font-size:14px;opacity:.85;margin-bottom:10px}.team figure figcaption h5{display:block;font-weight:600;margin-bottom:0}.team figure figcaption a{color:#fff;margin-right:10px;margin-bottom:10px}.logos{width:100%;display:flex;flex-wrap:wrap;padding:150px 0}.logos ul{width:100%;display:flex;flex-wrap:wrap;margin:0;padding:0;position:relative;border-left:1px solid rgba(40,40,40,.1);border-top:1px solid rgba(40,40,40,.1)}.logos ul li{width:20%;float:left;list-style:none;border-right:1px solid rgba(40,40,40,.1);border-bottom:1px solid rgba(40,40,40,.1);text-align:center}.logos ul li:hover figure{opacity:1}.logos ul li figure{display:block;height:80px;margin:30px 0;opacity:.6;-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;position:relative}.logos ul li figure img{display:none;height:80px;position:absolute;left:50%;top:0;transform:translateX(-50%)}.post-body{width:100%;margin-bottom:50px}.post-body .image-left{width:50%;float:left;margin-right:30px;margin-bottom:20px;margin-top:5px}.post-body .image-left img{width:100%}.post-body .image-right{width:50%;float:right;margin-left:30px;margin-bottom:20px;margin-top:5px}.post-body .image-right img{width:100%}.post-body .image-full{width:100%;display:inline-block;margin:30px 0}.post-body .image-full img{width:100%}.post-body h5{font-weight:600;margin-top:15px;margin-bottom:15px}.post-body ul{padding-left:20px;margin-bottom:30px}.post-body ul li{margin-bottom:5px}.post-body blockquote{display:inline-block;padding:40px;margin-top:20px;margin-bottom:40px;background:url(../images/quote-bg.svg) left top no-repeat #414143;position:relative;color:#fff;background-size:contain}.post-body blockquote p{display:block}.post-body blockquote h5{font-weight:600;margin:0}.work-with-us{width:100%;display:flex;flex-wrap:wrap;padding:150px 0;color:#fff}.work-with-us h6{font-size:17px;font-weight:600;margin-bottom:20px}.work-with-us h2{font-size:6vw;font-weight:800;margin-bottom:50px}.work-with-us p{display:block;margin:0;font-size:19px}.work-with-us a{color:#fff;text-decoration:underline}.work-with-us small{display:block;margin:15px 0}.footer{width:100%;display:flex;flex-wrap:wrap;padding:150px 0}.footer .career{display:block;border-bottom:1px solid rgba(40,40,40,.1);padding-bottom:100px;margin-bottom:100px}.footer .career h6{font-size:17px;font-weight:600;margin-bottom:20px}.footer .career h2{font-size:3vw;font-weight:800;margin-bottom:50px}.footer .logo{display:block;margin:0}.footer .logo img{height:42px}.footer h5{font-size:15px;font-weight:600;margin-bottom:20px}.footer .sub-footer{width:100%;display:flex;flex-wrap:wrap;margin-top:100px;font-size:13px}.footer .sub-footer ul{display:inline-block;margin-left:0;margin-right:auto;margin-bottom:0;padding:0}.footer .sub-footer ul li{display:inline-block;margin-right:20px;padding:0;list-style:none}.footer .sub-footer ul li a{display:block;position:relative;padding:0 2px}.footer .sub-footer ul li a:hover{text-decoration:none}.footer .sub-footer ul li a:before{content:'';display:block;position:absolute;left:0;bottom:8px;height:1px;width:0;transition:width,background .25s}.footer .sub-footer ul li a:after{content:'';display:block;position:absolute;right:0;bottom:8px;height:1px;width:0;background:#414143;transition:width .25s}.footer .sub-footer ul li a:hover:before{width:100%;background:#414143;transition:width .25s}.footer .sub-footer ul li a:hover:after{width:100%;background:0 0;transition:none}.footer .sub-footer span{margin-right:0}@keyframes countdown{from{stroke-dashoffset:113px}to{stroke-dashoffset:0}}@media only screen and (max-width:1199px),only screen and (max-device-width:1199px){body{padding:0}.left-side{display:none}.navbar{padding:30px}.slider{width:100%;margin-right:0}.slider .swiper-container .slide-inner{padding:0 60px}.works .titles{padding-right:0}}@media only screen and (max-width:991px),only screen and (max-device-width:991px){.slider .swiper-container .slide-inner{padding:0 30px}.preloader .inner .percentage{font-size:50vh}.navigation-menu .inner .side-menu{display:block}.navbar .main-menu,.navbar .wrapper-web{display:none}.navbar .phone{margin-right:auto}.navigation-menu .inner .sides{display:none}.slider .swiper-container .swiper-slide{width:100%}.slider:hover .swiper-container .swiper-slide{margin-left:0}.header .page-title h4,.titles{padding-right:0}.works ul li{width:50%}.our-awards ul li{width:33%;float:none;display:inline-block;margin:0 6%}.our-awards ul li figure{border-right:none}.our-awards ul li .odometer,.team figure{margin-bottom:40px}.logos ul li{width:33.33333%}.logos ul li:nth-child(n+10){display:none}.our-awards .titles{padding:0 5%}.swiper-button-next{display:none}.footer .logo{margin-bottom:40px}.footer .career h2{font-size:6vw}textarea{border-radius:0!important;-webkit-appearance:none}}@media only screen and (max-width:767px),only screen and (max-device-width:767px){.project-box .project-image a img{width:100%}.preloader .inner .percentage{font-size:30vh}.navbar{padding:30px 15px}.navbar .phone{display:none}.slider .swiper-container .slide-inner{padding:0 30px}.slider .swiper-container .slide-inner h2{font-size:35px}.header .page-title h2{font-size:14vw}.works ul li{width:100%}.works ul{width:100%;margin:0!important}.our-awards .titles{padding:0}.logos ul li{width:50%}.logos ul li:nth-child(9){display:none}.work-with-us h2{font-size:9vw}.logos ul li figure,.logos ul li figure img{height:65px}.about-intro h2{font-size:8vw}.footer .career h2{font-size:9vw}.footer .sub-footer ul{margin-bottom:15px}}.wrapper-web{position:relative;display:flex;min-width:100px;width:30%}.wrapper-mob{display:none!important;position:relative;display:flex;width:100%}.search-icon{position:absolute;top:12px;left:8px;width:20px}.clear-icon{position:absolute;top:16px;right:8px;width:23px;cursor:pointer;display:none}.search{border:1px solid grey;border-radius:5px;height:20px;width:100%;padding:2px 40px 2px 35px!important;outline:0;background-color:#f5f5f5}@media screen and (max-width:480px){.wrapper-web{display:none;width:100%;margin:0}.wrapper-mob{display:flex!important;width:100%;margin:0}.typeahead__container{width:98%}}.searchTxt{padding-left:30px!important}.search-result{display:none;color:#17639f!important;background-color:#ecf5fc!important;padding:.5rem .75rem!important;clear:both!important;text-decoration:none!important;position:absolute!important;width:100%!important}.display-none{display:none!important}.typeahead__container{width:100%!important}.typeahead__result{width:100%!important;padding-top:50px;position:absolute}.typehead_result_count{font-size:11px;color:#a19b9b}.typehead_result_title{font-size:14px}.typehead_result_count_txt{font-size:11px;color:#a19b9b}

  @keyframes slides {
    0% {transform: translateX(0);}
    100% {transform: translatex(-1000%)}
  }
  
  .logos {
    overflow: hidden;
    padding: 30px 0px;
    white-space: nowrap;
    position: relative;
  }
  
  .logos:before, .logos:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255));
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255));
  }
  
  .logo_items {
    display: inline-block;
    animation: 70s slides infinite linear;
  }
  
  .logos:hover .logo_items {
    animation-play-state: paused;
  }
  
  .logo_items img{
    height: 50px;
  }
  .logo-list {
    padding: 0 30px;
    display: flex;
    align-items: center;
  }
  .project-references {
    width: 25%;
  }


  @media only screen and (max-width: 767px) {
    .logo-list {
      padding-right: 15px;
      padding-left: 15px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .project-references {
      width: 100%;
    }
  }

  /* Dark Mode Toggle Button */
  .dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    outline: none;
  }

  .dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .dark-mode-toggle .dark-mode-icon {
    width: 20px;
    height: 20px;
    stroke: #414143;
    transition: stroke 0.3s ease;
  }

  .dark-mode-toggle:hover .dark-mode-icon {
    stroke: #f15b29;
  }

  .dark-mode-toggle .moon {
    display: none;
    visibility: hidden;
  }

  .dark-mode-toggle .sun {
    display: block;
    visibility: visible;
  }

  @media only screen and (max-width: 991px) {
    .dark-mode-toggle {
      margin-right: 10px;
      width: 35px;
      height: 35px;
    }
    .dark-mode-toggle .dark-mode-icon {
      width: 18px;
      height: 18px;
    }
  }

  /* Manual dark mode override (when html has dark-mode class) */
  html.dark-mode {
    color-scheme: dark;
  }

  html.dark-mode body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }

  html.dark-mode a {
    color: #e0e0e0;
  }

  html.dark-mode a:hover {
    color: #f15b29;
  }

  html.dark-mode .color-light {
    background-color: #1a1a1a !important;
  }

  html.dark-mode .navbar {
    background-color: #1a1a1a;
  }

  html.dark-mode .navbar .main-menu ul li a {
    color: #e0e0e0;
  }

  html.dark-mode .navbar .main-menu ul li a:hover {
    color: #f15b29 !important;
  }

  html.dark-mode .burger-svg__bars {
    fill: #e0e0e0;
  }

  html.dark-mode .left-side ul li a {
    color: #e0e0e0;
  }

  html.dark-mode .left-side ul li a:hover {
    color: #f15b29 !important;
  }

  html.dark-mode .titles h6,
  html.dark-mode .titles p {
    color: #e0e0e0;
  }

  html.dark-mode .custom-link span {
    background: #e0e0e0;
  }

  html.dark-mode .custom-link i {
    border-color: transparent transparent transparent #e0e0e0;
  }

  html.dark-mode .header .headlines h1,
  html.dark-mode .header .page-title h2,
  html.dark-mode .header .page-title h3,
  html.dark-mode .header .page-title h4 {
    color: #e0e0e0;
  }

  html.dark-mode .team h4,
  html.dark-mode .team figure figcaption h4 {
    color: #fff;
  }

  html.dark-mode .titleheader {
    color: #e0e0e0;
  }

  /* Only change text that was #b0b0b0 to universal color #e0e0e0; leave orange/other as is */
  html.dark-mode .titlesubheader {
    color: #e0e0e0;
  }

  html.dark-mode span.typer[data-words="life,company,government,NGO,organization,agency"] {
    color: #e0e0e0 !important;
  }

  /* Target the TMG heading text in dark mode */
  html.dark-mode .about-intro .col-12 h4 b,
  html.dark-mode section.about-intro h4 b {
    color: #b0b0b0 !important;
  }

  html.dark-mode .works {
    background-color: #1a1a1a;
  }

  html.dark-mode .works .titles h2,
  html.dark-mode .works .titles p {
    color: #e0e0e0;
  }

  html.dark-mode .project-box .project-content h3,
  html.dark-mode .project-box .project-content h3 a {
    color: #e0e0e0;
  }

  html.dark-mode .project-box .project-content small {
    color: #b0b0b0;
  }

  html.dark-mode .our-awards {
    background-color: #1a1a1a;
  }

  html.dark-mode .our-awards .titles h6,
  html.dark-mode .our-awards .titles p {
    color: #e0e0e0;
  }

  html.dark-mode .our-awards ul li h5 {
    color: #e0e0e0;
  }

  html.dark-mode .our-awards ul li small {
    color: #b0b0b0;
  }

  html.dark-mode .our-awards ul li .odometer {
    color: #e0e0e0;
  }

  /* Issue #1: News logos visibility in dark mode — frosted card */
  html.dark-mode .jocapps-news ul li figure,
  html.dark-mode .our-awards ul li figure {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    padding: 18px 30%;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  html.dark-mode .logos {
    background-color: #1a1a1a;
  }

  html.dark-mode .logos ul {
    border-left-color: rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  html.dark-mode .logos ul li {
    border-right-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  html.dark-mode .logos:before {
    background: linear-gradient(to left, rgba(26, 26, 26, 0), rgb(26, 26, 26));
  }

  html.dark-mode .logos:after {
    background: linear-gradient(to right, rgba(26, 26, 26, 0), rgb(26, 26, 26));
  }

  html.dark-mode .post-body h5 {
    color: #e0e0e0;
  }

  html.dark-mode .post-body ul li {
    color: #b0b0b0;
  }

  html.dark-mode .footer {
    background-color: #1a1a1a;
  }

  html.dark-mode .footer .career {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  html.dark-mode .footer .career h6,
  html.dark-mode .footer .career h2,
  html.dark-mode .footer h5 {
    color: #e0e0e0;
  }

  html.dark-mode .footer .sub-footer ul li a {
    color: #b0b0b0;
  }

  html.dark-mode .footer .sub-footer ul li a:after {
    background: #e0e0e0;
  }

  html.dark-mode .footer .sub-footer ul li a:hover:before {
    background: #e0e0e0;
  }

  /* Issue #2: Social media icons — clean icon-only style */
  .social-icons-footer {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
  }
  .social-icons-footer a {
    color: inherit;
    font-size: 22px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  .social-icons-footer a:hover {
    opacity: 1;
    text-decoration: none;
  }

  /* Footer intro block: clearer spacing and emoji alignment */
  .footer .footer-intro-copy {
    line-height: 1.65;
  }
  .footer .footer-values-line {
    display: block;
    margin-bottom: 0.35em;
  }
  .footer .footer-values-line:last-of-type {
    margin-bottom: 0;
  }
  .footer .footer-emoji {
    vertical-align: middle;
    margin: 0 2px;
  }

  html.dark-mode .about-intro {
    background-color: #1a1a1a;
  }

  html.dark-mode .about-intro h2,
  html.dark-mode .about-intro p {
    color: #e0e0e0;
  }

  html.dark-mode textarea {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
  }

  html.dark-mode input[type="text"],
  html.dark-mode .search {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
  }

  html.dark-mode select,
  html.dark-mode .select-box-filter {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }

  html.dark-mode select option {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  html.dark-mode select option:checked,
  html.dark-mode select option:hover {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }

  /* Specific styling for jobs page select boxes - arrow uses currentColor from .select-box-filter so it stays visible in dark mode */
  html.dark-mode .select-box-filter {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }

  html.dark-mode .select-box-filter option {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  html.dark-mode .search-result {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  html.dark-mode .pagination li.page-item a.page-link {
    color: #e0e0e0;
  }

  html.dark-mode .pagination li.page-item.active a.page-link {
    border-color: #e0e0e0;
  }

  html.dark-mode .questions-home-jocapps h6,
  html.dark-mode .questions-home-jocapps h2,
  html.dark-mode .questions-home-jocapps h3,
  html.dark-mode .questions-home-jocapps p {
    color: #e0e0e0;
  }

  html.dark-mode .questions-home-jocapps a {
    color: #e0e0e0;
  }

  /* Light mode: "Any questions?" block text black unless section has #414143 background (body.color-dark) */
  html.light-mode .questions-home-jocapps,
  html.light-mode .questions-home-jocapps h2,
  html.light-mode .questions-home-jocapps h3,
  html.light-mode .questions-home-jocapps h6,
  html.light-mode .questions-home-jocapps p,
  html.light-mode .questions-home-jocapps a {
    color: #000000;
  }
  html.light-mode body.color-dark .questions-home-jocapps,
  html.light-mode body.color-dark .questions-home-jocapps h2,
  html.light-mode body.color-dark .questions-home-jocapps h3,
  html.light-mode body.color-dark .questions-home-jocapps h6,
  html.light-mode body.color-dark .questions-home-jocapps p,
  html.light-mode body.color-dark .questions-home-jocapps a {
    color: #ffffff;
  }
  html.light-mode body.color-dark .questions-home-jocapps a:hover {
    color: #f15b29;
  }

  html.dark-mode .jocapps-news {
    background-color: #1a1a1a;
  }

  html.dark-mode .jocapps-news .titles h6,
  html.dark-mode .jocapps-news .titles h2,
  html.dark-mode .jocapps-news .titles p {
    color: #e0e0e0;
  }

  html.dark-mode .mainjocappsheader {
    background-color: #1a1a1a;
  }

  /* Questions? Let's talk section: same text color as rest of page in dark mode (not white) */
  html.dark-mode .work-with-us,
  html.dark-mode .work-with-us h2,
  html.dark-mode .work-with-us h6,
  html.dark-mode .work-with-us p,
  html.dark-mode .work-with-us a {
    color: #e0e0e0;
  }

  html.dark-mode .work-with-us a:hover {
    color: #f15b29;
  }

  html.dark-mode .dark-mode-toggle .dark-mode-icon {
    stroke: #e0e0e0;
  }

  html.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  html.dark-mode .dark-mode-toggle .sun {
    display: none !important;
    visibility: hidden !important;
  }

  html.dark-mode .dark-mode-toggle .moon {
    display: block !important;
    visibility: visible !important;
  }

  /* Light mode override (when html has light-mode class) */
  html.light-mode {
    color-scheme: light;
  }

  /* Explicit light hero background so dark→light transition animates smoothly (no transparent jump) */
  html.light-mode .mainjocappsheader {
    background-color: #ffffff;
  }

  html.light-mode .dark-mode-toggle .sun {
    display: block !important;
    visibility: visible !important;
  }

  html.light-mode .dark-mode-toggle .moon {
    display: none !important;
    visibility: hidden !important;
  }

  /* Theme transition: when html has .theme-changing (set by JS on system theme change),
     hero and text use only color/background with 0 delay so both directions are smooth. */
  html.theme-changing .header .headlines,
  html.theme-changing .header .headlines h1,
  html.theme-changing .header .headlines .titleheader,
  html.theme-changing .header .headlines .titlesubheader,
  html.theme-changing .header .headlines .typer,
  html.theme-changing .header .headlines .cursor,
  html.theme-changing .mainjocappsheader {
    -webkit-transition: color .4s ease-in-out 0s, background-color .4s ease-in-out 0s !important;
    -moz-transition: color .4s ease-in-out 0s, background-color .4s ease-in-out 0s !important;
    -ms-transition: color .4s ease-in-out 0s, background-color .4s ease-in-out 0s !important;
    -o-transition: color .4s ease-in-out 0s, background-color .4s ease-in-out 0s !important;
    transition: color .4s ease-in-out 0s, background-color .4s ease-in-out 0s !important;
    -webkit-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -ms-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
  }

  /* Issue #4: In dark mode, prevent color-dark scroll from double-inverting the logo.
     In light mode, the inversion should still happen for contrast on dark sections. */
  html.dark-mode .color-dark .navbar:not(.light) .logo a img,
  html.dark-mode .navbar.color-dark:not(.light) .logo a img {
    filter: none;
  }
  .titlesubheader {
    font-size: 1.75rem;
  }
  .team figure figcaption h4 {
    display: block;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.25rem;
  }

  /* Philosophy values section: always dark background (light/dark mode + on scroll) – titles stay white */
  section.team[data-color="dark"] figure figcaption h4 {
    color: #fff !important;
  }
  .header .page-title h3 {
    padding-right: 40%;
    line-height: 1.7;
  }
  h2.our-brands-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .jocapps-news .titles h6,
  .our-awards .titles h6 {
    font-size: 17px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
  }