:root { --video-height: 168; }
#homepage-main { position: relative; overflow: hidden; }
#homepage-main .video-container { z-index: 101; position: relative; width: 100%; -webkit-mask-image: var(--mask-url); mask-image: var(--mask-url); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none; height: calc(100vw / 300 * var(--video-height)); margin-top: calc(var(--nav-container-height) - 19 * (100vw / 300)); margin-bottom: calc(-24 * (100vw / 300)); }
#homepage-main .video-container iframe { width: 100%; height: calc(100vw * var(--video-height) / 300); }
#homepage-main .splash-image { position: absolute; z-index: 120; right: -150px; width: 60%; bottom: 1px; }
#homepage-main .splash-image img { width: 100%; height: 100%; }
#homepage-main .page-content { height: 100vh; position: relative; overflow-x: clip; }
#homepage-main .page-content .background-image { height: 100%; }
#homepage-main .page-content-overlay { display: flex; position: absolute; top: 0; width: 100%; height: 100%; }
#homepage-main .page-content-overlay .left { width: 60%; padding: 0 15% 0 10%; margin: auto auto auto 0; }
#homepage-main .page-content-overlay .left .content { margin: 50px 0; color: white; text-align: center; }
#homepage-main .page-content-overlay .right { position: absolute; width: 100%; }
#homepage-main .page-content-overlay .button-primary { margin: 1rem auto; }
#homepage-services { overflow: hidden; z-index: 1; position: relative; }
#homepage-services .page-content-default .background-pattern { z-index: -90; background-image: var(--pattern-image), var(--pattern-image); position: absolute; width: 100%; height: 100%; left: 0; animation: move-diagonal 30s linear infinite, move-diagonal 30s linear infinite; background-size: 20% 50%, 20% 50%; }
#homepage-services .page-content-carousel-container { width: 200%; display: flex; overflow: hidden; --item-border-radius: 0.5rem; margin: 2.5% 0; --item-spacing: 25px; }
#homepage-services .cont-carousel-item { width: 50%; height: 100%; display: flex; flex-direction: column; margin: auto calc(-1 * var(--item-spacing)); padding: 20px 0; position: relative; }
#homepage-services .cont-carousel-item-image-container {
  position: relative;
  transform: scale(0.9);
}
#homepage-services .cont-carousel-item-image {
  position: absolute;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  top: 0;
  left: 0;
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
  margin: 5px;
  margin-top: 1.5px;
}
#homepage-services .cont-carousel-item .item-title { position: absolute; opacity: 0; width: 100%; z-index: 1; top: 0px; transform: rotate(-5deg) translateX(17px); }
#homepage-services .cont-carousel-item .item-title svg { height: calc(var(--item-width) * 22.5 / 320); }
#homepage-services .cont-carousel-item:hover .item-title { opacity: 1; }
#homepage-services .cont-carousel-item:hover .cont-carousel-item-image-container { transform: scale(1); }
#homepage-services .cont-carousel-item:hover .background-img svg { fill: white; }
#homepage-services .cont-carousel-item-image img { height: 100%; margin-left: 50%; transform: translateX(-50%); }
#homepage-services .cont-carousel-item-title { align-self: flex-end; margin: auto; text-transform: uppercase; color: black; }
#homepage-services .page-content-buttons { display: flex; margin: auto; margin-bottom: 5%; flex-direction: column; }
#homepage-services .page-content-buttons .button-primary { overflow: visible; }
#homepage-services .button-primary.artstation { background: black; display: flex; }
#homepage-services .button-primary.artstation:hover { background: var(--color-over); }
#homepage-services .button-primary.artstation:hover a > svg { opacity: 0; }
#homepage-services .button-primary.artstation:hover .svg-overlay { opacity: 1; }
#homepage-services .button-primary.artstation svg { width: 160px; margin: -70px -20px; }
#homepage-services .button-primary.artstation a { position: relative; }
#homepage-services .button-primary.artstation a .svg-overlay { top: 6px; position: absolute; opacity: 0; }
#homepage-partners .static-image { width: calc(100% / 0.6); margin-left: calc((100% - (100% / 0.6)) / 2); }
#homepage-partners .static-image img { width: 100%; }
#homepage-partners .content { width: 60%; margin: 10% 0 0 -10%; }
#homepage-partners .content-carousel-splash { position: relative; margin: 5% 0; }
#homepage-partners .content-carousel-splash .carousel-background { background-image: var(--background-image); position: absolute; width: 100%; height: 100%; background-size: cover; }
#homepage-partners .content-carousel-splash .carousel-background svg { width: 100%; height: 100%; }
#homepage-partners .splash-image { position: absolute; width: 30%; top: -350px; right: 10%; z-index: 1; }
#homepage-partners .splash-image img { width: 100%; height: 100%; }
#homepage-partners .carousel-container { width: 100%; overflow: hidden; }
#homepage-partners .page-content-carousel-container { --item-spacing: 0px; }
#homepage-partners .page-content-carousel-container .logo-container { margin: 4rem 5rem; }
/* #homepage-partners .page-content-carousel-container .logo-container svg { width: 135px; } */
#homepage-testimonials { overflow: hidden; z-index: 1; position: relative; }
#homepage-testimonials .testimonial-container { padding: 0; overflow: hidden; display: flex; margin: 5% auto 10%; width: 100%; --testimonials-height: 300px; }
#homepage-testimonials .testimonial-item { margin: 0 auto; width: 100%; padding: 0 5%; }
#homepage-testimonials .testimonial-item-image { padding: 1rem; }
#homepage-testimonials .testimonial-item-image svg { width: 130px; }
#homepage-testimonials .testimonial-item-image-background { position: absolute; display: flex; flex-direction: column; height: initial; width: 125%; height: calc(100% - var(--testimonials-height)); background: white; top: var(--testimonials-height); }
#homepage-testimonials .testimonial-item-image-container { position: relative; display: flex; flex-direction: column; height: var(--testimonials-height); }
#homepage-testimonials .testimonial-item-image-container img { width: 200px; height: 200px; border: 4px solid white; border-radius: 50%; object-fit: cover; margin: auto; }
#homepage-testimonials .testimonial-item-info { text-align: left; display: flex; flex-direction: column; margin: auto; }
#homepage-testimonials .testimonial-item-info > :first-child { margin-top: auto; }
#homepage-testimonials .testimonial-item-info > :last-child { margin-bottom: auto; }
#homepage-testimonials .testimonial-item-info * { color: white; margin: auto; font-size: 1.3rem; }
#homepage-testimonials .testimonial-name { font-weight: bold; font-size: 1.4rem; }
#homepage-testimonials .testimonial-feedback-container { display: flex; position: relative; /* padding: 1rem 10%; */ }
#homepage-testimonials .testimonial-feedback { background: white; margin: 5% 0; }
#homepage-achievements .page-content-default { padding-bottom: 8%; }
#homepage-achievements .page-achievement { position: relative; padding: 5% 0; margin: 2% 0; }
#homepage-achievements .page-achievement .achievement-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#homepage-achievements .background svg { width: 100%; height: 100%; }
#homepage-achievements .achievement-container { justify-content: space-between; margin: 0 auto; display: flex; width: 45%; }
/* #homepage-achievements .achievement-item:hover * { color: var(--color-seiken-light); } */
#homepage-achievements .achievement-item:hover .logo-container > svg { opacity: 0; }
#homepage-achievements .achievement-item:hover .svg-overlay { opacity: 1; }
#homepage-achievements .achievement-item * { color: white; margin: auto; }
#homepage-achievements .achievement-item:first-child { margin-left: initial; }
#homepage-achievements .achievement-item:last-child { margin-right: initial; }
#homepage-achievements .achievement-item .achievement-icon svg { width: var(--svg-size); height: var(--svg-size); }
/* #homepage-achievements .achievement-item .logo-container > svg * { fill: #142864; stroke: white; stroke-width: 40px; } */
#homepage-achievements .achievement-item .achievement-number { margin: .5rem 0; font-weight: bold; line-height: 1; transform: scaleY(0.8); font-size: 3rem; font-variant-numeric: tabular-nums; }
#homepage-achievements .achievement-item .achievement-text { text-transform: uppercase; font-weight: bold; font-size: 1.2rem; }
#homepage-achievements .logo-carousel { position: relative; margin-top: -7%; padding: 2% 0px; }
#homepage-achievements .logo-carousel .carousel-background { position: absolute; width: 100%; height: 100%; }
#homepage-achievements .carousel-container { width: 100%; overflow: hidden; }
#homepage-achievements .page-content-carousel-container { margin-top: 4%; --item-spacing: 0px; }
#homepage-achievements .page-content-carousel-container .logo-container { margin: 0 5rem; }
/* #homepage-achievements .page-content-carousel-container .logo-container svg { width: 135px; height: 135px; } */
#homepage-getintouch .divider svg * { fill: var(--divider-color); }
#homepage-getintouch .page-content-default { padding-bottom: 5%; }
#homepage-getintouch .page-content-default .page-content-inner { width: 40%; }
#homepage-getintouch .page-content-default .title { margin-bottom: 3rem; }
#homepage-getintouch .getintouch-container { display: flex; flex-direction: row; gap: 1rem; margin: 0 1rem; padding: 0 20%; }
#homepage-getintouch .getintouch-card { width: 50%; margin: 0; padding: 0 5%; height: initial; display: flex; flex-direction: column; justify-content: space-between; }
#homepage-getintouch .getintouch-card .getintouch-card-title { font-weight: bold; margin: 0.5rem; font-size: 1.25rem; }
#homepage-getintouch .getintouch-card:hover { filter: var(--shadow-type-2); }
#homepage-getintouch .getintouch-card:hover .has-overlay-svg > svg { opacity: 0; }
#homepage-getintouch .getintouch-card:hover .svg-overlay { opacity: 1; }
#homepage-getintouch .getintouch-card:hover .getintouch-card-content * { color: var(--color-seiken); }
#homepage-getintouch .getintouch-card:hover .getintouch-card-button { background: var(--color-banner); }
#homepage-getintouch .getintouch-card-icon { width: 50%; margin: 1rem auto; }
#homepage-getintouch .getintouch-card-icon svg { width: var(--svg-size); height: var(--svg-size); margin: auto; }
#homepage-getintouch .getintouch-card-title * { font-size: 1.5rem; font-weight: bold; }
#homepage-getintouch .getintouch-card-description * { line-height: 1.5; }

@media (max-width: 1199px) {
  #homepage-achievements .logo-carousel { margin-top: -8%; }
  #homepage-partners .static-image { width: calc(100% / 0.8); margin-left: calc((100% - (100% / 0.8)) / 2); }
}
@media (max-width: 991px) {
  #homepage-main .page-content { height: calc(100vh - 100vw * var(--video-height) / 300); }
  #homepage-main .page-content-overlay .title { width: 60%; margin: 2em auto; }
  #homepage-main .page-content-overlay .left { width: 100%; padding: 0; margin: 3em; }
  #homepage-main .page-content-overlay .left .content { margin: 50px 50% 0 0; }
  #homepage-main .page-content-overlay .button-primary { margin: 5rem 50% 0 10%; }
  #homepage-main .splash-image { right: -30%; width: 80%; bottom: 5%; }
  #homepage-services .page-content-carousel-container { --item-spacing: 20px; }
  #homepage-services .cont-carousel-item .item-title { opacity: 1; }
  #homepage-services .cont-carousel-item .item-title svg { height: 16.5px; }
  #homepage-partners .page-content-default .page-content-inner .title { width: 55%; }
  #homepage-partners .content { width: 55% ; margin: 2em 0 0 0; }
  #homepage-partners .page-content-carousel-container .logo-container { margin: 1em; }
  /* #homepage-partners .page-content-carousel-container .logo-container svg { width: 100px; } */
  #homepage-partners .content-carousel-splash {  margin: 2.5% 0 5%; }
  #homepage-partners .static-image { width: calc(100% / 0.9); margin-left: calc((100% - (100% / 0.9)) / 2); }
  #homepage-partners .splash-image { width: 40%; top: initial; bottom: 50%; right: 1em; }
  #homepage-achievements .page-content-default .page-content-inner .title { width: 75%; }
  #homepage-achievements .logo-carousel { position: relative; margin-top: -3em; padding: unset; }
  #homepage-achievements .achievement-container { width: 75%; margin: auto; }
  #homepage-achievements .achievement-item .achievement-icon svg { width: 70px; height: 70px; }
  #homepage-achievements .page-content-carousel-container { margin-top: unset; }
  #homepage-achievements .page-content-carousel-container .logo-container { margin: 1em; }
  /* #homepage-achievements .page-content-carousel-container .logo-container svg { width: 100px; height: 100px; } */
  #homepage-getintouch .page-content-default .page-content-inner { width: 60%; }
  #homepage-getintouch .page-content-default .title { width: 70%; margin-bottom: unset; }
  #homepage-getintouch .getintouch-container { gap: unset; padding: unset; }
  /* #homepage-getintouch .getintouch-card-icon svg { width: 100px; height: 100px; } */
}
@media (max-width: 768px) {
  /* #homepage-services .page-content-carousel-container { height: 375px; --item-spacing: 10px; } */
  /* #homepage-services .cont-carousel-item .background { width: 100%; left: 0; top: -2%; }
  #homepage-services .cont-carousel-item:hover .item-title { top: 16px; }
  #homepage-services .cont-carousel-item:hover .background { top: 13px; } */
}
@media (max-width: 576px) {
  #homepage-main .splash-image { right: -220px; bottom: -8px; width: 100%; }
  #homepage-main .page-content-overlay .title { width: initial; margin: initial; }
  #homepage-main .page-content-overlay .button-primary { filter: var(--shadow-type-2); margin-top: 131px; margin-left: -27px; }
  #homepage-main .page-content-overlay .left .content { margin: 1.5rem 0; }
  #homepage-main .page-content-overlay .content * { font-size: 1rem; }
  #homepage-services .page-content-default .background-pattern {
    background-size: 20% 20%, 20% 20%;
    background-position: 0 0, 13% 13%;
  }
  #homepage-services .page-content-carousel-container { height: unset; --item-spacing: 15px; }
  #homepage-services .cont-carousel-item .item-title svg { height: 14.5px; }
  #homepage-services .cont-carousel-item .item-title { left: -3%; }
  #homepage-services .cont-carousel-item-image { width: calc(100% - 4px); margin: 2px; }
  /* #homepage-services .cont-carousel-item .background { width: 95%; left: 5px; top: -9px; transform: scaleY(0.98); } */
  /* #homepage-services .cont-carousel-item:hover .item-title { top: 7px; } */
  /* #homepage-services .cont-carousel-item:hover .background { left: -4px; top: 2px; } */

  #homepage-partners .static-image { margin: 0 -3em; width: initial; }
  #homepage-partners .page-content-default .page-content-inner .title { width: 75%; }
  #homepage-partners .content { width: initial; }
  #homepage-partners .splash-image { bottom: 0; right: 1em; }
  /* #homepage-partners .page-content-carousel-container .logo-container svg { width: 60px; } */
  #homepage-testimonials .testimonial-item-image-container img { width: 150px; height: 150px; }
  #homepage-achievements .page-content-default .page-content-inner .title { width: 90%; }
  #homepage-achievements .logo-carousel { position: relative; margin-top: -3em; padding: 2% 0px; }
  #homepage-achievements .achievement-container { width: unset; margin: 1em; }
  #homepage-achievements .achievement-item .achievement-icon svg { width: 70px; height: 70px; }
  #homepage-achievements .page-content-carousel-container { margin-top: 4%; }
  #homepage-achievements .page-content-carousel-container .logo-container { margin: 1em; }
  /* #homepage-achievements .page-content-carousel-container .logo-container svg { width: 60px; height: 60px; } */
  #homepage-getintouch .page-content-default .page-content-inner { width: unset; }
  #homepage-getintouch .page-content-default .title { width: 70%; margin-bottom: unset; }
  #homepage-getintouch .getintouch-container { gap: unset; padding: unset; }
  #homepage-getintouch .getintouch-card { padding: unset; }
  /* #homepage-getintouch .getintouch-card-icon svg { width: 100px; height: 100px; } */
  #homepage-getintouch .getintouch-card-title * { font-size: 1rem; }
}