* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
scroll-behavior: smooth;
font-size: 0.9375vw;
overflow: clip auto;
}
html body {
font-family: "Gilroy";
font-weight: normal;
overflow-x: clip;
background: #fff;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
input[type=file]::-moz-file-upload-button {
cursor: pointer;
}
input[type=file]::-ms-file-upload-button {
cursor: pointer;
}
input[type=file]::-o-file-upload-button {
cursor: pointer;
}
input[type=file] {
cursor: pointer;
}
*::-moz-selection {
color: #1C1D20;
background: #fff;
}
*::selection {
color: #1C1D20;
background: #fff;
}
*::-moz-selection {
color: #1C1D20;
background: #fff;
}
*::-webkit-selection {
color: #1C1D20;
background: #fff;
}
*::-ms-selection {
color: #1C1D20;
background: #fff;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
font-family: "Gilroy";
border: 0;
outline: 0;
}
b,
strong {
font-weight: 600;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
a,
div a:hover,
div a:active,
div a:focus,
button {
text-decoration: none;
transition: all 0.5s ease 0s;
}
a,
span,
div a:hover,
div a:active,
button {
text-decoration: none;
}
*::after,
*::before,
* {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul,
li {
list-style: none;
}
input,
select,
textarea,
.site textarea {
font-family: "Gilroy";
font-weight: normal;
width: 100%;
background: #fff;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
font-family: "Gilroy";
font-weight: normal;
color: #1C1D20;
margin: 0;
}
body h2 {
font-size: 3.222rem;
font-weight: 800;
letter-spacing: 1px;
line-height: 120%;
}
body h2 span {
color: #004dd3;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
outline: none !important;
}
body p {
color: #1C1D20;
font-family: "Gilroy";
font-weight: normal;
font-size: 1rem;
line-height: 180%;
margin: 0;
padding: 0 0 15px 0;
display: block;
}
body a {
font-family: "Gilroy";
font-size: 1rem;
font-weight: normal;
color: #1C1D20;
text-decoration: none;
outline: none !important;
display: inline-block;
}
body a:focus {
outline: none !important;
}
body a:hover {
color: #0F68DD;
outline: none !important;
}
body p:last-of-type {
padding-bottom: 0;
}
iframe {
display: block;
width: 100%;
height: 100%;
}
.button-main {
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
padding: 1rem 1.444rem;
background: #0F68DD;
display: inline-block;
text-align: center;
}
.button-main:hover,
.button-main.border-btn:hover {
color: #fff;
background: #0F68DD;
}
.button-main.border-btn {
border: 1px solid #0F68DD;
background: transparent;
color: #0F68DD;
}
.for-mobile {
display: none;
}
.gform_wrapper.gravity-theme form .gform_body input::-moz-placeholder, .gform_wrapper.gravity-theme form .gform_body select::-moz-placeholder, .gform_wrapper.gravity-theme form .gform_body textarea.large::-moz-placeholder {
color: #1C1D20;
}
.gform_wrapper.gravity-theme form .gform_body input::placeholder,
.gform_wrapper.gravity-theme form .gform_body select::placeholder,
.gform_wrapper.gravity-theme form .gform_body textarea.large::placeholder,
.gform_wrapper.gravity-theme form .gform_body select,
.gform_wrapper.gravity-theme form .gform_body select option.gf_placeholder {
color: #1C1D20;
}
.gform_wrapper.gravity-theme form .gform_body input,
.gform_wrapper.gravity-theme form .gform_body select,
.gform_wrapper.gravity-theme form .gform_body textarea.large {
border: 0;
background: #F3F5F7;
height: 70px;
line-height: 70px;
padding: 0 20px;
color: #1C1D20;
font-size: 18px;
border-radius: 11px;
}
.gform_wrapper.gravity-theme form .gform_body select {
cursor: pointer;
}
.gform_wrapper.gravity-theme form .gform_body textarea.large {
height: 180px !important;
line-height: normal !important;
resize: none;
padding: 15px;
}
.gform_wrapper.gravity-theme form .gfield {
margin-bottom: 5px;
}
.gform_wrapper.gravity-theme form input[type=submit] {
background: linear-gradient(-210deg, #f2f2f2 -75%, #004dd3 100%);
width: -moz-max-content;
width: max-content;
padding: 18px 50px !important;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: normal !important;
height: auto !important;
cursor: pointer;
border: 0;
transition: all 0.5s ease 0s;
text-transform: uppercase;
border-radius: 50px;
}
.gform_wrapper.gravity-theme form input[type=submit]:hover {
background: linear-gradient(-210deg, #1E1E1E, #1E1E1E);
}
.gform_wrapper.gravity-theme .gform_validation_errors {
background: transparent;
border: 0;
padding: 0 0 11px;
box-shadow: unset;
margin: 0;
}
.gform_wrapper.gravity-theme .gform_validation_errors span::before {
content: none;
}
.gform_wrapper.gravity-theme .gform_validation_errors h2 {
color: red;
font-size: 1rem;
text-align: center;
margin: 0 auto 10px;
border: 1px solid red;
line-height: normal;
padding: 8px 30px;
letter-spacing: 0;
display: none !important;
}
.gform_wrapper.gravity-theme form .validation_message {
background: transparent;
padding: 11px 0 0;
margin: 0;
border: 0;
color: red;
font-size: 15px;
}
.gform_wrapper.gravity-theme .gform_footer {
padding-bottom: 0 !important;
}
.gform_confirmation_wrapper {
color: green;
font-size: 1rem;
font-weight: 600;
text-align: center;
margin: 1.1rem 0;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Thin.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Thin.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-UltraLight.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-UltraLight.woff) format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Light.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Regular.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Regular.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Medium.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-SemiBold.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Bold.woff2) format("woff2"), url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/css/fonts/Gilroy-Bold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
#header {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
transition-duration: 300ms;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
transition-property: all;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
-webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
-moz-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
padding: 1.5rem 0;
}
#header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
#header .logo {
width: 17rem;
}
#header ul#menu-header-menu {
display: flex;
backdrop-filter: blur(5px);
background: rgba(221, 221, 221, 0.5);
padding: 5px;
border-radius: 50px;
gap: 15px;
}
#header ul#menu-header-menu li a {
padding: 8px 14px;
transition: all ease 0.3s;
border-radius: 50px;
}
#header ul#menu-header-menu li a:hover {
background-color: #1e1e1e;
color: #fff;
} #header .res_navigation {
width: 40px;
height: 29px;
cursor: pointer;
display: none;
}
.res_navigation .nav-toggle {
display: block;
position: relative;
transition: 0.3s ease;
z-index: 9;
width: 40px;
height: 29px;
}
.res_navigation .nav-toggle.active span {
background-color: #000;
}
.res_navigation .nav-toggle span {
position: absolute;
height: 4px;
border-radius: 10px;
width: 100%;
background: #fff;
left: auto;
right: 0;
}
.res_navigation .nav-toggle span:first-child,
.res_navigation .nav-toggle span:last-child {
transition: 0.2s ease-in-out;
width: 75%;
}
.res_navigation .nav-toggle span:first-child {
top: 0;
}
.res_navigation .nav-toggle span:nth-child(2) {
top: 10px;
width: 50%;
transition: opacity 0.2s ease-in-out;
}
.res_navigation .nav-toggle span:last-child {
top: 20px;
}
.res_navigation .nav-toggle.active {
transform: rotate(45deg);
}
.res_navigation .nav-toggle.active span:first-child {
transform: translateX(-3%) rotate(90deg);
top: 16px !important;
}
.res_navigation .nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.res_navigation .nav-toggle.active span:first-child,
.res_navigation .nav-toggle.active span:last-child {
top: 15px;
}
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
position: relative;
float: none;
padding: 0 4.5rem;
}
.hero-banner {
height: 100vh;
position: relative;
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.hero-banner .container {
height: 100%;
}
.hero-banner .left-col {
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
position: relative;
}
.hero-banner h1 {
font-size: 3.6rem;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 1.111rem;
line-height: 110%;
color: #fff;
}
.hero-banner h1 span {
color: #000;
}
.hero-banner p.sub-title {
font-size: 1.6rem;
font-weight: 500;
color: #fff;
line-height: 130%;
}
.hero-banner .counter-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2.1rem;
margin-top: 7.3rem;
align-items: end;
}
.hero-banner .counter-wrap .single {
background: #fff;
padding: 1.111rem 0.778rem 5.556rem;
border-radius: 20px 20px 0 0;
position: relative;
z-index: 1;
transition: all ease 0.5s;
}
.hero-banner .counter-wrap .single:hover {
padding-bottom: 7.222rem;
}
.hero-banner .counter-wrap .single::before {
position: absolute;
content: "";
inset: 0;
background: linear-gradient(to bottom, #ffffff 0%, #236aeb 100%);
border-radius: 20px 20px 0 0;
z-index: -1;
pointer-events: none;
}
.hero-banner .counter-wrap .single::after {
position: absolute;
inset: -8px -8px 0px -8px;
content: "";
border: 1px solid #ccc;
border-radius: 26px 26px 0 0;
border-bottom: 0;
z-index: -2;
background: rgba(204, 204, 204, 0.3098039216);
pointer-events: none;
}
.hero-banner .counter-wrap p.counter {
font-size: 2.4rem;
font-weight: bold;
line-height: normal;
color: #000;
padding-bottom: 5px;
}
.hero-banner .counter-wrap p.text {
font-size: 1.2rem;
font-weight: 500;
color: #000;
letter-spacing: 0.3px;
}
.hero-banner .wrap {
display: flex;
gap: 5.556rem;
align-items: end;
justify-content: space-between;
height: 100%;
}
.hero-banner .wrap model-viewer {
width: 36.111rem;
height: 36rem;
margin-bottom: 3rem;
}
.hero-banner .title-wrap {
position: absolute;
top: 29%;
}
.hero-banner .bp3d_loader {
display: none !important;
}
.partners {
padding-top: 8.333rem;
padding-bottom: 10rem;
position: relative;
}
.partners::before {
position: absolute;
content: "";
inset: 0;
background: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/images/built-for-bg.png);
pointer-events: none;
}
.partners h2 {
padding-bottom: 1.111rem;
}
.partners p.sub-title {
font-size: 1.333rem;
font-weight: 500;
line-height: 120%;
}
.partners .logo-slider {
margin-top: 3.344rem;
overflow: hidden;
}
.partners .logo-slider .marquee {
align-items: center;
display: flex;
overflow: hidden;
width: -moz-max-content;
width: max-content;
}
.partners .logo-slider .marquee .marquee__group {
align-items: center;
animation: scroll 25s linear infinite;
display: flex;
justify-content: space-around;
}
.partners .logo-slider .marquee .marquee__group img {
display: block;
margin: 0 0.833rem;
width: 11.667rem;
filter: drop-shadow(0px 5px 5px rgba(0, 70, 190, 0.2));
}
@keyframes scroll {
0% {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.services {
padding: 0px 0 8.333rem;
}
.services h2 {
padding-bottom: 1.111rem;
}
.services p.sub-title {
font-size: 1.333rem;
font-weight: 500;
line-height: 120%;
}
.services .wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.111rem;
margin: 4.444rem auto 0;
max-width: 90%;
}
.services .wrap .single {
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
border-radius: 20px;
padding: 1.111rem;
position: relative;
transition: all ease 0.5s;
}
.services .wrap .single::before {
position: absolute;
inset: 0;
opacity: 0;
background: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/images/Card_background-new.png) no-repeat;
background-size: cover;
content: "";
border-radius: 20px;
z-index: -1;
transition: all ease 0.5s;
}
.services .wrap .single::after {
position: absolute;
content: "";
inset: -0.444rem;
pointer-events: none;
border: 1px solid #ccc;
border-radius: 28px;
opacity: 0;
transition: all ease 0.5s;
}
.services .wrap .single:hover::after {
opacity: 1;
}
.services .wrap .single:hover {
transform: scale(1.2);
z-index: 1;
box-shadow: 0 16px 28px rgba(0, 70, 190, 0.3);
}
.services .wrap .single.blur {
filter: blur(3px);
opacity: 0.7;
}
.services .wrap .single:hover::before {
opacity: 1;
}
.services .wrap .single .img-wrap {
width: 4.7rem;
height: 4.7rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background: linear-gradient(-210deg, #f2f2f2 -75%, #004dd3 100%);
margin-bottom: 1.8rem;
}
.services .wrap .single p.title {
font-size: 1.6rem;
font-weight: bold;
line-height: 120%;
margin-bottom: 0.4rem;
}
.services .wrap .single img {
width: 2.5rem;
}
.services .wrap .single:hover p {
color: #fff;
}
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 999;
pointer-events: none;
background: transparent;
}
.loading-screen {
position: relative;
padding: 0;
width: 100%;
height: 100%;
left: 0;
will-change: top;
}
.loading-screen,
.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
background: #141517;
}
.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
height: 745%;
}
.loading-container .rounded-div-wrap.top {
top: 0;
position: absolute;
transform: translateY(-99%) scale(1, -1);
z-index: 2;
height: 0vh;
will-change: height;
}
.loading-container .rounded-div-wrap.bottom {
top: unset;
bottom: 0;
position: absolute;
transform: translateY(99%);
z-index: 2;
height: 0vh;
will-change: height;
}
.loading-container .loading-words {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
display: block;
will-change: opacity;
}
.loading-container .loading-words h2 {
margin: 0;
padding: 0;
color: #FFFFFF;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: none;
padding-left: 0.6em;
white-space: nowrap;
padding-right: 0.4em;
will-change: opacity;
}
.loading-container .loading-words h2.jap {
font-size: calc(clamp(3.25em, 5vw, 4.5em) * 0.65);
transform: translate(-50%, 10%);
}
.loading-container .dot {
display: block;
position: absolute;
border-radius: 50%;
background: #FFFFFF;
left: 0;
top: 47%;
bottom: auto;
width: calc(clamp(0.889rem, 1.2vw, 1.056rem) / 1.65);
height: calc(clamp(0.889rem, 1.2vw, 1.056rem) / 1.65);
transform: translate(0, 0) scale(1);
}
.loading-container .loading-words h2.active {
display: block;
}
.loading-container .loading-words .home-active,
.loading-container .loading-words .home-active-last {
opacity: 0;
display: none;
}
.loading-fade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 90;
background: #FFF;
visibility: hidden;
opacity: 0;
}
.testimonials h2 {
margin-bottom: 1.111rem;
padding-left: 15px;
padding-right: 15px;
}
.testimonials .container{
padding: 0 !important;
}
.testimonials .wrap  .marquee {
align-items: center;
display: flex;
overflow: hidden;
width: -moz-max-content;
width: max-content;
}
.testimonials .wrap .marquee .marquee__group {
animation: scroll 60s linear infinite;
display: flex;
justify-content: space-around;
}
.testimonials .wrap .marquee.rev .marquee__group {
animation: scrollRev 60s linear infinite;
display: flex;
justify-content: space-around;
}
.testimonials .wrap  .marquee:hover .marquee__group {
animation-play-state: paused !important;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes scrollRev {
0% {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.testimonials .wrap .single {
padding: 1.111rem;
border-radius: 20px;
display: flex;
flex-direction: column;  position: relative;
width: 520px;
margin: 12px;
}
.testimonials .wrap .single::before {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, #fefeff  0%, #e4eef8 100%); content: "";
border-radius: 20px;
z-index: -1;
transition: all ease 0.5s;
}
.testimonials .wrap .single:after {
position: absolute;
content: "";
inset: -0.344rem;
pointer-events: none;
border: 1px solid #cccccc5c;
border-radius: 28px;
transition: all ease 0.5s;
}
.testimonials .wrap .single p.client-name {
margin-top: auto;
padding: 2.078rem 0 0 0;
font-size: 0.944rem;
font-weight: 600;
line-height: normal;
}
.testimonials .wrap .single p.client-designation {
font-size: 0.722rem;
font-weight: 600;
}
.testimonials .wrap .single p {
line-height: 140%;
font-size: 16px;
}
.testimonials img.star-review {
width: 15.556rem;
margin-bottom: 1.667rem;
transform: translateY(0);
transition: all ease 0.5s;
}
.testimonials img.star-review:hover {
transform: translateY(-0.556rem);
}
.recent-work {
padding: 0;
}
.recent-work .top-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.778rem;
margin-bottom: 2.778rem;
} .recent-work .top-wrap a  {
padding: 0.778rem 1.667rem;
background: linear-gradient(-210deg, #f2f2f2 -75%, #004dd3 100%);
border-radius: 100px;
color: #fff;
letter-spacing: 0.7px;
transition: all ease 0.3s;
}
.recent-work .top-wrap a:hover {
background: linear-gradient(-210deg, #1E1E1E, #1E1E1E);
}
.product-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1.667rem;
}
.product-list .single {
position: relative;
overflow: hidden;
}
.product-list .single model-viewer {
height: 33.333rem !important;
width: 100%;
}
.product-list .single .img-wrap {
background: #F3F5F7;
border-radius: 12px;
padding-top: 3.333rem;
}
.product-list .single p.product-name {
font-size: 1.444rem;
font-weight: 700;
padding: 0 0 0.833rem;
line-height: 120%;
position: absolute;
top: 1.111rem;
left: 1.111rem;
}
.product-list .single .product-info {
position: absolute;
top: 15px;
right: 15px;
transform: translateX(120%);
padding-right: 1.111rem;
transition: all ease 0.3s;
border-radius: 11px;
padding: 30px 20px;
background: linear-gradient(359deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.product-list .single:hover .product-info {
transform: translateX(0);
}
.product-list .single .product-info p.text {
font-size: 1.078rem;
letter-spacing: 1.4px;
text-align: right;
font-weight: 700;
line-height: 100%;
padding-bottom: 0.378rem;
}
.product-list .single .product-info p.number {
font-size: 1.044rem;
text-align: right;
padding-bottom: 1.478rem;
line-height: normal;
letter-spacing: 1.8px;
}
.product-list .single .product-info p.number:last-child {
padding-bottom: 0;
}
.product-list .single p.product-desc {
font-size: 1.111rem;
line-height: 160%;
font-weight: 500;
}
.footer-contact {
padding: 11.111rem 0 5.556rem;
}
.footer-contact .wrap {
display: grid;
grid-template-columns: 1fr 42.778rem;
grid-gap: 5.556rem;
margin: 0 3.889rem;
}
.footer-contact h2 {
width: 22.222rem;
line-height: 110%;
margin-bottom: 1.667rem;
font-size: 3.333rem;
}
.footer-contact p.sub-title {
font-size: 1.333rem;
width: 23.333rem;
font-weight: 500;
line-height: 150%;
}
footer .wrapper {
padding: 1.578rem 30px;    display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: 2rem;
}
footer .wrapper:before {
position: absolute;
inset: 0; background: #fefdff;
content: "";
border-radius: 20px;
z-index: -1;
transition: all ease 0.5s;
}
footer .wrapper:after {
position: absolute;
content: "";
inset: -0.344rem;
pointer-events: none;
border: 1px solid #cccccc5c;
border-radius: 28px;
transition: all ease 0.5s;
}
footer .contact-info {
display: flex;
align-items: center;
gap: 1.389rem;
} footer .social {
display: flex;
gap: 0.833rem;
}
model-viewer {
--progress-bar-color: none;
--progress-bar-height: 0px;
}
.project-list {
padding: 11.111rem 0 5.556rem;
}
.project-list .loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
color: #fff;
padding: 8px 14px;
font-size: 14px;
}
.project-list h2 {
margin-bottom: 2.5rem;
}
.project-list .tabs {
display: flex;
gap: 0.833rem;
margin-bottom: 1.111rem;
list-style: none;
padding: 0;
}
.project-list .tabs li {
padding: 0.444rem 1.556rem;
background: #F3F5F7;
cursor: pointer;
border-radius: 4px;
transition: background 0.3s;
border-radius: 50px;
}
.project-list .tabs li.active,
.project-list .tabs li:hover {
background: #0F68DD;
color: #fff;
}
.project-list .list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3.889rem 1.667rem;
}
.project-list .list .single:nth-child(4n) model-viewer,
.project-list .list .single:nth-child(4n+1) model-viewer {
height: 38.889rem;
}
.project-list .list .single:first-child model-viewer {
margin-top: 0;
}
.project-list .list .single.hidden {
display: none;
}
.project-list .list .single .img-wrap {
background: #F3F5F7;
border-radius: 12px;
margin-bottom: 1.944rem;
}
.project-list .list .single model-viewer {
display: block;
height: 25rem;
}
.project-list .list .single p.product-name {
font-size: 1.444rem;
font-weight: 700;
padding: 0 0 0.833rem;
line-height: 120%;
}
.project-list .list .single p.product-desc {
font-size: 1.111rem;
line-height: 160%;
font-weight: 500;
}
.counter-section {
padding: 8.333rem 0;
}
.counter-section .inner-wrap {
background: #F3F5F7;
border-radius: 12px;
padding: 3.333rem 0;
}
.counter-section .wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 54.444rem;
margin: 0 auto;
grid-gap: 2.778rem;
}
.counter-section p.counter {
text-align: center;
font-size: 2.222rem;
font-weight: 600;
padding-bottom: 0.556rem;
line-height: 100%;
}
.counter-section p.text {
text-align: center;
font-weight: 500;
}
.footer-contact .wrap .contact-info {
margin-top: 2.778rem;
display: flex;
flex-direction: column;
align-items: baseline;
gap: 0.833rem;
}
.footer-contact .wrap .contact-info a  {
padding: 0.578rem 1.667rem;
background: #F3F5F7;
border-radius: 100px;
color: #1C1D20;
letter-spacing: 0.7px;
transition: all ease 0.3s;
margin-bottom: 5px;
}
.footer-contact .wrap .contact-info a:hover {
background: #1E1E1E;
color: #FFF;
}
.card-work {
padding: 7.778rem 0;
}
.card-work .single-card {
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
border-radius: 40px;
padding: 2.778rem;
margin-bottom: 3.778rem;
background-color: #fff;
}
.card-work .single-card:last-child {
margin-bottom: 0;
}
.card-work .single-card .top-wrap {
display: flex;
align-items: center;
gap: 0.889rem;
margin-bottom: 1.667rem;
}
.card-work .single-card .top-left p {
font-size: 5rem;
font-weight: 900;
line-height: 100%;
}
.card-work .single-card .top-wrap p.title {
padding: 0;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 160%;
}
.card-work .single-card .top-wrap p.model-description {
letter-spacing: 0.6px;
}
.card-work .single-card .middle {
display: grid;
grid-template-columns: 63.889rem auto;
grid-gap: 1.111rem;
}
.card-work .single-card .middle iframe {
height: calc(21.556rem * 2 + 1.111rem);
border-radius: 50px;
}
.card-work .single-card .middle .right-wrap {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1.111rem;
}
.card-work .single-card .middle .right-wrap img {
height: 21.556rem;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 30px;
}
.card-work .single-card .top-wrap a.card_button {
margin-left: auto;
padding: 0.778rem 1.667rem;
background: linear-gradient(-210deg, #f2f2f2 -75%, #004dd3 100%);
border-radius: 100px;
color: #fff;
letter-spacing: 0.7px;
transition: all 0.3s ease;
}
.card-work .single-card .top-wrap a.card_button:hover {
background: linear-gradient(-210deg, #1E1E1E, #1E1E1E);
}
.services .bottom-wrap {
margin: 30px auto 0;
max-width: 90%;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
padding: 50px 0;
text-align: center;
border-radius: 20px;
}
.services .bottom-wrap h3 {
font-size: 1.6rem;
font-weight: bold;
line-height: 120%;
margin-bottom: 0.6rem;
}
.services .bottom-wrap a.btn {
margin-top: 1rem;
background: #000;
color: #fff;
padding: 15px 20px;
line-height: 100%;
border-radius: 8px;
cursor: pointer;
transition: all ease 0.2s;
}
.services .bottom-wrap a.btn:hover {
background: #004dd3;
}
.services .bottom-wrap a.btn svg {
margin-left: 8px;
} .page-template-project .img-wrap {
position: relative;
overflow: hidden; }
.page-template-project model-viewer {
width: 100%;
height: 100%; contain: strict;
}
.page-template-project .model-placeholder {
position: absolute;
inset: 0;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.page-template-project .loading-spinner {
width: 36px;
height: 36px;
border: 3px solid #ccc;
border-top-color: #555;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.page-template-contact-us-php .footer-contact{
position : relative;
}
.page-template-contact-us-php .footer-contact::before {
position: absolute;
content: "";
inset: 0;
background: url(//nineaxisstudio.com/wp-content/themes/beyonddstudio/images/built-for-bg.png);
pointer-events: none;
} .model-tap-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; background: #f0f0f0;
overflow: hidden;
border-radius: 8px;
}
.model-fallback-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.model-tap-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.2s;
}
.model-tap-btn:hover,
.model-tap-btn:focus {
background: rgba(0, 0, 0, 0.5);
}
.model-tap-wrapper model-viewer {
width: 100%;
height: 100%;
}