.header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper{box-shadow: none}
.archive-page-header{padding-top: 50px; padding-bottom: 50px}
.archive-page-header .page-title, .blog-single h1{font-size: 100px; font-weight: 400; line-height: 1; margin-bottom: 5px}
.taxonomy-description{margin-top: 20px}
.hwp-icon{margin: 50px 0}
.nav-column li.active>a, .nav-column li>a:hover, .nav-dropdown li.active>a, .nav-dropdown>li>a:hover, .nav-vertical-fly-out>li.active>a, .nav-vertical-fly-out>li>a:hover, .nav>li.active>a, .nav>li.current>a, .nav>li>a.active, .nav>li>a.current, .nav>li>a:hover, .mobile-nav .nav-icon a{color: #fff}
.is-outline:hover, .primary.is-outline:hover, .btn-white.button{color: #151414; font-weight: 500}
.hwp-img-radius {border-radius: 30px; overflow: hidden}
.hwp-inter{font-family: Inter Tight, sans-serif; text-align: justify}
.hwp-inter2{font-family: Inter Tight, sans-serif; }
.flickity-page-dots{bottom: 0} .video-slide {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.video-slide iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.number-wrapper {text-align: center; }
.number-metric {color: transparent !important;-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #fff;margin-top: 0;margin-bottom: 0;font-family: Inter Tight, sans-serif;font-size: 120px;font-weight: 600;line-height: 1;display: inline-block;}
.sub-text-about {background-color: #151414;width: 100%;margin-top: -50px;padding: 20px 13px;font-family: Inter Tight, sans-serif;font-size: 16px;font-weight: 500;display: inline-block;position: relative;text-transform: uppercase}
.logos-wrapper {box-sizing: border-box;opacity: 1;mix-blend-mode: normal;object-fit: fill;border-radius: 0;max-width: 1280px;max-height: 480px;margin-left: auto;margin-right: auto;overflow-y: scroll;}
.logo--grid {grid-column-gap: 0px;grid-row-gap: 0px;grid-template-rows: auto;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;grid-auto-columns: 1fr;display: grid;}
.logo-comp {flex-flow: column;justify-content: center;align-items: center;min-height: 120px;padding: 12px;display: flex;}
.logo-heineken{width:60%}
.logo-vero{width:50%}
.logo-manulife{width:80%}
.logo-lg,.logo-grab{width:50%}
.logo-mi{width:30%}
.logo-u{width:35%}
.logo-colgate{width:55%}
.logo-galderma{width:80%}
.logo-nutifood{width:60%}
.logo-sunco{width:55%}
.logo-huawei{width:40%}
.logo-nk{width:70%}
.logo-roche{width:50%}
.logo-signify{width:70%}
.logo-lazada{width:80%}
.logo-bv,.logo-alibaba{width:70%}
.logo-tetra-pak{width:40%}
.logo-epson{width:60%}
.logo-dksh{width:70%}
.logo-obagi{width:50%}
.logo-midea{width:60%}
.logo-orion{width:70%}
.logo-uob{width:60%}
.logo-uber{width:70%}
.logo-itel,.logo-forest,.logo-masterise{width:60%}
.logo-ab{width:70%}
.logo-uber-copy{width:45%}
.logo-infinity{width:40%}
.logo-uriage{width:55%}
.logo-biz{width:45%}
.logo-vigo{width:60%}
.logo-vincom{width:50%}
.logo-vus{width:40%}
.logo-digiworld{width:60%}
.logo-goviet{width:35%}
.logo-sociolla{width:50%}
.logo-friesland{width:75%}
.logo-ouji{width:30%}
.logo-ila{width:40%}
.logo-ila-copy{width:45%}
.logo-scb{width:65%}
.logo-mi {width: 30%;}
.logo-pmg{width:50%}
.logo-astrazeneca{width:80%}
.logo-comp-copy{flex-flow:column;justify-content:center;align-items:center;min-height:120px;padding:12px;display:flex}
.logo-toto{width:55%}
.logo-cetaphil{width:70%}
.logo-ducati{width:55%}
.logos-wrapper::-webkit-scrollbar-track{background:rgba(255,255,255,0.15)}
.logos-wrapper::-webkit-scrollbar-thumb{background:#f58220;transition:background-color 0.8 ease}
.logos-wrapper::-webkit-scrollbar-thumb:hover{background:#f58220}
.logos-wrapper::-webkit-scrollbar{width:8px} .hwp-accord .accordion-item{margin-bottom: 20px}
.hwp-accord .accordion-item .accordion-title{ text-transform:uppercase; color: #f58220;     border: 1px solid #171717;    border-radius: 3rem;    font-size: 1.5rem;
font-weight: 500; padding-left: 50px}
.hwp-accord .accordion-item .accordion-title:hover{background: #fff;}
.hwp-accord .accordion-item .accordion-title.active{background: #fff; border-radius: 3rem 3rem 0 0; border-color: #fff !important}
.hwp-accord .accordion-inner{background-color: #fff; border-radius: 0 0 3rem 3rem}
.hwp-accord.accordion .toggle{left: auto; right: 30px} .hwp-form-lh .col{padding-bottom: 0}
.hwp-form-lh label span{text-transform: uppercase; font-weight: 500}
.hwp-form-lh .wpcf7-text, .hwp-form-lh .wpcf7-email{height: 50px; padding-left: 20px}
.hwp-form-lh .wpcf7-text, .hwp-form-lh .wpcf7-email, .hwp-form-lh .wpcf7-textarea{margin-top: 5px;background: transparent; border: 2px solid #fff; color: #fff; border-radius: 30px}
.hwp-form-lh .wpcf7-text:focus, .hwp-form-lh .wpcf7-email:focus, .hwp-form-lh .wpcf7-textarea:focus{border-color: #3898ec; background: transparent; box-shadow: none; color: #fff}
.hwp-form-lh .wpcf7-checkbox{margin-top: 5px; display: block}
.hwp-form-lh .wpcf7-submit{width: 100%; border-radius: 30px; height: 50px; color: #151414 !important} .portfolio-archive{padding-top: 50px}
.portfolio-archive .page-title h1{font-size: 38px; line-height: 1.5em;padding: 0 15%}
.portfolio-element-wrapper .filter-nav{margin: 50px 0}
.portfolio-element-wrapper .filter-nav li{margin: 5px}
.portfolio-element-wrapper .filter-nav li a{background-color: #000; border-radius: 30px; padding: 3px 15px; border-width: 0}
.portfolio-element-wrapper .filter-nav li a:hover, .portfolio-element-wrapper .filter-nav li.active a{background-color: #f58220}
.portfolio-box{overflow: hidden}
.portfolio-box .box-text{opacity: 0}
.portfolio-box:hover .box-text{opacity: 1}
.portfolio-box .box-text .box-text-inner{display:flex;width:max-content;white-space:nowrap;animation:marquee 15s linear infinite;}
.portfolio-box .portfolio-box-title{font-size: 40px; text-transform: uppercase; letter-spacing: 0; text-shadow: none}
.portfolio-single-page{padding-top: 50px}
.portfolio-single-title{ font-size: 100px;font-weight: 400;line-height: 1;}
.project-grid-main {grid-column-gap: 35px;grid-row-gap: 35px;grid-template-rows: auto;grid-template-columns: 1.3fr minmax(200px, 1fr);grid-auto-columns: 1fr;display: grid;}
.project-grid-main img{border-radius: 30px}
.project-grid-main .info-flex { background-color: #242323;border-radius: 30px;flex-direction: column;justify-content: center;padding: 47px 50px;display: flex;}
.project-grid-main .info-flex .info-content {grid-column-gap: 50px;border-bottom: 1px solid #fff;justify-content: space-between;padding-top: 15px;padding-bottom: 5px;display: flex;}
.project-grid-main .info-flex .info-content p{    font-family: Inter Tight, sans-serif;color: rgba(255,255,255, 0.75);letter-spacing: 1px;text-transform: uppercase;font-size: 15px;font-weight: 500; margin-bottom: 10px}
.hwp-divi{background-color: #fff;width: 100%;height: 1px;margin-top: 70px;margin-bottom: 70px;}
.portfolio-single-page .portfolio-inner ul{ padding-left: 30px }
.portfolio-single-page .portfolio-inner img{width: 100%; height: auto}
.portfolio-relate-top p{font-size: 38px;font-weight: 500;line-height: 1.4;} .blog-post-inner{padding-top: 20px}
.blog-post-inner .cat-label a, .hwp-scat a{    border: 2px solid #fff; color: #fff;letter-spacing: 1px;text-transform: uppercase;border-radius: 30px;padding: 7px 23px;font-size: 14px;font-weight: 500; display: inline-block; opacity: 1}
.blog-post-inner .cat-label a:hover,.hwp-scat a:hover{background-color: #fff; color: #151414;}
.blog-post-inner .post-title {color: #fff; text-transform: uppercase;margin-top: 20px;margin-bottom: 10px;font-size: 25px;font-weight: 500;line-height: 1.4;text-decoration: none;transition: all .3s;}
.blog-post-inner .post-meta{margin-top: 30px; opacity: 0.75}
.hwp-scat{margin-bottom: 20px}
.blog-single .entry-header .entry-image{margin: 30px 0}
.blog-single .entry-header .entry-image img{border-radius: 30px; }
.blog-single img{width: 100%; height: auto}
.header-main .header-nav > li> a{padding-left: 10px; padding-right: 10px}
.header-main .header-nav > li:hover > a{color: #151414 !important}
.header-main .header-nav > li > a:before{content: "";position: absolute;inset: 0; background: #fff; bottom: 0; top: 0; left: 0; height: 0; z-index: -1; transition: all 0.2s linear;}
.header-main .header-nav > li:hover > a:before{height: 100%} .section-take{position: relative;  width: 100%} .text-rotator-content{display:flex;width:max-content;white-space:nowrap;animation:marquee 25s linear infinite;}
.text-rotator-content span{font-size: 80px; text-transform: uppercase; margin-right: 50px}
.i_contact{
position:absolute;
width:80px;
height:80px;
padding: 15px;
border-radius:50%;
background:#f58220;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
text-decoration:none;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%) scale(.5);
transition:
opacity .3s ease,
transform .2s ease; 
z-index:99;
}
.section-take:hover .i_contact{opacity:1;transform:translate(-50%,-50%) scale(1);}
.footer-wrapper .ux-menu a, .c_link a{color: rgba(255,255,255, 0.7)}
.footer-wrapper .ux-menu a:hover{color: #fff}
.footer-wrapper .ux-menu a span, .c_link a{border-bottom: 2px solid rgba(255,255,255, 0.7)}
.absolute-footer, .is-divider{display: none}
.portfolio-single-page .portfolio-inner ul  ul{padding-left: 0; margin-left: 0}
@media only screen and (max-width: 1024px){
.section-take .i_contact{opacity:1;transform:translate(-50%,-50%) scale(1); top: 50%; left: 50%}
}
@media only screen and (max-width: 991px){
.archive-page-header .page-title,.blog-single h1, .portfolio-single-title{font-size: 80px}
.project-grid-main {grid-row-gap: 30px;flex-direction: column;display: flex;}
}
@media only screen and (max-width: 48em) { .archive-page-header .page-title, .blog-single h1, {font-size: 40px}
.hwp-accord .accordion-item .accordion-title{font-size: 18px; padding-left: 20px; padding-right: 80px}
.hwp-accord .accordion-item .accordion-title.active{border-radius: 2rem 2rem 0 0; }
.hwp-accord .accordion-inner{ border-radius: 0 0 2rem 2rem; padding: 20px}
.portfolio-relate-top p{font-size: 20px}
.logo-tetra-pak, .logo-epson, .logo-dksh, .logo-obagi, .logo-midea, .logo-orion, .logo-uob, .logo-uber, .logo-itel, .logo-forest, .logo-masterise, .logo-ab, .logo-uber-copy, .logo-infinity, .logo-uriage, .logo-biz, .logo-vigo, .logo-vincom,     .logo-heineken, .logo-vero, .logo-manulife, .logo-lg, .logo-grab, .logo-mi, .logo-u, .logo-colgate, .logo-galderma, .logo-nutifood, .logo-sunco, .logo-huawei, .logo-nk, .logo-roche, .logo-signify, .logo-lazada, .logo-bv, .logo-alibaba,   
.logo-pmg, .logo-astrazeneca, .logo-toto, .logo-cetaphil, .logo-ducati, .logo-vus, .logo-digiworld, .logo-goviet, .logo-sociolla, .logo-friesland, .logo-ouji, .logo-ila, .logo-ila-copy, .logo-scb{
width: 100%;
}
.portfolio-box .box-text{opacity: 1}
.portfolio-archive .page-title h1{padding: 0 5%}
.portfolio-element-wrapper .filter-nav li a{padding: 3px 10px}
}
@media only screen and (max-width: 540px){
.c_link {padding: 0 10%}
.c_link a{margin: 0 0 15px 0}
.logo-comp,.logo-comp-copy  {
min-height: auto;
padding: 6px;
}
.archive-page-header .page-title, .blog-single h1, .portfolio-single-title {
font-size: 40px;
}
}
@keyframes marquee{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}