@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}  body {
margin: 0;
} main {
display: block;
padding-top: 60px;
} h1 {
font-size: 2em;
margin: 0;
}  hr {
box-sizing: content-box;
height: 0;
overflow: visible;
} pre {
font-family: monospace, monospace;
font-size: 1em;
}  a {
color: #fafafa;
background-color: transparent;
} abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
} button,
input {
overflow: visible;
} button,
select {
text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}  *,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}  button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
} body {
background: #fff;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
} embed,
iframe,
object {
max-width: 100%;
}
img {
width: 100%;
height: auto;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
} a {
color: #fafafa;
}
a:visited {
color: #fafafa;
}
a:hover,
a:focus,
a:active {
color: #fff;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
} button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
select {
border: 1px solid #ccc;
}
textarea {
width: 100%;
}   .main-navigation {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
right: 0;
left: auto;
justify-content: end;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
} .menu-toggle,
.main-navigation.toggled ul {
display: flex;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: flex;
}
.main-navigation ul {
display: flex;
}
}
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 auto;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
} .sticky {
display: block;
}
.post,
.page {
margin: 0 auto;
width: 100%;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 0 auto;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
} .comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
} .widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
} .page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
} .custom-logo-link {
display: inline-block;
} .wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
} .gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}   .infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
} .infinity-end.neverending .site-footer {
display: block;
}   .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
} #primary[tabindex="-1"]:focus {
outline: 0;
} .alignleft { float: left; margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright { float: right; margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}@font-face {
font-family: 'RedFive';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/RedFive/REDFIVE.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/RedFive/REDFIVE.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
} @font-face {
font-family: 'FiraCode-Regular';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Regular.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FiraCode-Medium';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Medium.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FiraCode-Bold';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-SemiBold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-SemiBold.woff) format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FiraCode-Bold';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Bold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Fira_Code/FiraCode-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
} @font-face {
font-family: 'Nohemi';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Bold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Bold.woff) format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nohemi';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-SemiBold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-SemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nohemi';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Medium.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nohemi';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Regular.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Regular.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nohemi';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Light.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Nohemi/Nohemi-Light.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
} @font-face {
font-family: 'Inter';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-ExtraBold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-ExtraBold.woff) format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Bold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Bold.woff) format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-SemiBold.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-SemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Medium.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Regular.woff2) format('woff2'),
url(//vladfedorin.com/wp-content/themes/fedorin-design/fonts/Inter/Inter-Regular.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
       * {
box-sizing: border-box;
}
body {
max-width: 100%;
width: 100%;
background: #FAFAFA;
color: #7a7a7a;
font-size: 15px;
font-family: "Inter", sans-serif;
overflow-x: hidden;
height: auto;
min-height: 100vh;
transition: all 300ms linear;
overscroll-behavior: none;
line-height: 1.4;
}
body.dark {
background: #161616;
color: #FAFAFA;
}
a {
cursor: pointer;
color: #161616;
text-decoration: none;
}
a svg {
color: #161616;
text-decoration: none;
}
a:visited {
color: #161616;
}
a:hover,
a:focus,
a:active {
color: #161616;
}
a:focus {
outline: none;
}
a:hover,
a:active {
outline: 0;
text-decoration: none;
color: #161616;
}
ul.wp-block-list {
padding: 0 12px;
}
p {
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6, .title,
.hero__title, .section-title {
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
}
html:lang(ru) h1,
html:lang(ru) h2,
html:lang(ru) h3,
html:lang(ru) h4,
html:lang(ru) h5,
html:lang(ru) h6,
html:lang(ru) .title,
html:lang(ru) .motion__text,
html:lang(ru) .about__info,
html:lang(ru) .about__description,
html:lang(ru) .manifest p span,
html:lang(ru) .hero__title,
html:lang(ru) .section-title,
html:lang(uk) h1,
html:lang(uk) h2,
html:lang(uk) h3,
html:lang(uk) h4,
html:lang(uk) h5,
html:lang(uk) h6,
html:lang(uk) .title,
html:lang(uk) .motion__text,
html:lang(uk) .about__info,
html:lang(uk) .about__description,
html:lang(uk) .manifest p span,
html:lang(uk) .hero__title,
html:lang(uk) .section-title {
font-family: "Inter", sans-serif;
}
html:lang(uk) .motion__text, html:lang(ru) .motion__text, html:lang(uk) .manifest p span, html:lang(ru) .manifest p span {
font-weight: 600;
letter-spacing: -1px;
}
.hero-size {
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
font-weight: 500;
font-size: 150px;
line-height: 154px;
margin: 0;
padding: 0;
min-height: auto;
}
h1.hero-size {
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
font-weight: 600;
font-size: 150px;
line-height: 134px;
margin: 0;
padding: 0;
min-height: auto;
}
h2 {
font-size: 60px;
line-height: 66px;
font-weight: 600;
margin: 0;
}
@media (max-width: 1024px) {
.hero-size {
font-size: 100px;
line-height: 110px;
}
h1.hero-size {
font-size: 100px;
line-height: 110px;
}
h2 {
font-size: 60px;
line-height: 66px;
}
} .error-page {
min-height: 100vh;
display: flex;
align-items: center;
}
.error-404 {
width: 100%;
padding: 120px 0;
}
.error-404__content {
max-width: 720px;
}
.error-404__code {
margin: 0 0 20px;
font-family: "Fira Code", monospace;
font-size: 14px;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #828282;
}
.error-404__title {
margin: 0 0 24px;
font-size: clamp(48px, 8vw, 120px);
line-height: 0.95;
letter-spacing: -0.04em;
}
.error-404__text {
max-width: 560px;
margin: 0 0 36px;
font-size: 18px;
line-height: 1.6;
color: #828282;
}
.error-404__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 767px) {
.error-page {
min-height: auto;
}
.error-404 {
padding: 100px 0 80px;
}
.error-404__text {
font-size: 16px;
}
.error-404__actions {
flex-direction: column;
align-items: flex-start;
}
} main {
min-width: 320px;
width: 100%;
height: auto;
min-height: 100vh;
background-color: #FAFAFA;
position: relative;
padding-top: 0;
margin-bottom: 100vh;
z-index: 2;
margin-top: 0px;
}
.container {
min-width: 320px;
width: 100%;
min-height: 100vh;
height: auto;
position: relative;
z-index: 3;
background-color: #FAFAFA;
}
.vfpage-container {
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 80px 24px;
}
@media (max-width: 768px) {
main {
margin-top: 0;
margin-bottom: 0;
padding-top: 0px;
}
.container {
min-height: auto;
}
}
.page-container {
min-width: 320px;
width: 100%;
min-height: 100vh;
height: auto;
background-color: #FAFAFA;
flex-grow: 1;
position: relative;
padding: 100px 0;
z-index: 2;
}
.non-footer-container {
min-width: 320px;
width: 100%;
background-color: #FAFAFA;
flex-grow: 1;
position: relative;
padding: 100px 0;
z-index: 2;
}
.post, .page {
height: auto;
min-height: 100vh;
}
.entry-content {
padding-top: 60px;
}
.entry-header {
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 120px 24px 0;
}
@media (max-width: 768px) {
.entry-header {
padding: 80px 24px 0;
}
}
section {
width: 100%;
margin: 0 auto;
position: relative;
}
.hidden-text {
transform: translateY(100%);
opacity: 0;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
} .hero {
width: 100%;
height: auto;
position: relative;
min-height: 100vh;
z-index: 2;
margin-bottom: 280px;
background-color: #FAFAFA;
}
.hero__container {
position: relative;
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 40px 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.hero .hello-text {
font-size: 18px;
line-height: 26px;
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
padding-left: 3px;
margin-top: -20px;
}
.hero__text {
display: block;
width: 100%;
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
padding: 0 0 40px;
text-align: left;
z-index: 1;
}
.hero__text--mobile {
display: none;
}
.hero__text a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24px;
color: #161616;
}
.hero__text .name-dec {
font-size: 14px;
font-weight: 300;
line-height: 18px;
letter-spacing: 2px;
padding-left: 4px;
color: #888;
text-align: left;
margin-bottom: 28px;
}
.hero__text p {
display: flex;
justify-content: flex-start;
font-weight: 500;
font-size: 150px;
line-height: 154px;
margin-left: -2px;
}
.hero__text p .subtitle-text {
font-size: 28px;
line-height: 40px;
height: 54px;
color: #888;
}
.hero__info {
display: flex;
flex-direction: column;
position: relative;
left: 0;
bottom: 0;
font-family: "FiraCode-Medium";
font-size: 18px;
line-height: 28px;
color: #161616;
width: 100%;
height: auto;
max-width: 318px;
margin-left: 0;
transform: translateY(0px);
}
.hero__info svg {
width: 28px;
height: 26px;
fill: #C5482F;
color: #C5482F;
}
.hero__info p {
margin: 10px 0 0;
padding-left: 3px;
line-height: 28px;
}
.hero__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
position: relative;
left: 0;
right: auto;
bottom: 40px;
height: 30%;
}
.hero__buttons {
display: flex;
position: relative;
right: 0;
bottom: 0;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 20px;
transform: translateY(-45px);
animation: fade-in 0.6s ease-in-out forwards;
opacity: 0;
animation-delay: 1.3s;
}
.hero__btn {
position: relative;
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 14px;
padding: 22px 34px;
letter-spacing: 0.3px;
background-color: #161616;
border: 1px solid #161616;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s linear;
transform: rotateX(0) rotateY(0);
transform-style: preserve-3d;
transition-duration: 0.1s;
transition-timing-function: ease !important;
cursor: pointer;
}
.hero__btn:hover {
background-color: #161616;
color: #FAFAFA;
}
.hero__btn a {
color: #FAFAFA;
}
.hero__btn.is-out {
transform: rotateX(0) rotateY(0) !important;
transition-duration: 1s;
}
.hero__btn--border {
background-color: transparent;
border: 1px solid #161616;
color: #161616;
transition: all 0.3s linear;
}
.hero__btn--border a {
color: #161616;
}
.hero__btn--border:hover {
background-color: #161616;
color: #FAFAFA;
}
.hero__btn--border:hover a {
color: #FAFAFA;
}
@media (max-width: 1280px) {
.hero__text {
font-size: 120px;
line-height: 130px;
}
.hero__text p {
font-size: 120px;
height: 130px;
}
.hero__info {
font-family: "FiraCode-Medium";
font-size: 21px;
color: #161616;
width: 100%;
max-width: 320px;
line-height: 28px;
margin-left: 0;
}
.hero__info svg {
width: 32px;
height: 30px;
}
.hero__info p {
margin: 10px 0 0;
padding-left: 0px;
}
}
@media (max-width: 1024px) {
.hero__text {
font-size: 100px;
line-height: 110px;
padding: 40px 0;
}
.hero__text p {
font-size: 100px;
height: 110px;
}
.hero__info {
font-family: "FiraCode-Medium";
font-size: 18px;
color: #161616;
width: 100%;
max-width: 300px;
line-height: 25px;
margin-left: 0;
}
.hero__info svg {
width: 32px;
height: 30px;
}
.hero__info p {
margin: 10px 0 0;
padding-left: 15px;
}
}
.parallax-image {
opacity: 0;
transform: translateY(40px);
transition: 1s ease;
}
.parallax-image.active {
opacity: 1;
transform: translateY(0);
}
[data-animate=image] {
opacity: 0;
transform: translateY(40px);
transition: 1s ease;
}
[data-animate=image].active {
opacity: 1;
transform: translateY(0);
} .services {
min-height: 100vh;
z-index: 2;
background-color: #FAFAFA;
}
.services__container {
width: 100%;
height: auto;
margin: 0 auto;
padding: 80px 5vw;
}
.services__text {
display: flex;
justify-content: flex-start;
align-items: center;
font-family: "Nohemi", "Inter", sans-serif;
margin-bottom: 180px;
padding: 40px 0;
text-align: left;
gap: 60px;
z-index: 1;
}
.services__text h2 {
display: flex;
color: #161616;
margin: 0;
}
.services__text .title-description {
display: flex;
font-size: 21px;
line-height: 28px;
color: #7a7a7a;
font-weight: 400;
}
.services__rows {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 64px;
}
.services__rows--item {
--row-line-scale: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
flex-direction: row;
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
padding-bottom: 32px;
border-bottom: none;
}
.services__rows--item::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #161616;
transform: scaleX(var(--row-line-scale));
transform-origin: left center;
will-change: transform;
pointer-events: none;
}
.services__rows--left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.services__rows .hero__btn {
color: #FAFAFA;
}
.services__rows--number {
width: 40px;
margin-right: 80px;
font-size: 21px;
color: #161616;
}
.services__rows--name {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 32px;
font-weight: 500;
color: #161616;
margin: 0;
}
.services__rows--tags {
font-size: 15px;
font-family: "Inter", sans-serif;
background-color: transparent;
gap: 10px;
list-style: none;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.services__rows--tags li {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
border: 2px solid #161616;
border-radius: 100px;
padding: 0 16px;
letter-spacing: 1px;
}
.item-title {
display: block;
font-family: "Nohemi", "Inter", sans-serif;
font-size: 32px;
line-height: 34px;
color: #161616;
}
ul.item-text {
line-height: 1.5;
list-style: none;
font-size: 18px;
margin: 0;
padding: 0;
}
ul.item-text li {
list-style: none;
}  .header {
position: fixed;
left: 0;
top: 0;
width: 100%;
max-width: 100vw;
color: #161616;
z-index: 99;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
height: 95px;
transition: transform 0.35s ease;
will-change: transform;
}
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
height: 95px;
padding: 0px 40px;
margin: 0 auto;
z-index: 99;
background-color: transparent;
top: 0;
opacity: 0;
transform: translateY(-45px);
animation: fade-in 0.4s ease-in-out forwards;
animation-delay: 0.2s;
}
.header__left {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 60px;
width: 100%;
flex: 1;
}
.header__right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 30px;
width: 100%;
flex: 1;
}
.header__center {
display: flex;
justify-content: center;
width: 100%;
flex: 1 1 100%;
}
.header__center .nav-desktop {
display: flex;
font-family: "FiraCode-Medium";
justify-content: center;
width: 100%;
}
.header__center .nav-desktop ul {
display: flex;
list-style: none;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0 30px;
gap: 60px;
}
.header__center .nav-desktop ul li {
flex: 1;
text-align: center;
padding: 10px;
font-size: 16px;
}
.header__center .nav-desktop ul li a {
color: #161616;
transition: all 0.2s linear;
}
.header__center .nav-desktop ul li a:hover {
color: #C5482F;
}
.header__btn {
display: flex;
justify-content: center;
align-items: center;
color: #161616;
text-decoration: none;
outline: none;
cursor: pointer;
font-size: 15px;
line-height: 21px;
font-family: "FiraCode-Medium";
font-size: 14px;
letter-spacing: 0.3px;
border: 1px solid #161616;
padding: 10px 18px;
border-radius: 100px;
width: 100%;
min-width: 180px;
transition: all 0.2s linear;
}
.header__btn:hover {
background-color: #161616;
color: #FAFAFA;
}
.header__menu {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background: none;
padding: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
font: inherit;
color: inherit;
line-height: inherit;
text-align: inherit;
cursor: pointer;
display: none;
justify-content: flex-end;
align-items: center;
gap: 14px;
transition: all 0.3s ease-out;
z-index: 99;
background-color: #C5482F;
border-radius: 100px;
padding: 8px 18px;
}
.header__menu span {
display: flex;
font-family: "Inter", sans-serif;
font-weight: 500;
color: #FAFAFA;
text-transform: uppercase;
font-size: 15px;
}
.header__menu span.menu-icon {
width: 100%;
display: flex;
flex-direction: column;
line-height: 30px;
}
.header__logo {
display: flex;
width: 72px;
height: 25px;
z-index: 99;
cursor: pointer;
}
.header__logo a.hover-target {
display: flex;
}
.header__logo svg {
width: 72px;
fill: #161616;
color: #161616;
transform: scale(1);
transition: all 0.3s linear;
}
.header__logo svg:hover {
fill: #C5482F;
color: #C5482F;
transform: scale(0.9);
transition: all 0.3s linear;
}
.header__light-switcher {
display: flex;
cursor: pointer;
align-items: center;
}
.header__light-switcher svg {
fill: #161616;
color: #161616;
width: 24px;
height: 24px;
}
.header__lang-switcher {
display: flex;
justify-content: flex-end;
transition: all 0.3s ease-out;
z-index: 99;
align-items: center;
}
@keyframes fade-in {
to {
transform: translateY(0);
opacity: 1;
}
}
a.header__btn {
color: #161616;
}
.nav .nav-desktop .current-menu-item > a {
color: #C5482F !important;
}
.header--hidden {
transform: translateY(-100%);
} .header.header--dark {
color: #FAFAFA;
background-color: #0a0a0a;
}
.header--dark .header__center .nav-desktop ul li a {
color: #FAFAFA;
}
.header--dark .header__logo svg {
fill: #C5482F;
color: #C5482F;
}
.header--dark .header__btn {
color: #FAFAFA;
border: 1px solid #FAFAFA;
}
.header--dark .header__btn:hover {
background-color: #FAFAFA;
color: #161616;
}
.header.header--dark {
color: #FAFAFA;
}
.header--dark .lang-switcher .lang-current {
border: 1.5px solid #888;
color: #888;
}
.header--dark .lang-switcher .lang-current:hover {
border: 1.5px solid #FAFAFA;
color: #FAFAFA;
}
.header--dark a.header__btn {
color: #FAFAFA;
} .menu-icon {
height: 30px;
width: 30px;
position: relative;
z-index: 2;
cursor: pointer;
display: block;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #161616;
margin-bottom: 7px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.5s ease;
}
.menu-icon__line-left {
width: 16.5px;
margin-top: 5px;
transition: all 200ms linear;
}
.menu-icon__line-right {
width: 16.5px;
float: right;
transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left {
width: 30px;
}
.menu-icon:hover .menu-icon__line-right {
width: 30px;
}
.header--dark.menu-icon__line {
background-color: #FAFAFA;
}
.nav {
display: none;
position: fixed;
top: 64px;
left: 24px;
width: calc(100% - 48px);
z-index: 98;
}
.nav:after {
content: "";
position: fixed;
width: calc(100% - 24px);
height: 100vh;
left: 24px;
top: 0;
background: #161616;
border-bottom-left-radius: 400%;
z-index: -1;
transition: all 0.4s linear, border-radius linear 0.4s;
transform: translateX(0%) translateY(-100%);
}
.nav:after {
background: #161616;
transition-delay: 0s;
width: calc(100% - 48px);
transform: translateX(0%) translateY(-100%);
}
.nav__content {
position: fixed;
visibility: hidden;
top: 0;
left: 0;
height: 100vh;
margin-top: 17%;
padding-bottom: 200px;
width: calc(100% - 48px);
text-align: center;
}
.nav__list {
position: relative;
padding: 0;
margin: 0;
z-index: 2;
}
.nav__list-item {
position: relative;
display: block;
transition-delay: 0.4s;
opacity: 0;
text-align: center;
color: #FAFAFA;
overflow: hidden;
font-family: "Inter", sans-serif;
font-size: 8vh;
font-weight: 900;
line-height: 1.15;
letter-spacing: 3px;
transform: none;
transition: opacity 0.2s ease;
margin-bottom: 0;
}
.nav__list-item a {
position: relative;
text-decoration: none;
color: #FAFAFA;
overflow: hidden;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
font-weight: 900;
z-index: 2;
display: inline-block;
text-transform: uppercase;
transition: all 100ms linear;
}
.nav__list-item a:hover {
color: #FAFAFA;
}
.nav__list-item a.active-nav a {
color: #FAFAFA;
}
.nav__list-item a.active-nav a:after {
height: 4px;
opacity: 1;
left: 24px;
width: calc(100% - 48px);
}
body.nav-active {
overflow: hidden;
}
body.nav-active .nav__content {
visibility: visible;
overflow-y: scroll;
}
body.nav-active .menu-icon__line {
background-color: #FAFAFA;
transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 15px;
transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 15px;
float: right;
transform: translate(-3px, -3.5px) rotate(45deg);
}
@media (max-width: 768px) {
body.nav-active .menu-icon__line {
background-color: #161616;
}
}
body.nav-active .menu-icon:hover .menu-icon__line-left {
width: 15px;
}
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 15px;
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:after {
transform: translateX(0%) translateY(0%);
border-radius: 0;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
transition: opacity 0.2s ease, transform 0.3s ease, color 0.3s ease;
transform: translateX(0%);
}
body.nav-active .nav__list-item:nth-child(1) {
transition-delay: 0.4s;
}
body.nav-active .nav__list-item:nth-child(2) {
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(3) {
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(4) {
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(5) {
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(6) {
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(7) {
transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
transition-delay: 1.7s;
}
body:not(.nav-active).nav__list-item {
transition: opacity 0.2s ease;
transition: opacity 0.2s ease, transform 0.3s ease, color 0.3s ease;
transform: translateX(0%);
}  .switched {
background: transparent !important;
} .cursor,
.cursor2,
.cursor3 {
position: fixed;
border-radius: 100px;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
mix-blend-mode: normal;
transition: all 300ms linear;
}
@media (max-width: 1280px) {
.cursor,
.cursor2,
.cursor3 {
display: none;
}
}
.cursor {
background-color: #FAFAFA;
height: 0;
width: 0;
z-index: 99999;
}
.cursor2,
.cursor3 {
height: 36px;
width: 36px;
z-index: 99998;
transition: all 0.3s ease-out;
}
.cursor2.hover,
.cursor3.hover {
transform: scale(2) translateX(-25%) translateY(-25%);
border: none;
}
.cursor2 {
border: 2px solid #1f2029;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.cursor2.hover {
background: rgba(0, 0, 0, 0.06);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.view-text {
display: none;
}
#sectionPin .cursor2.hover .view-text {
display: flex;
justify-content: center;
align-items: center;
font-family: "Nohemi", "Inter", sans-serif;
font-size: 18px;
}
#sectionPin .cursor2 {
height: 146px;
width: 146px;
background: #FAFAFA;
}   footer {
display: flex;
}
.footer {
display: flex;
background-color: #0a0a0a;
color: #FAFAFA;
position: fixed;
left: 0;
bottom: 0;
z-index: 1;
}
.footer-none footer {
display: none;
}
.footer {
width: 100%;
height: 100vh;
font-family: "FiraCode-Medium";
}
.footer a {
color: #FAFAFA;
}
.footer__container {
display: flex;
align-items: center;
width: 100%;
padding: 80px 60px;
margin: 0 auto;
}
.footer__contact-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 470px;
background-color: #161616;
border-radius: 24px;
padding: 48px 40px;
margin: 0;
transition: all 0.3s linear;
}
.footer__logo {
display: block;
}
.footer__logo svg {
width: 100%;
max-width: 300px;
}
.footer__logo {
width: 100%;
max-width: 300px;
}
.footer__hero {
width: 100%;
margin: 60px auto 60px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 24px;
}
.footer__hero--container {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.footer__hero--text {
display: flex;
font-family: "Nohemi", "Inter", sans-serif;
font-size: 150px;
line-height: 138px;
color: #C5482F;
margin-bottom: 40px;
display: flex;
font-weight: 600;
max-width: 700px;
}
.footer__hero--description {
display: flex;
font-family: "Nohemi", "Inter", sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 38px;
color: #FAFAFA;
margin-bottom: 20px;
}
.footer__btn {
position: relative;
width: 100%;
max-width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Inter", sans-serif;
font-size: 15px;
letter-spacing: 0.3px;
line-height: 15px;
padding: 18px 24px 20px;
background-color: transparent;
border: 2px solid #C5482F;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s linear;
transform: rotateX(0) rotateY(0);
transform-style: preserve-3d;
transition-duration: 0.1s;
transition-timing-function: ease !important;
cursor: pointer;
}
.footer__btn a {
cursor: pointer;
}
.footer__menu {
display: flex;
}
.footer__menu ul {
display: flex;
gap: 40px;
list-style: none;
line-height: 1.5;
}
.footer__menu ul li a {
color: #FAFAFA;
transition: 0.2s linear;
cursor: pointer;
outline: none;
text-decoration: none;
}
.footer__menu ul li a:hover {
color: #C5482F;
}
.footer__menu-column {
display: flex;
flex-direction: row;
}
.footer__bottom {
display: flex;
width: 100%;
justify-content: space-between;
align-items: flex-end;
position: absolute;
bottom: 32px;
left: 0;
right: 0;
padding: 0 45px;
}
.footer__bottom--left {
display: flex;
align-items: flex-end;
}
.footer__bottom--left ul {
list-style: none;
display: flex;
flex-direction: row;
gap: 24px;
}
.footer__bottom--left ul li a {
color: #888;
}
.footer__bottom--left ul li a:hover {
color: #C5482F;
}
.footer__bottom--left p {
margin-bottom: 0;
}
.footer__bottom--right {
padding-right: 0px;
align-items: flex-end;
}  .contact {
background-color: #0a0a0a;
color: #FAFAFA;
position: relative;
width: 100%;
min-height: 100dvh;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
}
.contact {
font-family: "FiraCode-Medium";
}
.contact a {
color: #FAFAFA;
}
.contact__container {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
width: 100%;
flex: 1 1 auto;
min-height: 0;
padding: 0 60px 40px;
margin: 0 auto;
height: auto;
}
.contact__contact-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 470px;
background-color: #161616;
border-radius: 24px;
padding: 48px 40px;
margin: 0;
}
.contact__logo {
display: block;
}
.contact__logo svg {
width: 100%;
max-width: 300px;
}
.contact__logo {
width: 100%;
max-width: 300px;
}
.contact__hero {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 60px 0 60px;
min-height: 0;
flex: 1 1 auto;
gap: 60px;
}
.contact__hero--container {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 48px;
}
.contact__hero--social-block {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 14px;
position: relative;
text-align: left;
margin: 0;
padding: 0;
}
.contact__hero--social-block p {
font-family: "Inter", sans-serif;
color: #7a7a7a;
font-size: 15px;
line-height: 21px;
text-align: left;
font-weight: 400;
margin: 0;
padding: 0;
}
.contact__hero--social-block .ul-social {
list-style: none;
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
gap: 14px;
}
.contact__hero--social-block .ul-social li {
display: flex;
justify-content: flex-start;
align-items: center;
}
.contact__hero--social-block .ul-social li a {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
width: 56px;
height: 56px;
background-color: rgba(130, 130, 130, 0.2);
border-radius: 100px;
transition: all 0.2s linear;
}
.contact__hero--social-block .ul-social li a svg {
fill: #FAFAFA;
color: #FAFAFA;
width: 24px;
height: 24px;
}
.contact__hero--social-block .ul-social li a:hover svg {
fill: #C5482F;
color: #C5482F;
}
.contact__hero--text {
display: flex;
font-family: "Nohemi", "Inter", sans-serif;
font-weight: 500;
font-size: 150px;
line-height: 150px;
color: #C5482F;
margin-bottom: 20px;
}
.contact__hero--description {
display: flex;
font-family: "Nohemi", "Inter", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #FAFAFA;
margin-bottom: 20px;
max-width: 280px;
}
.contact__btn {
position: relative;
width: 100%;
max-width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Inter", sans-serif;
font-size: 15px;
letter-spacing: 0.3px;
line-height: 15px;
padding: 18px 24px 20px;
background-color: transparent;
border: 2px solid #C5482F;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s linear;
transform: rotateX(0) rotateY(0);
transform-style: preserve-3d;
transition-duration: 0.1s;
transition-timing-function: ease !important;
cursor: pointer;
}
.contact__btn a {
cursor: pointer;
}
.contact__menu {
display: flex;
}
.contact__menu ul {
display: flex;
gap: 40px;
list-style: none;
line-height: 1.5;
}
.contact__menu ul li a {
color: #FAFAFA;
transition: 0.2s linear;
cursor: pointer;
outline: none;
text-decoration: none;
}
.contact__menu ul li a:hover {
color: #C5482F;
}
.contact__menu-column {
display: flex;
flex-direction: row;
}
.contact__bottom {
display: flex;
width: 100%;
justify-content: space-between;
align-items: flex-end;
position: relative;
min-height: 30px;
height: auto;
padding: 0 45px;
margin-top: auto;
}
.contact__bottom--left {
display: flex;
align-items: flex-end;
}
.contact__bottom--left ul {
list-style: none;
}
.contact__bottom--left ul li a {
color: #888;
}
.contact__bottom--left ul li a:hover {
color: #C5482F;
}
.contact__bottom--left p {
margin-bottom: 0;
}
.contact__bottom--right {
padding-right: 0px;
align-items: flex-end;
}   .about {
width: 100%;
max-width: 100vw;
margin: 0 auto 180px;
z-index: 2;
display: flex;
align-items: center;
}
.about__container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
padding: 100px 80px 0;
margin: 0 auto;
gap: 30px;
}
.about__container.page-about {
align-items: flex-start;
}
.about__container .about__left {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
width: 100%;
max-width: 640px;
}
.about__container .about__text {
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
font-size: 80px;
line-height: 90px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
margin: 0;
padding: 0;
}
.about__container .about__text H1 {
font-weight: 500;
font-size: 80px;
line-height: 90px;
}
.about__container .about__text h2 {
padding: 0;
margin: 0;
}
.about__container .about__info {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 400;
text-align: left;
color: #161616;
}
.about__container .about__description {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 18px;
line-height: 26px;
font-weight: 400;
letter-spacing: 1px;
color: #7a7a7a;
width: 100%;
max-width: 440px;
margin: 80px 0 40px;
}
.about__container .hero__btn {
max-width: 190px;
}
.about__container .about__image {
display: flex;
position: relative;
width: 100%;
max-width: 540px;
height: 100%;
border-radius: 24px;
transition: linear 0.3s;
overflow: hidden;
}
.about__container .about__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.about__container.page-about {
padding-top: 120px;
}  .manifest {
position: relative;
height: auto;
min-height: 100vh;
margin-bottom: 140px;
max-width: 100vw;
overflow: hidden;
z-index: 1;
display: flex;
align-items: center;
background-color: #FAFAFA;
}
.manifest__container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
gap: 30px;
}
.manifest__container--box {
position: relative;
margin-top: -40px;
padding: 0;
width: 100%;
padding-left: 180px;
}
.manifest__container--box .text {
max-width: 1040px;
}
.manifest__container--description {
font-family: "Inter", sans-serif;
letter-spacing: 0.5px;
position: absolute;
right: 120px;
bottom: 60px;
width: 100%;
max-width: 320px;
text-align: left;
font-size: 18px;
line-height: 26px;
color: #7a7a7a;
}
.manifest p span {
position: relative;
color: #161616;
font-family: "Nohemi", "Inter", sans-serif;
font-size: 88px;
line-height: 90px;
font-weight: 500;
letter-spacing: -1px;
transition: color 0.2s ease;
}
.manifest p span.active {
color: #C5482F;
}
.vf-title {
font-size: clamp(5rem, 16vw, 16.5rem);
color: #161616;
text-align: center;
text-transform: uppercase;
transform-origin: 50% 50%;
padding-top: 0.5em;
}
.vf-title > div {
transform-origin: 50% 100%;
overflow: hidden;
}  .motion {
z-index: 2;
background-color: #FAFAFA;
width: 100%;
}
.motion__wrapper {
overflow-x: hidden;
position: relative;
width: 100%;
margin: 0 auto;
padding: 100px 0;
background-color: #C5482F;
}
.motion__section {
margin-left: 400px;
}
.motion__section-2 {
margin-left: 0;
}
.motion__text {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 120px;
line-height: 120px;
color: #161616;
text-wrap: nowrap;
}
.motion.motion-project .motion__section {
margin-left: 600px;
}
@media all and (min-width: 1800px) {
.motion .motion__section {
margin-left: 650px;
}
.motion .motion__section-2 {
margin-left: 100px;
}
.motion.motion-project .motion__section {
margin-left: 800px;
}
.motion.motion-project .motion__section-2 {
margin-left: 300px;
}
.footer__container {
padding: 160px 60px 0;
}
} .work {
display: block;
width: 100%;
position: relative;
margin: 0 auto;
margin-bottom: 200px;
padding-left: 0px;
height: auto;
min-height: 100vh;
z-index: 3;
background-color: #FAFAFA;
}
.work .mobile-button {
display: none;
}
.work.projects {
padding: 0 140px;
}
.work__title {
display: flex;
width: auto;
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
padding: 0;
text-align: left;
z-index: 2;
}
.work__title p {
font-size: 80px;
line-height: 84px;
font-family: "Nohemi", "Inter", sans-serif;
}
.work__title .title-description {
display: flex;
font-size: 21px;
line-height: 28px;
color: #7a7a7a;
font-weight: 400;
}
.work__container {
width: 100%;
padding: 0 80px;
background-color: #FAFAFA;
border-radius: 24px;
margin: 0 auto;
}
.work__container--projects-page {
padding-top: 200px;
}
.portfolio__header {
flex-wrap: wrap;
gap: 0px;
}
.portfolio__filters {
flex-wrap: wrap;
justify-content: flex-end;
margin-bottom: 20px;
height: auto;
display: flex;
gap: 16px;
width: auto;
max-width: 680px;
}
.filter-btn {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
margin: 0;
border: 1px solid #161616;
height: auto;
padding: 8px 12px;
background-color: transparent;
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 17px;
color: #161616;
font-weight: 400;
transition: all 0.2s linear;
cursor: pointer;
}
.filter-btn:hover {
color: #C5482F;
border: 1px solid #C5482F;
}
.filter-btn.active {
color: #FAFAFA;
background-color: #C5482F;
border: 1px solid #C5482F;
}
.section-title {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 40px 0 40px;
gap: 60px;
} .container .projects_container {
padding-top: 200px;
}
.portfolio__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto 80px;
}
.mini-button {
display: flex;
justify-content: center;
align-items: center;
background-color: #161616;
color: #FAFAFA;
font-size: 14px;
font-family: "Inter", sans-serif;
padding: 18px 24px;
width: 100%;
max-width: 150px;
height: 46px;
border: none;
border-radius: 100px;
text-decoration: none;
outline: none;
cursor: pointer;
transition: all 0.2s linear;
}
.mobile-button .mini-button {
max-width: 100%;
margin-top: 40px;
}
a.mini-button {
color: #FAFAFA;
transition: all 0.2s linear;
}
.mini-button:hover {
background-color: #C5482F;
}
.portfolio--featured {
position: relative;
overflow: hidden;
}
.portfolio--featured .portfolio__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto 40px;
}
.portfolio--featured .portfolio--featured {
contain: layout style;
}
.portfolio--featured .portfolio__viewport {
position: relative;
width: 100%;
overflow: hidden;
flex: 0 0 auto;
container-type: inline-size;
container-name: portfolio;
backface-visibility: hidden;
}
.portfolio--featured .portfolio__items {
display: flex;
align-items: flex-start;
gap: 24px;
width: -moz-max-content;
width: max-content;
will-change: transform;
transform: translateZ(0);
}
.portfolio--featured .portfolio__item {
--item-width: calc((100cqw - 24px) / 2);
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
text-align: left;
transition: all 0.3s ease;
background-color: #FAFAFA;
border-radius: 24px;
padding-bottom: 16px;
overflow: hidden;
transform: none;
}
.portfolio--featured .portfolio__item > a {
display: block;
color: inherit;
text-decoration: none;
overflow: hidden;
aspect-ratio: 4/3;
border-radius: 24px;
}
.portfolio--featured .portfolio__item img,
.portfolio--featured .portfolio__item video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio--featured .portfolio__item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.7s linear;
display: block;
}
.portfolio--featured .portfolio__item:hover img {
transform: scale(1.03);
}
.portfolio--featured .portfolio__item--content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px;
}
.portfolio--featured .portfolio__item--title {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 24px;
line-height: 28px;
color: #161616;
margin: 0;
}
.portfolio--featured .portfolio__item--bottom {
display: flex;
justify-content: flex-start;
color: #7a7a7a;
align-items: center;
padding: 0 16px;
}
.portfolio--featured .portfolio__item--cat {
color: #7a7a7a;
text-align: right;
font-size: 13px;
line-height: 14px;
font-family: "Inter", sans-serif;
margin: 0;
}
.portfolio--featured .portfolio-item__short-desc {
color: #7a7a7a;
text-align: left;
font-size: 16px;
line-height: 14px;
font-family: "Inter", sans-serif;
margin: 0;
}
.portfolio--featured .portfolio__item--views {
display: flex;
align-items: center;
justify-content: flex-end;
color: #ccc;
gap: 3px;
flex-shrink: 0;
}
.portfolio--featured .portfolio__item--views svg {
fill: #ccc;
color: #ccc;
width: 16px;
height: 16px;
}
.view-icon-circle {
fill: #efefef;
}
.portfolio--projects {
padding-top: 200px;
}
.portfolio--projects .portfolio__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.portfolio--projects .portfolio__item {
--item-width: 100%;
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
text-align: left;
transition: all 0.3s ease;
background-color: #FAFAFA;
border-radius: 24px;
padding-bottom: 16px;
overflow: hidden;
transform: none;
}
.portfolio--projects .portfolio__item > a {
display: block;
color: inherit;
text-decoration: none;
overflow: hidden;
}
.portfolio--projects .portfolio__item img,
.portfolio--projects .portfolio__item video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio--projects .portfolio__item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.7s linear;
display: block;
}
.portfolio--projects .portfolio__item:hover img {
transform: scale(1.03);
}
.portfolio--projects .portfolio__item--image {
display: block;
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 24px;
background: #FAFAFA;
}
.portfolio--projects .portfolio__item--content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px;
}
.portfolio--projects .portfolio__item--title {
font-family: "Inter", sans-serif;
font-size: 24px;
line-height: 28px;
color: #161616;
margin: 0;
}
.portfolio--projects .portfolio__item--bottom {
display: flex;
justify-content: flex-start;
color: #7a7a7a;
align-items: center;
padding: 0 16px;
}
.portfolio--projects .portfolio__item--cat {
color: #7a7a7a;
text-align: right;
font-size: 16px;
line-height: 14px;
font-family: "Inter", sans-serif;
margin: 0;
}
.portfolio--projects .portfolio-item__short-desc {
color: #7a7a7a;
text-align: left;
font-size: 16px;
line-height: 14px;
font-family: "Inter", sans-serif;
margin: 0;
}
.portfolio--projects .portfolio__item--views {
display: flex;
align-items: center;
justify-content: flex-end;
color: #ccc;
gap: 3px;
flex-shrink: 0;
}
.portfolio--projects .portfolio__item--views svg {
fill: #ccc;
color: #ccc;
width: 16px;
height: 16px;
}
@media (max-width: 1024px) {
.portfolio--projects {
padding-top: 100px;
}
.portfolio--projects .portfolio__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.portfolio--projects .portfolio__item {
--item-width: 100%;
border-radius: 16px;
}
} @media (min-width: 992px) {
.home .portfolio--featured {
padding-bottom: 40px;
}
} @media (max-width: 1024px) {
.portfolio__item--cat {
display: none;
}
.portfolio--featured .portfolio__header {
margin: 0 0 40px;
}
.portfolio--featured .portfolio__viewport {
overflow: visible;
}
.portfolio--featured .portfolio__items {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
width: 100%;
transform: none !important;
}
.portfolio--featured .portfolio__item {
width: 100%;
max-width: 100%;
min-width: 100%;
}
.portfolio--featured .portfolio__item {
--item-width: 100%;
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
border-radius: 0;
padding-bottom: 0;
overflow: hidden;
transform: none;
background-color: #FAFAFA;
border-radius: 12px;
}
.portfolio--featured .portfolio__item > a {
border-radius: 12px;
aspect-ratio: 4/3;
}
.portfolio--featured .portfolio__item--image {
border-radius: 12px;
aspect-ratio: 4/3;
height: 100%;
}
.portfolio--featured .portfolio__item--content {
justify-content: space-between;
align-items: flex-start;
padding: 12px 16px 4px;
}
.portfolio--featured .portfolio__item--title {
font-family: "Inter", sans-serif;
font-size: 21px;
line-height: 28px;
}
.portfolio--featured .portfolio__item--bottom {
align-items: flex-start;
padding: 0 16px 18px;
}
.portfolio--featured .portfolio__item--cat {
display: none;
}
.portfolio--featured .portfolio-item__short-desc {
font-size: 13px;
line-height: 16px;
}
}
.prev-project, .next-project {
display: inline-flex;
font-family: "FiraCode-Medium";
text-decoration: none;
font-weight: 600;
padding: 15px 25px;
background: transparent;
color: #161616;
border: 2px solid #161616;
border-radius: 100px;
}
.nav-left, .nav-right {
flex: 1;
}
.nav-left {
display: flex;
justify-content: flex-start;
}
.nav-right {
display: flex;
justify-content: flex-end;
}
.prev-project:hover, .next-project:hover {
background: #C5482F;
border: 2px solid #C5482F;
color: #161616;
}
.pin-item {
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.pin-text {
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
font-size: 28px;
padding: 30px;
cursor: pointer;
}
.pin-item img {
height: 70vh;
width: auto;
-o-object-fit: cover;
object-fit: cover;
cursor: pointer;
}
.pin-item:hover .view-text {
display: block;
}
#sectionPin {
height: 100vh;
overflow: hidden;
display: flex;
top: 0 !important;
left: 0;
background: #FAFAFA;
color: #FAFAFA;
}
.pin-wrap {
height: 100vh;
top: 0 !important;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 50px 10vw;
}
.pin-wrap > * {
min-width: 60vw;
padding: 0 5vw;
}
#footer .pin-wrap {
z-index: -2;
}  .portfolio__thumb,
.portfolio__item--video {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio__thumb {
position: relative;
z-index: 1;
overflow: hidden;
}
.portfolio__item--video {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
will-change: opacity;
}
.portfolio__item--image.is-video-active .portfolio__item--video {
opacity: 1;
}  .type-services {
text-align: left;
font-size: 18px;
line-height: 28px;
font-family: "FiraCode-Medium", monospace;
color: #161616;
width: 318px;
overflow: hidden;
}
.type-cursor::after {
content: "";
display: inline-block;
margin-left: 3px;
background-color: #888;
animation: blink 0.5s infinite;
}
p.type-cursor::after {
height: 21px;
width: 6px;
}
@keyframes blink {
0%, 49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}    .post-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 40px auto;
width: 100%;
background-color: #FAFAFA;
padding: 40px 0 120px;
}
.post-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 500px;
background-color: #FAFAFA;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
line-height: 1.3;
}
.post-item:hover {
transform: translateY(-10px);
}
.post-title {
font-size: 1.8rem;
font-weight: 600;
color: #333;
margin: 20px;
}
.post-thumbnail img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-bottom: 2px solid #f0f0f0;
}
.post-excerpt {
font-size: 1rem;
color: #777;
padding: 0 20px 20px;
}
.read-more {
display: inline-block;
margin: 0 20px 20px;
padding: 10px 20px;
background-color: #0073aa;
color: #FAFAFA;
text-decoration: none;
font-weight: 600;
border-radius: 24px;
transition: background-color 0.3s ease;
}
.read-more:hover {
background-color: #005f8c;
} @media (max-width: 768px) {
.post-item {
flex: 1 1 100%; }
} .single-post {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
padding: 0 20px;
background-color: #FAFAFA;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.single-post .post-title {
font-size: 2.5rem;
font-weight: 700;
color: #161616;
margin-bottom: 20px;
}
.single-post .post-thumbnail img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: 16px;
margin-bottom: 20px;
}
.single-post .post-content {
font-size: 1.1rem;
line-height: 1.8;
color: #888;
margin-bottom: 40px;
}
.single-post .post-meta {
font-size: 0.9rem;
color: #888;
text-align: left;
margin-bottom: 20px;
}
.single-post .post-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.single-post .post-footer .read-more {
background-color: transparent;
border: 2px solid #C5482F;
color: #C5482F;
padding: 10px 20px;
border-radius: 24px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.single-post .post-footer .read-more:hover {
background-color: #C5482F;
color: #FAFAFA;
} .share-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.share-block p {
font-size: 18px;
line-height: 24px;
font-family: "Inter", sans-serif;
color: #161616;
}
.share-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin: 10px 0;
}
.share-buttons a {
width: 60px;
height: 60px;
background-color: transparent;
border: 2px solid #ccc;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
transition: linear 0.2s;
}
.share-buttons a:hover {
background-color: #C5482F;
border: 2px solid #C5482F;
}
.share-buttons a i {
font-size: 24px;
color: #C5482F;
}
.share-buttons a:hover i {
color: #FAFAFA;
}  .custom-form {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
position: relative;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.form-title {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 0 0 14px;
text-align: left;
font-family: "Inter", sans-serif;
font-weight: 400;
color: #FAFAFA;
font-size: 32px;
line-height: 38px;
}
.left-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-bottom: 40px;
}
.right-form {
display: flex;
flex: 1 1 100%;
flex-direction: column;
justify-content: center;
gap: 20px;
max-width: 800px;
font-family: "FiraCode-Medium";
}
.name-form {
display: flex;
flex-direction: row;
gap: 20px;
flex-grow: 1;
}
.email-form p {
display: flex;
flex-direction: column;
flex-grow: 3;
margin: 0;
}
.wpcf7-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.wpcf7-form label {
font-family: "Inter", sans-serif;
color: #FAFAFA;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.3px;
line-height: 21px;
margin: 16px 0 0;
}
.wpcf7 form .wpcf7-response-output {
margin: 20px 0;
padding: 10px;
}
.wpcf7 form.invalid .wpcf7-response-output {
font-size: 15px;
}
.wpcf7 input[type=text], .wpcf7 input[type=email] {
width: 100%;
height: 50px;
margin-top: 10px;
border-radius: 10px;
background-color: #0e0e0e;
color: #FAFAFA;
border: 2px solid rgba(130, 130, 130, 0.2);
padding: 12px 18px;
}
input[type=submit] {
text-align: center;
}
input[type=submit] {
background-color: #C5482F;
color: #FAFAFA;
border: none;
border-radius: 100px;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
padding: 0;
font-size: 15px;
margin-top: 24px;
transition: all 0.2s linear;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #FAFAFA;
color: #C5482F;
}
.required {
color: #C5482F;
font-size: 16px;
vertical-align: top;
}
.wpcf7 input::-moz-placeholder, .wpcf7 textarea::-moz-placeholder {
color: #7a7a7a;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
color: #7a7a7a;
}
.submit-form {
display: flex;
flex-direction: column;
width: 100%;
position: relative;
gap: 0px;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
}
.submit-button {
width: 100%;
margin: 0 auto 16px;
}
.acceptance {
color: #888;
font-size: 13px;
line-height: 18px;
font-weight: 300;
font-family: "Inter", sans-serif;
text-align: center;
margin: 0 auto;
width: 100%;
max-width: 274px;
}
.wpcf7-spinner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 64px;
right: 0;
left: auto;
margin: 0 24px;
z-index: 99;
}
.acceptance a {
color: #888;
text-decoration: none;
outline: none;
cursor: pointer;
font-weight: 400;
transition: all 0.2s linear;
}
.acceptance a:hover {
color: #C5482F;
}
select {
width: 100%;
max-width: 400px;
height: 50px;
padding: 10px 20px;
}
.wpcf7 textarea {
border-radius: 12px;
background-color: #0e0e0e;
border: 2px solid rgba(130, 130, 130, 0.2);
color: #FAFAFA;
padding: 12px 18px;
height: 150px;
margin-top: 8px;
}
select.wpcf7-form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23000" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 22px;
padding-right: 2rem;
} .contact__contact-form.start-project {
width: 100%;
max-width: 520px;
background-color: transparent;
border-radius: 24px;
padding: 0;
}
.contact__hero.form-hero {
align-items: flex-start;
padding: 120px 60px 180px;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.form-hero .contact__hero--container .contact__hero--social-block {
margin-top: -48px;
}
.custom-checkbox-group {
display: flex;
flex-direction: row;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 30px;
}
.custom-box {
position: relative;
width: 240px;
height: 180px;
background-color: #0e0e0e;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
transition: border-color 0.3s ease;
display: flex;
}
.box-content {
display: flex;
width: 240px;
height: 180px;
border-radius: 12px;
border: 2px solid rgba(130, 130, 130, 0.2);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.box-content svg {
fill: #7a7a7a;
color: #7a7a7a;
width: 100px;
height: 100px;
}
.custom-box input[type=checkbox]:checked .box-content svg {
fill: #C5482F;
color: #C5482F;
} .custom-box input[type=checkbox]:checked + .box-content {
border: 2px solid #FAFAFA;
}
.custom-box input[type=checkbox] {
display: none;
}
.custom-box input[type=checkbox] + .box-content::before {
content: "";
background: transparent;
border-radius: 100px;
border: 2px solid #888;
height: 24px;
width: 24px;
position: absolute;
top: 14px;
left: 14px;
right: auto;
display: block;
} .custom-box input[type=checkbox]:checked + .box-content::after {
content: "✓";
background: #FAFAFA;
border: 2px solid #FAFAFA;
border-radius: 100px;
height: 24px;
width: 24px;
font-size: 21px;
font-weight: 500;
color: #161616;
position: absolute;
top: 14px;
left: 14px;
right: auto;
display: block;
}
.box-title {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
color: #888;
}
.box-content svg {
fill: #7a7a7a;
color: #7a7a7a;
width: 100px;
height: 100px;
transition: all 0.2s linear;
}
.custom-box input[type=checkbox]:checked + .box-content .box-title {
color: #FAFAFA !important;
}
.custom-box input[type=checkbox]:checked + .box-content svg {
fill: #FAFAFA;
color: #FAFAFA;
}
input,
textarea {
transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus,
textarea:focus {
outline: none;
border-color: #C5482F;
box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.3);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form .wpcf7-response-output {
font-size: 14px;
font-family: "Inter", sans-serif !important;
border-radius: 100px;
padding: 10px 24px 12px;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #C5482F;
}   .lang-switcher {
position: relative;
cursor: pointer;
font-family: "FiraCode-Medium";
}
.lang-switcher .lang-current {
padding: 6px;
border: none;
font-size: 12px;
font-weight: 500;
font-family: "Open sans", sans-serif;
border: 1.5px solid #888;
border-radius: 100px;
height: 28px;
width: 28px;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
color: #888;
}
.lang-switcher .lang-current:hover {
border: 1.5px solid #161616;
color: #161616;
}
.lang-switcher .lang-dropdown {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
top: 100%;
right: -62px;
width: 100%;
min-width: 110px;
max-width: 110px;
background: #C5482F;
border-radius: 12px;
border: none;
list-style: none;
padding: 12px;
margin: 0px auto;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
}
.lang-switcher .lang-dropdown li a {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: 1px solid transparent;
font-weight: 400;
font-size: 16px;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s ease;
}
.lang-switcher .lang-dropdown li a:hover {
background: transparent;
border: 1px solid #FAFAFA;
}
.lang-switcher .lang-dropdown li.active a {
font-weight: 600;
color: #161616;
}
.lang-switcher.open .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(20px);
} .theme-switch {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
margin-right: 12px;
}
.theme-switch .switch-track {
width: 32px;
height: 12px;
background: #C5482F;
border-radius: 100px;
position: relative;
transition: background 0.3s ease;
}
.theme-switch .switch-thumb {
position: absolute;
top: -6px;
left: -12px;
width: 22px;
height: 22px;
background: #FAFAFA;
border-radius: 100px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
justify-content: center;
align-items: center;
}
.theme-switch .switch-thumb svg {
width: 18px;
height: 18px;
fill: #C5482F;
color: #C5482F;
}
@media all and (min-width: 800px) {
.theme-switch {
margin-right: 0px;
}
}  .type-cursor {
position: relative;
display: inline-block;
}
.type-cursor::after {
content: "";
display: inline-block;
width: 1px;
height: 1em;
margin-left: 6px;
background: currentColor;
vertical-align: -0.1em;
animation: blink-caret 0.8s steps(1) infinite;
}
@keyframes blink-caret {
50% {
opacity: 0;
}
} .hidden-text {
display: inline-block;
will-change: transform, opacity;
}
.hero .hidden-text,
.hero .hidden-text-two {
display: inline-block;
will-change: transform, opacity, filter;
transform-origin: 0% 100%;
}
.hero__buttons {
opacity: 1;
}
.hero__text p {
overflow: visible;
margin: 0;
}
.hero.reveal-line {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: 0.12em;
margin-bottom: -0.12em;
}
.reveal-line {
display: flex;
overflow: hidden;
vertical-align: top;
padding-bottom: 0.12em;
}
.hero .hidden-text {
transform: translateY(110%);
opacity: 0;
} html.js-loading .portfolio--featured,
html.js-loading #manifest {
visibility: hidden;
} @media (max-width: 991px) {
.hero__text .name-dec,
.hero__text .hero-line__inner,
.hero__info,
.hero__buttons {
backface-visibility: hidden;
transform: translateZ(0);
}
}  .loader-wrapper {
position: fixed;
inset: 0;
z-index: 99999;
background: #121212;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-wrapper.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.vf-loader {
position: relative;
width: 184px;
height: 66px;
z-index: 2;
flex: 0 0 184px;
}
.loader-logo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.loader-section {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background: #121212;
z-index: 1;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader-wrapper .section-left {
top: 0;
}
.loader-wrapper .section-right {
bottom: 0;
}
.loader-wrapper.is-hidden .section-left {
transform: translateY(-100%);
}
.loader-wrapper.is-hidden .section-right {
transform: translateY(100%);
}
.vf-loader-disabled .loader-wrapper {
display: none !important;
} .loader-wrapper {
position: fixed;
inset: 0;
z-index: 99999;
background: #121212;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-wrapper.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.vf-loader {
position: relative;
width: 184px;
height: 66px;
z-index: 2;
flex: 0 0 184px;
}
.loader-logo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.loader-logo--fill {
opacity: 1;
}
.loader-section {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background: #121212;
z-index: 1;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader-wrapper .section-left {
top: 0;
}
.loader-wrapper .section-right {
bottom: 0;
}
.loader-wrapper.is-hidden .section-left {
transform: translateY(-100%);
}
.loader-wrapper.is-hidden .section-right {
transform: translateY(100%);
}
.vf-loader-disabled .loader-wrapper {
display: none !important;
}
@media (max-width: 768px) {
.vf-loader {
width: 92px;
height: 33px;
flex: 0 0 92px;
}
} .portfolio__item--image {
position: relative;
display: block;
overflow: hidden;
line-height: 0;
aspect-ratio: 4/3;
} .portfolio__thumb--main {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
} .portfolio__thumb--hover,
.portfolio__item--video {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
} .portfolio__item--image.has-hover-image:hover .portfolio__thumb--hover {
opacity: 1;
}
.portfolio__item--image.has-video:hover .portfolio__item--video {
opacity: 1;
} .contact-main {
padding-top: 60px;
background-color: #0a0a0a;
}
@media (max-width: 1280px) {
h1.hero-size {
font-size: 120px;
line-height: 124px;
}
h1.hero-size {
font-size: 120px;
line-height: 124px;
margin: 0 0 40px;
}
.manifest__container--box {
padding-left: 60px;
}
.motion__section {
margin-left: 200px;
}
.contact__hero--text {
font-size: 120px;
line-height: 124px;
}
.contact__hero--text {
font-size: 120px;
line-height: 124px;
}
.footer__hero--description {
font-size: 24px;
line-height: 28px;
margin-bottom: 10px;
}
.custom-box {
width: 200px;
}
.right-form {
padding-right: 40px;
}
}
@media (max-width: 1024px) {
.hero__bottom {
height: 40%;
}
.contact-main {
padding-top: 40px;
}
h1.hero-size {
font-size: 100px;
line-height: 110px;
}
h1.hero-size {
font-size: 100px;
line-height: 88px;
margin: 0 0 16px;
}
.manifest__container--box {
padding-left: 40px;
}
.motion__wrapper {
padding: 60px 0;
}
.motion__section {
margin-left: 120px;
}
.motion__text {
font-size: 90px;
line-height: 94px;
}
.contact__hero--text {
font-size: 100px;
line-height: 110px;
}
.contact__hero--text {
font-size: 100px;
line-height: 110px;
}
.footer__container {
padding: 48px;
}
.footer__hero {
margin: 0 auto 20px;
padding: 0;
}
.footer__hero--description {
font-size: 21px;
line-height: 24px;
margin-bottom: 10px;
}
.footer__contact-form {
padding: 24px 24px;
}
.contact__contact-form {
padding: 24px 24px;
}
.contact__bottom {
padding: 0;
}
.custom-box {
width: 160px;
}
.right-form {
padding-right: 40px;
}
.hero__text .name-dec {
margin-bottom: 0;
}
.hero {
margin-bottom: 180px;
}
.work__container {
padding: 0 40px;
}
.work {
min-height: auto;
margin-bottom: 0;
}
.project-page {
min-height: 100vh;
}
.about__container .about__info {
font-size: 24px;
line-height: 32px;
margin: 40px 0;
}
.about__container .about__description {
font-size: 15px;
line-height: 22px;
margin: 40px 0 40px;
}
.manifest__container--box .text {
max-width: 900px;
}
.manifest p span {
font-size: 68px;
line-height: 74px;
}
.portfolio--projects {
padding-top: 160px;
margin-bottom: 120px;
}
.portfolio--featured .portfolio__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.portfolio--featured .portfolio__item {
--item-width: calc((100cqw - 24px) / 2);
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
}
.services__rows--name {
font-size: 21px;
line-height: 26px;
min-width: 280px;
}
} @media (max-width: 768px) {
.contact-main {
padding-top: 20px;
}
.pin-spacer-manifestPinMobile {
margin-bottom: 60px;
}
.manifest {
min-height: auto;
max-width: 100vw;
height: 100%;
margin-bottom: 0;
}
.manifest__container {
justify-content: space-between;
align-items: flex-start;
max-width: 100%;
height: 100%;
min-height: 100%;
gap: 0;
padding: 100px 24px 60px;
display: flex;
flex-direction: column;
margin-bottom: 140px;
}
.manifest__container--box {
position: relative;
margin-top: 0px;
padding: 0 0 60px;
width: 100%;
padding-left: 0px;
}
.manifest__container--description {
position: relative;
padding: 0;
font-size: 16px;
line-height: 27px;
left: 0;
right: auto;
bottom: 0;
}
.manifest__container--image {
max-width: 370px !important;
margin: 0 auto;
margin-top: 0;
}
.manifest p span {
font-size: 48px;
line-height: 52px;
}
.manifest__container--box {
padding-top: 60px;
}
.manifest__container--box .text {
max-width: 100%;
}
.hero__container {
min-height: 900px;
}
.work__container {
padding: 0;
}
.portfolio--featured .portfolio__header {
margin: 0;
width: 100%;
}
.portfolio--featured .portfolio__items {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.portfolio--featured .portfolio__item {
--item-width: 100%;
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
}
.manifest p span {
font-size: 52px;
line-height: 56px;
font-weight: 600;
}
.motion__text {
font-size: 44px;
line-height: 54px;
}
.motion__section {
margin-left: 80px;
}
.footer__container {
padding: 40px 24px 0;
}
.wpcf7-form label {
margin: 0 0 10px;
}
.services__rows--name {
font-size: 24px;
line-height: 28px;
min-width: 280px;
}
.header {
height: 60px;
}
.header__right {
gap: 15px;
width: auto;
min-width: auto;
}
.header__left {
max-width: 100%;
}
.header__wrapper {
height: 60px;
padding: 16px 24px;
border-radius: 0;
background-color: transparent;
}
.header__center {
display: none;
}
.header__left {
gap: 40px;
}
.header__right {
gap: 15px;
min-width: auto;
}
.header__btn {
display: none;
}
.header__menu {
display: flex;
gap: 14px;
padding: 7px;
background-color: transparent;
}
.header__menu span {
font-size: 13px;
color: #161616;
}
.header__menu span.menu-icon {
width: 100%;
display: flex;
line-height: 30px;
}
.header__menu span.text-menu {
display: none;
}
.header__logo {
width: 64px;
}
.header__logo svg {
width: 64px;
}
.header__light-switcher svg {
width: 24px;
height: 24px;
}
.header.header--dark .header__wrapper .header__right .menu-icon__line {
background-color: #FAFAFA;
}
.header__wrapper {
gap: 32px;
}
.header__left {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.nav {
display: flex;
position: fixed;
top: 100px;
bottom: auto;
left: 24px;
width: calc(100% - 48px);
z-index: 98;
border-radius: 12px;
}
.nav:after {
content: "";
position: fixed;
width: calc(100% - 48px);
height: 0;
left: 24px;
top: 64px;
background: #161616;
border-bottom-left-radius: 0;
z-index: -1;
border-radius: 12px;
transform: translateX(0%) translateY(0%);
transition: height 0.5s ease;
}
.nav:after {
background: #161616;
transition-delay: 0.2s;
}
.nav__content {
position: fixed;
visibility: hidden;
top: 0;
left: 24px;
height: 100%;
margin-top: 0;
padding-bottom: 200px;
width: calc(100% - 24px);
text-align: center;
}
.nav__list {
position: relative;
padding: 0;
margin: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
top: 100px;
}
.nav__list-item {
position: relative;
display: block;
transition-delay: 0.4s;
opacity: 0;
text-align: center;
color: #FAFAFA;
overflow: hidden;
font-family: "Inter", sans-serif;
font-size: 36px;
font-weight: 900;
line-height: 1.15;
letter-spacing: 3px;
transform: translate(40px, 0%);
transition: opacity 0.2s ease, transform 0.2s ease;
margin-top: 0;
margin-bottom: 0;
}
.nav__list-item a {
position: relative;
text-decoration: none;
color: #FAFAFA;
overflow: hidden;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
font-weight: 900;
z-index: 2;
display: inline-block;
text-transform: uppercase;
transition: all 100ms linear;
}
.nav__list-item a:hover {
color: #FAFAFA;
}
.nav__list-item a.active-nav a {
color: #FAFAFA;
}
.nav__list-item a.active-nav a:after {
height: 4px;
opacity: 1;
left: 0;
width: 100%;
}
.nav__content {
visibility: visible;
overflow-y: hidden;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
top: 64px;
left: 24px;
height: 100%;
min-height: 400px;
}
body.nav-active {
overflow: hidden;
}
body.nav-active .nav__content {
visibility: visible;
overflow-y: hidden;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
top: 64px;
left: 24px;
height: 100%;
min-height: 400px;
}
body.nav-active .nav {
visibility: visible;
top: 64px;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 48px);
height: 400px;
border-radius: 12px;
}
body.nav-active .nav:after {
transform: translateX(0%) translateY(0%);
border-radius: 12px;
width: calc(100% - 48px);
transition-delay: 0.2s;
height: 400px;
}
body.nav-active .nav__list-item {
opacity: 1;
transform: translateX(0%);
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
h1.hero-size {
font-size: 80px;
line-height: 80px;
}
.hero-size {
font-size: 64px;
line-height: 68px;
font-weight: 600;
}
h2 {
font-size: 32px;
line-height: 36px;
}
.hero {
margin-bottom: 100px;
min-height: auto;
position: relative;
}
.hero__container {
width: 100%;
height: 800px;
min-height: 800px;
margin: 0 auto;
padding: 180px 24px 120px;
background-color: #FAFAFA;
border-radius: 12px;
display: flex;
position: initial;
justify-content: center;
align-items: flex-start;
gap: 80px;
}
.hero .hello-text {
font-size: 14px;
padding-left: 0px;
margin: 0;
line-height: 21px;
}
.hero__text .name-dec {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-bottom: 14px;
letter-spacing: 0.5px;
}
.hero__text--desctop {
display: none;
}
.hero__text--mobile {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
gap: 12px;
color: #161616;
padding: 0;
font-family: "Nohemi", "Inter", sans-serif;
margin-bottom: 0;
}
.hero__text--mobile a {
font-size: 18px;
}
.hero__text--mobile p {
font-size: 80px;
line-height: 80px;
padding: 0;
margin: 0;
width: 100%;
position: relative;
overflow: hidden;
height: auto;
}
.hero__text--mobile p.text-mini-size {
font-size: 38px;
line-height: 40px;
height: auto;
margin-bottom: 0;
}
.hero__text--mobile p .subtitle-text {
margin-top: 12px;
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 40px;
}
.hero__bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 40px;
position: relative;
left: 0;
bottom: auto;
}
.hero__info {
font-size: 15px;
max-width: 310px;
line-height: 21px;
margin-left: 0px;
width: 100%;
height: 100%;
min-height: auto;
margin-bottom: 0;
margin-top: 0;
display: flex;
position: initial;
}
.hero__info svg {
width: 18px;
height: 20px;
}
.hero__info p {
margin: 6px 0 0;
padding-left: 0px;
}
.hero__buttons {
position: relative;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
left: 0;
right: auto;
bottom: auto;
gap: 18px;
}
.hero__btn {
font-size: 16px;
letter-spacing: 0.3px;
line-height: 14px;
padding: 15px 20px 16px;
border: 2px solid #161616;
background-color: #161616;
}
.hero__btn--border {
background-color: transparent !important;
color: #161616;
}
.type-services {
font-size: 16px;
line-height: 21px;
width: 100%;
max-width: 320px;
}
p.type-cursor::after {
height: 16px;
width: 3px;
}
.vf-loader {
width: 92px;
height: 33px;
flex: 0 0 92px;
}
.services {
min-height: 100%;
margin-bottom: 200px;
}
.services__container {
padding: 0px 24px;
display: flex;
flex-direction: column;
gap: 70px;
}
.services__text {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0;
padding: 40px 0;
text-align: left;
gap: 60px;
}
.services__text h2 {
display: flex;
color: #161616;
margin: 0;
}
.services__text .title-description {
display: flex;
font-size: 16px;
line-height: 24px;
}
.services .section-title {
padding: 0;
}
.services__rows {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 32px;
}
.services__rows .hero__btn {
width: 100%;
margin-top: 24px;
display: flex;
justify-content: center;
align-items: center;
color: #FAFAFA;
}
.services__rows--item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-bottom: none;
padding: 16px 0;
}
.services__rows--item::after {
height: 1px;
}
.services__rows--left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.services__rows--number {
width: 40px;
margin-right: 24px;
font-size: 21px;
color: #161616;
}
.services__rows--name {
font-family: "Nohemi", "Inter", sans-serif;
font-size: 21px;
font-weight: 500;
color: #161616;
margin: 0;
}
.services__rows--tags {
font-size: 13px;
font-family: "Inter", sans-serif;
background-color: transparent;
gap: 10px;
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 24px;
margin-top: 16px;
margin-bottom: 45px;
}
.services__rows--tags li {
height: 30px;
border: 1px solid #161616;
border-radius: 100px;
padding: 10px 12px;
letter-spacing: 1px;
}
.header__right {
flex: 0;
}
.work .mobile-button {
display: flex;
}
.work .desktop-button {
display: none;
}
.work.projects {
padding: 0 140px;
}
.work__title {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
font-family: "Nohemi", "Inter", sans-serif;
color: #161616;
padding: 0;
text-align: left;
z-index: 2;
}
.work__title p {
font-size: 80px;
line-height: 84px;
font-family: "Nohemi", "Inter", sans-serif;
}
.work__title .title-description {
font-size: 16px;
line-height: 21px;
}
.work__container--projects-page {
padding-top: 120px;
}
.portfolio__header {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0px;
margin: 0;
margin-bottom: 20px;
}
.portfolio__filters {
flex-wrap: wrap;
justify-content: flex-end;
margin-bottom: 0px;
height: auto;
display: flex;
gap: 16px;
width: auto;
max-width: 680px;
}
.filter-btn {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
margin: 0;
border: 1px solid #161616;
height: auto;
padding: 8px 12px;
background-color: transparent;
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 17px;
color: #161616;
font-weight: 400;
transition: all 0.2s linear;
cursor: pointer;
}
.filter-btn:hover {
color: #C5482F;
border: 1px solid #C5482F;
}
.filter-btn.active {
color: #FAFAFA;
background-color: #C5482F;
border: 1px solid #C5482F;
}
.section-title {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 40px 0;
gap: 10px;
}
.work {
height: auto;
min-height: auto;
margin-bottom: 0px;
padding: 0 24px 60px;
}
.work__title p {
font-size: 36px;
line-height: 38px;
font-family: "Nohemi", "Inter", sans-serif;
}
.work__container {
min-height: auto;
padding: 0;
}
.work__container .portfolio {
display: flex;
flex-flow: wrap;
justify-content: flex-start;
gap: 30px;
}
.portfolio {
display: flex;
flex-direction: column;
}
.portfolio__filters {
flex-wrap: wrap;
width: 100%;
max-width: 100%;
justify-content: flex-start;
margin-bottom: 0px;
margin-top: 32px;
height: auto;
gap: 12px;
}
.portfolio__header {
flex-wrap: wrap;
gap: 0px;
}
.portfolio .filter-btn {
margin: 0;
border: 2px solid #C5482F;
height: 32px;
}
.portfolio__items {
display: flex;
max-width: 100%;
gap: 32px;
justify-content: center;
align-items: flex-start;
}
.portfolio .portfolio__item {
flex: 1 1 100%;
max-width: 100%;
}
.portfolio .portfolio__item--image {
aspect-ratio: 4/3;
}
.portfolio .portfolio__item--title {
font-weight: 600;
}
.prev-project, .next-project {
font-family: "FiraCode-Medium";
text-decoration: none;
font-weight: 600;
padding: 15px 25px;
background: transparent;
color: #161616;
border: 2px solid #161616;
border-radius: 100px;
}
.prev-project:hover, .next-project:hover {
background: #C5482F;
border: 2px solid #C5482F;
color: #161616;
}
.portfolio--featured .portfolio__item--image {
aspect-ratio: 4/3;
}
.portfolio--projects .portfolio__items {
grid-template-columns: 1fr;
gap: 32px;
}
.portfolio__item--image {
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 12px;
}
.portfolio--projects {
padding-top: 120px;
}
.portfolio--projects .portfolio__items {
display: grid;
grid-template-columns: 1fr;
transform: none;
width: 100%;
gap: 32px;
}
.portfolio--projects .portfolio__item {
--item-width: 100%;
flex: 0 0 var(--item-width);
width: var(--item-width);
min-width: var(--item-width);
max-width: var(--item-width);
border-radius: 12px;
margin: 0;
padding-bottom: 0;
}
.portfolio--projects .portfolio__item--image {
display: block;
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 12px;
}
.portfolio--projects .portfolio__item--content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px 16px 4px;
}
.portfolio--projects .portfolio__item--title {
font-family: "Inter", sans-serif;
font-size: 21px;
line-height: 28px;
color: #161616;
margin: 0;
}
.portfolio--projects .portfolio__item--bottom {
align-items: flex-start;
padding: 0 16px 18px;
}
.portfolio--projects .portfolio__item--cat {
color: #7a7a7a;
text-align: right;
font-size: 16px;
line-height: 14px;
font-family: "Inter", sans-serif;
margin: 0;
}
.portfolio--projects .portfolio-item__short-desc {
font-size: 13px;
line-height: 16px;
}
.portfolio--projects .portfolio__item--views {
display: flex;
align-items: center;
justify-content: flex-end;
color: #ccc;
gap: 3px;
flex-shrink: 0;
}
.portfolio--projects .portfolio__item--views svg {
fill: #ccc;
color: #ccc;
width: 16px;
height: 16px;
}
.about {
min-height: auto;
max-width: 100vw;
margin-top: 60px;
margin-bottom: 80px;
}
.about__container {
justify-content: flex-start;
align-items: flex-start;
max-width: 100%;
gap: 32px;
padding: 0 24px;
display: flex;
flex-direction: column-reverse;
}
.about__container .about__text h2 {
font-size: 16px;
color: #7a7a7a;
letter-spacing: 1px;
margin-bottom: 32px;
}
.about__container .about__info {
font-size: 24px;
line-height: 32px;
margin-bottom: 60px;
}
.about__container .about__description {
font-size: 16px;
line-height: 25px;
max-width: 100%;
margin: 0px 0 48px;
}
.about__container--image {
max-width: 370px !important;
margin: 0 auto;
margin-top: 0px;
}
.about p span {
font-size: 24px;
line-height: 32px;
}
.motion__wrapper {
padding: 40px 0;
}
.motion__section {
margin-left: 60px;
}
.motion__section-2 {
margin-left: 24px;
}
.motion__text {
font-size: 38px;
line-height: 46px;
letter-spacing: -1px;
font-weight: 500;
}
.motion.motion-project .motion__section {
margin-left: 170px;
}
.motion.motion-project .motion__text {
font-size: 40px;
line-height: 44px;
}
.footer {
position: relative;
left: 0;
bottom: 0;
z-index: 1;
}
.footer-none footer {
display: none;
}
.footer {
width: 100%;
height: auto;
}
.footer__container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 80px 24px 0;
margin: 0 auto;
}
.footer__contact-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 100%;
background-color: #161616;
border-radius: 24px;
padding: 24px 22px;
margin: 0;
transition: all 0.3s linear;
}
.footer__logo {
display: block;
}
.footer__logo svg {
width: 100%;
max-width: 300px;
}
.footer__logo {
width: 100%;
max-width: 300px;
}
.footer__hero {
width: 100%;
margin: 0 auto 60px;
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding: 0;
}
.footer__hero--container {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 100%;
}
.footer__hero--text {
font-size: 64px;
line-height: 68px;
margin-bottom: 20px;
letter-spacing: -1px;
}
.footer__hero--description {
font-size: 16px;
line-height: 27px;
margin-bottom: 20px;
}
.footer__btn {
position: relative;
width: 100%;
max-width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Inter", sans-serif;
font-size: 15px;
letter-spacing: 0.3px;
line-height: 15px;
padding: 18px 24px 20px;
background-color: transparent;
border: 2px solid #C5482F;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s linear;
transform: rotateX(0) rotateY(0);
transform-style: preserve-3d;
transition-duration: 0.1s;
transition-timing-function: ease !important;
cursor: pointer;
}
.footer__btn a {
cursor: pointer;
}
.footer__menu {
display: flex;
}
.footer__menu ul {
display: flex;
gap: 40px;
list-style: none;
line-height: 1.5;
} .footer__hero {
max-width: 100%;
margin-top: 0;
gap: 48px;
}
.footer__hero--container {
width: 100%;
max-width: 100%;
padding: 0;
align-items: flex-start;
}
.footer__menu ul {
padding-left: 0;
margin-right: 0;
max-width: 100%;
line-height: 1.8;
}
.footer__menu-column {
display: flex;
flex-direction: column;
max-width: 100%;
}
.footer__bottom {
flex-direction: column-reverse;
flex-wrap: wrap;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
position: relative;
bottom: 24px;
margin-top: 80px;
padding: 0;
font-family: "Inter", sans-serif;
}
.footer__bottom--left {
display: flex;
width: 100%;
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.footer__bottom--left ul {
list-style: none;
padding: 0;
display: flex;
gap: 18px;
}
.footer__bottom--left ul li a {
font-size: 14px;
color: #FAFAFA;
}
.footer__bottom--left p {
margin-bottom: 0;
font-size: 14px;
color: #7a7a7a;
}
.footer__bottom--left p a {
color: #7a7a7a;
}
.footer__bottom--right {
width: 100%;
padding-right: 0px;
margin-top: 0;
align-items: flex-start;
gap: 30px;
margin-bottom: 40px;
font-size: 16px;
} .contact {
margin: 0 auto;
padding: 60px 0;
}
.contact__container {
align-items: flex-start;
width: 100%;
flex: 1 1 auto;
min-height: 0;
padding: 0 24px 24px;
margin: 0 auto;
height: auto;
}
.contact__contact-form {
width: 100%;
max-width: 100%;
border-radius: 24px;
padding: 24px 22px;
margin: 0;
}
.contact__hero {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 60px 0 60px;
min-height: 0;
flex: 1 1 auto;
gap: 60px;
}
.contact__hero--container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 32px;
}
.contact__hero--social-block {
font-family: "Inter", sans-serif;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 14px;
position: relative;
text-align: left;
margin: 0;
padding: 0;
}
.contact__hero--social-block p {
font-family: "Inter", sans-serif;
color: #7a7a7a;
font-size: 15px;
line-height: 21px;
text-align: left;
font-weight: 400;
margin: 0;
padding: 0;
}
.contact__hero--social-block .ul-social {
list-style: none;
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
gap: 14px;
}
.contact__hero--social-block .ul-social li {
display: flex;
justify-content: flex-start;
align-items: center;
}
.contact__hero--social-block .ul-social li a {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
width: 56px;
height: 56px;
background-color: rgba(130, 130, 130, 0.2);
border-radius: 100px;
transition: all 0.2s linear;
}
.contact__hero--social-block .ul-social li a svg {
fill: #FAFAFA;
color: #FAFAFA;
width: 24px;
height: 24px;
}
.contact__hero--social-block .ul-social li a:hover svg {
fill: #C5482F;
color: #C5482F;
}
.contact__hero--text {
font-size: 68px;
line-height: 68px;
margin-bottom: 0;
}
.contact__hero--description {
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
max-width: 160px;
}
.contact__btn {
position: relative;
width: 100%;
max-width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Inter", sans-serif;
font-size: 15px;
letter-spacing: 0.3px;
line-height: 15px;
padding: 18px 24px 20px;
background-color: transparent;
border: 2px solid #C5482F;
color: #FAFAFA;
border-radius: 100px;
text-decoration: none;
transition: all 0.3s linear;
transform: rotateX(0) rotateY(0);
transform-style: preserve-3d;
transition-duration: 0.1s;
transition-timing-function: ease !important;
cursor: pointer;
}
.contact__btn a {
cursor: pointer;
}
.contact__menu {
display: flex;
}
.contact__menu ul {
display: flex;
gap: 40px;
list-style: none;
line-height: 1.5;
}
.contact__menu ul li a {
color: #FAFAFA;
transition: 0.2s linear;
cursor: pointer;
outline: none;
text-decoration: none;
}
.contact__menu ul li a:hover {
color: #C5482F;
}
.contact__menu-column {
display: flex;
flex-direction: row;
}
.contact__bottom {
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: flex-start;
min-height: 30px;
font-family: "Inter", sans-serif;
height: auto;
padding: 0;
margin-top: auto;
}
.contact__bottom--left {
flex-direction: column;
padding-right: 0px;
padding: 0;
align-items: flex-start;
justify-content: flex-start;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #7a7a7a;
gap: 8px;
}
.contact__bottom--left ul {
list-style: none;
padding: 0;
}
.contact__bottom--left ul li a {
color: #888;
}
.contact__bottom--left ul li a:hover {
color: #C5482F;
}
.contact__bottom--left p {
margin-bottom: 0;
}
.contact__bottom--left p a {
color: #888;
}
.contact__bottom--right {
padding-right: 0px;
padding: 0;
align-items: flex-start;
justify-content: flex-start;
}
.contact__bottom--right ul {
padding: 0;
}
.about__container.page-about {
align-items: flex-start;
flex-direction: column;
padding: 60px 24px;
}
.about__container .about__left {
max-width: 100%;
margin-bottom: 60px;
} .wpcf7-form label {
margin: 0 0 12px;
}
.contact__contact-form.start-project {
width: 100%;
max-width: 100%;
}
.contact__hero.form-hero {
align-items: flex-start;
padding: 60px 0px 100px;
max-width: 100%;
margin: 0 auto;
}
.form-hero .contact__hero--container .contact__hero--social-block {
margin-top: -48px;
}
.custom-checkbox-group {
display: flex;
flex-direction: row;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 30px;
}
.custom-box {
width: calc(50% - 12px);
height: 180px;
}
.box-content {
display: flex;
width: 100%;
height: 100%;
border: 2px solid rgba(130, 130, 130, 0.2);
}
.box-title {
font-size: 14px;
font-weight: 400;
position: absolute;
bottom: 16px;
}
.box-content svg {
fill: #7a7a7a;
color: #7a7a7a;
width: 86px;
height: 86px;
transition: all 0.2s linear;
margin-top: -16px;
}
.custom-box input[type=checkbox]:checked + .box-content .box-title {
color: #FAFAFA !important;
}
.custom-box input[type=checkbox]:checked + .box-content svg {
fill: #FAFAFA;
color: #FAFAFA;
}
.left-form {
display: flex;
width: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 40px;
}
.wpcf7 {
max-width: 100%;
}
.custom-checkbox-group {
flex-direction: row;
flex-wrap: wrap;
}
.form-title {
font-size: 28px;
line-height: 36px;
max-width: 100%;
margin-bottom: 40px;
}
.right-form {
padding: 0px;
}
}  .menu-icon {
height: 30px;
width: 30px;
position: relative;
z-index: 2;
cursor: pointer;
display: block;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #161616;
margin-bottom: 7px;
cursor: pointer;
transition: background-color 0.5s ease, transform 0.2s ease, width 0.2s ease;
}
.menu-icon__line-left {
width: 16.5px;
margin-top: 5px;
}
.menu-icon__line-right {
width: 16.5px;
margin-left: auto;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
width: 30px;
}
.header--dark .menu-icon__line {
background-color: #FAFAFA;
} .nav {
display: flex;
position: fixed;
top: 100px;
left: 24px;
width: calc(100% - 48px);
z-index: 98;
border-radius: 12px;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.nav:after {
content: "";
position: fixed;
left: 24px;
top: 64px;
width: calc(100% - 48px);
height: 0;
background: #161616;
border-radius: 12px;
z-index: -1;
transform: translateX(0) translateY(0);
transition: height 0.5s ease, opacity 0.25s ease;
transition-delay: 0.2s;
pointer-events: none;
opacity: 0;
}
.nav__content {
position: fixed;
top: 64px;
left: 24px;
width: calc(100% - 48px);
height: 400px;
min-height: 400px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
visibility: hidden;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.nav__list {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0;
width: 100%;
margin: 0;
padding: 0 48px;
list-style: none;
}
.nav__list-item {
position: relative;
display: block;
width: 100%;
margin: 0;
opacity: 0;
overflow: hidden;
text-align: left;
color: #FAFAFA;
font-family: "Inter", sans-serif;
font-size: 36px;
font-weight: 900;
line-height: 1.15;
letter-spacing: 3px;
transform: translateX(40px);
transition: opacity 0.25s ease, transform 0.3s ease;
pointer-events: none;
}
.nav__list-item a {
position: relative;
display: inline-block;
padding: 5px 5px 5px 0;
text-decoration: none;
text-transform: uppercase;
color: #FAFAFA;
font-weight: 600;
font-size: 28px;
letter-spacing: 0.5px;
z-index: 2;
overflow: hidden;
cursor: pointer;
transition: all 100ms linear;
pointer-events: none;
}
.nav__list-item a:hover {
color: #FAFAFA;
} body.nav-active {
overflow: hidden;
}
body.nav-active .nav {
visibility: visible;
opacity: 1;
pointer-events: auto;
top: 64px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
body.nav-active .nav:after {
width: calc(100% - 48px);
height: 400px;
opacity: 1;
border-radius: 12px;
transform: translateX(0) translateY(0);
transition-delay: 0.2s;
}
body.nav-active .nav__content {
visibility: visible;
opacity: 1;
pointer-events: auto;
overflow: hidden;
}
body.nav-active .nav__list-item {
opacity: 1;
transform: translateX(0);
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
pointer-events: auto;
}
body.nav-active .nav__list-item:nth-child(1) {
transition-delay: 0.25s;
}
body.nav-active .nav__list-item:nth-child(2) {
transition-delay: 0.32s;
}
body.nav-active .nav__list-item:nth-child(3) {
transition-delay: 0.39s;
}
body.nav-active .nav__list-item:nth-child(4) {
transition-delay: 0.46s;
}
body.nav-active .nav__list-item:nth-child(5) {
transition-delay: 0.53s;
}
body.nav-active .nav__list-item:nth-child(6) {
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(7) {
transition-delay: 0.67s;
}
body.nav-active .nav__list-item:nth-child(8) {
transition-delay: 0.74s;
}
body.nav-active .nav__list-item:nth-child(9) {
transition-delay: 0.81s;
}
body.nav-active .nav__list-item:nth-child(10) {
transition-delay: 0.88s;
}
body.nav-active .nav__list-item a {
pointer-events: auto;
}
body.nav-active .menu-icon__line {
background-color: #161616;
transform: translate(0, 0) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 15px;
transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 15px;
margin-left: auto;
transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 15px;
} body:not(.nav-active) .nav,
body:not(.nav-active) .nav__content,
body:not(.nav-active) .nav__list-item,
body:not(.nav-active) .nav__list-item a {
pointer-events: none;
} @media (min-width: 992px) {
.nav {
display: none !important;
}
}
@media (max-width: 768px) {
h2.hero-size {
font-size: 64px;
line-height: 64px;
font-weight: 600;
letter-spacing: -1px;
}
}