@charset "UTF-8";
 :root {
--c-primary: rgba(37,46,61,1);
--c-primary-o0: rgba(37,46,61,0);
--c-primary-o1: rgba(37,46,61,0.1);
--c-primary-o2: rgba(37,46,61,0.2);
--c-primary-o3: rgba(37,46,61,0.3);
--c-primary-o4: rgba(37,46,61,0.4);
--c-primary-o5: rgba(37,46,61,0.5);
--c-primary-o6: rgba(37,46,61,0.6);
--c-primary-o7: rgba(37,46,61,0.7);
--c-primary-o8: rgba(37,46,61,0.8);
--c-primary-o9: rgba(37,46,61,0.9);
--padding: 1em;
--c-white: rgba(255,255,255,1);
--c-white-o1: rgba(255,255,255,0.1);
--c-white-o2: rgba(255,255,255,0.2);
--c-white-o3: rgba(255,255,255,0.3);
--c-white-o4: rgba(255,255,255,0.4);
--c-white-o5: rgba(255,255,255,0.5);
--c-white-o6: rgba(255,255,255,0.6);
--c-white-o7: rgba(255,255,255,0.7);
--c-white-o8: rgba(255,255,255,0.8);
--c-white-o9: rgba(255,255,255,0.9);
--box-shadow: 0 0 1em var(--c-primary-o2);
--c-red: rgba(255,0,0,1);
}
@media screen and (min-width:48em) {
:root {
--padding: 1.5em;
}
}
@media screen and (min-width:64em) {
:root {
--padding: 2em;
}
}
html, input, textarea {
font-family: 'Poppins', sans-serif;
font-weight:300;
font-size:100%;
color: var(--c-primary);
}
* {
box-sizing: border-box;
}
section:not(:first-of-type) {
margin:6em auto;
}
body {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.2;
font-weight: 500;
margin:0;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.6em;
}h3{
font-size:1.4em;
}h4 {
font-size:1.2em;
}
@media screen and (min-width:48em) {
h1 {
font-size:3em;
}
h2 {
font-size:2em;
}h3{
font-size:1.6em;
}h4 {
font-size:1.2em;
}
}   
@media screen and (min-width:64em) {
h1 {
font-size: 4em;
}
h2 {
font-size:2.4em;
}
h3{
font-size:1.6em;
}h4 {
font-size:1.2em;
}
}   
a {
color:var(--c-primary);
} 
.cta  {
display:flex;
align-items: center;
justify-content: center;
gap:1em;
}
.cta .btn { 
color:var(--c-primary);
border:1px solid var(--c-primary);
font-weight:500;
padding:0.8em 1.2em;
display: inline-block;
text-decoration: none;
line-height: 1;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.cta .btn:hover {
background-color:var(--c-primary);
color:var(--c-white);
}
.cta .btn.solid {
background:var(--c-primary);
color:#fff;
}
.cta .btn.solid:hover {
background-color:var(--c-white);
color:var(--c-primary);
border-color:var(--c-white);
}
.cta .btn.solid.white {
background:var(--c-white);
color:var(--c-primary);
}
.cta .btn.solid.white:hover {
background-color:var(--c-primary);
color:var(--c-white);
border-color:var(--c-primary);
}
.container {
position: relative; 
}
.wrap {
max-width:90em;
margin:auto;
padding:0 var(--padding);
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
header  {
position: relative;
z-index: 99;
}
header .wrap  {
position: relative;
z-index: 99; 
display: flex;
justify-content: space-between;
align-items: stretch;
}
header  { 
position: fixed;
top:0;
left:0;
right:0;
}
header.sticky {
background-color:#fff;
box-shadow:var(--box-shadow);
} .admin-bar header{
margin-top:46px;
}
.admin-bar .popup {
top:46px;
}
#wpadminbar {
position: fixed!important;
}
@media screen and (min-width:783px) {
.admin-bar header{
margin-top:32px;
}
.admin-bar .popup {
top:32px;
}
}
header hgroup {
display: inline-block
}
header h1 {
margin: 0;
font-size:100%;
}
header h1 a {
display: block;
width: 11em;
height: 5em;
text-indent: -9999em;
background-image: url(//10x.hk/wp-content/themes/10x/images/10x_solutions_logo.webp);
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
margin-left: -1em;
}
nav {
position: absolute;
top:0;
right:0; 
transition-duration: 0.2s;
transition-timing-function: ease-out;
padding-top:5em;
display: none;
padding-bottom: 1em;
}
.nav-active nav {
background-color:var(--c-primary);
display: block;
}
.nav-toggle {
padding:0 var(--padding);
cursor:pointer; 
display: flex;
justify-content: center;
flex-direction: column;
gap:0.5em;
position: relative;
z-index: 2;
margin-right:calc(1px - var(--padding));
}
.nav-toggle i {
display: block;
width: 1.5em;
height: 2px;
background-color: var(--c-primary); 
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.nav-active .nav-toggle i {
background-color:#fff;
}
.nav-active .nav-toggle i:first-of-type {
transform:translateY(0.3em);
}
.nav-active .nav-toggle i:last-of-type {
transform:translateY(-0.3em);
}
nav .menu-main-container {
display: none;
}
.nav-active .menu-main-container {
display: block;
clear: both;}
nav .menu-main-container ul {
margin: 0;
padding: 0;
}
nav .menu-main-container ul li {
list-style: none;
}
nav .menu-main-container ul li a {
display: block;
font-size:125%;
padding: 0.6em 1.2em;
color:#fff;
text-align: right;
text-decoration: none;
cursor: pointer;
line-height: 1;
}
nav .menu-main-container ul li a:hover {
background-color:var(--c-white-o4);
}
.qtranxs-lang-menu>a {
display: none!important;
}
.qtranxs-lang-menu>ul>li>a>img,
.qtranxs-lang-menu-en .qtranxs-lang-menu-item-en,
.qtranxs-lang-menu-zh .qtranxs-lang-menu-item-zh {
display: none;
}
@media screen and (min-width:64em) {
header .wrap {
display: flex;
align-items: stretch;
justify-content: space-between;
}
nav {
position: relative;
top: auto;
right: auto;
display: flex;
align-items: stretch;
padding:0;
}
nav ul {
display: flex;
align-items: stretch;
}
.nav-toggle {
display: none;
}
nav .menu-main-container {
display: block;
display: flex;
align-items: stretch;
}
nav .menu-main-container ul li {
display: flex;
align-items: stretch;
}
nav .menu-main-container ul li a {
color:#000;
padding: 2em 1.5em;
transition-duration: 0.2s;
transition-timing-function: ease-out;
font-size: 100%;
display: block;
display: flex;
align-items: center;
}
nav .menu-main-container ul li a:hover {
background-color:var(--c-primary-o1);
}
}
@media screen and (min-width:64em) {
nav .menu-main-container ul li a {
padding: 1em 1em;
}
}
footer {
clear:both;
margin:2em auto;
}
footer p {
font-size:87.5%;
text-align: center;
margin:0;
}
footer p span {
display:inline-block;
margin:0 0.2em;
}
.section-header {
max-width:48em;
margin:4em auto;    
}
.section-header .eyebrow {
text-align: center;
}
.section-header .section-title {
text-align: center;
}
.section-header .intro {
text-align: center;
}
.filters .toggle {
border:1px solid #ccc;
border-radius:0.4em;
padding:0.4em 2em 0.4em 0.6em;
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-out;
cursor:pointer;
}
.filters .filter {
position: relative;
margin-top:0.5em;
}
.filters .toggle .qty {
font-size: 75%;
position: absolute;
top: -0.4em;
right: -0.4em;
border-radius: 1em;
color: #fff;
background: #f00;
padding: 0.2em 0.4em;
font-weight: 500;
line-height: 1;
}
.filters .toggle .icon {
position: absolute;
top:50%;
right:0;
margin-top:-0.5em;
font-size:200%;
}
.filters .filter.active .toggle {
background-color:#eee;
border:1px soilid #eee;
}
.filters .items {
margin:0;
padding:0;
border-radius:0.4em;
background:#fff;
box-shadow:0 0.1em 0.4em #aaa;
position:absolute;
min-width:100%;
top:3em;
left:0;
overflow: hidden;
z-index: 2;
display: none;
}
@media screen and (min-width:48em) {
.filters .filter {float:left;
margin-right:1em;
margin-bottom:1.5em;
}
.filters .sort {
float:right;
white-space: nowrap;
margin-right:0;
}
.filters .sort .toggle,
.filters .sort .txt {
display: inline-block;
vertical-align: middle;
}
}
.filters .filter.active .items {
display: block;
}
.filters .item {
list-style: none;
padding: 0.4em 2em 0.4em 0.6em;
transition-duration: 0.2s;
transition-timing-function:ease-out;
cursor:pointer;
position:relative;
}
.filters .item .icon {
position: absolute;
top: 50%;
right: 0.2em;
margin-top: -0.5em;
font-size: 150%;
}
.filters .item:hover {
background:#ccc;
}
.projects .listing {
margin:0;
padding: 0;
display: grid;
gap: 1em;
grid-template-columns: repeat(1, 1fr);
}
.projects .listing li {
margin-bottom: 1.5em;
list-style: none;
cursor:pointer;
}
.projects .listing li a {
text-decoration: none;
}
@media screen and (min-width:48em) {
.projects     .listing  {
grid-template-columns: repeat(2, 1fr);
}
.projects     .listing li {
}
}
@media screen and (min-width:64em) {
.projects     .listing  {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width:90em) {
.projects     .listing  {
grid-template-columns: repeat(4, 1fr);
}
}
.projects .listing li .img-wrap {
position:relative;
padding-bottom:66.666666666%;
transition-duration: 0.2s;
transition-timing-function: ease-out;
box-shadow: var(--box-shadow);
overflow: hidden;
}
.projects .listing li .img {
position: absolute;
bottom:0;
left:0;
right:0;
top:0;
display: block;
background-size: cover;
background-position: top center;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.projects .listing li .img-wrap:hover  {
box-shadow:none;
}
.projects .listing li .img-wrap:hover .img {
transform:scale(1.05);
}
.projects .listing li h3 {
font-weight:500;
margin:0.5em 0 0 0;
font-size:87.5%;
}
.projects .listing li .service,
.projects .listing li .year{
color:#888;
font-size:87.5%;
}
.mask {
position: fixed;
z-index: 100;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(192,192, 192,0.9);
display: none;
}
.popup {
position:fixed;
width:100%;
top:0;
bottom:0;
z-index: 101;
max-width:48em;
left:50%;
transform:translateX(-50%);
background:#fff;
display: none;
}
@media screen and (min-width:48em) {
.popup {
width:90%;
max-width:64em;
}
}
.popup .close {
background-color:rgba(255,255,255,1);
border-radius:100%;
position: absolute;
top:0.6em;
right:0.6em;
z-index:2;
font-size: 150%;
cursor:pointer;
padding:0.2em;
transition-duration: 0.1s;
transition-timing-function: ease-out;
}
.popup .close:hover {
transform:scale(1.2);
}
.popup  .content {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 1;
overflow-y:auto;
}
.single-project figure img {
display: block;
width:100%;
margin:auto;
}
.single-project .cover figure,
.single-project .gallery figure {
margin:0;
padding:4em 2em;
width:100%;
height:auto;
display: block;
position: relative; 
background-color:#eee;
}
.single-project .gallery figure.item-0 {
display: none;
}
.single-project .gallery .wrap{
display: flex;
flex-direction: column  ;
gap:1em;
max-width: 100%;
}
@media screen and (min-width:48em) {
.single-project .gallery .wrap{
gap:1.5em;
}
}
@media screen and (min-width:64em) {
.single-project .gallery figure.item-0 {
display: block;
}
.single-project .cover {
display: none;
}
.single-project .gallery .wrap{
gap:2em;
}
.single-project .cover figure,
.single-project .gallery figure {
padding:6dvw 4dvw;
}
}
@media screen and (min-width:64em) {
.single-project main{
display: flex;
flex-direction: row;
gap:0em;
position: relative;
}
.single-project .info {
width:calc((100% - 0em) * 0.4);
position: sticky;
top: 6em;
height: calc(100dvh - 6em);
overflow-y: auto;
margin:0;
}
.single-project .gallery {
width:calc((100% - 0em) * 0.6);
}
}
.single-project .info .wrap {
padding-top:2px;
padding-bottom:2em;
}
.single-project .info h3 {
margin: 0.5em 0;
font-size: 240%;
line-height: 1.2;
}
.single-project .back-home a {
text-decoration: none;
padding: 1em;
display: inline-block;
}
.single-project .back-home a span{
vertical-align: middle;
display: inline-block;
}
.single-project .back-home a span.txt{
margin-left:0.25em;
}
.single-project .back-home a span.txt:before {
content: '\f104';
font-family: "Font Awesome 7 Free"; font-weight: 900;
margin-right:0.25em;
}
@media screen and (min-width:64em) {
.single-project .back-home a {
padding:1em 2em;
}
}
@media screen and (min-width:74em) {
.single-project .info {
display: flex;
}
.single-project .back-home {
margin: 0 0;
flex-shrink: 0;
}
.single-project .back-home a {
padding:0 2em;
}
body.single-project main .wrap {
margin:0;
} .single-project h2 {
margin-top:0;
}
.single-project .info .wrap {
padding: 0;
padding: 0 var(--padding);
}
.single-project .back-home a {
text-decoration: none;
}
.single-project .back-home a span{ 
display: block;
margin:auto; 
text-align: center;
}
.single-project .back-home a span.icon {
font-size: 200%;
}
.single-project .back-home a span.txt{
margin-left:0;
margin-top:0.25em;
}
}
@media screen and (min-width:48em) {
.single-project .info h3 {
font-size: 400%;
}
}
.single-project .url {
margin: 2em 0 1.5em 0;
}
.single-project .url a  {
display: inline-block;
border-radius: 1.2em;
background-color: #000;
color: #fff;
font-size: 125%;
padding: 0.4em 0.8em;
font-weight: 500;
text-decoration: none;
transition-duration: 0.1s;
transition-timing-function: ease-out;
}
.single-project .url a:after {
content: '\f35d';
font-family: "Font Awesome 7 Free"; font-weight: 900;
margin-left:0.5em;
}
.single-project .url a:hover  {
transform:scale(1.1);
}
.single-project .url a .material-icons {
vertical-align: middle;
font-size:100%;
margin-left:0.2em;
}
.single-project .service,
.single-project .client {
margin:1.5em 0;
}
.single-project .intro {
margin:1.5em 0;
}
.single-project .content {
line-height: 1.5;
}
.single-project .service em,
.single-project .client em {
font-weight:700;
font-style: normal;
}
.single-project .detail {
margin-top:-20em;
position: relative;
z-index: 1;
}
.single-project .detail .wrap {
padding-top:1em;
padding-bottom:1em;
}
.single-project .detail .wp-block-image {
width:90%;
margin:2em auto;
}
@media screen and (min-width:48em) {
.single-project .detail .wp-block-image {
width:100%;
} 
}
.single-project .detail img {
width:100%;
box-shadow: 0 0.1em 0.8em rgb(0 0 0 / 10%);
margin: auto;
display: block;
}
.single-project .detail .wp-block-image figcaption {
margin:0.5em 0 0 0;
text-align: center;
font-size:87.5%;
}
.contact .detail em {
font-style: normal;
font-weight: 500;
display: block;
}
.contact .detail p {
margin:2em 0;
}
@media screen and (min-width:48em) {
.single-news .content hgroup {
font-size:200%;   
}
.single-news .content .paragraph{
font-size:120%;   
}
}
.hero {
position: relative;
z-index: 1;
width:100%;
height:100dvh;
}
.hero .bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--c-primary-o1);
}
.hero .wrap  {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: 100%;height:100%;
display: flex;
justify-content: start;
align-items: end;
}
.hero .txt-wrap {
text-align: left;
padding-bottom: 1px;
}
.hero .txt-wrap h1 {
margin:0;
}
.hero .txt-wrap .cta {
justify-content: start;
margin:4em 0;
}
.hero video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.eyebrow {
margin-bottom:1em;
}
.features {
margin:4em 0;
}
.features .section-header {
max-width:100%;
margin:auto;
}
.features .txt-wrap {
text-align: center;
} 
.features ul {
margin:2em 0;
display: flex;
flex-direction: column;
gap:1em;
padding:0;
}
.features ul li {
list-style: none;   
}
.feature-item {
background-color:var(--c-white);
box-shadow: var(--box-shadow);
}
.feature-item .img-wrap img {
display: block;
width:100%;
margin:0;
}
.feature-item .txt-wrap {
text-align: left;
padding:1em;
}
.feature-item .txt-wrap p {
margin:0.5em 0 0 0;
}
@media screen and (min-width:48em) {
.features ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap:1em;
}
.features ul .intro {
}
.features ul .intro p {
margin:0;
text-align: left;
}
.features .section-header .txt-wrap,
.features .section-header .eyebrow,
.features .section-header .section-title {
text-align: left;
}
}
@media screen and (min-width:64em) {
.features .section-header .txt-wrap {
display: flex;
align-items: start;
justify-content: space-between;
gap:1em;
}
.features .section-header .eyebrow {
text-align: left;
width:calc((100% - 1em) / 3);
}
.features .section-header .section-title {
text-align: left;
width:calc((100% - 1em) / 3 * 2);
}
.features ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:1em;
}
} 
.why-choose-us ul {
margin:2em 0;
padding:0;
display: flex;
flex-direction: column;
gap:1em;
} 
.why-choose-us .stat-item {
background-color:var(--c-white);
border: 1px solid var(--c-primary-o1);
padding:1.5em;
list-style: none;
}
.why-choose-us .stat-item h3 span {
font-size: 200%;
display: block;
}
.why-choose-us .stat-item p {
margin:1em 0 0 0;
}
.why-choose-us .stat-item:nth-child(2) {
background-color:var(--c-primary);
color:var(--c-white);
}
.why-choose-us .stat-item:nth-child(4) {
background-color:var(--c-primary-o8);
color:var(--c-white);
}
@media screen and (min-width:48em) {
.why-choose-us ul {
display:flex;
gap:1em;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row;
}
.why-choose-us .stat-item:nth-child(1),
.why-choose-us .stat-item:nth-child(4) {
width:calc((100% - 1em) / 3 * 2);
}
.why-choose-us .stat-item:nth-child(2),
.why-choose-us .stat-item:nth-child(3) {
width:calc((100% - 1em) / 3);
}
.why-choose-us .stat-item {
}
}
.faq-list {
display: flex;
flex-direction: column;
gap:1em;
padding:0;
margin:2em 0;
}
.faq-list .faq-item {
list-style: none;
background-color:var(--c-white);
border: 1px solid var(--c-primary-o1);
}
.faq-list .faq-item .faq-question {
font-size:125%;
margin:0;
position: relative;   padding:1em 2em 1em 1em;
cursor:pointer;
}
.faq-list .faq-item .faq-question:after {
content: '+';
position: absolute;
right:0.5em;
top:50%;
line-height: 1;
transform:translateY(-50%);
font-size:100%;
}
.faq-list .faq-item.open .faq-question:after {
transform:translateY(-50%) rotate(180deg);
}
.faq-list .faq-item .faq-answer {
font-size:100%;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.3s ease-in-out;
height:0;
padding:1px 1em;
}
.faq-list .faq-item.open .faq-answer {
clip-path: inset(0 0 0 0);
height:auto;
margin-top:-1em;
}
.cta-box {
background-color:var(--c-primary-o8);
color:var(--c-white);
padding:1.5em; 
margin:2em 0;
}
.cta-box h3 {
margin:0;
}
.cta-box p { 
}
.cta-box .cta {
justify-content: start;
}
@media screen and (min-width:48em) {
.faq .wrap {
display: flex;
align-items: flex-start;
gap:2em;
position: relative;
}
.faq .section-header {
position: sticky;
top: 0;
z-index: 1;
width:40dvw;
max-width:32em;
flex-shrink: 0;
margin:0;
}
.faq .faq-list {
margin:0;
}
}
.our-process .process-steps {
display: flex;
flex-direction: column; 
padding:0;
margin:2em 0;
gap:0.5em;
}
.our-process .process-steps li {
list-style: none;
display: flex;
align-items: stretch;
gap:0.5em;
justify-content: stretch;
}
.our-process .process-steps li .number {
display:flex;
flex-direction:column;
gap:0.25em;
align-items: center;
font-size:150%;
color:var(--c-primary-o5);
line-height: 1;
width:1.5em;
flex-shrink: 0;
}
@media screen and (min-width:48em) {
.our-process .process-steps li .number {
font-size:175%;
}
}
@media screen and (min-width:64em) {
.our-process .process-steps li .number {
font-size:250%;
}
}
.our-process .process-steps li h3 {
margin:0;
}
.our-process .process-steps li .number:after {
content: '';
display: block;
width: 1px;
height: 100%;
background-color:var(--c-primary-o1);
}
.our-process .process-steps li:last-of-type .number:after { 
background: linear-gradient(to bottom, var(--c-primary-o1), var(--c-primary-o0));
}
.our-process .process-steps li .txt-img-wrap {
margin-bottom:2em;
}
.our-process .process-steps li .txt-wrap {
text-align: left; 
}
.our-process .process-steps li p {
margin:0.25em 0 0 0;
}
@media screen and (min-width:48em) {
.our-process .wrap {
display: flex;
align-items: flex-start;
gap:2em;
position: relative;
}
.our-process .section-header {
position: sticky;
top: 6em;
z-index: 1;
width:40dvw;
max-width:32em;
flex-shrink: 0;
margin:0;
}
.our-process .process-steps {
margin:0;
}
}
body:not(.home) main {
padding-top:5em;    
}
section.about .section-header .section-title,
section.about .section-header .intro {
text-align: left;
}
@media screen and (min-width:48em) {
section.about .section-header {
max-width: 100%;
;
}
section.about .section-header .txt-wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap:var(--padding);
}
section.about .section-header .txt-wrap>* {
flex:1;
}
section.about .section-header .txt-wrap .intro p {
margin:0;
}
section.about ul {
padding:0;
margin:0;
list-style: none;
}
section.about ul li {
list-style: none;
}
}
section.about .bento {
display: flex;
flex-direction: column;
gap:1em;
}
section.about .bento .img-mission-values-wrap {
display: flex;
flex-direction: column;
gap:1em;
}
section.about .bento .stats-wrap {
display: flex;
flex-direction: column;
gap:1em;
}
section.about .bento h3 {
margin:0;
}
section.about .bento p {
margin:1em 0 0 0;
}
section.about .bento .img-mission-values-wrap {
display: flex;
flex-direction: column;
gap:1em;
}
section.about .bento .mission-values-wrap {
display: flex;
flex-direction: column;
gap:1em;
}
section.about .bento .item {
padding:var(--padding);
border: 1px solid var(--c-primary-o1);
}
section.about .bento .img-mission-values-wrap .item.img {
padding: 0;
}
section.about .bento .img-mission-values-wrap .item img {
display: block;
width:100%;
height:100%;
object-fit: cover;
}
section.about .bento .item.dark {
background-color:var(--c-primary-o8);
color:var(--c-white);
}
section.about .bento .stats-wrap .item {
background-color:var(--c-primary-o6);
color:var(--c-white);
}
@media screen and (min-width:48em) {
section.about .bento .mission-values-wrap {
flex-direction: row;
}
section.about .bento .stats-wrap {
flex-direction: row;
}
}
@media screen and (min-width:64em) {
section.about .bento .img-mission-values-wrap {
flex-direction: row;
align-items: stretch;
justify-content: stretch;
}
section.about .bento .img-mission-values-wrap .item.img {
width:60%;
flex-shrink: 0;
}
section.about .bento .mission-values-wrap {
flex-direction: column;
align-items: stretch;
justify-content: stretch;
} 
section.about .bento .mission-values-wrap .item {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.clients-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:1em;
margin:0;
padding:0;
}
.clients-list .item {
list-style: none;
border: 1px solid var(--c-primary-o1);
padding:var(--padding);
display: flex;
align-items: center;
justify-content: center;
width:100%;
padding-bottom:100%;
position: relative;
} 
.clients-list .item figure {
margin:0;
padding:0;
}
.clients-list .item figcaption {
display: none;
}
.clients-list .item figure img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-width:80%; 
max-height:40%;
}
@media screen and (min-width:48em) {
.clients-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width:64em) {
.clients-list {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (min-width:90em) {
.clients-list {
grid-template-columns: repeat(8, 1fr);
}
}
.services-list {
display: flex;
flex-direction: column;
gap:1em;
}
.services-list .benefit {
padding:var(--padding);
background-color:var(--c-primary-o8);
color:var(--c-white);
}
.services-list .service-item {
display: flex;
flex-direction: column;
gap:1em;
}
@media screen and (min-width:48em) {
.services-list .service-item {
flex-direction: row;
}
.services-list .service-item:nth-child(even) {
flex-direction: row-reverse;
}
.services-list .service-item .benefit {
flex:2;
}
.services-list .service-item .feature-item {
flex:1;
}
}
.services-list .service-item .benefit ul {
margin:1em 0 0 0;
padding:0;
display: flex;
flex-direction: column;
gap:1em;
}
.services-list .service-item .benefit ul li { list-style: none;
position: relative;
padding-left:1.5em;
&:before {
content: '✓';
position: absolute;
left:0;
color:#0c0;
font-size: 125%;
top: -0.25em;
}
}
.services-list .service-item .benefit ul li p {
margin: 0.25em 0 0 0;
}
.more-features-list {
display: flex;
flex-direction: column;
gap:1em;
margin:0;
padding: 0;
list-style: none;
}
@media screen and (min-width:48em) {
.more-features-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap:1em;
}
}
@media screen and (min-width:64em) {
.more-features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:1em;
}
}
.more-features-list .item.intro {
text-align: center;
}
@media screen and (min-width:48em) {
.more-features-list .item.intro {
text-align: left;
}
}
.more-features-list .item.more-feature {
box-shadow: var(--box-shadow);
background-color:var(--c-white);
padding:var(--padding);
display: flex;
flex-direction: column;
align-items: start;
gap:1em;
}
.more-features-list .item.more-feature .icon {
width:2.5em;
height:2.5em;
text-align: center;
line-height:2.5;
background-color:var(--c-primary);
color:var(--c-white); 
}
.more-features-list .item.more-feature .icon:before {
font-family: 'Font Awesome 7 Free';
font-weight: 900;
font-size: 1.25em; 
line-height:2;
}
.more-features-list .item.more-feature.schedule .icon:before {
content: '\f073';
}
.more-features-list .item.more-feature.transcript .icon:before {
content: '\f20a';
}
.more-features-list .item.more-feature.translate .icon {
background-color:var(--c-white);
color:var(--c-primary);
}
.more-features-list .item.more-feature.translate .icon:before {
content: '\f1ab';
}
.more-features-list .item.more-feature.sentiment .icon {
background-color:var(--c-white);
color:var(--c-primary-o8);
}
.more-features-list .item.more-feature.sentiment .icon:before {
content: '\f118';
}
.more-features-list .item.more-feature.notifications .icon:before {
content: '\f017';
}
.more-features-list .item.more-feature:nth-child(4) {
background-color:var(--c-primary);
color:var(--c-white);
}
.more-features-list .item.more-feature:nth-child(5) {
background-color:var(--c-primary-o8);
color:var(--c-white);
}
.other-services-list { 
display: grid;
grid-template-columns: repeat(2, 1fr);
gap:1em;
margin:0;
padding:0;
list-style: none;
}
@media screen and (min-width:48em) {
.other-services-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width:64em) {
.other-services-list {
grid-template-columns: repeat(6, 1fr);
}
}
.other-services-list .item {
list-style: none;
border: 1px solid var(--c-primary-o1);
padding:var(--padding);
display: flex;
align-items: center;
justify-content: center;
width:100%;
padding-bottom:50%;
position: relative;
}
.other-services-list .item h3 {
font-size:100%;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
text-align: center;
line-height:1.2;
font-weight: 500;
color:var(--c-primary);
background-color:var(--c-white);
padding:0.5em;
}
.insight-item {
border: 1px solid var(--c-primary-o1);
}
.insight-item .img-wrap {
width: 100%;
padding-bottom: 67%;
position: relative;
}
.insight-item .img-wrap img {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
object-fit: cover;
width:100%;
height:100%;
}
.insights-list {
margin:0;
padding:0;
list-style: none;
display: flex;
flex-direction: column;
gap:1em;
}
@media screen and (min-width:48em) {
.insights-list {
flex-direction: row;
flex-wrap: wrap;
}
}
.insight-item.cta {
border:none;
display: flex;
align-items: end;
justify-content: center;
margin-top:1em;
}
.insight-item .txt-wrap {
padding:var(--padding);
}
.insight-item .txt-wrap .date {
font-size:0.875em; 
margin-bottom:0.5em;
}
.insight-item a {
text-decoration: none;
}
.insight-item:first-child,
.section-header + .insight-item {
position: relative;
display: flex;
}
.insight-item:first-child a,
.section-header + .insight-item a {
display: flex;
flex-direction: column;
align-items: end;
justify-content: end;
}
.insight-item:first-child .txt-wrap,
.section-header + .insight-item .txt-wrap {
position: relative;
z-index: 1;
color:var(--c-white);
}
.insight-item:first-child .txt-wrap .date,
.section-header + .insight-item .txt-wrap .date {
color:var(--c-white);
}
.insight-item:first-child .img-wrap,
.section-header + .insight-item .img-wrap {
width:100%;
padding-bottom: 67%;
position: unset;
}
.insight-item:first-child .img img,
.section-header + .insight-item .img img {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
object-fit: cover;
width:100%;
height:100%;
}
@media screen and (min-width:48em) {
.insight-item {
width:calc((100% - 2em) / 3);
}
.insight-item:first-child,
.section-header + .insight-item {
width:100%;
}
}
@media screen and (min-width:64em) {
.insight-item {
width:calc((100% - 2em) / 6 * 1.5);
}
.insight-item:first-child,
.section-header + .insight-item {
width:calc((100% - 2em) / 6 * 3);
}
.insight-item:first-child .img-wrap,
.section-header + .insight-item .img-wrap {
padding-bottom: 33%;
}
.insight-item.cta {
width:100%;
}
} .pagination {
margin-top: 3em;
display: flex;
justify-content: center;
align-items: center;
}
.pagination ul {
display: flex;
list-style: none;
gap: 0.5em;
margin: 0;
padding: 0;
}
.pagination li {
margin: 0;
}
.pagination a,
.pagination .current {
display: block;
padding: 0.75em 1em;
border: 1px solid var(--c-black);
border-radius: 4px;
text-decoration: none;
color: var(--c-black);
transition: all 0.3s ease;
}
.pagination a:hover {
background-color: var(--c-black);
color: var(--c-white);
}
.pagination .current {
background-color: var(--c-black);
color: var(--c-white);
font-weight: bold;
}
.pagination .dots {
padding: 0.75em 0.5em;
color: var(--c-black);
}
@media screen and (max-width: 48em) {
.pagination ul {
gap: 0.25em;
}
.pagination a,
.pagination .current {
padding: 0.5em 0.75em;
font-size: 0.9em;
}
}
@media screen and (min-width:64em) {
.page.insights .section-header {
margin:0;
}
.page.insights .section-header * {
text-align: left;
}
.page.insights .section-header,
.page.insights .insight-item:first-child {
width:calc((100% - var(--padding)) / 2);
}
}
.single-insight .date {
text-align: center;
margin-top:1em;
}
.single-insight .featured-image img{
width:100%;
margin:auto;
max-width:64em;
display: block;
}
.single-insight .content {
max-width:64em;
margin:auto;
}
.single-project section.info {
margin-top:0;
}
@media screen and (min-width:64em) {
.single-project section.gallery {
margin-top:0;
}
}
.contact .section-header * {
text-align: left;
}
.contact .section-header .intro p {
margin:0;
}
.contact .contact-methods .txt-wrap {
display: flex;
flex-direction: column;
gap:1em;
}
.contact .contact-methods .contact-method {
position: relative;
padding-left:2em;
}
.contact .contact-methods .contact-method h3 {
display: none;
}
.contact .contact-methods .contact-method p a {
text-decoration: none;
}
.contact .contact-methods .contact-method p a:before {
content: '';
display: block;
background-color:var(--c-primary); 
line-height:1;
color:var(--c-white);
font-family: 'Font Awesome 7 Free';
font-weight: 900;
position: absolute;
font-size:0.75em;
top:0;
left:0;
width:2em;
height:2em; 
display: flex;
align-items: center;
justify-content: center;
}
.contact .contact-methods .contact-method.email p a:before {
content: '\f0e0';
}   
.contact .contact-methods .contact-method.phone p a:before { 
content: '\f095';
}
.contact .contact-methods .contact-method.address p a:before { 
content: '\f041';
}
.contact .contact-methods .contact-method p {
margin:0;
}
.contact .contact-form {
background-color:var(--c-white);
padding:var(--padding) var(--padding) calc(var(--padding) + 1em) var(--padding);
box-shadow: var(--box-shadow);
}
section.contact form {
display: flex;
flex-direction: column; 
gap: 1em;
}
.contact .contact-form .section-header {
margin: 1em 0;
}
.contact .contact-form form p {
margin:0;
}
.contact .contact-form label {
}
.contact .contact-form form input[type="text"],
.contact .contact-form form input[type="email"],
.contact .contact-form form input[type="tel"],
.contact .contact-form form textarea {
width:100%;
font-family: var(--font-family-primary);
font-size:1em;
padding:0.5em;
border: 1px solid var(--c-primary-o2);
border-radius: 0; 
} 
.wpcf7-not-valid {
border-color:var(--c-red) !important;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 1em 0 0 ;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid var(--c-primary-o2);
border-radius: 0;
background-color: var(--c-white);
cursor: pointer;
position: relative;
vertical-align: middle;
margin-right: 0.25em;
transition: all 0.2s ease;
}
input[type="checkbox"]:hover {
border-color: var(--c-primary-o5);
box-shadow: var(--box-shadow);
}
input[type="checkbox"]:checked {
background-color: var(--c-primary);
border-color: var(--c-primary);
}
input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%, -50%);
color: var(--c-white);
font-size: 1em;
font-weight: bold;
}
input[type="checkbox"]:focus {
outline: none;
border-color: var(--c-primary); 
}
.required {
text-align: right;
margin:1em 0;
}
.required-icon {
color:var(--c-red);
}
.field-label {
margin-bottom:0.25em;
display: block;
}
.form-group.submit {
margin:0 0 0 0;
}
input[type="submit"] {
background-color:var(--c-primary);
color:var(--c-white);
border:none;
padding:0.5em 1em;
border-radius: 0;
cursor:pointer;
}
input[type="submit"]:hover {
background-color:var(--c-primary-o8);
color:var(--c-white);
}
input[type="submit"]:focus {
outline:none;
border:none;
}
input[type="submit"]:active {
background-color:var(--c-primary-o8);
color:var(--c-white);
}
.form-group.submit p {
display: flex;
align-items: center;
gap: 1em;
}
.wpcf7-spinner {
margin:0;
}
.wpcf7-not-valid-tip {
margin-top:0.25em;
font-size:0.75em;
}
.form-group {
width:100%;
}
@media screen and (min-width:48em) {
section.contact  .wrap {
display: flex;
align-items: flex-start;
gap:var(--padding);
}
section.contact  .wrap>* {
flex:1;
}
.contact .contact-methods .section-header {
margin-top:2.5em;
}
}
.contact .map {
position:relative;
width:100%;
padding-bottom:70%; 
margin-top:2em;
}
.contact .map iframe{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
.wpcf7 form .wpcf7-response-output {
margin: 0;
padding: 0.5em;
border: 2px solid var(--c-primary);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
}
.faq-q-a  {
max-width:64em;
margin:auto;
}