@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100&family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tektur:wght@400..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

@font-face {
    font-family: pt-sans; 
    src: local(pt-sans), url(/fonts/pt-sans.ttf); 
   }
   
@font-face {
    font-family: "Gilroy-light"; 
   src: url("/fonts/Gilroy-light.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "Gilroy-light2"; 
   src: url("/fonts/Gilroy-light2.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "futura"; 
   src: url("/fonts/FuturaPTMedium.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "Gerhaus"; 
   src: url("/fonts/Gerhaus-Regular.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "ftanima"; 
   src: url("/fonts/ftanima-Medium.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "Bulky"; 
   src: url("/fonts/Bulky.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face {
    font-family: "Library"; 
   src: url("/fonts/Library.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}


@font-face {
    font-family: "vivl"; 
   src: url("/fonts/vivl-rail.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

.audiowide-regular {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.roboto-flex-<uniquifier> {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

:root {
    --text-color: #555A6B;
    --default-page-background-color: #FFFFFF;
    --gray-color: #4F515A;
    --red-color: #FF0000;
    --white-color: #fff;
    --gray-bg-color: #F6F6F6;
    --light-white: #888888;
    --green-color: #4DD132;
    --black-color: #121212;
    --dark-gray: #414141;
    --light-gray-color: #E1E1E1;
    --primary-linear-gradient: linear-gradient(97.24deg, #153F17 -9.59%, #306B1B 9.18%, #89BF2B 27.47%, #B4E639 45.76%, #CDEF77 63.08%, #81EF77 82.82%);
    --max-width: 1440;
    --min-width: 360;
    --max-container-width: 106.5rem ;
    --container-padding: 6rem ;
    --common-index-1: 1;
    --common-index-2: 2;
    --overlay-index: 3;
    --header-index: 4;
    --sidebar-index: 5;
    --popup-index: 6;
    --all-cover-index: 7;
    --common-transition: .3s ease-in-out;
    --mg-1: .5rem ;
    --mg-2: 1rem ;
    --mg-3: 1.5rem ;
    --mg-4: 2rem ;
    --mg-5: 2.5rem ;
    --mg-6: 3rem ;
    --mg-7: 3.5rem ;
    --mg-8: 4rem ;
    --mg-9: 4.5rem ;
    --mg-10: 5rem ;
    --mg-11: 5.5rem ;
    --mg-12: 6rem ;
    --mg-13: 6.5rem ;
    --mg-14: 7rem ;
    --mg-15: 7.5rem ;
    --mg-16: 8rem ;
    --mg-17: 8.5rem ;
    --mg-18: 9rem ;
    --mg-19: 9.5rem ;
    --mg-20: 10rem ;
    --mg-21: 10.5rem ;
    --mg-22: 11rem ;
    --mg-23: 11.5rem ;
    --mg-24: 12rem ;
    --mg-25: 12.5rem ;
    --grid-gutter: var(--mg-5);
    --grid-columns: 12;
    --grid-column-width: calc( (100% - var(--grid-gutter) * (var(--grid-columns) - 1)) / var(--grid-columns) );
    --col-w-1: var(--grid-column-width);
    --col-w-2: calc(var(--col-w-1) * 2 + var(--grid-gutter));
    --col-w-3: calc(var(--col-w-1) * 3 + var(--grid-gutter) * 2);
    --col-w-4: calc(var(--col-w-1) * 4 + var(--grid-gutter) * 3);
    --col-w-5: calc(var(--col-w-1) * 5 + var(--grid-gutter) * 4);
    --col-w-6: calc(var(--col-w-1) * 6 + var(--grid-gutter) * 5);
    --col-w-7: calc(var(--col-w-1) * 7 + var(--grid-gutter) * 6);
    --col-w-8: calc(var(--col-w-1) * 8 + var(--grid-gutter) * 7);
    --col-w-9: calc(var(--col-w-1) * 9 + var(--grid-gutter) * 8);
    --col-w-10: calc(var(--col-w-1) * 10 + var(--grid-gutter) * 9);
    --col-w-11: calc(var(--col-w-1) * 11 + var(--grid-gutter) * 10);
    --col-w-12: calc(var(--col-w-1) * 12 + var(--grid-gutter) * 11)
}

@media (max-width: 49.24875em) {
    :root {
        --grid-gutter: var(--mg-2);
        --grid-columns: 6
    }
}

.roboto-mono-<uniquifier> {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.orbitron-<uniquifier> {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*, *::before, *::after {
    box-sizing: border-box;
}


html
{
scroll-behavior: smooth;
overscroll-behavior: contain;
}

body
{
	font-family: 'roboto', sans-serif;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    //background-color: #161717;
	//background: #161117;
	background: #08090a;
	color: #c3c3c3;
    font-size: 16px;
    line-height: 20px;
	margin: 0;
	flex-direction: column;
	overflow-x: hidden;
	backface-visibility: hidden;
	scroll-behavior: smooth;
	font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
}

//body:before {
    position: fixed;
    content: '';
    top: 0;
    left: 2rem;
    width: calc(100% - 16rem);  /* 100% = только рабочая область между отступами 8rem */
    height: 100vh;
    background-image: 
        linear-gradient(to right,
            /* Линия 1: 0% */
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0.1) 1px,
            transparent 0.2%,
            
            /* Линия 2: 25% */
            transparent 24.8%,
            rgba(255,255,255,0.1) 25%,
            rgba(255,255,255,0.1) 1px,
            transparent 0.2%,
            
            /* Линия 3: 50% */
            transparent 49.8%,
            rgba(255,255,255,0.1) 50%,
            rgba(255,255,255,0.1) 1px,
            transparent 0.2%,
            
            /* Линия 4: 75% */
            transparent 74.8%,
            rgba(255,255,255,0.1) 75%,
            rgba(255,255,255,0.1) 1px,
            transparent 0.2%,
            
            /* Линия 5: 100% */
            transparent 99.8%,
            rgba(255,255,255,0.1) 100%,
            rgba(255,255,255,0.1) 1px,
            transparent 0.2%
        );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%; 
}

//body:before {
    position: fixed;
    content: '';
    top: 0;
    left: 8rem;
    width: calc(100% - 16rem);  /* 100% = только рабочая область между отступами 8rem */
    height: 100vh;
    border-left: 1px solid #282828;
	border-right: 1px solid #282828;
}


.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

body.noscroll
{
	overflow-y: hidden;
}

h1
{
font-family: 'gerhaus', sans-serif;
//font-family: 'Gilroy-light', sans-serif;
    font-size: 5rem;
    font-weight: 500;
	letter-spacing: -.5px;
	-webkit-text-stroke: 0px;
}

h2
{
font-family: 'gerhaus', sans-serif;
//font-family: 'Gilroy-light', sans-serif;
    font-size: 3rem;
    font-weight: 500;
	letter-spacing: -.5px;
	-webkit-text-stroke: 0px;
}

h3
{
font-family: 'gerhaus';
    font-size: 2.5rem;
    font-weight: 500;
	letter-spacing: -.5px;
	-webkit-text-stroke: 0px;
}

h4
{
font-family: gerhaus;
    font-size: 1.6rem;
    font-weight: 500;
	-webkit-text-stroke: 0px;
}

h5
{
font-family: gerhaus;
    font-size: 1.1rem;
    font-weight: 500;
	padding: 0;
    margin: 0;
	-webkit-text-stroke: 0px;
}

h1,h2,h3,h4
{
line-height: 100%;
margin: 0;

}


ol, ul {
    padding-left: 2rem;
}

p {
    margin: 0;
    padding: 0;
	line-height: 120%;
	font-family: roboto;
	    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
	color: #c3c3c3;
}

i
{
font-style: normal;
}

a:active,a:hover {
    outline: 0
}

a, a:not([class]) {
  text-decoration: none;
  color: initial;
}

b, strong {
  font-weight: bolder;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
	list-style: none;
}


figure
{
    margin: 0;
}

.container-topbar {
    background: #161717;
	background: #212323;
	background: #151518;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

/*****header*******/

//.home-hero-content {
    height: 71vh;
    position: relative;
    margin: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    justify-content: space-between;
    align-items: center;
    grid-column-gap: 0px;
    -ms-grid-columns: 1fr 0.80fr;
    grid-template-columns: auto 25%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 0rem 5rem;
    background: #282828;
    border-radius: 20px;
    overflow: hidden;
}

.home-hero-content {
    position: relative;
    margin: auto;
    /* display: grid; */
    grid-template-columns: 40% 60%;
    justify-content: space-between;
    align-items: center;
    grid-column-gap: 0px;
    -ms-grid-columns: 1fr 0.80fr;
    /* grid-template-columns: auto 25%; */
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 0 5rem;
    height: 114vh;
}

.animated-words
{
  display: flex;
    flex-direction: row;
    font-family: system-ui;
    position: absolute;
    left: 0;
    top: 38%;
    right: 0;
    margin: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    justify-content: center;
  display: flex;
    flex-direction: row;
    font-family: system-ui;
    position: absolute;
    left: 0;
    gap: 3rem;
    right: 0;
    margin: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    justify-content: center;
  line-height: 1;
    color: #000000;
    font-size: 13rem;
    font-weight: bold;
    text-transform: uppercase;
}

.cta-btn-wrap2 {
    height: fit-content;
    width: 32%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

//.home-hero-content:before {
    position: absolute;
    content: '';
    width: 50rem;
    height: 50rem;
    background: #383838;
    border-radius: 100%;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	filter: drop-shadow(0px 0px 86px #181818);
}

.cta-btn-wrap2 img
{
  width: 100%;
  height: 100%;
}

.animated-words span {
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Начальная позиция - за пределами экрана */
.animated-words span:nth-child(1) {
    //transform: translateX(-100vw);
	//font-family: 'Library';
}

.animated-words span:nth-child(2) {
    //transform: translateX(100vw);
	//font-family: Gerhaus;
}

/* Анимация появления при загрузке */
.animated-words.animate span:nth-child(1) {
    transform: translateX(0);
	color: #673AB7;
	    z-index: 2;
}

.animated-words.animate span:nth-child(2) {
    transform: translateX(0);
	color: #d6d6d6;
	z-index: 4;
}

/* Стили для блока с картинкой */
.cta-btn-wrap3 {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
	position: absolute;
    right: 0;
    bottom: 0;
}

.cta-btn-wrap3.animate {
    transform: translateY(0);
}

img.zvezsa {
    animation: spin 0s linear 0s infinite;
    width: 10rem;
    position: absolute;
    right: 0;
    top: 0;
	padding: 1rem;
}

.robot /*robot right*/
{
    /* animation: spin 0s linear 0s infinite; */
    width: 22rem;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 2rem;
    /* padding: 1rem; */
    border-radius: 35px;
    overflow: hidden;
}

//.header-words-col1
{
    position: absolute;
    left: 0;
    top: 0;
	font-family: Gerhaus;
	font-size: 3rem;
    line-height: 1;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	padding: 1rem;
}

//.header-words-col2
{
    position: absolute;
    right: 0;
    bottom: 0;
	font-family: Gerhaus;
	font-size: 3rem;
    line-height: 1;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	padding: 1rem;
}

.header-words-col1 {
    position: absolute;
    left: 0;
    width: -webkit-fill-available;
    top: 6%;
    font-family: 'Poiret One';
    font-size: 16rem;
    line-height: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* padding: 1rem; */
    font-weight: bold;
    text-transform: uppercase;
    justify-content: space-between;
    color: #d6d6d6;
}

.header-words-col2 /*text right*/
{
    position: absolute;
    right: 0;
    top: 39%;
    max-width: 350px;
    font-family: 'Poiret One';
    font-size: 1rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* padding: 1rem; */
    font-weight: bold;
    /* text-transform: uppercase; */
}

.header-words-col1 span:first-child,
.header-words-col2 span:first-child
{
    color: #673ab7;
}

.header-tags
{
    //position: absolute;
    //left: 0;
    //bottom: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    //max-width: 460px;
    //z-index: 4;
	//padding: 1rem;
	    gap: 6px;
}

.header-tags li:nth-child(odd)
{
    background: #673AB7;
}

/***header-old***/

.container-nav
{
position: relative;
    //top: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
	gap: 4rem;
	padding: 0 5rem;
    margin: auto;
	//background: #161717;
	//background: #161117;
	//background: #151518;
	transition: all 0.2s;
	margin: 0;
}

//.container-header {
position: relative;
    //top: 112px;
    background: #161717;
	background: #161117;
	background: #000000;
	background: #1f1f1f;
	//background: linear-gradient(#000000db, #000000ad), url(https://framerusercontent.com/images/3KMOihH4NMv6u7eP9AA8a5ibY0.jpg) 0% 50% no-repeat;
	overflow: hidden;
	z-index: 9;
		transition: all 2s;
		
	//background-image: url(/images/header_bg2.jpg);
	background: url(/images/service_bg.jpg) 0% 50% no-repeat;
    background-size: cover;
    background-blend-mode: color-burn;
    background-color: #000000d4;
}

//.container-header {
    position: relative;
    //background-color: #08090a;
	
    overflow: hidden;
    z-index: 9;
    //transition: all 2s;
		
	//background: linear-gradient(#000000db, #000000ad), url(https://framerusercontent.com/images/3KMOihH4NMv6u7eP9AA8a5ibY0.jpg) 0% 50% no-repeat;
    //background-image: url(/images/header_bg2.jpg);
    //background: url(/images/service_bg.jpg) 0% 50% no-repeat;
    //background: url(/images/tmp/proandrov-3f4e.jpg)  0% 50% no-repeat;
    //background-size: cover;
    background-blend-mode: color, luminosity;
	//background-image: url(/images/proandrov-header.webp);
    //background-size: cover;
    }

.container-header {
    position: relative;
    overflow: hidden;
    z-index: 9;
    background-blend-mode: color, luminosity;
    background-size: cover;
    background-image: url(/images/bg/proandrov-bg-robot-header.webp);
    background-position: center;
}

//.container-header:before
{
	position: absolute;
	content:'';
	top:0;
	left:0;
	width:100%;
	height:100%;
background-image: url(https://framerusercontent.com/images/9c47fOR3CNoSsEtr6IEYJoKM.svg);
    background-repeat: repeat;
    background-position: left top;
    border: 0;
    background-size: 226px auto;
    opacity: 0.04;
    filter: invert(1);
}

.header-menu {
    right: auto;
    background: none;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
	width: 100%;
}

.header-wrapper
{
margin: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding 0.3s ease;
justify-content: flex-start;
	
}

.logo-header {
    display: flex;
    flex-direction: row;
	align-items: center;
	z-index: 9;
	width: 50%;
}

.logo-tag
{
    max-width: 258px;
    font-size: 14px;
    color: #ffffff;
	color: #c3c3c3;
}

.logo-name
{
	position: relative;
    display: flex;
    justify-content: center;
    width: fit-content;
    align-items: center;
    //margin: 16px 0;
	z-index: 2;
	transition: all 0.2s;
	flex-direction: column;
}

.logo-header a
{
	font-family: 'Poiret One';
	font-family: 'gerhaus';
	color: #ffffff;
    font-size: 24px;
    font-weight: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 100%;
	transition: all 0.2s;
border-right: 1px solid;
    padding-right: 1rem;
    margin-right: 1rem;
	//-webkit-text-stroke: 0.2px;
	    outline: none;
		border-color: #515151;
}

.logo-name span
{
	position: relative;
	font-family: 'Antonio', sans-serif;
	color: #8c6bc6;
	font-size: 22px;
	font-weight:100;
	transition: all 0.2s;
	letter-spacing: 6px;
	-webkit-text-stroke: 0.2px;
	    font-style: italic;
}

.logo-name img
{
	height: 40px;
	width: auto;
}

/************mod menu***********/

.mod-menu
{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    justify-content: space-evenly;
	width: 80%;
	margin: auto;
	display: none;
}

.menu-btn-bg
{
display: block;
    z-index: 999999;
    right: 5rem;
    top: 32px;
	height: 33px;
    position: fixed;
    cursor: pointer;
    mix-blend-mode: exclusion;
}

.header-menu {
    position: fixed;
    opacity: 1;
    display: flex;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100%;
    padding: 4rem 6rem;
    background: #161717;
    background: #161117;
    //background: #151518;
    transition: all 1s;
    align-items: flex-start;
    justify-content: space-around;
    flex-direction: column;
    //border-bottom-left-radius: 1000px;
    //border-bottom-right-radius: 1000px;
    z-index: 999999;
}

.header-menu_social-link>div:first-child
{
    display: grid;
}

.mod-menu {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

.mod-menu.mod-list.nav .nav-item a {
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    line-height: 1;
}

.menu-btn img
{
    filter: invert(1);
    width: 100%;
    height: 100%;
}

.header-menu {
    //display: flex;
    //flex-direction: column;
}

.header-menu_social-link h5, .cb-navbar-menu-link h5 {
    display: block;
}

.header-menu .social-link
{
display: flex;

}

.social-link .fa {
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .15);
    color: #b7b5b5;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
	font-size: 16px;
}

.header-menu.active {
    transform: translateX(0);
    top: 0;
	right:0;
	width: 40%;
    height: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.menu-small .header-menu.active {
    top: 60px;
}

.menu-small .logo-name a:after {
    height: 44px;
    top: -5px;
    border: 1px solid #b7b7b7;
}

.menu-small .logo-name a {
    padding: 4px 0;
    font-size: 13px;
}

.menu-small .logo-header a {
    font-size: 13px;
}
.menu-small .logo-name span {
    font-size: 12px;
}

.menu-small .logo-name {
    margin: 4px 0;
}

.menu-small .header-menu {
    position: relative;
    opacity: 1;
    font-size: 1rem;
}

.menu-small .logo-name img {
    height: 33px;
    width: auto;
}

.menu-btn {
display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    color: #c3c3c3;
    width: 100%;
    height: 100%;
}

.menu-btn span {
	//display: block;
    //position: absolute;
    //left: 0;
    //right: 0;
    //height: 2px;
	//border: 1px solid;
    //background: rgb(255 255 255);
    //transition: top .2s .3s, transform .3s 0s;
}

.menu-btn:hover img {
transform: rotate(90deg) !important;
}

.menu-btn span:nth-of-type(1) {
	//top: 0%;
}
.menu-btn span:nth-of-type(2) {
	//top: 100%;
}

.menu-btn.active span:nth-of-type(1) {
  //top: 50%;
  //transform: rotate(45deg);  
}
.menu-btn.active span:nth-of-type(2) {
  //top: 50%;
  //transform: rotate(-45deg); 
}

//.menu-btn p{
padding: 0;
	margin: 0;
	font-family: Gilroy-light2;
	//font-weight: bold;
	position:relative;
	transition: all 0.3s;
	left: 0;
	color: #fff73f;
	color: #FFC107;
}

//.menu-btn.active p{
position: absolute;
	left: -40px;
	transition: all 0.3s;
	z-index: 99995;
}

.menu-btn.active{
	z-index: 999;
}

.menu-btn-text
{
    //display: flex;
    //position: absolute;
    //right: 0rem;
    //color: #ffffff;
    //top: 6px;
    //pointer-events: visible;
	transition: all 0.3s;
}

.menu-btn.active .menu-btn-text
{
    transform: rotate(-45deg);
transition: all 0.3s;
}

.cb-navbar-menu-link
{
//display: none;
}


.header-menu .active a {
color: #673AB7;
}

.header-menu li a
{
position:relative;
color: #ffffff;
 //width:100%;
 //z-index:2;
 //padding: 2px 10px;
 transition: all 0.2s;
}

//.header-menu li.active a:before
{
width: 18px;
}

//.header-menu li a:before
{
	position: absolute;
	left: -12px;
	bottom: 45%;
	content:'';
	width: 2px;
	height: 2px;
	background: #fff73f;
	background: #FFC107;
	transition: all 0.3s;
	z-index:-1;
}

//.header-menu li a:hover
{
	//width: 100%;
	//color: #c3a98a;
	    font-style: italic;
		transition: all 0.3s;
}

//.header-menu li a:hover:before 
{
	width: 18px;
}

.menu-small
{
	transition: all 0.3s easy;
}

.menu-small .header-wrapper
{
	padding-top: 10px;
    padding-bottom: 10px;
}

/*******menu animation********/

.mod-menu.mod-list.nav .nav-item a {
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    overflow: hidden;
    line-height: 1;
	cursor: pointer;
	    color: #c3c3c3;
}

.mod-menu.mod-list.nav .nav-item a > span {
  display: block;
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
  transform-origin: left center;
  position: relative;
    text-transform: uppercase;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
	    letter-spacing: -0.5px;
}

.mod-menu.mod-list.nav .nav-item a > span::before {
  content: attr(data-text);
  position: absolute;
  top: 150%;
  left: 0;
  display: block;
  transform: skewY(10deg);
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
  transform-origin: left center;
  white-space: nowrap;
  color: #c3c3c3; /* цвет для анимированного слоя */
}

.mod-menu.mod-list.nav .nav-item a:hover > span {
  transform: translateY(-150%) skewY(1deg);
}

.mod-menu.mod-list.nav .nav-item a:hover > span::before {
  transform: skewY(-1deg);
}

/* Для текущего активного пункта меню сразу показываем анимацию */

//.mod-menu.mod-list.nav .nav-item.current.active a > span,
.mod-menu.mod-list.nav .nav-item.current.active a > span::before {
  transform: translateY(-150%) skewY(5deg);
  color: #ffffff;
}

//.header-menu.active .mod-menu.mod-list.nav .nav-item.current.active a > span,
.header-menu.active .mod-menu.mod-list.nav .nav-item.current.active a > span::before {
  transform: translateY(0%) skewY(0deg);
  color: #ffffff;
  transition-delay: 1s;
}

//.mod-menu.mod-list.nav .nav-item.current.active a span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #673ab7;
  border-radius: 30%; /* чтобы точка была круглой */
  vertical-align: middle; /* выравнивание по тексту */
  position: relative;
  top: 10px; /* корректировка по вертикали, подберите под ваш шрифт */
}


/** поялвление слов с анимацией букв **/

.heading-text-bg {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden; /* Обрезаем неактивные */
  font-size: 18px;
}

.text.heading-text {
  font-family: Unbounded, Fraktion Mono;
  text-align: left;
  width: fit-content;
  max-width: 50ch;
  margin: 0;
  position: absolute;
  top: 0;
  opacity: 0;
  color: #c3c3c3;
}

.text.heading-text.active {
  opacity: 1;
  position: relative; /* Выходит из absolute */
}

/*   metrics  метрика*/

.perfomance-metric
{
width: 100%;
}

.perf-panel
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
	color: #c3c3c3;
	line-height: 1;
}

.perf-metric
{
    display: flex;
    flex-direction: row;
	text-transform: uppercase;
}

.metric-label
{
    color: #808080;
}

.case-back-metrics
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
	justify-content: space-between;
}

/* Цвета полос */

.metric-value::after { width: var(--width, 0%) !important; }

.metric-value {
    position: relative;
    display: inline-block;
}
.metric-value::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    background: #333;
    width: 100px;
    z-index: -1;
    border-radius: 0;
}
.metric-value::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    background: #673ab7;
    width: 0%;
    z-index: -1;
    border-radius: 0;
    transition: width 0.5s ease;
}

/*****************************/

.cb-navbar-backdrop {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 100vh;
                z-index: 5;
                background: rgba(0,0,0,.5)
            }

@supports (height: 100svh) {
.cb-navbar-backdrop {
height:100svh
}
}

.cb-navbar-backdrop
{
    opacity: 0;
    pointer-events: none;
    display: none;
}

@keyframes fade-in {
  0% { opacity: 0; } /* Начальное состояние - прозрачность 0 */
  100% { opacity: 1; } /* Конечное состояние - полная непрозрачность */
}

.cb-navbar-backdrop.active
{
    opacity: 1;
    pointer-events: auto;
    display: block;
    transition: opacity 0.5s ease-in-out;
	animation: fade-in 1s ease-in-out;
	    backdrop-filter: blur(7px);
}

.nav-item
{
	position:relative;
}

.menu-fixed-up 
{
width: 50%;
padding-right: 5rem;
}

.menu-fixed-up .mod-menu {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 0;
}

.menu-fixed-up .nav-item a{
    position: relative;
    background: transparent;
	display: block;
	width: 100%;
}

.menu-fixed-up .nav-item a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #9E9E9E;
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
	opacity:0;
}

.menu-fixed-up .nav-item a:hover::before {
    animation: backgroundFill 0.2s linear forwards;
}

@keyframes backgroundFill {
    0% {
		opacity:0;
		transform: scaleX(0); }
	100% { 
		opacity:1;
		transform: scaleX(1); }
}

.menu-fixed-up .mod-menu.mod-list.nav .nav-item a > span::before {
  color: #3d3d3d; /* цвет для анимированного слоя */
}

//.nav-item:after {
    content: "]";
    position: absolute;
    right: -16px;
    top: 40%;
	color:#ffffff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
}

//.nav-item:before {
    content: "[";
    position: absolute;
    left: -16px;
    top: 40%;
	color:#ffffff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
}

//.nav-item:hover:before {
    left: -26px;
}

//.nav-item:hover:after {
    right: -26px;
}



/******social link***/
.home-hero-heading .cb-navbar-menu-socials 
    {
    display: flex;
    gap: 2.5rem;
    width: fit-content;
}

.cb-navbar-menu-socials a {
    color: #c3c3c3;
}

.cb-navbar-menu-social {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}

.home-hero-heading .cb-navbar-menu-social {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 0;
    font-size: 1rem;
}

.home-hero-heading .cb-navbar-menu-socials a:before {
    content: '/';
    color: #673ab7;
    width: fit-content;
    left: -11px;
    bottom: 0;
    font-weight: bold;
	    top: 0;
}

.cb-btn_nav {
    position: relative;
    display: inline-block;
    height: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    background: 0 0;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-indent: inherit;
    text-decoration: none;
}

.cb-btn_nav:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.cb-navbar-menu-social>a:before {
    top: -1rem;
    bottom: -1rem;
}

.cb-btn_nav-title {
    position: relative;
    display: block;
    padding: .1em;
    margin: -.1em;
    overflow: hidden;
}

.cb-btn_nav-title span {
    display: block;
    transition: transform 1.2s cubic-bezier(.19,1,.22,1);
    transform-origin: left center;
	    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.5px
	color: #c3c3c3;
}

.cb-btn_nav-title span:after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 150%;
    transform: skewY(10deg);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(.19,1,.22,1);
}

.cb-btn_nav:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.5rem;
    height: .5rem;
    transform: scaleX(0);
    border-bottom: 1px solid;
    transition: transform .5s cubic-bezier(.35,0,0,1);
}

.cb-navbar-menu-caption {
        margin: 0 0 2rem 0;
    }

@media (pointer: fine) {
                .cb-btn_nav:hover .cb-btn_nav-title span {
                    transform:translateY(-150%) skewY(5deg)
                }

                .cb-btn_nav:hover .cb-btn_nav-title span:after {
                    transform: skewY(-5deg)
                }
            }

.cb-btn_link
{
    display: flex;
    color: #ffffff;
    flex-direction: column;
    padding-bottom: 10px;
    position: relative;
	font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
	    letter-spacing: -0.5px;
}

.cb-btn_link:after,
.cb-btn_link:before{
	content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgb(255 255 255 / 46%);
}

.cb-btn_link:after {
    background: #673AB7;
    transform: scaleX(0);
    transition: transform .8s cubic-bezier(.19,1,.22,1);
}

@media (pointer: fine) {
                .cb-btn_link:hover:after {
                    transform:scaleX(1)
                }
            }

.cb-btn_link:after
{
	transform: scaleX(0)
}

.header-menu_social-link h5, .cb-navbar-menu-link h5 {
        color: #515151;
    margin: 0 0 2rem 0;
    font-size: 14px;
    text-transform: uppercase;
}

.cb-navbar-menu-link a
{
font-size: 18px;
color: #ffffff;
}

.header-menu_social-link
{
    display: grid;
    grid-template-columns: 1fr auto;
	width: 100%;
	    align-items: center;
}

.header-menu_social-link>div:first-child
{
    //display: none;
}

.active .header-menu_social-link {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    align-items: start;
}

/**scroll-me**/

.scrollme
{
    position: absolute;
    right: 9rem;
    top: 4rem;
}

.scrollme.scrollme2
{
    left: 9rem;
    bottom: 4rem;
	top:auto;
}

img.sppb-img-responsive
{width: 160px; height: auto;}

.video-top 
{
    display: flex;
    margin-top: 6rem;
	gap: 3rem;
}

.video-top video
{
    border-radius: 1000px;
	width: 100%;
}

/*** tags-works

ul.com-tags-tag__category
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
}

ul.com-tags-tag__category li {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    border-bottom: 1px solid #c3a98a;
    padding: 2rem;
}

ul.com-tags-tag__category li a
{
	height: 460px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

ul.com-tags-tag__category li:nth-child(2n+1) {
    border-right: 1px solid #c3a98a;
}

ul.com-tags-tag__category li .simpleParallax {
    width: 100%;
    height: 100%;
}

ul.com-tags-tag__category li img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

ul.com-tags-tag__category li h2 {
    font-size: 2.5em;
    padding: 0;
    margin: 0;
}

ul.com-tags-tag__category li a:after {
    position: absolute;
    content: '';
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid #c3a98a;
    border-left: 2px solid #c3a98a;
    transform: rotate(180deg);
    transition: all 0.3s;
    opacity: 0;
}

ul.com-tags-tag__category li a:hover:after {
top: 16px;
	right: 16px;
	opacity:1
}*/


/***/

.site-grid {
    width: 100%;
	margin: auto;
    //background: #ebebeb;
	//background-color: #08090a;
	    //background: #10120f;
	color: #ffffff;
	z-index: 4;
}


.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b
{
    z-index: 4;
	//background: #08090a;
	    //background: #10120f;
}

.top-b,.top-b
{
    z-index: 4;
	//background: #08090a;
	    //background: #10120f;
}

//.main-top,
.container-sidebar-left,
.container-sidebar-right,
.container-main-bottom {
  display: flex;
  flex: 1;
  flex-direction: column;
  //max-width: 1400px;
    margin: auto;
	padding: 0 5rem;
	/margin-top: 6rem;
	/margin-bottom: 8rem;
}

.com-content-article__body img
{
    max-width: 100%;
    height: auto;
}

#container-face
{
position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
}

#container-face img
{
    width: 22%;
    height: auto;
}

.container-below-top
{
position: relative;
}

.item-pagework
{
    margin:6rem 5rem;
}

.item-pagework p {
    margin-top: 0;
    margin-bottom: 0.6rem;
    line-height: 126%;
    font-family: roboto;
}

.responsive-container
{
       //background-color: #f0f8ff45;
    //border-radius: 10px;
    //overflow: hidden;
    //backdrop-filter: blur(20px);
	    //box-shadow: inset 0 2px #ffffff45;
		//width: 100%;
}


.home-hero-right
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    justify-items: end;
	gap: 2rem;
}

.home-hero-right-soc
{
font-size: 16px; 
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 10px; 
width: fit-content;
}

.home-hero-right-soc>div:nth-child(4)
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-right-clients.years-bg-item
{
    padding: 2rem;
    border-radius: 10px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    align-items: center;
    backdrop-filter: blur(10px);
    border: 1px solid #ffffff45;
    max-width: 300px;
}

.home-hero-right .cta-btn-wrap2
{
    height: 120px;
    width: 120px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-width 0.15s;
    transform-style: preserve-3d;
    perspective: 600px;
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
}

.home-hero-heading {
    line-height: 1;
        color: #c3c3c3;
    display: flex;
    column-gap: 1rem;
    flex-direction: column;
    gap: 5rem;
    z-index: 3;
    height: 100%;
    justify-content: space-between;
}

.home-hero-heading:nth-child(2)
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

//@-webkit-keyframes animateWord {
   0% { opacity: 0; transform: translateY(-10px);}
   20% { opacity: 0; transform: translateY(-10px);}
    30% { opacity: 1;transform: translateY(0px);}
    50% { opacity: 1; transform: translateY(0px);}
    60% { opacity: 0; transform: translateY(10px);}
    100% { opacity: 0; transform: translateY(10px);}
}

//.animated-words  {
display: flex;
    position: relative;
    line-height: 100%;
    color: #ffffff;
    font-size: 7rem;
    font-family: Unbounded;
    font-weight: bold;
    flex-wrap: wrap;
    column-gap: 29px;
    row-gap: 8px;
    text-transform: uppercase;
    max-width: 900px;
	    flex-direction: column;
		line-height: 80%;
}

//.animated-words span {
    color: #673AB7;
    //font-size: 4.5rem;
    //font-family: monospace;
    //font-weight: 100;
}

//.animated-words span:nth-child(1) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation: animateWord 6s linear infinite 0s;
    -ms-animation: animateWord 6s linear infinite 0s;
    animation: animateWord 8s linear infinite 0s;
    opacity:0;
}

//.animated-words span:nth-child(2) {
	position: absolute;
    -webkit-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation: animateWord 8s linear infinite 0s;
    -ms-animation: animateWord 6s linear infinite 0s;
    animation: animateWord 8s linear infinite 0s;
    opacity:0;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.home-hero-heading img
{
width: fit-content;
}

.home-hero-heading:nth-child(2) img:nth-child(1)
 {
    width: fit-content;
    transform: rotate(180deg);
    opacity: 0.8;
}

//img.zvezsa {
  animation: spin 0s linear 0s infinite;
  width: 10rem;
}

.home-hero-heading:nth-child(1) img:nth-child(1)
{
    height: auto;
    width: 260px;
}

.home-hero-heading .proandrov-text-top
{
    max-width: 538px;
    font-size: 20px;
}

.home-hero-heading_top-bottom
{
    display: flex;
    flex-direction: column;
    gap: 10px;
	align-items: flex-end;
}

//.home-hero-ul
{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

//.home-hero-ul ul
{
    color: #b7b5b5;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    font-size: 1.4rem;
    flex-direction: column;
    padding: 0;
	margin: 0;
}

//.home-hero-ul .fa
{
position: relative;
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .15);
    color: #dddddd;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
	transition: all 0.3s;
}

//.home-hero-ul .fa:hover
{

	background: #000000;
	color: #ffffff;
	cursor: pointer;
}

//.home-hero-ul li a
{
    position: relative;
}

//.home-hero-ul li span
{
    color: #fff;
    position:absolute;
    right: 40px;
    font-family: 'Gilroy-light2';
    top: 10px;
	opacity: 0
}

//.home-hero-ul .fa:hover span
{
	opacity: 1
}

.home-hero-content-inner-text
{
    display: flex;
    flex-direction: column;
    gap: 4rem;
	padding: 9rem 0;
	z-index: 1;
	
}

img.home-hero-heading-proandrov-face
{
    width: 100%;
    height: 388px;
    position: relative;
    object-fit: cover;
    border-radius: 10%;
    bottom: auto;
}

figure.img-full-text
{
    max-height: 800px;
    overflow: hidden;
}

figure.item-image img
{
	width: 100%;
}

.max-width-medium {
    width: 100%;
    //max-width: 31.25rem;
	display: flex;
    flex-direction: row;
    gap: 2rem;
	flex-wrap: wrap;
}

.max-width-medium.element-animation.element-show {
    transition-delay: 0.40s;
}

.max-width-medium .case-back
{
	margin:0;
	padding: 0;
	font-size: 18px;
}

.text-color-muted-inverse {
    color: #BDBDBD;
}

.text-size-xlarge {
    font-size: 22px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 10px;
	z-index: 1;
}

.text-size-xlarge span {
    color: #673ab7;
    font-weight: bold;
    font-size: 24px;
    font-family: 'Unbounded';
    text-transform: uppercase;
}

//.text-size-xlarge span:after {
    position:absolute;
    content:'';
    background: green;
    left: 12px;
    top: 9px;
    width: 107%;
    height: 100%;
    z-index: -1;
    border-radius: 50px;
}

.home-hero-content {
position: relative;
	    margin: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    justify-content: space-between;
    align-items: center;
    //height: 80vh;
    grid-column-gap: 0px;
    -ms-grid-columns: 1fr 0.80fr;
    grid-template-columns: auto 25%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 0 5rem;
	//height: 72vh;
	//background: #181818;
	//background: #161117;
    //background: #151518;
}

.home-hero-content2 {
	position: relative;
	//max-width: 1400px;
	margin: auto;
}

.home-hero-content-inner2 {
    position: relative;
    padding: 3rem 5rem;
grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    display: grid;
}

.home-hero-content-inner
{
	position: relative;
    display: flex;
    gap: 6rem;
    justify-items: start;
    height: 100%;
    align-items: center;
}

.home-hero-image
{
    //position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;
	overflow: hidden;
}

.home-hero-image img,
img.home-hero-image {
position: absolute;
    height: 100%;
    object-fit: cover;
    top: 0;
	    right: 0;
	    width: 100%;
	transform: scale(1.3);
	filter: brightness(0.5);
}

//.home-hero-image:hover:after {
border-radius: 71% 29% 19% 81% / 69% 55% 45% 31%;
}

//.home-hero-image .home-hero-image-mobile2
{
    position: absolute;
    width: 169px;
    height: auto;
    right: 0px;
    top: 42px;
}

//.home-hero-image .home-hero-image-mobile3
{
    position: absolute;
    width: 217px;
    height: auto;
    left: -40px;
    top: 130px;
}

.home-hero-back
{
position: absolute;
    width: 43%;
    height: auto;
    right: 0;
    bottom: -2rem;
}

.home-hero-back2
{
position: relative;
    width: 400px;
    height: 560px;
    right: 0;
	object-fit: cover;
}

//.home-hero-image .simpleParallax {
    position: relative;
    width: 100%;
    height: 100%;
	display: flex;
    justify-content: center;
}

.header svg path,
.text-color-background svg path
{
	stroke: #c3a98a;
}


.home-hero-image-header
{
overflow: visible;
height: 322px;
}

.home-hero-image-header img
{
width: 139%;
    padding-top: 0px;
    top: -34rem;
	right: -6rem;
    height: fit-content;
    transform-origin: right;
    transform: rotate3d(3, -0.7, 2, 309deg) scale3d(1, 1.4, 11) !important;
    object-fit: fill;
	max-height: fit-content;
	
	width: 100%;
    padding-top: 0px;
    top: 1rem;
    left: 0rem;
    height: fit-content;
    transform-origin: right;
    transform: rotate3d(0, 0, 0, 360deg) scale3d(1, 1, 3) !important;
    object-fit: fill;
    max-height: fit-content;
}

.years-bg-item
{
    color: #ffffff;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.home-hero-content .sectionsub-dots {
    background-color: #673ab7;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    animation: pulse 2s infinite ease-in-out;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(191 178 214 / 48%);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(103, 58, 183, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(103, 58, 183, 0);
    }
}

.home-hero-heading .case-back a
{
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-end;
}

.home-hero-content-zvezda
{
        position: absolute;
    right: 0;
    bottom: 2rem;
    width: 20%;
    border-radius: 20px;
    overflow: hidden;
    background-image: url(/images/proandrov-robot-hand.png);
    height: 35%;
    background-size: 100% 100%;
}

.heading-row-right-text
{
font-family: 'gerhaus';
    font-size: 2rem;
    line-height: 1;
    text-align: end;
}

/******element-show-up анимация появления сверху***********/

:root {
  --bg-color: #08090a; /* цвет основного фона */
}

.element-show-up {
  position: relative;
  //overflow: hidden;
}

.element-show-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  z-index: 10;
  clip-path: inset(0 0 0 0); /* изначально полностью закрыто */
  transition: all 1s linear;
}

.element-show-up.element-animation-up::before {
  clip-path: inset(100% 0 0 0); /* уходит вверх */
}

/* Содержимое блока всегда под оверлеем */
.element-show-up > * {
  position: relative;
  z-index: 1;
}

/*новое*/


/**************************/

.block_number, .block_number>div
{
    width: 100%;
}

.block_number .block2-number
{
    width: 100%;
    display: flex;
    align-items: center;
}

.block3-number
{
width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
}

.block3-number span:nth-child(1),
.block3-number span:nth-child(3)
{

}

.block3-number span:nth-child(2)
{
    border: 1px solid #c3c3c3;
    width: 100%;
	position: relative;
}

.block3-number span:nth-child(2) .fa
{
    position: absolute;
    left: 50%;
    top: -5px;
    font-size: 11px;
}

.pa-number-name-item
{
    padding: 4rem 5rem;
    display: flex;
    justify-content: space-between;
    height: 100vh;
    align-items: center;
	gap: 14%;
	flex-direction: column;
}

.pa-number-name-item-title
{
    font-size: 10rem;
    font-family: futura;
	    width: 100%;
    display: flex;
    justify-content: space-between;
	height: 100%;
	align-items: center;
}

.block2-number, .pa-number-name-item-score
{
    position: relative;
    font-size: 26px;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.5px;
    color: #c3c3c3;
    height: fit-content;
    line-height: 1;
	position: sticky;
    top: 50%;
}

.pa-number-name-item-title span
{
	position: sticky;
	top: 50%;
}

.pa-number-name-item-title span:nth-child(3n)
{
	position: sticky;
	top: 50%;
	margin-top: -80%;
}

.pa-number-name-item-title span:nth-child(2n)
{
	position: sticky;
	top: 20%;
	margin-top: -50%;
}

.pa-number-name-item-title span:nth-child(4n)
{
	position: sticky;
	top: 80%;
}

/********мои работы на главной**********/

//.case-grid-wrap {
    display: flex;
  padding: 0 2rem;
  margin: auto;
  gap: 5rem;
  margin-top: 6rem;
  margin-bottom: 8rem;
}

//.case-left-wrap {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    display: flex;
}

//.case-right-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1000px;
    display: flex;
}

//.case-item-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    flex-flow: column;
    display: flex;
  z-index: 1;
}

//.case-right-wrap h4,
.case-left-wrap h4{
    color: #000;
    letter-spacing: 0.56px;
    margin-top: 0;
    margin-bottom: 0;
    //font-family: 'Poiret One';
    font-size: 44px;
    font-weight: 500;
    line-height: 90%;
    //-webkit-text-stroke-width: thin;
}

.works-four
{
position: relative;
    margin: 6rem 5rem;
}

/*****animation text****/

.case-gray-text {
    color: #a7a7a74d;
    font-weight: 500;
	font-size: 64px;
}

.case-gray-text span {
  color: #a7a7a74d;
  transition: color 0.3s ease;
  display: inline-block;
}

.case-gray-text span.active {
  color: #000000;
}

.works-header .case-gray-text span.active {
  color: #ffffff;
}

//.case-item-wrap h4 {
    color: #ffffff;
    letter-spacing: -2.56px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Gilroy-light, Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 100%;
}

//.case-item-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    display: flex;
}

//.case-item-wrap._01 {
    width: 100%;
    max-width: 1000px;
}

//.w-inline-block {
    max-width: 100%;
    display: inline-block;
}

//.case-item-image-wrap {
    border-radius: 26px;
    height: 700px;
    overflow: hidden;
}

//.case-item-image-wrap a {
    color: #ffffff;
    letter-spacing: -.36px;
    font-family: HelveticaNeue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    text-decoration: none;
    display: inline-block;
}

//.case-study-image {
    object-fit: cover;
    //border-radius: 15px;
    width: 100%;
    height: 110%;
}

//.case-single-title {
    letter-spacing: -.96px;
    font-family: 'Unbounded';
    font-size: 26px;
    line-height: 100%;
    font-weight: 400;
	color: #ffffff;
}

//.case-single-ctg-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex;
	text-align: right;
	line-height: 1;
}

.case-right-top-wrap
{
    transition-duration: 1s;
    display: grid;
    grid-template-columns: 1fr 1fr;
	margin-top: 4rem;
}


//.case-item-wrap._02 {
    width: 100%;
    max-width: 700px;
}

.w-inline-block {
    max-width: 100%;
    display: inline-block;
}

//.case-title-details-wrap {
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
}

//.case-right-top-wrap {
    margin-left: auto;
	display: flex;
    flex-direction: column;
    gap: 2rem;
	//padding: 4rem 0;
}

//.case-item-wrapper._02 {
    justify-content: flex-start;
    align-items: flex-end;
}

.section-sub-title-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
	font-family: "Gerhaus";
}

.sectionsub-dots {
background-color: #000000;
    width: 100px;
    height: 2px;
}

.section-sub-title {
    text-transform: uppercase;
    font-size: 16px;
	color: #000;
    font-family: 'Gerhaus';
}

.works-header .section-sub-title {
    text-transform: uppercase;
    font-size: 16px;
	color: #ffffff;
    font-family: 'Gerhaus';
}

.works-header .sectionsub-dots {
    background-color: #ffffff;
    width: 100px;
    height: 2px;
}

.works-header .heading-row-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: #ffffff;
    font-family: 'Gerhaus';
}

//.case-study-right-title {
    margin-top: 32px;
    margin-bottom: 32px;
}

//.case-study-details {

}

//.case-single-year-text {
    color: #c3c3c3;
    font-family: HelveticaNeue, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 124%;
	    font-family: "IBM Plex Mono", monospace;
    font-style: normal;
    letter-spacing: -0.5px
}

//.case-single-ctg-text {
	color: #c3c3c3;
    font-size: 16px;
	    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.5px
}

//img.case-study-image {
will-change: transform;
  transition: transform 0.25s ease-out;
  transform-style: preserve-3d;
}

//.case-study-image img {
  will-change: transform;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

//.case-study-image img {
  will-change: transform;
  transition: transform 0.2s ease-out; /* Плавный переход */
  transform-style: preserve-3d;
}

//.case-right-wrap .mod-menu.mod-list.nav .nav-item a,
.case-right-wrap .mod-menu.mod-list.nav .nav-item a > span::before
{
	color: #000;
	font-family: 'Poiret One';
    font-size: 46px;
    font-weight: bold;
    text-transform: uppercase;
}

.article-header-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
	justify-content: space-between;
}

.page-header h1
{
    font-size: 4rem;
}

.page-header h1:first-letter
{
    font-size: 8rem;
	color: #c3c3c3;
}

.article-info__list
{
display: flex;
    justify-content: space-between;
	color: #c3c3c3;
}

.article-info__desc
{//font-size: 40px;
    text-transform: uppercase;
	mix-blend-mode: difference;
	color: #c3c3c3;
}

.article-info__desc .fa
{font-size: 46px;
}


/********button and cursor******/

.cta-wrapper {
    position: relative;
  max-width: 1000px;
margin: auto;
    overflow: hidden;
	text-align: center;
  }

  .cta-btn-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    
  }

  .cta-btn-wrap.visible {
    opacity: 1;
  }
  
  /* Стили самой кнопки (пример) */
  //.primary-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ffffff;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    user-select: none;
        position: relative;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    background: #e21d37;
    font-size: initial;
    font-family: pt-sans;
    color: #ffffff;
    transition: all 0.3s ease 0s;
    width: fit-content;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 14px;
}

.home-hero-heading .cta-btn-wrap2 {
    height: auto;
    width: 600px;
    position: absolute;
    bottom: 2rem;
    left: 37%;
	border: 0px !important;
    box-shadow: none;
	//transition: all 1s;
	transition: opacity 1s ease-out 1s !important;
	//transition: transform 1.5s 1.5s !important;
	
	transform: translateY(100px);
    transition: all 0.5s !important;
}

//.cta-btn-wrap2
{
height: fit-content;
    width: 28%;
    /* border: 0 !important; */
    /* border-radius: 8px; */
    /* backdrop-filter: blur(0); */
    /* display: flex; */
    /* background: #673ab700; */
    /* align-items: center; */
    /* justify-content: center; */
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
    perspective: 800px;
    /* cursor: pointer; */
    position: absolute;
    transition: box-shadow 0.15s ease;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	z-index: 2;
}

//.cta-btn-wrap2.tilted {
  box-shadow:
    2px 2px 0 0 #ffffff54,
    -2px -2px 0 0 #ffffff54; 
}

//.cta-btn-wrap2:before {
  position:absolute;
  content:'';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14%;
  background: #0000004f;
  z-index: 99999;
  /* backdrop-filter: blur(39px); */
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 23%) 27%, #08090a 72%);
  backdrop-filter: blur(0px);
}

/*** cta-wrapper-picture ****/

.cta-wrapper-picture {
  position: relative;
  height: auto;
  //max-width: 1000px;
      margin: auto;
    text-align: center;
	padding: 4rem 5rem;
}

.picture-items-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;        /* ← чтобы container двигается */
  height: 300px;
    opacity: 1;
    will-change: transform, opacity;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer .cta-wrapper-picture .case-gray-text {
  font-size: 10rem;
  line-height: 1;
  position: relative;  /* ← чтобы текст поверх картинок */
  z-index: 0;
  text-align: center;
  color: #a7a7a74d;
  max-width: fit-content;
      text-transform: uppercase;
}

.footer .cta-wrapper-picture .case-gray-text span.active {
    color: #e8e8e8;
}

.picture-item {
  display: block;
  position: absolute;
  width: 300px;
  height: 300px;
  opacity: 0;          /* ← все картинки скрыты по умолчанию */
  transition: opacity 0.3s ease;  /* ← плавная смена */
}

.picture-item:first-child {
  opacity: 1;          /* ← первая видна сразу */
}

.picture-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; /* ← красиво */
}
.cta-wrapper {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.picture-items-bg {

}

.picture-item {
  position: absolute;
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 0;
  left: 0;           /* ← все картинки в одном месте */
}

.picture-item:first-child {
  opacity: 1;
}

.picture-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**************/

.page-top
{
    display: grid;
    grid-template-columns: 50% 50%;
	margin-bottom: 4rem;
    position: relative;
//background: #181818;
}

/***error 404***/


.page-404 .site-grid {

}

.page-404 .container-component
{
text-align: center;
}

.error-404 img {
    max-width: 480px;
    height: auto;
}

.error-404 a {
    cursor: pointer;
color: #ffffff;
    font-weight: 400;
}

.page-404 .menu-btn-bg
{
    display: none;
}

.item-pagepage-404 .page-top
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
	gap: 0;
}


/* Назад в работах */
.case-back
{

}

.case-back img
{
    transform: rotate(180deg);
    width: 100%;
    height: auto;
}

.case-back a
{
color: #c3c3c3;
    border-radius: 50px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column-reverse;
    align-items: flex-start;
	width: fit-content;
	    font-size: 14px;
    text-transform: uppercase;
}

/********Время below-top********/

#current-time
{
    font-size: 14px;
    padding: 0;
    margin: 0;
    right: -1px;
    position: relative;
	color: #c3c3c3;
}

.timezone
{
	color: #808080;
}

/********breadcrumbs********/

.mod-breadcrumbs
{
display: flex;
flex-direction: row;
color: #ffffff;
padding: 0;
    margin: 0;
    padding-top: 3rem;
	gap: 4px;
}

.breadcrumb-item a
{
color: #ffffff;
padding-right: 4px;
}

.breadcrumb-item a:hover
{
color: #4de197;
}

li.breadcrumb-item 
{
	position:relative;
}

li.breadcrumb-item:after
{
	content:'/';
}

li.breadcrumb-item:last-child:after
{
	content:'';
}

.bread_note
{
color: #4de197;
}

.bread-header
{
    background: #ebebeb;
    padding-left: 5rem;
	padding-top: 3rem;
    padding-bottom: 3rem;
	text-transform: uppercase;
}

/***blog***/

[class*=blog-items] {
    //max-width: var(--max-container-width);
    //box-sizing:content-box;
    //margin:0 auto;
    //padding: 0 calc(var(--container-padding) / 2);
}

.blog-item
{
display: flex;
flex-direction: column;
row-gap: 1rem;
position: relative;
//border-bottom: 1px solid #c3a98a;
//padding: 2rem;
}

.blog-item:nth-child(2n+1)
{
	
}

@media (min-width: 40.625em) {
    .blog-item:nth-child(1) {
        grid-row:1/5
    }

    .blog-item:nth-child(1) img {
        //max-width: 42.9375rem;
    }

    .blog-item:nth-child(2) {
        grid-row: 1/4
    }

    .blog-item:nth-child(3) {
        grid-row: 1/4
    }

    .blog-item:nth-child(4) {
        grid-row: 5/9
    }

    .blog-item:nth-child(5) {
        grid-row: 4/9;
        grid-column: 2/4
    }

    .blog-item:nth-child(5) img {
        aspect-ratio: unset;
    }
}

@media (min-width: 40.625em) {
    .blog-item:nth-child(6) {
        grid-row:9/13
    }

    .blog-item:nth-child(7) {
        grid-column: 2/4;
        grid-row: 9/14
    }

    .blog-item:nth-child(7) .portfolio-card__image {
        aspect-ratio: 997/923
    }

    .blog-item:nth-child(8) {
        grid-row: 13/17
    }

    .blog-item:nth-child(9) {
        grid-row: 14/17
    }

    .blog-item:nth-child(10) {
        grid-row: 14/17
    }
	
	.blog-item:nth-child(11) {
        grid-row: 17/17;
    }

	.blog-item:nth-child(12) {
        grid-row: 17/19;
        grid-column: 1 / 3;
    }
	
	.blog-item:nth-child(13) {
        grid-row: 18 / 18;
        grid-column: 3 / 3;
    }
	
	.blog-item:nth-child(14) {
        grid-row: 19;
        grid-column: 2 / 4;
    }
	.blog-item:nth-child(16)
	{
    grid-row: 21 / 22;
    grid-column: 3 / 3;
}

.blog-item:nth-child(17)
{
    grid-row: 21 / 23;
    grid-column: 2 / 3;
}

.blog-item:nth-child(18)
{
    grid-row: 20 / 22;
    grid-column: 2 / 2;
}

}

.blog-item .item-image {
	height: 100%;
	width: 100%;
	position:relative;
	aspect-ratio: 1;
	background-color: grey;
	border-radius: 15px;
	overflow: hidden;
}



@media (any-hover: hover) {
    .blog-item .item-image:hover img {
	transform:scale(1.2)
}

//.case-study-image:hover img {
	transform:scale(1.2)
}

}

.blog-item .item-image:hover:after {
	opacity:1;
	scale: 1;
}

.blog-item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s;
	transition: transform .6s ease-in-out;
    filter: brightness(0.9);
}

.blog-item .item-image img:hover
{
	//transform: scale(1.15) !important;
}

//.blog-item .item-image
{
background: black;
 transition: all 0.3s;
}

//.blog-item .item-image img:hover
{
transform: rotate3d(2, 2, 1, 7deg) !important;
}

.blog-item .page-header h2 {
    font-size: 26px;
    padding: 0;
    margin: 0;
    line-height: 80%;
	font-weight: 400;
	letter-spacing: -.96px;
}

.blog-item .page-header h2 a {
    padding: 0;
    margin: 0;
}

.intro-blog-item {
    position: relative;
	overflow: hidden;
}

.video-preview
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
	width: 100%;
	height: 100%;
}

.video-preview video
{
    width: 100%;
    position: relative;
    margin: auto;

	height: 100%;
    display: block;
    object-fit: cover;
}

.intro-blog-item .simpleParallax
{
width: 100%;
	height: 100%;
}

.intro-blog-item ul.tags
 {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 10px;
	//row-gap: 10px;
    //position: absolute;
    //top: 16px;
    //left: 16px;
	//margin-right: 16px;
    //z-index: 5;
}

.blog-item .item-content
{display: flex;flex-direction: column;/* position: absolute; */bottom: 0;left: 0;/* padding: 2rem; *//* color: #d5d5d5; */gap: 10px;}

.columns-2 .group-wrapper
{
--grid-rows-gutter: 80px;
    --grid-rows: 30;
    --grid-row-width: calc((1fr - var(--grid-rows-gutter) * (var(--grid-rows) - 1)) / var(--grid-rows));
    display: grid;
    grid-template-columns: var(--col-w-5) 1fr 1fr;
    grid-template-rows: repeat(30, var(--grid-row-width));
    row-gap: 80px;
	//display: grid;
	//grid-template-columns: repeat(2, 1fr);
	padding: 3rem 5rem;
	padding-top: 0;
	gap: 3rem;
}

.columns-3
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}

.columns-4
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
}

.myDiv2 {
    transform: scale(1.3);
}


/*******last works*****/

.mod-articlescategory
{
    padding: 0 5rem;
    line-height: 1;
	display: flex;
   flex-direction: column;
   gap: 2rem;
}

.mod-articles-category-group
{
	font-size: 1.8rem;
}

.mod-articlescategory ul
{
    padding: 0;
    margin: 0;
	display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.mod-articlescategory ul li a
{
	font-size: 1.8rem;
    font-family: poiret one;
    font-weight: bold;
}

.mod-articlescategory li ul li
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mod-articles-category-tags ul.list-inline
{
    display: flex;
    justify-content: flex-end;
}

/**** proandrov-block2 ****/

.proandrov-block2-top
{
position: relative;
    margin: 2rem 5rem;
}

.proandrov-block2
{
  display: grid;
    grid-template-columns: 1fr 50%;
  color: #ffffff;
  align-items: end;
}

.proandrov-block2-top h1
{
    color: #ffffff;
}

img.proandrov-data2-img
{
  width: 100%;
height: 100%;
    object-fit: cover;
}

img.proandrov-krest-white
{height: 16px;
z-index: 4;
}

.proandrov-block2-item-col1
{
  display: flex;
    justify-content: space-between;
	flex-direction: column;
}

.proandrov-block2-item-col2
{
  display: flex;
    justify-content: space-between;
}

.grids_guide_wrap.u-grid-custom {
    position: absolute;
    inset: 0%;
  z-index: -1;
}

.u-grid-custom {
    grid-column-gap: 20px; /* ✅ Ваш интервал 20px */
    grid-row-gap: 20px;
    --_column-count---value: 12;
    grid-template-rows: auto;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(var(--_column-count---value), minmax(0, 1fr));
    flex-flow: column;
    display: grid;
}

.grids_guide_item {
    width: var(--max-width--full);
    height: var(--max-width--full);
    background-color: #282828; /* ✅ Серый цвет */
    display: block;
  z-index: 1;
}

/***Services***/


.service-heading-all
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 5rem;
    color: #000000;
    z-index: 1;
    position: relative;
    gap: 3rem;
}

.heading-row-left
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
	color: #000;
    font-family: 'vivl';
}

.heading-row-right
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	color: #000000;
}

.services-card
{
    padding: 4rem 5rem;
    background: #4d4c4c;
    background: linear-gradient(190deg, rgba(8, 9, 10, 1) 0%, rgba(31, 31, 31, 1) 100%);
    background: #080c0e  url(/images/hands-proandrov.avif);
background-attachment: fixed;
background-size: 100% auto;
    background-position: center;
	    background-repeat: no-repeat;
}

//.services-card3
{
    padding: 6rem 5rem;
    //background: #08090a;
	//background: #181818;
	    //background: #10120f;
    //background: linear-gradient(190deg, rgba(8, 9, 10, 1) 0%, rgba(31, 31, 31, 1) 100%);
    //background: #020204 url(/images/rocks-proandrov.webp);
background-attachment: fixed;
background-size: 100% auto;
    background-position: bottom;
	    background-repeat: no-repeat;
}

.services-card3 {
	margin: 6rem 0;
    padding: 6rem 5rem;
    /* background-attachment: fixed; */
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-radius: 47px;
}

.services-item {
	position: relative;
    //display: flex;
    //gap: 4rem;
    //flex-direction: column;
}

.services-item:nth-child(2)
{
	//background: #161717;
	//background: #161117;
	//background: #ffffff;
    //color: #000000;
    //justify-content: space-between;
}

.services-item .Deep-Black .djtab-custom-html {
    position: relative;
    text-overflow: ellipsis;
    overflow: visible;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 1rem;
    font-family: monospace;
}

.services-item .Deep-Black .djtab-custom-html h2
{
    font-family: monospace;
    font-weight: 100;
}

.services-item .Deep-Black .djtab-custom-html:after {
    display: block;
    position: absolute;
    content: '';
    top: 74px;
    right: 19px;
    width: 18px;
    height: 18px;
    border-bottom: 2px solid;
    border-left: 2px solid;
    transform: rotate(-180deg);
    transition: all 0.2s;
    border-color: #000000;
}

.services-item .djtab-custom-html img {
    border: 0;
    border-radius: 50%;
    width: 72px;
    height: auto;
    padding: 20px;
    overflow: auto;
    overflow-clip-margin: border-box;
    filter: invert(0);
    position: relative;
	background: #000000;
}

.services-item .djtab-custom-html div:nth-child(1) {
    position: relative;
}

.services-item .djtab-custom-html div:nth-child(1):before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #673ab7;
    z-index: -1;
    border-radius: 100px;
    right: 10%;
    bottom: 5%;
    transition: all .3s;
}

.services-item .djtab-custom-html div:nth-child(1):after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #FFC107;
    z-index: -1;
    border-radius: 100px;
    left: 10%;
    top: 5%;
    transition: all .3s;
}

.services-item .Deep-Black .djclear {
    clear: both;
    color: #000000;
}

.services-item .Deep-Black .djtabs-in {
    margin: 2rem 0;
}

.services-item .djtabs-in .custom-text
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.services-item .djtabs-in .custom-text img
{
    width: 100%;
    height: auto;
}

//.service_img {
    //width: 420px;
    position: relative;
	display: flex;
    justify-content: center;
    padding: 0 5rem;
}

//.service_img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
}

//.service_img:after
{
	position: absolute;
	content:'';
	width: 80%;
	height: 60%;
	background: #673AB7;
	z-index: -1;
	bottom:20%;
	border-radius: 25% 75% 61% 39% / 41% 71% 29% 59%;
	transition: all 0.5s;
	animation: rotate 20s linear infinite;
}

//.service_img:hover:after {
border-radius: 71% 29% 19% 81% / 69% 55% 45% 31%;
}

.about-years img.service_img
{
    width: 420px;
    height: auto;
    object-fit: contain;
    position: absolute;
    z-index: -1;
    top: -33%;
    left: -30%;
}

.services-item-card
{
    background-color: #fff;
    position: relative;
}

.services-item-card:hover .icon-box
{
	box-shadow: 4px 4px 0px #c3a98a, -4px -4px 0px #009688;
}

.services-item-text
{
display: flex;
    gap: 2rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.services-item-all
{
//display: grid; 
//grid-template-columns: 70% 1fr; 
//gap: 4rem;
}

.services-item-block
{
display: grid; 
flex-wrap: wrap; 
grid-template-columns: 1fr 1fr 1fr; 
align-items: start;
gap: 1rem;
}

.services-item-block .tags-service {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
	row-gap: 2px;
	z-index: 5;
}

//.services-item-block .tags-service:before,
.tags-blog:before ,
ul.tags:before{
content:'{';
	font-family:monospace;
	color: #673AB7;
	position: relative;
}

//.services-item-block .tags-service:after,
.tags-blog:after,
ul.tags:after {
content:'}';
	font-family:monospace;
	color: #673AB7;
}

.services-item-block-in 
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 4rem;
    height: 100%;
    align-items: stretch;
    justify-content: space-between;
    box-shadow: inset 0px 2px #ffffff1a;
    border: 1px solid #ffffff17;
    /* backdrop-filter: blur(30px); */
    /* backdrop-filter: blur(100px); */
    color: #000000;
    background: #dcdcdc;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    z-index: 9999;
}

//.services-item-block-in::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0; /* охватывает весь блок */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 20 20'%3E%3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' /%3E%3C/filter%3E%3Crect width='20' height='20' filter='url(%23noise)' opacity='0.1' /%3E%3C/svg%3E");
  background-repeat: repeat;
  z-index: 1;
}

.services-item-block-in  h5
{
font-family: 'Gilroy-light2';
    font-size: 28px;
    font-weight: 100;
    padding: 0;
    margin: 0;
	line-height: 1.4;
}

.services-item-block-in .service-item-block-in-in-text
{
		font-size: 20px;
		    line-height: 1;
			color: #ffffff;
}

.service-item-block-in-in-allinone
{
display: flex;
    flex-direction: row;
    gap: 1rem;
    background: #ffffff30;
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    align-items: center;
	justify-content: space-between;
}

.services-item-block-in p
{
	//color: #c3c3c3;
color: #000000;
}

.services-item-block-in h4
{
color: #000000;
    font-family: 'vivl';
    font-weight: 400;
    letter-spacing: 0.56px;
	line-height: 1;
}

.services-item-block-in .tagitit {
    color: #000000;
    border: 1px solid #b7b7b7;
    border-radius: 50px;
    white-space: nowrap;
    cursor: default;
    font-family: monospace;
    position: relative;
    padding: 4px 10px;
    font-size: 14px;
}

.services-nomber
{
    display: flex;
    align-items: center;
    font-family: 'vivl';
    gap: 4px;
}

.service-item-block-in-in
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: flex-start;
	z-index: 5;
}

/* ВАШИ стили остаются */
.services-item-block-in:first-child {
    height: 100%;
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    background-image: url(/images/bg/proandrov-robot.jpg);
    background-size: cover;
    background-position: center;
    position: relative;  /* ДОБАВИТЬ */
}

/* НОВЫЙ псевдоэлемент */
.services-item-block-in:first-child::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(/images/bg/proandrov-robot-glass3.png);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 2;
}

.services-item-block-in:first-child:hover::before {
    opacity: 1;
}

/* УДАЛИТЬ старый :hover с background */



//.services-item-block-in:first-child::before {
    content: "";
    width: 100%;
	height: 100px;
	left: 0;
	top: auto;
	bottom: -100px;
    position: absolute;
//background: #131414;
background: #08090a;
}

//.service-item-block-in-in-img
{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-item-block-in:first-child img {
    
}

.services-item-block-in:nth-child(2)
{
	//grid-column-start: 3;
}

.services-item-block-in:nth-child(3)
{
	/grid-column-start: 4;
}

.services-item-block-in:nth-child(4)
{
//grid-column-start: 1;
	//grid-row-start: 2;
}

.services-item-block-in:nth-child(5) {
//grid-column-start: 2;
	//grid-row-start: 2;
}

/**blur прозрачно сервисы**/

//.services-item-block-in:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90%;
    background: rgb(0 0 0 / 38%);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to bottom, #00000000 0%, black 50%);
    z-index: 2;
}

.services-item-block-in:first-child:after {
  display: none;
}

/*****анимация для :nth-child(5) ****/

//@keyframes bgMove {
    0% {
        //background-size: 120%;
        background-position: 30% 20%;
    }
    100% {
        background-position: 80% 80%;
    }
}

//@keyframes shimmer {
  0% {
        background-size: 120%;
        background-position: 50% 50%
    }
    20% {
        background-size: 150%;
        background-position: 0 50%;
    }    
    40% {
        background-size: 110%;
        background-position: 20% 80%;
    }
    60% {
        background-size: 160%;
        background-position: 60% 10%;
    }
    80% {
        background-size: 120%;
        background-position: 40% 70%;
    }    
    100% {
        background-size: 120%;
        background-position: 50% 50%
    }
}


//.services-item-block-in:last-child
{
    //background: #000000;
    color: #f5f5f5;
	background: linear-gradient(#2a274200, #05013a99), url(/images/mockups/Proandrov-mockup4.png) 50% 30% no-repeat;
background-size: cover;
grid-row-start: 2;
grid-column-end: 5;
justify-content: center;
width: 100%;
    height: 100%;
}

.services-item-block-in:last-child:after
{
	background-image: none;
}

.services-item-block-in .cta-btn-wrap
{
    opacity: 1;
	transform: translate3d(calc(-50% + 9.06609px), calc(-50% + 8.1452px), 0px);
}

.services-item-block-in:nth-child(1).element-animation.element-show {
    transition-delay: 0.20s;
}

.services-item-block-in:nth-child(2).element-animation.element-show {
    transition-delay: 0.40s;
}

.services-item-block-in:nth-child(3).element-animation.element-show {
    transition-delay: 0.60s;
}
.services-item-block-in:nth-child(4).element-animation.element-show {
    transition-delay: 0s;
}

.services-item-block-in:nth-child(5).element-animation.element-show {
    transition-delay: 0.100s;
}

.services-item-block-in:nth-child(6).element-animation.element-show {
    transition-delay: 0.120s;
}

.service-number-line
{
    border: 1px solid;
    height: 1px;
    width: 100%;
    max-width: 50%;
}
	
//.services-item-block-in:nth-child(4) h4
{
    background-image: linear-gradient(108deg, #b2a7c7 8%, #bf90a0 40%, #a290cb 77%, #7e7abd 91%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

//.services-item-block-in:last-child 
{
    background: url(/images/phone-02.webp) bottom -77px right 11px / auto 63% no-repeat;
}

.services-item-block-in:last-child a img {
    width: 80px;
    height: auto;
}


.allinone
{
    display: grid;
    grid-template-columns: 40% auto;
    gap: 3rem;
    position: relative;
    height: 100%;
    align-items: start;
    max-width: 1400px;
    margin: auto;
}

.mod-allinone
{
    overflow: hidden;
    position: sticky;
    top: 130px;
    margin: 3rem 0;
}

.home-hero-content-inner2 .services-item-text {
    display: flex;
    gap: 60px;
    flex-direction: column;
	color: #ffffff;
}

.home-hero-content-inner2 .services-item-text2
{
    position: relative;
}

.services-item-text p
{
	position: relative;
color: #ffffff;
background: #673AB7;
	padding: 2rem;
	font-family: 'monospace', sans-serif;
	font-size: 2.1rem;
margin: 2.5rem 0;
}

.services-item-text p:after
{
	position: absolute;
color: #FFC107;
content:'"';
	font-size: 9rem;
	font-family: 'Antonio', sans-serif;
	left:0;
	top:0;
}

.service-box-item {
    display: flex;
    gap: 2rem;
}

.service-box-item h4
{
	text-transform:uppercase;
}

.service-box-item img
{
	width: 100%;
    height: auto;
}

.service-box-item-icons
{
display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
	align-items: center;
}

.home-hero-content-inner .services-item-text h5,
.home-hero-content-inner2 .services-item-text h5
{
color: #ffffff;
text-transform: uppercase;
}

.item_title span
{
	text-transform: uppercase;
}

.item_title span,
.services-item-text span,
.works_default-text span,
.about-home-item:first-child span,
.about-years span,
.questions-home-item span
{
    font-size: 1.7rem;
    color: #c3c3c3;
    font-family: monospace;
	text-transform: uppercase;
	line-height: 100%;
	font-style: italic;
}

.item_title span:before,
.services-item-text span:before,
.works_default-text span:before,
.about-home-item:first-child span:before,
.about-years span:before,
.questions-home-item span:before
{
	content:'<';
}

.item_title span:after,
.services-item-text span:after,
.works_default-text span:after,
.about-home-item:first-child span:after,
.about-years span:after,
.questions-home-item span:after
{
	content:'/>';
}

.services-item-text h2 
{
font-family: monospace;
display: flex;
    gap: 6px;
}

//.item_title h2 span, 
.services-item-text h2 span, 
.works_default-text h2 span, 
.about-home-item:first-child h2 span, 
.about-years h2 span,
.questions-home-item h2 span {
    font-size: 3.6rem;
	color: #fff73f;
	color: #673AB7;
	font-family: monospace;
	font-style: italic;
}

.questions-home-item h2:before,
.services-item-text h2:before
{
	content:'{';
	color: #673AB7;
	font-family: 'Gilroy-light2';
}

.questions-home-item h2:after,
.services-item-text h2:after
{
	content:'}';
	color:#673AB7;
	font-family: 'Gilroy-light2';
}

.card-padding {
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 62px 1fr;
	gap: 2rem;
}

.card-padding-item
{
display: flex;
    flex-direction: column;
    gap: 20px;
}

.who-i-am
{
    height: 100vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 46px;
    background: #757575;
    flex-direction: column;
    background: linear-gradient(150deg, rgba(66, 66, 66, 1) 0%, 
	rgba(0, 0, 0, 1) 17%, rgba(117, 115, 115, 1) 49%, 
	rgba(51, 51, 51, 1) 84%, rgba(46, 45, 45, 1) 100%);
}

.who-i-am img
{
position: absolute;
    width: 300px;
    height: auto;
}

/*******100+ бесконечность*********/

.first-screen-pictures {
position: relative;
display: flex;
margin-bottom: 0.7291666667vw;
	transition:all .2s;
}

.first-screen-pictures-img 
{width: 2.5vw;
 height: 2.5vw;
 margin-left: -0.625vw;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 2.5vw 2.5vw;
 mask-size: 2.5vw 2.5vw;
 /-webkit-mask-image: url("https://mphvostok.ru/local/templates/cult/img/icons/moon-mask-icon.svg"); 
 /mask-image: url("https://mphvostok.ru/local/templates/cult/img/icons/moon-mask-icon.svg") !important; 
 -o-object-fit: cover;
 object-fit: cover;
 border-radius: 50px;
}

.first-screen-pictures-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #673ab7;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    margin-left: -0.4166666667vw;
}

.first-screen-pictures-icon img {
    width: 1.4583333333vw;
    height: 0.7291666667vw;
    -o-object-fit: cover;
    object-fit: cover;
}

/***more works***/

.more_works
{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.more_works-1
{
	position: relative;
	border-top: 1px solid #c3a98a;
    border-bottom: 1px solid #c3a98a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
	align-items: flex-start;
}

.more_works-1:nth-child(2)
{
	border-right: 1px solid #c3a98a;
	border-left: 1px solid #c3a98a;
}

.more_works-1 .rotate-arrow
{
	width: 36px;
}

.more_works-1 img
{
	width: 100%;
}

.mockups
{
    margin-top: 6rem;
}

#service
{
    scroll-margin-top: 140px;
}

.text-color-background 
{
position: relative;
    margin-top: 6rem;
    display: grid;
    grid-template-columns: 50% auto;
    gap: 4rem;
    //max-width: 1400px;
}

.text-color-background-img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

//.text-color-background-img
{
    background: #151518;
}

//.text-color-background-img img:hover {
    transform: rotate3d(2, 2, 1, 7deg);
}

.text-color-background-block
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
	justify-content: flex-end;
    height: 100%;
}

.text-color-background  h3
{
font-size: 5rem;
    white-space: nowrap;
    text-align: center;
}

.text-color-background-block-grid
{
display: flex;
flex-direction: column; 
//font-family: 'Poiret One', sans-serif; 
//font-size: 24px;

    line-height: 1.2;
	//font-weight: bold;
}

.text-color-background-block-grid div
{
    padding: 4rem 5rem;
	position: relative;
	border-bottom: 1px solid #000000;
	display: flex;
    flex-direction: column;
    gap: 2rem;
}

.text-color-background-block-grid div:after
{
	position: absolute;
	content:'01';
	right:10px;
	bottom:40px;
	font-family:roboto;
	font-weight:bold;
	font-size: 86px;
	color:#673ab73d;
	-webkit-text-stroke: 0; 
}

.text-color-background-block-grid div:nth-child(1)
{
//border-bottom: 1px solid #c3a98a;
//border-right: 1px solid #c3a98a;
}

.text-color-background-block-grid div:nth-child(2)
{
//border-bottom: 1px solid #c3a98a;
}

.text-color-background-block-grid div:nth-child(3)
{
   // border-right: 1px solid #c3a98a;
}

.text-color-background-block-grid div:nth-child(2):after
{
	position: absolute;
	content:'02';
}

.text-color-background-block-grid div:nth-child(3):after
{
	position: absolute;
	content:'03';
}

.text-color-background-block-grid div:nth-child(4):after
{
	position: absolute;
	content:'04';
}

.text-color-background-block-grid div span
{
text-transform: uppercase;
    font-family: 'Poiret One', sans-serif;
    font-weight: bold;
    font-size: 30px;
	display: flex;
    align-items: flex-end;
    flex-direction: row;
    gap: 4px;
}

.text-color-background-img a {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:3;
}

//.text-color-background-img a:after {
	display: flex;
	position:absolute;
	content: 'VIEW ALL';
	top: 40%;
	left: 40%;
	width: 120px;
	color: #000000;
	height: 120px;
	background: #fff73f;
	transition: all 0.3s;
	opacity:0;
	border-radius: 500%;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	scale: 0;
}

.text-color-background-img a:hover:after {
	opacity:1;
	scale: 1;
}

.text-color-background-img:hover a {
	opacity:1;
	scale: 1;
}

//***service-box***//

.service-box
{
	display: grid;
    width: 100%;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    -ms-grid-columns: 1fr 1fr ;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.icon-box {
position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    //width: 60px;
    //height: 60px;
    //margin-bottom: 16px;
    -webkit-box-pack: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: center;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    //border-radius: 100px;
	//background: #151518;
}

.icon-box img {
    max-width: 60px;
	filter: invert(1);
}

//.icon-box:after
{
	position:absolute;
	content:'';
	width:100%;
	height: 100%;
	background:#fff73f;
	background: #673ab7;
	z-index:-1;
	border-radius: 100px;
	left: 10%;
	top: 5%;
	transition: all .3s
}

//.icon-box:before
{
	position:absolute;
	content:'';
	width:100%;
	height: 100%;
	background: #FFC107;
	z-index:-1;
	border-radius: 100px;
	right: 10%;
	bottom: 5%;
	transition: all .3s
}

.services-item-block-in:hover .icon-box:after,
.services-item-block-in:hover .icon-box:before
{
	width:105%;
	height: 105%;
}
.services-about
{
max-width: 1400px;
    margin: auto;
}

.years-bg
{
overflow: auto; 
color: #ffffff; 
gap: 2rem; 
display: flex; 
flex-direction: column;
}

.about-years .services-item {
    gap: 50px;
}

.about-years .services-card {
    margin: 12rem 0;
    //margin-bottom: 8rem;
}

.years-bg-item2
{
    display: flex;
    flex-direction: row;
    font-family: 'Poiret one';
}

.years-bg-item2 span
{
    font-weight: 100;
}

.years-bg-item2 span:last-child
{
    font-size: 2rem;
    font-weight: 100;
}

.years-bg h4
{
    line-height: 1.7;
    font-weight: 100;
}

.years-bg h4 span
{
    color: #c3a98a;
    background: black;
    padding: 2px 10px;
    font-size: 2.5rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.years-bg h4 span:last-child
{
    background: #c3a98a;
    color: #000000;
}

.about-years h3,
.services-item-text h3
{
//font-family: 'Poiret One';
    //font-weight: 700;
    //line-height: 90%;
    //-webkit-text-stroke-width: thin;
    //letter-spacing: 0.56px;
}

/***horizontal***/

#horizontal1
{
position: absolute;
    top: 10%;
    right: -20%;
	transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.about-home
{

padding: 0 4rem; 

}

.about-home-item
{
gap: 2rem;
    display: flex;
    flex-direction: column;
}

.about-home-inner
{
display: grid;
    gap: 4rem;
    justify-content: space-between;
    grid-template-columns: 1fr 40%;
	color: #ffffff;
}

.about-home-inner h2 {
    color: #a38e75;
}

.about-home-item:last-child
{
    gap: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-home-item:last-child p
{
    color: #000000;
	    width: 96%;
}

.questions-home {
    margin-top: 6rem;
	display: grid;
    grid-template-columns: 20% 1fr;
}

.questions .about-home-inner {
    display: flex;
    gap: 4rem;
    justify-content: space-between;
    color: #000000;
    flex-direction: column;
}

.questions h5
{color: #000000;}

.questions-home-inner {
    display: flex;
    gap: 4rem;
    flex-direction: column;
}

.rotate-item
{
position: absolute;
	right: 2%;
    bottom: 12rem;
    z-index: 2;
}

.rotate
{
    width: 144px;
    height: 144px;
    display: flex;
    background-color: rgb(255 255 255 / 20%);
    align-items: center;
    justify-content: center;
    color: #faebd7;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}

.rotate .rotate-arrow {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.rotate .rotate-text {
    position: absolute;
    width: 85%;
    height: 85%;
	 animation: rotate 20s linear infinite;
	 transform-style: preserve-3d;
    will-change: transform;
}

.rotate-item2
{position: absolute;right: 8%;top: 30%;z-index: 2;}

.rotate2
{
    width: 144px;
    height: 144px;
    display: flex;
    background-color: rgb(65 58 58 / 0%);
    color: #1a1a19;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rotate2 .rotate-arrow2 {

    color: #ffffff;
    font-size: 2rem;
    color: #c3a98a;
    font-size: 3rem;
    text;
}

.rotate2 .rotate-text2 {
    position: absolute;
    width: 85%;
    height: 85%;
	 animation: rotate 20s linear infinite;
	 transform-style: preserve-3d;
    will-change: transform;
}

@keyframes rotate {
  from {
 transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);

  }
  to {
 transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(360deg) skew(0deg, 0deg);

  }
}

.rotate a
{
position: relative;
    width: 45px;
    height: 45px;
    background: #161717;
	background: #151518;
    display: flex;
    justify-content: center;
    border-radius: 500%;
    align-items: center;
    padding: 2rem;
	transition: all 0.2s;
}

.rotate a:hover
{

    background: #0000005c;
    padding: 2.4rem;
}


/***********scroll hotiz mockup*****/

#pin-wrapper {
  overflow: hidden;
  width: 100vw;
  height: 600px;      /* желаемая общая высота */
  position: relative;
}

#scroll-container {
  display: flex;
  width: 200vw;       /* 4 блока по 50vw */
  height: 100%;
  flex-direction: row;
  gap: 2rem;
}

.text-color-background-img {
  width: 50vw;        /* ширина блока 50% окна */
  height: 600px;      /* высота */
  flex-shrink: 0;
  border-radius: 15px;
    overflow: hidden;
}

.text-color-background-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.text-color-background-img:first-child {
    width: 50vw;
    height: 600px;
    flex-shrink: 0;
    padding: 2rem;
    padding-left: 2rem;
	display: flex;
    flex-direction: column;
    gap: 3rem;
	width: calc(50vw - 9rem);
}

/***cursor_item***/

//.cursor_item
{
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.15s linear;
	    width: 45px;
    height: 45px;
    background: #c3a98a;
    display: flex;
    justify-content: center;
    border-radius: 500%;
    align-items: center;
    padding: 2rem;
	z-index: 999;
	pointer-events:none
}

//.cursor_item .rotate-arrow {
    width: 24px;
    height: 24px;
	transition: 0.15s linear;
}

//.cursor_item.hover .rotate-arrow {
    width: 14px;
    height: 14px;
}


//#circle.cursor_item.hover
{
	padding: 1.5rem;
	opacity: 0.3;
}

.cursor_item
{
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.15s linear;
	width: 45px;
	height: 45px;
	border: 1px solid #ffffff66;
	display: flex;
	justify-content: center;
	border-radius: 500%;
	align-items: center;
	padding: 1.8rem;
	z-index: 999;
	pointer-events:none;
	mix-blend-mode: difference;
}

.cursor_item .rotate-arrow {
    transition: 0.15s linear;
    color: #ffffff;
	font-size: 10px;
}

#circle.cursor_item.hover
{
	padding: 1rem;
	opacity: 0.3;
}

.cursor_item.hover2
{

	opacity: 1;
	mix-blend-mode: normal;
	position: fixed;
    border: 0px solid #ffffff66;
    display: flex;
    justify-content: center;
    border-radius: 500%;
    align-items: center;
	background:  #fff73f;
	background:  #eeff07;
	background:  #ffffff80;
	width: 100px;
	height: 100px;
	backdrop-filter: blur(5px);
	border-radius: 100px;
	
}

#circle.cursor_item.hover2 .fa-circle:before {

    content: '';
	background: url('/images/black-arrow-topright-vector.svg');
	width: 20px;
	height: 20px;
	color: #000;
	font-family: pt-sans;
	font-weight: 600;
	font-size: 1.5rem;
	background-size: cover;
	 display: block;
}

#circle.cursor_item.hover2
{
	padding: 1.5rem;
	opacity: 1;
}

/***call_me***/

.call_me-bg
{
padding: 0 5rem;
padding-bottom: 7rem;
    overflow: hidden;
}

.call_me
{
display: grid;
    grid-template-columns: 70% 1fr;
    //max-width: 1400px;
    margin: auto;
	//align-items: center;
}

.call_me-item
{
    display: flex;
    gap: 3rem;
    flex-direction: column;
	color: #ffffff;
}

.call_me-item p
{
	color: #c3c3c3;
}

.call_me-item a
{
	color: #ffffff;
}

.call_me img
{
width: 100%;
    height: auto;
	object-fit: contain;
	position: absolute;
    top: 0;
}

.call_me-item2
{
position: relative;
    display: flex;
    justify-content: center;
	align-items: flex-end;
}

//.call_me-item2:after {
    position: absolute;
    content: '';
    background: url(/images/two-wave2.png) no-repeat;
    background-size: contain;
    width: 200px;
height: 100%;
    top: 3rem;
    right: -2rem;
}

/********contact-group********/

.contact-item
{
position:relative;
border-bottom: 1px solid #c3c3c3; 
display: flex; 
align-items: center; 
justify-content: space-between; 
padding: 22px 5rem;
background: #ebebeb;
    transition: all 0.3s;
}

.contact-item:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scaleY(0);
    background: #000000;
    transition: transform .5s;
}

.contact-item:hover:before
{
transform: scaleY(1);
transform-duration: .4s;
}

/***works-type***/

.works-type-module
{

}

.works-type
{
	padding: 0 5rem;
    margin: 3rem auto;
	display: flex;
}
.works-type .case-gray-text
{
    max-width: 900px;
}

//.works-type>div:first-child
{
    flex: 1 70%;
}

//.works-type>div:last-child
{
    flex: 1 30%;
}

/***mockup***/

.mockup{
    display: grid;
    grid-template-columns: 60% 40%;
	max-height: 600px;
	overflow: hidden;
	align-content: center;
}

.mockup-item:nth-child(1)
{
    overflow: hidden;
}

.mockup-item:nth-child(1) img
{
width: 90%;
height: 100%;
}
	
.mockup-item:nth-child(2)
{
    display: flex;
	position: relative;
    align-items: center;
    justify-content: center;

}


.mockup-item-in
{
display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 4rem;

}


/***animation text***/

.currency_quotation {
    position: relative;
  padding: 2rem 0;
    width: 100%;
    overflow: hidden;
    //background: #f2f3f5;
	background: #ffffff;
	z-index: 5;
}

.animation-content {
position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  width:fit-content;
}

.text-animation {
  margin-top: 0px;
  margin-bottom: 0px;
  padding:0;
  color: #000;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
}

/***Simple.djtabs***/

.questions .Simple.djtabs
{
	margin-bottom:0;
	background-color: transparent;
	width: 100%;
}

.questions .djtabs .djtabs-title-wrapper
{
	border-top: 1px solid #dedede;
	padding: 10px 0;
}

.questions .djtabs .djtabs-title-wrapper:last-child
{
	border-bottom: 1px solid #dedede1a;
}

.questions .Simple .djtabs-title
{
	text-align: left;
	background:none;
}

.questions .djtabs .djtabs-title 
{
	border-bottom-style: none;
}

.questions .Simple .djtabs-accordion {
	height: auto;
	padding: 10px 0;
	border-radius: 0;
	white-space: normal;
	font-family: 'Gilroy-light2';
    font-size: 1.6rem;

}

.questions .Simple .djtabs-accordiondj.tabs-active:hover 
{
	color: #c3a98a;
}

.questions .djtabs-active-wrapper .djtabs-accordion 
{
	color: #000000;
}

.questions .Simple .djtabs-title.djtabs-accordion
{
	position: relative;margin-bottom: 0;
}
.questions .Simple .djtabs-title.djtabs-accordion:before 
{
	display: block;
	content: '';
	width: 19px;
	height: 2px;
	position: absolute;
	top: 30px;
	right: 0px;
	background: #000000;
	transition: all 0.3s;
}
.questions .Simple .djtabs-title.djtabs-accordion:after
{
	display: block;
	content: '';
	width: 19px;
	height: 2px;
	position: absolute;
	top: 30px;
	right: 0px;
	background: #000000;
	transform: rotate(90deg);
	transition: all 0.3s;
}

.questions .Simple .djtabs-title.djtabs-active:after 
{
	transform: rotate(0);
}

.questions .Simple .djtabs-in 
{
	margin: 14px 0;
}

.questions .Simple .djtabs-accordion .djtab-text {
display: block;
    margin-left: 0;
	padding-right: 2rem;
}

.big
{
    position: relative;
    background: #181818;
    color: #ffffff;
    overflow: hidden;
    padding: 11rem 0;
    margin: 6rem 0;
}

.big-item
{
    position: relative;
    max-width: 1400px;
    margin: auto;
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.big img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    filter: brightness(0.5);
	object-fit: cover;
}

.big h3
{
    text-transform: uppercase;
    color: #c3a98a;
}
.big p
{
    max-width: 800px;
}

.tags-service
{
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

.tagitit
{
    //background: #323235;
   // border: 1px solid rgba(255, 255, 255, .15);
   // color: #fff;
    //letter-spacing: .5px;
   // text-transform: uppercase;
   // white-space: nowrap;
   // padding: 0.4rem 0.7rem;
   // font-size: 18px;
   // cursor: default;
   // line-height: 1;
	//border-radius: 50px;
}

/***scroll opacity***/

.element-animation.element-show {
    opacity: 1;
    transition: all 1s;
    transform: translateY(0);
}

.element-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);
}

.text-size-xlarge.element-animation.element-show {
    opacity: 1;
    transition: all 1s;
    transform: translateX(0);
}

.text-size-xlarge.element-animation {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);
}

/****video face***/



//.video-face 
{
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 5;
	 transition: all 1.5s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);;
}

//.video-face
{
    position: absolute;
    right: 40%;
    bottom: 21%;
	transition: all 1.5s;
	z-index: 9;
}

.lets-talk-bg
{
	position:relative;
	background: #151518;
	padding: 4rem 20px;
	margin: 6rem 0;
	z-index: 1;
}

.lets-talk
{
    //display: grid;
    //color: #ffffff;
    margin: auto;
    //grid-template-columns: 1fr 50%;
    //align-items: center;
    //gap: 4rem;
	max-width: 1400px;
}

.lets-talk-item
{
    margin: auto;
    display: flex;
    gap: 4rem;
    flex-direction: column;
    align-items: flex-start;
	position:relative;
	z-index: 2;
}

//.lets-talk-item2
{
    position: relative;
    z-index: 99999;
}

.lets-talk-item2-img2 img
{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.lets-talk-item h4
{
    color: #c3c3c3;
}

.lets-talk-item2-img
{
    
}
//.video-face .rotate img
{
    position: relative;
	width: 120%;
}

//.video-face .rotate {
    width: 134px;
    height: 134px;
    background-color: rgb(195 169 138 / 58%);
	background: linear-gradient(271deg, rgb(103 58 183 / 83%) 0%, rgb(184 86 86 / 57%) 50%, #2c07ffad 100%);
//right: 10px;
   // bottom: 4rem;
    //position: fixed;
}

//.video-face .rotate a {
    position: absolute;
}

//.video-face .rotate-text {
    width: 120%;
    height: 120%;
	filter: invert(0);
}

.skills__video
{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: brightness(0.5);
}

.skill__video 
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.my_elements
{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.my_elements-item
{
	border: 1px solid #ffffff4f;
	border-radius: 50px;
	padding: 8px 17px;
	font-family: poiret one;
}

.contact-form
{
	//padding: 4rem 0;
	border-bottom: 1px solid #c3a98a;
    border-top: 1px solid #c3a98a;
}

.contact-form-inner
{
	grid-template-columns: 1fr 1fr;
    display: grid;
    max-width: 1400px;
    margin: auto;
    padding: 0 20px;
	    gap: 4rem;
}

.contact-form-item:first-child
{
display: flex;
    flex-direction: column;
    row-gap: 20px;
	padding: 2rem;
}

//.contact-form-item:nth-child(2) {
    display: flex;
    flex-direction: column;
	border-left: 1px solid #c3a98a;
}

.contact-form-item-img {
    position: relative;
}

.contact-form-item span.contact-form-span
{
font-size: 4rem;
color: #c3a98a;
font-weight: bold;
font-family: 'Poiret One', sans-serif;
line-height: 1;
}

.contact-form-item .social-link  {
    display: flex;
	flex-direction: row;
	gap: 10px;
}

.contact-form-item .social-link .fa {
    border: 1px solid;
    color: #b7b5b5;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
	background-color: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.15);
}

.modernes-webdesign img
{
    width: 90%;
	max-width: 1100px;
    height: auto;
}

.module-header
{
display: flex;
    flex-direction: row;
	justify-content: space-between;
	    width: 100%;
		margin: 3rem 0;
		position: relative;
}

.module-header .contact-form-span
{
    font-size: 4rem;
	color: #c3a98a;
    font-weight: bold;
    font-family: 'Poiret One', sans-serif;
}

.module-header-text
{
display: flex;
    flex-direction: column;
	line-height: 38px;
}


.projects-vertical
{
z-index: 5;
    position: relative;
}

.projects-vertical>div:first-child
{
//max-width: 1400px;
    margin: auto;
    //padding: 6rem 5rem;
	//margin-bottom: 8rem;
}

.card-header 
{
position:relative;
 margin-bottom: 1.5rem;
 width: fit-content;
}

.projects-vertical .module-header h5
{
color: #ffffff;
}

//li.newsflash-item
{
    position: relative;
	position: relative;
	display: block;
    width: 100%;
	overflow: hidden;
}

li.newsflash-item
{
    position: relative;
    position: relative;
    display: block;
    width: 100%;
    //overflow: hidden;
    //position: sticky;
    //top: 0px;
}

li.newsflash-item:nth-child(2n)
{
	//top:300px;
}

.projects-vertical .mod-articlesnews-vertical {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
	padding: 0;
	gap: 4rem;
	margin: 5rem 0;
	position: relative;
	
	//display: flex;
    //flex-direction: column;
}

.projects-vertical .simpleParallax
{
width: 100%;
overflow: hidden;
}

.projects-vertical .simpleParallax img {
    width: 100%;
    height: 94vh;
    object-fit: cover;
}

.newsflash-image
{
	//overflow: hidden;
    display: flex;
    flex-direction: column;
	gap: 1rem;
	//background: #101010;
	//background: #08090a;

}

.newsflash-item-info-arrow
{
	height: 22px;
}

.newsflash-item-info-arrow img
{
	height: 100%;
	width: auto;
}

.newsflash-image a
{
	height: 100%;
	overflow: hidden;
}

.newsflash-image img
{
filter: brightness(0.9);
}

img.parallax
{
	width: 100%;
	height: 100%;
    object-fit: cover;
}
.newsflash-image-col1
{
    display: block;
    height: 100%;
	display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
	gap: 2rem;
	line-height: 1;
	    padding: 0;
    height: 900px;
}

.newsflash-image .proandrov-krest-white
{
    width: fit-content;
    position: absolute;
    top: 0;
    height: 50px;
    right: 0;
}

.newsflash-num
{
position: absolute;
top: 0;
left: 0;
z-index: 9;
}

.projects-vertical .mod-articlesnews-vertical img.parallax {
    width: 100%;
    height: 100%;
    object-fit: cover;
	scale: 1.02;

	}

.newsflash-item ul.tags	
{
    position: absolute;
    top: 0;
    left: 40%;
    display: none;
}

/***удалить**
.paralax-img {
    width: 120%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.8);
    transform: scale(1.5);
    background-image: url(/images/projects/project_doghouse.webp);
}*/

.newsflash-item-info, .intro-text-item
{
display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    color: #d5d5d5;
    background: #2121212e;
    backdrop-filter: blur(18px);
    gap: 10px;
    //width: fit-content;
	width: calc(100% - 2rem);
    border-radius: 20px;
    font-size: 16px;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: flex-end;
}

.newsflash-item-info a
{
    padding: 0;
    margin: 0;
    color: #c3c3c3;
    line-height: 100%;
    font-size: 20px;
    text-transform: uppercase;
    width: 100%;
    position: relative;
    display: block;
    font-weight: 600;
    font-family: 'Poiret One';
    letter-spacing: 1px;
    line-height: 100%;
}

.newsflash-item-info p
{
	font-family: 'Unbounded';
    font-size: 40px;
}

//.newsflash-item-proandrov
{
    display: flex;
    gap: 4px;
    align-items: center;
}

//img.newsflash-item-proandrov-img
{
    height: 28px;
    width: auto;
	filter: invert(1);
}

//.newsflash-item-line
{
    display: flex;
    border-bottom: 1px solid #d3d3d3;
    flex: 1 0 0;
	width: 100%;
}

//li.newsflash-item:before {
    position: absolute;
    content: '';
    top: -20px;
    left: 0;
    height: calc(100% + 40px);
    width: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

//li.newsflash-item:after {
    position: absolute;
    content: '';
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    height: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.autor_date
{
position: absolute;
    top: 0;
    left: 50%;
    padding: 0rem;
    width: 50%;
    pointer-events: none;
    line-height: 1;
	//background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(87, 87, 87, 0.52) 55%, rgba(87, 87, 87, 0.74) 74%);
}

/* ✅ появление букв за курсоров */

.typping-text {
    font-size: 20px;
  color: #ffffff;
      display: flex;
    gap: 1rem;
	display: flex;
    gap: 1rem;
    flex-direction: row;
    align-items: center;
}


.txt-rotate {
    color: #ffffff;
    position: relative;
    display: inline-block;
}

.wrap {
    display: inline-block;
    position: relative;
	transition-duration: 0.5s;
}

.letter {
    display: inline-block;
    opacity: 0;
    position: relative;

}

/* ✅ ГЛАВНЫЙ КУРСОР - ВСЕГДА НА ЭКРАНЕ */

.wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--cursor-pos, 0px) + 2px);
    width: 4px;
    height: 100%;
    background: #673ab7;
    z-index: 10;
}

.letter {
    display: inline-block;
    opacity: 0;
    position: relative;
}

/***works***/

.work_header
{
margin-top: 4rem;
}

.works_item
{
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin-top: 2rem;
}

.work_header span
{
color: #ffffff;
margin-left: auto;
font-size: 20px;
line-height: 120%;
}

.modernes-webdesign
{
display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    text-align: center;
	//background: #161717;
	//background: #151518;
	color: #7e57c3;
}

.works_default
{
    display: grid;
    grid-template-columns: 1fr 1fr;
	gap: 4rem;
}

.works_default-img
{
    overflow: hidden;
}

.works_default-text
{
display: flex;
    flex-direction: column;
	gap: 3rem;
	padding-right: 4rem;
}

.works_default-text>div>div
{
border-bottom: 1px solid #ebebeb;
padding: 1rem 0;
    font-size: 18px;
	display: grid;
    grid-template-columns: 30% 1fr;
}

.works_default-text>div>div:first-child {
    border-top: 1px solid #ebebeb;
}

.works_default-text a {
    color:#c3a98a;
}

.works_default-img img
{
object-fit: cover;
    position: relative;
    width: 120%;
    height: auto;
    left: -10%;
}

.works_all-img img
{
    width: 100%;
}

/***partners***/

.partners {
    //max-width: 1400px;
    padding: 8rem 0;
    //margin: 7rem auto;
    background: #ffffff;
	
}

.partners img
{
    height: 48px;
	filter: grayscale(1);
}

.partners img:hover
{
	filter: grayscale(0);
}

.partners_item
{
display: grid; 
grid-template-columns: 30% 1fr; 
//max-width: 1400px; 
padding: 0 5rem;
margin: auto;
gap: 4rem;
}

.services-item-ico
{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.services-item-col2
{
display: flex; 
flex-direction: column; 
gap: 5rem;
}


/***latest news***/

.latestnews
{
display: flex;
    flex-direction: column;
}

.images-materails
{
	overflow: hidden;
    position: relative;
    height: 400px;
}

.images-materails .item-image
{
    height: 100%;
    width: 100%;
}

.next-work 
{
    position: relative;
    overflow: hidden;
    margin: 6rem 5rem;
}

.next-work  .latestnews
{
padding: 0;
    margin: 0;
}


.next-work .intro-text-block1 img
{
    width: 50%;
}

.next-work .images-materails .item-image img
  {  width: 100%;
  height: 100%;
    position: absolute;
    left: 0;
    top: 0;
	filter: brightness(0.5);
	object-fit: cover;
}

.next-work .intro-text-title
{
   color: #ffffff;
   display: flex;
    flex-direction: column;
    gap: 1rem;
}

.next-work .intro-text-item
{
    display: flex;
    height: 100%;
    padding: 4rem 4rem;
    position: absolute;
    z-index: 4;
    margin: auto;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
	background: none;
}

.next-work .latestnews .intro-text-item a
{
color: #c3c3c3;
gap: 0;
    width: fit-content;
}

.next-work p
{
	    color: #c3c3c3;
		padding: 0;
    margin: 0;
}

.intro-text-block1
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.intro-text-item a
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.next-work .intro-text-title h3 {
    color: #ffffff;
    font-family: monospace;
}
.next_readmore .button
{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

//.next-work .intro-text-title h3:before
{
    content:'{';
	color: #7e55c7;
	font-size: 3rem;
}

//.next-work .intro-text-title h3:after
{
    content:'}';
	color: #7e55c7;
	font-size: 3rem;
}

/***latest_work-item***/


.latest_work
{
    background: #151518;
	padding-bottom: 6rem;
}
.latest_work-items
{
    display: grid;
    grid-template-columns: 1fr 1fr;
	gap: 4rem;
    overflow: hidden;
	//max-width: 1400px;
	padding: 0 5rem;
    margin: auto;
}

.latest_work-items a:after {
	display: flex;
	position:absolute;
	content: 'VIEW';
	top: 40%;
	left: 40%;
	width: 120px;
	color: #000000;
	height: 120px;
	background: #fff73f;
	transition: all 0.3s;
	opacity:0;
	border-radius: 500%;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	scale: 0;
}

.latest_work-items a:hover:after {
	opacity:1;
	scale: 1;
}

.latest_work-item
{
overflow: hidden;
position: relative;
}

.latest_work-item a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.latest_work-image img
{
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.latest_work .tags-blog2 ul {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
	padding: 0;
    margin: 0;
}

.latest_work .text-scroll_latest {
    position: relative;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    //-webkit-background-clip: text;
    //-webkit-text-stroke: 0.013em #161717;
    white-space: nowrap;
    font-size: 17rem;
    font-family: 'Antonio';
    font-weight: 600;
    transition: all .5s cubic-bezier(.165, .84, .44, 1);
    line-height: 0.7;
    text-transform: uppercase;
    margin-left: -30%;
    align-items: center;
    gap: 2rem;
}

.latest_work .text-scroll_latest{
    display: flex; 
    justify-content: center;
    align-items: center;
	margin-top: 0;
    padding-bottom: 6rem;
    gap: 1rem;
	overflow: hidden;
}

.latest_work .text-scroll_latest .fa
{
display: flex;
    align-items: center;
font-size: 1.2rem;
-webkit-text-stroke: 0;
color: #ffffff;
}

.latest_work h3 {
    font-family: Gilroy-light;
    font-size: 2.7rem;
    font-weight: bold;
    //color: #ffffff;
	background: #fff73f;
}

.text-scroll_latest img,
.scroller img
{
	height: 238px;
    width: 329px;
    object-fit: cover;
    //background: #9C27B0;
}

.contact-item .scroller img
{
	height: 33px;
    width: 33px;
    object-fit: cover;
    background: none;
}

.scroller  {
  width: 100%;
   overflow: hidden;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-item .scroller {
  width: 100%;
}

.contact-item .scroller {
  width: 100%;
  position: absolute;
  left: 0;
  top: 13%;
  z-index: -1;
}

.contact-item:hover .scroller
{
z-index:5;
}


.scroller .scroller__inner, .contact-item .scroller__inner
 {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 10s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 60s;
}

.contact-item .scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 90s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

.contact-item-ol
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.contact-item-ol img
    {
    width: 46px;
    height: auto;
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
  font-size: 17rem;
    font-family: 'Antonio';
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

.contact-item .tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
  font-size: 3rem;
    font-family: 'Gilroy-light2';
    font-weight: 600;
    line-height: 100%;
    text-transform: capitalize;
	gap: 4rem;
	filter: invert(1);
}

.blog_item_number {
    color: #ffffff;
    position: absolute;
    top: 2rem;
    left: 2rem;
	font-size: 4rem;
}

.blog_item_number span {
    color: #8c8a85;
font-size: 2rem;
}


/***tags***/

.tags-blog
{
    display: flex;
flex-direction: row;
	flex-wrap: wrap;
    justify-content: flex-start;
}

ul.tags
{
display: flex;
flex-direction: row;
row-gap: 5px;
	margin: 0;
    padding: 0;
}

//.tags-blog li.tagitit, li.list-inline-item
{
background: #323235;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #ffffff;
	letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
	padding: 0.4rem 0.7rem;
    font-size: 12px;
	cursor: default;
	line-height: 1;
	border-radius: 50px;
}

.tags-blog li.tagitit, li.list-inline-item,
.tagitit {
    color: #c3c3c3;
	border: 1px solid #ffffff0f;
    box-shadow: -1px -1px 0px #ffffff2e;
    border-radius: 50px;
    white-space: nowrap;
    cursor: default;
    font-family: monospace;
    position: relative;
    padding: 4px 10px;
    font-size: 14px;
}

.tags-blog li {
    color: #c3c3c3;
    border: 1px solid #9b98982e;
}

//li.list-inline-item:after ,
.tagitit:after{
    color: #673AB7;
    position:absolute;
	content:'/';
	right: 0;
}

.text-scroll1
{display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 0;
    overflow: hidden;
	z-index: 5;
    position: relative;
	//opacity: 0.6;
	background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 48%) 27%, #08090a 72%);
    backdrop-filter: blur(0px);
}

.text-scroll1 .text-scroll2-inner
{color: #ffffff94;}

.text-scroll2
{
display: flex;
    justify-content: center;
	align-items: center;
    margin: 6rem 0;
	overflow: hidden;
}

.text-scroll2 .text-scroll2-inner
{
	font-family: 'Poiret One';
	font-size: 3rem;
}

.text-scroll2-inner
{
position: relative;
display: flex;
flex-direction: row;
color: #161717;
color: #ffffff;
//-webkit-background-clip: text;
    //-webkit-text-stroke: 0.013em #161717;
	white-space: nowrap;
	font-size: 5.5rem;
	//height: 42px;
	font-family: 'Antonio';
    font-weight: 600;
	transition: all .5s cubic-bezier(.165, .84, .44, 1);
	line-height: 1.2;
	text-transform: uppercase;
	margin-left: -60%;
	align-items: center;
	gap: 40px;
}

.text-scroll2-inner div
{
display: flex;
    flex-direction: row;
    align-items: center;
}

.text-scroll2-inner a
{
//color: #c3a98a;
}

.text-scroll2-inner img
{
    width: 42px;
}

//.text-scroll2:hover .text-scroll2-inner
{
color: #161717;
}

.two-bloks-bg
{
background: #151518;
	padding: 4rem 20px;
	margin: 4rem 0;
}

.two-bloks
{
position:relative;
display: grid;
    grid-template-columns: 35% 1fr;
	gap: 4rem;
max-width: 1400px;
	margin: auto;
	color: #ffffff;
}



.two-bloks-1
{
	
}

.two-bloks-2
{
display: flex;
    flex-direction: column;
    gap: 2rem;
	padding-left: 4rem;
	border-left: 1px solid #ccc;
}

.two-bloks-2 img
{
width: 53px;
    height: auto;
    border: 1px solid #ffffff38;
    padding: 8px;
    border-radius: 13px;
    background: #454545;
}

.two-bloks-2-ico
{
display: grid;
    grid-template-columns: repeat(3, 1fr);
	grid-row-gap: 2rem;
}

.two-bloks-2-ico>div
{
display: flex;
align-items: center;
    gap: 10px;
}

.animateme {
    transition: transform 1.5s;
}

.text-scroll3
{
display: flex;
    justify-content: center;
	align-items: center;
    margin: 6rem 0;
	overflow: hidden;
	background: #ffffff;
    padding: 2rem 0px;
}


.text-scroll3 .text-scroll2-inner div {
    color: #000000;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.013em #000000;
}

.text-scroll2-inner .fa
{
display: flex;
    align-items: center;
font-size: 1rem;
-webkit-text-stroke: 0;
//color: #c3a98a;
color: #000000;
}

/***footer***/


footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.footer {
	//background: #08090a;
//background: #1f1f1f;
    //background: #10120f;
	z-index: 1;
	//position: sticky;
    //bottom: 0;
	//border-top-left-radius: 50px;
    //border-top-right-radius: 50px;
    overflow: hidden;
	padding-top: 5rem;
}

.footer .case-gray-text {
    color: #ffffff4d;
    max-width: fit-content;
    font-size: 46px;
    //font-family: 'Poiret One';
    //font-weight: 700;
    //line-height: 90%;
    //-webkit-text-stroke-width: thin;
    //letter-spacing: 0.56px;
}

.footer .case-gray-text span {
  color: #ffffff4d;
  transition: color 0.3s ease;
  display: inline-block;
}

.footer .case-gray-text span.active {
  color: #e8e8e8;
}

.footer .grid-child{
	margin:auto;
	//padding: 3rem 5rem;
}

.footer-inner-item
{
display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
	z-index: 1;
}

.footer .social-link {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 0.5rem;
}

.footer .social-link div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
	font-family: Gilroy-light;
    font-size: 12px;
}

.footer .social-link .fa {
    background-color: #282828;
border: 1px solid;
    border-color: rgb(255 255 255 / 9%);
    color: #ffffff94;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.footer .tag-list
{
    color: #ffffff33;
}

.footer .tag-list li
{
    display: flex;
    align-items: center;
}

.social-link .fa:hover
{
	border:1px solid #673AB7;
	background: #673AB7;
	color: #ffffff;
	cursor: pointer;
}

.pa-footer
{
color: #ffffff;
    font-family: 'Gilroy-light2', sans-serif;
    color: #ffffff;
    font-size: 16px;
	display: flex;
    gap: 0.5rem;
}

.pa-footer span {
    position: relative;
    font-family: 'Antonio', sans-serif;
	color: #8c6bc6;
    font-size: 16px;
    font-weight: 100;
    transition: all 0.2s;
	letter-spacing: 4.5px;
}

.pa-footer img
{
    height: 40px;
    width: auto;
}

.footer .mail-link
{color: #ffffff; width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 6px;
}

//.GET-IN-TOUCH {
	position: relative;
    content: 'GET IN TOUCH';
    //font-family: fantasy;
    bottom: 0;
    display: flex;
    color: #ffffff;
    width: 100%;
    z-index: -1;
    opacity: 0.1;
    white-space: nowrap;
    font-size: 13vw;
    line-height: .8;
    flex-direction: row;
    text-align: justify;
    justify-content: center;
}

/***back-to-top

#back-top
{
    display: flex;
    justify-content: flex-end;
    height: fit-content;
	color: #c3a98a;
}

.back_top
{
    display: flex;
    flex-direction: column;
	    align-items: center;
}

.up_to_top-border
{
position: relative;
    left: 3.5px;
    height: 50px;
    border-left: 1px solid #c3a98a;
}

.up_to_top-arrow
{
    position: relative;
    content: '';
    width: 12px;
    height: 12px;
	bottom:0;
    border-color: #c3a98a;
    border-bottom: 2px solid;
    border-left: 2px solid;
    transform: rotate(135deg);
	transition: all 0.2s;
}

#back-top:hover .up_to_top-arrow
{
    bottom: 4px;
}

***/

.footer .card-header 
{
color: #c3a98a;
}

.footer .mod-menu {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.footer .mod-menu.mod-list.nav .nav-item a
{
	display: block;
    color: #ffffff;
	font-family: 'roboto', sans-serif;
	font-size: 20px;
	width: fit-content;
}

.footer-inner{
    display: flex;
    gap: 3rem;
    color: #ffffff;
    margin: 5rem 5rem;
    padding: 2rem;
    flex-direction: column;
    //background: #673ab7;
	background: #181818;
	background: #161117;
    //background: #151518;
    //border-radius: 40px;
	position: relative;
}

//.footer-inner:before,
.services-item:before,
.home-hero-content:before,
.works-four:before,
.page-top:before
{
    position: absolute;
    content: '';
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    height: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	z-index: -1;
}

//.footer-inner:after,
.services-item:after,
.home-hero-content:after,
.works-four:after,
.page-top:after
{
    position: absolute;
    content: '';
    left: 0;
    top: -20px;
    height: calc(100% + 40px);
    width: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
	z-index: -1;
}

/***button***/

button, a.button
{
    display: flex;
    font-family: 'Gilroy-light2', sans-serif;
    gap: 20px;
    line-height: 100%;
    font-size: 18px;
    width: fit-content;
    color: #ffffff;
    border-radius: 50px;
    height: 54px;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
    background: #673AB7;
    transition: all 0.2s;
    border: 1px solid #fff73f;
    border: 1px solid #673AB7;
	//letter-spacing: 1px;
	//-webkit-background-clip: text;
    //-webkit-text-stroke: 0.023em #c3a98a;
    z-index: 1;
    position: relative;
	font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
	padding-left: 60px;
    font-style: normal;
    letter-spacing: -1px;
}

button2, a.button2
{
    display: flex;
    gap: 22px;
	line-height: 100%;
	//font-weight: 600;
    font-size: 18px;
	width: fit-content;
    color: #ffffff;
    border-radius: 50px;
    height: 51px;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
    background: #fff73f;
	background:  #eeff07;
	background: #673AB7;
    transition: all 0.2s;
    //text-transform: uppercase;
    //border: 1px solid #fff73f;
	//border: 1px solid #eeff07;
	//border: 2px solid #673AB7;
	//letter-spacing: 1px;
    z-index: 1;
	position: relative;
	flex-direction: row-reverse;
    padding-right: 60px;
	    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -1px;
}

//button:hover:after,
a.button:hover:after,
button2:hover:after,
a.button2:hover:after,
.blog  a.btn:hover:after
{
    transform:rotate(225deg)
}

button img, a.button img,
button2 img, a.button2 img
{
    width: 18px;
    height: 18px;
}

.button2
{overflow: hidden;
white-space: nowrap;
}
  
.button2:before {
    position: absolute;
    content: '';
    right: 6px;
    width: 40px;
    height: 40px;
    background: #0000008a;
    transition: all 0.3s;
    z-index: -1;
    border-radius: 50px;
}

.button2:hover:before {
	  width: 100%;
	height: 100%;
	right: 0;
}

button .readmore
{
	margin:0;
}

//a.button:after, button:after,
a.button2:after, button2:after,
.blog  a.btn:after
{
	content: '';
    width: 12px;
    height: 12px;
    border-bottom: 2px solid;
    border-left: 2px solid;
    transform: rotate(180deg);
	transition: all 0.2s;
	position: absolute;
    right: 18px;
border-color: #673AB7;
}

//a.button:before, button:before,
a.button2:before, button2:before,
.blog  a.btn:before
{
	content: '';
	width: 36px;
	height: 36px;
	transition: all 0.2s;
	background: #fff;
	border-radius: 50px;
	right: 7px;
	position: absolute;
}

a.button2:after, button2:after,
.blog  a.btn:after
{
	content: '';
	background-image: url('/images/arrow-right-white.svg');
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    right: 14px;
	transform: rotate(-45deg);
	transition: all 0.2s;
}

a.button2:hover:after, button2:hover:after,
.blog a.btn:hover:after
{
	transform: rotate(0deg);
	transition: all 0.2s;
}

.button:before {
    position: absolute;
    content: '';
    left: 6px;
    width: 40px;
    height: 40px;
    background: #0000008a;
    transition: all 0.3s;
    z-index: -1;
    border-radius: 50px;
}

a.button:after, button:after
{
	content: '';
	background-image: url('/images/arrow-right-white.svg');
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    left: 14px;
	transform: rotate(135deg);
	transition: all 0.2s;
}

a.button:hover:after, button:hover:after
{
	transform: rotate(180deg);
	transition: all 0.2s;
}

a.button3
{
    background: #fff73f;
	background:  #eeff07;
	background: #FFC107;
    color: black;
	line-height: 100%;
	border-radius: 50px;
	white-space: nowrap;
}

a.button4
{
    background: #0000001a;
	background:  #eeff07;
	background: #FFC107;
    color: #c3a98a;
	line-height: 100%;
	border: none;
	border-radius: 50px;
	font-weight: 600;
}

a.button5, 
.blog  a.btn {
    background: #00000000;
    color: #ffffff;
    line-height: 100%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
	font-family: 'Gilroy-light2', sans-serif;
	//font-weight: 600;
	//text-transform: uppercase;
font-size: 14px;
    //letter-spacing: 1px;
}

.pagination a
{
    color: #ffffff;
}

/***Parallax***/

.parallax__layer {
    transition: transform 0.3s linear;
}

/*3d*/

.wrapper
{
min-height: 100%;
}

._container
{max-width: 1000px;
margin: 0 auto;
padding: 50px 20px;

}

.parallax
{
//min-height: 100vh;
}

.parallax__body
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left:0;
}

.parallax__container
{
position: relative;
z-index: 2;
}

.parallax__images
{
position:absolute;
width: 120%;
height: 120%;
top: -10%;
left:-10%;
z-index: 1;
}

.images-parallax__item
{
position:absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
}

.images-parallax__clouds,
.images-parallax__mountains,
.images-parallax__human
{
position:absolute;
width: 100%;
height: 100%;
top: 0;
}

.images-parallax__clouds
{
background: url("/images/proandrov_gallery_projects.webp") top / cover no-repeat;
top: 0;
background-size: auto;
}

.images-parallax__mountains
{
background: url("/images/experte-beratung.webp") top / cover no-repeat;
top: 15%;
z-index: 2;
background-size: auto;
}

.images-parallax__human
{
background: url("/images/proandrov-face.png") top / cover no-repeat;
top: 45%;
z-index: 3;
background-size: auto;
}

.years-projects-item
{
    color: #000000;
    font-size: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
}

/*3d-2*/

.div1
{
width: 100%;
height: 600px;
overflow: hidden;
}

.bg
{
width: 110%;
height: 110%;
background: url("/images/experte-beratung.webp") top / cover no-repeat;
position: relative;
}

.hacker
{
width: 300px;
height: 300px;
background: url("/images/proandrov-face.png") top / cover no-repeat;
position: absolute;
left: 37%;
bottom: -50px;
}

.content
{
background: #000;
position: relative;
z-index: 2;
color: aliceblue;
}


/*** отключение scroll-behavior для этих объектов***/

.horizontal-scroll,
.pin-spacer,
.your-gsap-container,
.header,
.cta-btn-wrap2 {
  scroll-behavior: auto !important; /* Отключает плавность, JS берет контроль */
}

/* Любые блоки с overflow: auto/scroll, где нужна нативная прокрутка */
.custom-scrollbar {
  scroll-behavior: auto;
}

/***1366 1440***/


@media (max-width: 1440px) {

.header-menu {
    padding: 4rem 6rem;
}

.header-menu.active {
    right: 0;
    width: 50%;
}

.scrollmagic-pin-spacer {
        height: auto !important;
        padding: 0 !important;
    }

#pin-wrapper {
position: relative !important;
    overflow: hidden;
    width: auto !important;
    height: auto !important;
	    inset: auto !important;
}

#scroll-container {
width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transform: translate(0px, 0px) !important;
	padding-left: 40px;
}

.services-card3
{
    padding: 3rem 40px;
}

.services-item-block
{
    grid-template-columns: 1fr 1fr 1fr;
}


.services-card 
{
    padding: 4rem 40px;
}

.rotate:hover .rotate-text {
	 animation: rotate 10s linear infinite;
}

.call_me-bg, .container-nav
 {
    padding: 0 40px;
}

.home-hero-content
 {
    margin: 0 40px;
}


.case-right-wrap h4, .case-left-wrap h4,
.case-gray-text
{
font-size: 50px;
}

.contact-item
 {
    padding: 20px 40px;
}

.bread-header
{
    padding-left: 40px;
}

.menu-btn-bg {
    right: 40px;
}

.services-item-block-in .case-gray-text {
    font-size: 36px;
}

.projects-vertical>div:first-child
 {
    //padding: 3rem 40px;
}

#circle
{
	display: none;
}
	
.animated-words,
.animated-words span
{
	font-size: 3.2rem;
}
	
.allinone, .podhod, .big-item, 
.item-pagework, .latest_work-item
{
padding: 0 20px;
}

.blog-item figure {
    //height: 500px;
    width: 100%;
    position: relative;
}

.projects-vertical .mod-articlesnews-vertical {
    //padding: 0 40px;
    gap: 2rem;
}

.projects-vertical .mod-articlesnews-vertical img.parallax {
    height: 500px;
}

.works-type {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 40px;
}

.columns-2 .group-wrapper
{
    padding: 3rem 40px;
    grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.blog-item .page-header h2 a
 {
    font-size: 1.6rem;
}

li.newsflash-item {

}

.next-work .intro-text-item {
        padding: 4rem 40px;
}

.home-hero-content-inner2 
{
    padding: 3rem 5rem;
}

.blog-item {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

//.main-top, .container-sidebar-left, .container-sidebar-right, .container-main-bottom 
{
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: auto;
    padding: 0 2rem;
}

.next-work
{
    margin: 4rem 40px;
}

.footer-inner {
    margin: 3rem 5rem;
}

.footer .case-gray-text {
    font-size: 50px;
    padding: 0 40px;
}

.services-item-block-in {
    padding: 2rem 2rem;
}

}


/****1024****/
@media (max-width: 1024px) {

.menu-fixed-up 
{
display: none;
}


}


/***960***/

@media (max-width: 960px) {

* {
  -webkit-tap-highlight-color: transparent;
}

//.main-top, .container-sidebar-left, .container-sidebar-right {
    display: flex;
    flex: 1;
    flex-direction: column;
}



h1
{
    font-size: 2.4rem;
}


h2
{
    font-size: 2rem;
}

h3
{
    font-size: 1.8rem;
}

h4
{
    font-size: 1.5rem;
}

.home-hero-heading {
    //font-size: 3rem;
}

.logo-tag
{
    max-width: 140px;
        font-size: 12px;
		line-height: 126%;
}

.animated-words {
position: relative;
        column-gap: 0;
		gap: 0;
        width: 100%;
        line-height: 1;
        display: flex;
        flex-direction: column;
		top: 0;
}

.animated-words span {
font-size: 5rem;
        line-height: 1;
}

.animated-words span:nth-child(2) {
    text-align: right;
    width: 100%;
}

.item-pagework
{
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 4rem;
}

.home-hero-content-inner {
    gap: 0rem;
        padding: 2rem 0;
        flex-direction: column-reverse;
        align-items: flex-start;
}

.home-hero-content-inner-text {
    gap: 2rem;
	padding: 4rem 0;
	
}

.home-hero-content {
display: flex;
        flex-direction: column;
        gap: 2rem;
		height: auto;
}

.home-hero-heading {
    gap: 2rem;
}

.home-hero-right
{
    display: flex;
        flex-direction: column;
        align-items: flex-start;
}

.home-hero-heading:nth-child(2) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	gap: 2rem;
	        flex-direction: column-reverse;
}

.home-hero-heading .zvezsa {
width: 80%;
height: auto;
}

.home-hero-right-clients
{
    max-width: none;
}

.heading-row-right-text {
    font-family: 'vivl';
    font-size: 1.5rem;
    line-height: 1;
    text-align: end;
}

.max-width-medium {
    gap: 1rem;
}

.services-card3
{
    padding: 3rem 10px;
}

.container-header {
background-image: url(/images/bg/proandrov-bg-robot-small.png);
background: #333333;
}

.header-menu {
    position: fixed;
    opacity: 1;
    font-size: 1.5rem;
    display: flex;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background: #161717;
	background: #161117;
	background: #151518;
    transition: all 1s;
    justify-content: space-around;
    flex-direction: column;
}

.header-menu.active {
    transform: translateX(0);
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.menu-btn-bg {
            height: 30px;
            right: 20px;
            top: 14px;
}

.menu-small .header-menu.active {
    top: 58px;
}

.home-hero-content-zvezda
{
    width: 100%;
	position: relative;
	bottom: auto;
height: 370px;
}

.header-words-col2
{
    transition-duration: 1s;
    position: relative;
    top: auto;
    max-width: fit-content;
}

.header-menu_social-link {

    align-items: start;
}

.header-menu .social-link
{
display: flex;
    margin: 2rem 0;
    justify-content: space-between;
    flex-direction: row;
    width: 90%;
    justify-content: center;
    gap: 1rem;
}

.services-item-block {
    grid-template-columns: 1fr 1fr;
}

.services-card {

}

.services-item-block-in {
    padding: 2rem;
}

.services-item-block-in:first-child {

}

img.service_img {
        width: calc(100% - 40px);
        height: 406px;
        object-fit: cover;
        position: relative;
        z-index: 1;
        top: -90px;
        left: 0;
        margin-left: 20px;
        padding-bottom: 20px;
    }

.home-hero-left
{
    width: 100%;
}
	
.home-hero-heading .cta-btn-wrap2
{
	    width: 100%;
        height: auto;
        position: relative;
        left: auto;
        bottom: -5rem;
}

.cta-wrapper	
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.contact-item-ol img {
    width: 32px;
    height: auto;
}

.contact-item .tag-list {
    font-size: 2rem;
	gap: 2rem;
}

.contact-item .scroller img {
    height: 26px;
    width: 26px;
}

.years-bg-item h1
{
    font-size: 70px;
}

.services-item-block-in .case-gray-text {
        font-size: 30px;
}

.text-size-xlarge {
    line-height: 120%;
	font-size: 20px;
	z-index: 1;
}
	
.allinone {

    gap: 0rem;
    display: flex;
    flex-direction: column;
}

.mod-allinone {
    overflow: hidden;
    position: relative;
    top: 0;
    margin-bottom: 0rem;
}
	
.about-years img.service_img {
        width: 86%;
        height: 131%;
        object-fit: cover;
        position: relative;
        z-index: 1;
        top: -100px;
        left: 0;
        margin: auto;
        display: flex;
    }

.about-years .services-card {
        margin: 0;
        gap: 10rem;
    }

.services-item-all {
        display: flex;
        gap: 3rem;
        flex-direction: column-reverse;
    }

.services-item:nth-child(2) {
        padding: 20px 0;
        //gap: 0;
}

.services-item .djtabs-in .custom-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.services-item .Deep-Black .djtab-custom-html h2 {
    font-size: 1.4rem;
}

.services-item .djtab-custom-html img {
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    width: 54px;
    height: auto;
    padding: 15px;
    overflow: auto;
    overflow-clip-margin: border-box;
}

.about-years img.service_img {
        width: 100%;
        height: 500px;
        object-fit: contain;
        position: relative;
        z-index: 1;
        top: -5rem;
        left: 0;
        margin: auto;
        display: flex;
}
	
.lets-talk-bg {
    margin: 7rem 0;
}

.lets-talk {
    padding: 0;
    grid-template-columns: 100%;
    align-items: center;
    gap: 3rem;
}

.lets-talk-item2-img img {
    transform: translate(0px, 0px) !important;
}

.video-top {
    display: flex;
    margin-top: 6rem;
    gap: 3rem;
    flex-direction: column;
}

.rotate a video {
    width: 50px !important;
}

.video-face .rotate {
    width: 84px;
    height: 84px;
}

.video-face .rotate {
    right: 10px;
	top: auto;
    bottom: 20px;
}

.video-face {
    right: 1rem;
    bottom: 2rem;
	display: none;
}

.services-item-text {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: flex-start;
	align-items: flex-start;
}

.newsflash-item-info h3
{
    font-size: 2rem;
    letter-spacing: 0px;
	padding: 0;
}

img.sppb-img-responsive {
    width: 100px;
    height: auto;
}

.scrollme
{
    position: absolute;
    right: 7rem;
    top: 2rem;
}

.scrollme.scrollme2 {
    left: 7rem;
    bottom: 1rem;
}

.projects-vertical .simpleParallax img {
    height: 400px;
}

.tags-blog {
}

.projects-vertical .mod-articlesnews-vertical {
		//padding: 0 3rem;
		gap: 2rem;
		margin-bottom: 5rem;
}

.projects-vertical>div:first-child {
        //padding: 0;
    //padding-top: 2rem;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 30s;
}

.newsflash-item-info, .intro-text-item {
//flex-direction: column;
        //align-items: flex-start;
		//gap: 1rem;
		//padding: 4rem 20px;
}

//img.newsflash-item-proandrov-img {
    height: 22px;
    width: auto;
}

.projects-vertical .mod-articlesnews-vertical img.paralax {
        width: 100%;
        height: 88vh;
        object-fit: cover;
    }

.questions .Simple .djtabs-accordion {
    font-size: 24px;
    line-height: 1.2;
}

.projects-vertical {
    //padding-bottom: 3rem;
}

.text-scroll1 {
    padding: 1rem 0;
}

.text-scroll2-inner {
        font-size: 4rem;
		gap: 2rem;
}
	
.text-scroll2 .text-scroll2-inner
{
	font-size: 2.3rem;
}

.text-scroll2-inner img
{
    width: 30px !important;
}

.text-scroll2 {
        margin: 4rem 0;
}
	
.about-home {
    padding: 0;
}

.about-home-inner {
    gap: 3.5rem;
    display: flex;
    flex-direction: column;
}

.blog-item figure {
    height: 300px;
    width: 100%;
    position: relative;
    //overflow: hidden;
}

.big {
    padding: 6rem 0;
    margin: 6rem 0;
}

.text-scroll2-inner .fa {
        font-size: 1rem;
}

.services-item .Deep-Black.djtabs {
        //margin-bottom: 2rem;
        width: 100%;
        //margin-top: -100px;
}

//.home-hero-ul .fa {

    height: 46px;
    width: 46px;
    font-size: 20px;
    transition: all 0.3s;
    padding: 12px;
}

.call_me-item {
    align-items: center;
	gap: 2rem;
}

.call_me-bg {
    //padding: 0 20px;
    margin-top: 2rem;
}

.footer .social-link .fa {
    height: 46px;
    width: 46px;
    font-size: 20px;
    transition: all 0.3s;
    padding: 12px;
}

.partners_item
{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    gap: 2rem;
}

.latest_work-items {
    gap: 4rem;
    display: flex;
    flex-direction: column;
	padding: 0;
}

.latest_work .text-scroll_latest .fa {
    font-size: 1rem;
}

.latest_work .text-scroll_latest {
    font-size: 4rem;
	margin-left: -62%;
	padding-bottom: 3rem;
}

.latest_work-image img {
    object-fit: cover;
    height: 380px;
}

.latest_work-items a:after,
.text-color-background-img a:after,
.blog-item figure:after
{
    top: 30%;
    left: 35%;
}

.latest_work h3 {
    font-size: 1.8rem;
}

li.newsflash-item:nth-child(2n) {
    top: 0;
}


.tag-list{
    font-size: 11rem;
}

.scroller img {
    height: 152px;
    width: 172px;
    object-fit: cover;
}

.home-hero-heading .cb-navbar-menu-socials
{
display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: space-evenly;
}

.page-top {
    display: flex;
    flex-direction: column;
	gap: 2rem;
}

.page-header h1 {
    font-size: 2rem;
}

.page-header h1:first-letter
{
    font-size: 5rem;
}

.error-404
{
    padding: 0 40px;
}

.cta-btn-wrap2 {
    width: 100%;
    filter: brightness(0.5);
}

body:before {
    left: 10px;
    width: calc(100% - 20px);
}

.footer-inner:before, 
.services-item:before, 
.home-hero-content:before, 
.works-four:before 
{
    position: absolute;
    content: '';
    top: 0;
    left: -10px;
    width: calc(100% + 20px);
}

.case-right-top-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.works-four
 {
    position: relative;
    margin: 4rem 10px;
}

.article-info__desc {
    font-size: 14px;
}

.pa-number-name-item-title
{
    font-size: 4rem;
}

.moduletable .pa-number-name-item {
    padding: 3rem 10px;
    display: flex;
    justify-content: space-between;
    height: 100vh;
    align-items: flex-start;
    gap: 2;
    flex-direction: column;
}

.block_number, .block_number>div {
    height: auto;
    width: 100%;
}

.proandrov-block2-top {
    margin: 2rem 10px;
}

.proandrov-block2
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	gap: 2rem;
}

.proandrov-block2-item-col1 img
{
    height: auto;
    width: 100%;
    object-fit: contain;
}

.proandrov-block2-item-col1 img.proandrov-krest-white
{
    width: 28%;
}

.element-show-up {
    position: relative;
    overflow: hidden;
    left: 0;
    font-size: 25px;
	align-items: flex-end;
}

.top-image img
{
    width: 100%;
}

.newsflash-item-info p {
    font-family: 'Unbounded';
    font-size: 18px;
}

.projects-vertical .mod-articlesnews-vertical img.parallax {
        height: 400px;
        width: 100%;
}

.cta-wrapper-picture
{
    padding: 3rem 10px;
}

.footer .cta-wrapper-picture .case-gray-text 
{
    font-size: 46px;
}

.picture-items-bg {
    width: 200px;
    height: 140px;
}

.picture-item {
    position: absolute;
    width: 200px;
    height: 140px;
}


}


/***768***/

@media (max-width: 768px) {

	
body {
    flex-direction: column;
	font-size: 14px;
}

.call_me-bg, .container-nav
{
    padding: 0 10px;
}

.contact-item
{
    padding: 20px 10px;
}

.contact-item .tag-list {
    font-size: 2rem;
	gap: 2rem;
}

.contact-item .scroller img {
    height: 22px;
    width: 22px;
}

.bread-header
{
    padding-left: 20px;
	padding-top: 1rem;
    padding-bottom: 1rem;
}

.projects-vertical>div:first-child
{
    //padding: 2rem 10px;
}

.years-bg-item {
    align-items: flex-start;
    gap: 2rem;
    font-size: 20px;
}

//.main-top, .container-sidebar-left, .container-sidebar-right, .container-main-bottom 
{
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: auto;
    padding: 0 10px;
}

button, a.button {
    //gap: 8px;
    //font-size: 14px;
    //padding: 10px 14px;
	width: 100%;
	justify-content: center;
}

button2, a.button2
{

}

.menu-small .header-wrapper {
    //padding-top: 4px;
    //padding-bottom: 4px;
		transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
	
.container-header {
    position: relative;
    top: 0;
	min-height: auto;
}

.menu-small.container-header {
    top: 112px;
}

.mod-menu {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    gap: 40px;
    flex-direction: column;
	font-size: 2rem;
}

.menu-btn span:nth-of-type(1) {
    //top: 35%;
}
.menu-btn span:nth-of-type(2) {
    //top: 75%;
}

.footer .mod-menu {
    font-size: 1.4rem;
}

.header-wrapper {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
	display: flex;
        justify-content: flex-start;
}

.logo-tag
{
display: none;
}

#current-time, .case-back a, .section-sub-title {
    font-size: 14px;
}

.logo-name a {
    padding: 4px 0;
	font-size: 12px;
}

.logo-name 
{
}

.logo-name-slogan
{

}

.logo-name img {
    height: 32px;
    width: auto;
}

.logo-header a {
    font-size: 17px;
	padding-right: 0.5rem;
        margin-right: 0.5rem;
}

.logo-name span {
    font-size: 15px;
	letter-spacing: 4.5px;
}

.menu-btn-text {
    //display: none;
}

.menu-small .logo-name a {
    padding: 4px 0;
    font-size: 12px;
}

.menu-small .logo-name span {
    font-size: 11px;
}

.header-menu .social-link
{
    margin: 5rem 0;
}

.menu-btn p {
    
}

.logo-name a:after {
        height: 30px;
        left: -85px;
    }

//.logo-name a:after {
    height: 42px;
    top: -5px;
	border: 1px solid #b7b7b7;
}

.menu-small .logo-name a:after {
    height: 43px;
    top: -5px;
    border: 1px solid #b7b7b7;
}

//.logo-name a:hover:after
{
	top:-8px;
}

.years-bg-item  h1 {
        font-size: 4rem;
    }

.home-hero-image {

}

.home-hero-image img {
width: 143%;
}

.home-hero-back {
    left: 0;
    margin: auto;
    right: 0;
    width: 100%;
    height: auto;
}

.home-hero-image .simpleParallax:after {
    left: auto
}

.home-hero-image-header img {

	
	width: 160%;
    padding-top: 0px;
    top: 0rem;
    left: 6rem;
    height: fit-content;
    transform-origin: right;
    transform: rotate3d(0, 0, 0, 360deg) scale3d(1, 1, 3) !important;
    object-fit: fill;
    max-height: fit-content;
}

.home-hero-back2 {
    width: 100%;
    height: auto;
}

.site-grid {
    margin-left: 0;
}

.about-home-item:first-child img {
    width: 80%;
margin: auto;
}

body .jlmf-list-1>div>div
{
	font-size: 1rem;
}

.lets-talk-bg {
    margin: 7rem 0;
}

.about-home-item h2 {
    font-size: 2.5rem;
	letter-spacing: -1px;
}

.about-years h4 span
{
font-size: 2rem;
}

.about-years span
{
font-size: 3rem;
}


.module-header .contact-form-span {
    font-size: 3rem;
}

.rotate {
    width: 120px;
    height: 120px;
}

.rotate-item {
    left: auto;
    right: 10px;
}

.rotate .rotate-arrow {
    width: 18px;
    height: 18px;
}

.rotate a {
    padding: 1.7rem;
}

.rotate a:hover
{
    padding: 2rem;
}

	#works, #services, #object3, #object4, #object5
{
    scroll-margin-top: 48px;
}

.projects-vertical .mod-articlesnews-vertical {
	flex-direction: column;
        display: flex;
		//padding: 0 10px;
}

.newsflash-item-info, .intro-text-item {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
	padding-top: 4rem;
    font-size: 14px;
}

.next-work
{
    margin: 3rem 10px;
}

.next-work .mod-menu.mod-list.nav .nav-item a > span {
    font-size: 2rem;
}

.next_readmore img
{
    height: 56px;
}

.next-work .intro-text-item {
    display: flex;
    align-items: flex-start;
    height: 100%;
    flex-direction: column;
	padding: 20px;
}

.next_readmore
{
    width: 100%;
	word-break: break-word;
		font-size: 1rem;
		display: flex;
}

.intro-text-item a
{
    display: flex;
    flex-direction: column;
        align-items: flex-start;
}

.next-work .intro-text-title h3:before,
.next-work .intro-text-title h3:after
 {
    font-size: 2rem;
}

.blog-item {
    row-gap: 1rem;
	padding: 0;
}

.blog-item:nth-child(2n+1) {
    border-right: none;

}

.columns-2 .group-wrapper
{
display: flex;
flex-direction: column;
row-gap: 3rem;
padding: 3rem 10px;
}

.blog-item .item-content {

}

.blog-item figure img
{
width: 100%;
}

.blog-item .page-header h2 a,
.newsflash-item-info h3 a {
    font-size: 1rem;
}

.newsflash-item-info h3 {
        font-size: 1.8rem;
    }
	

.blog-item figure {
        height: 500px;
        width: 100%;
        position: relative;
        //overflow: hidden;
    }

.call_me
	 {
    display: flex;
    flex-direction: column;
    align-items: center;
		 gap: 2rem;
}

.call_me-item2
{
    height: 340px;
    width: 100%;
}

.call_me-item2:after {
    width: 153px;
    height: 100%;
    top: 2rem;
    right: 0rem;
}

.autor_date
{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    font-size: 14px;
}

.footer  .call_me-item {
    align-items: center;
	gap: 2rem;
}

.call_me-item2 video {
width: 100%;
}

.works_default, .two-bloks
{
    display: flex;
	flex-direction: column;
	gap: 4rem;
}

.works_default-text {
    gap: 2rem;
    padding: 0;
}

.two-bloks-2 {
    padding: 0;
    border: none;
}

.two-bloks-2-ico {
    grid-template-columns: repeat(2, 1fr);
}

.item_title span,
.services-item-text span,
.works_default-text span,
.about-home-item:first-child span, 
.questions-home-item span {
   
}

.mockup {
    display: flex;
    max-height: none;
    flex-direction: column;
}

.more_works {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.more_works-1 {
    padding: 1rem;
}

.more_works-1:nth-child(2)
{
	border: none;
}

ul.tags {
    display: flex;
    flex-direction: row;
    //gap: 10px;
    flex-wrap: wrap;
}

.tags-blog li.tagitit, li.list-inline-item {
}

.questions-home {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.questions-home-inner {
    gap: 2rem;
}

.questions .Simple .djtabs-accordion {
        font-size: 20px;
        line-height: 1;
}

.mod-articlescategory {
    padding: 0 20px;
    line-height: 1;
}

//.case-grid-wrap {
    padding: 0 10px;
    gap: 3rem;
    flex-direction: column;
	margin-top: 2rem;
}

//.case-item-wrapper
{
    gap: 3rem;
}

.case-left-wrap {
    flex-direction: column;
	gap: 3rem;
}

//.case-right-wrap {
    gap: 3rem;
}

//.case-item-image-wrap {
    height: 380px;
}

.case-right-wrap h4, .case-left-wrap h4,
.case-gray-text, .footer .case-gray-text {
    font-size: 30px;
	letter-spacing: -0.56px;
}

//.case-single-title {
    font-size: 26px;
}

.footer .case-gray-text {
    padding: 0 10px;
}

.footer-inner {
    margin: 4rem 10px;
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.footer-inner-item
{
    display: flex;
    flex-direction: column;
}

  footer div.mod-footer {
    flex-direction: row;
  }
  
.contact-form-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
}

.projects-vertical .mod-articlesnews-vertical .img2 {
    height: 140%;
    left: 0;
    top: 22%;
    width: 100%;
    transform: translate3d(0px, 0px, 0px);
    object-fit: cover;
}

.projects-vertical .mod-articlesnews-vertical img.paralax {
    width: 100%;
    //height: 450px;
    object-fit: cover;
}

.text-animation {
  font-size: 1.5rem;
  letter-spacing: -1px;
}

li.newsflash-item {
    //height: 62.5vh;
}

.text-scroll3 {
    margin: 2rem 0;
    padding: 1rem 0px;
}

.text-scroll2-inner .fa {
        font-size: 14px;
}

.text-scroll2-inner {
	gap: 1rem;
}

.text-color-background {
    grid-template-columns: 100%;
	justify-items: center;
    gap: 3rem;
	overflow: hidden;
	margin: 3rem auto;
}

.services-item-text {
    
    gap: 2rem;
    flex-direction: column;
    justify-content: space-between;
}

.services-item-block {
    display: flex;
    flex-direction: column;
}

.services-item-block-in:first-child {
min-height: 600px;
}

.services-item-all {
    display: flex;
    flex-direction: column-reverse;
}

.services-item-block-in {
padding: 4rem 2rem;
        width: 100%;
}

.services-item-block-in:nth-child(2).element-animation.element-show,
.services-item-block-in:nth-child(3).element-animation.element-show,
.services-item-block-in:nth-child(4).element-animation.element-show
{
    transition-delay: 0s;
}

.service_img {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0px 3rem;
}

.partners {
    padding: 3rem 0;
    //margin: 3rem auto;
    background: #ffffff;
}

#horizontal1 {
    margin-right: -50%;
}

.text-color-background h3 {
	font-size: 2rem;
}

.text-color-background-block-grid {
    font-size: 18px;
	grid-template-columns: auto;
    border: none;
    gap: 2rem;
}

.text-color-background-block-grid div {
    padding: 2rem 0;
}

.text-color-background-block-grid div:nth-child(1),
.text-color-background-block-grid div:nth-child(2),
.text-color-background-block-grid div:nth-child(3)
 {
    //border: none;
}

.text-color-background-block-grid div:after {

    bottom: 0px;
}

.text-color-background-img img {

}

.home-hero-content {
	margin: 0 10px;
	//padding-top: 2rem;
	grid-template-columns: auto;
}

.home-hero-content-inner2 {
    position: relative;
    display: flex;
    justify-items: start;
    padding: 2rem 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.service-heading-all
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}


.services-card {
padding: 2rem 10px;
}

.services-item-text p {
    margin: 0;
}

.card-padding
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
	padding: 0;
}

.services-item {
    
}

img.service_img {
    width: calc(100% - 40px);
    height: 406px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    top: -126px;
    left: 0;
	margin-left: 20px;
	padding-bottom: 0;
}

.services-item:nth-child(2) .Deep-Black .djtab-custom-html {
    padding: 1.5rem 0;
	gap: 1.3rem;
}

.services-item:nth-child(2) .Deep-Black .djtab-custom-html:after
{
top: 40px;
}

.projects-vertical>div:first-child {

}

.ipone_design-inner-items {
    gap: 10px;
}

.ipone_design-inner-item {
    padding: 8px;
    border-radius: 14px;
}

.ipone_design img {
    border-radius: 10px;
}

.ipone_design-inner-item:after {
top: 2px;
    left: 30%;
    width: 40px;
    height: 15px;
    border-radius: 4px;
}

.error-404 img {
    max-width: 300px;
}

.works-type-module {
    position: relative;
        top: 0;
        z-index: 6;
        padding-bottom: 0;
}

.works-type {
	padding: 0 10px;
	margin: 2rem auto;
}

.cta-btn-wrap
{
    position: relative;
    opacity: 1;
    width: fit-content;
	left: auto;
        top: auto;
		transform: none !important;
}

.scrollmagic-pin-spacer {
        min-height: auto !important;
}
#scroll-container {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        padding-left: 10px;
}

.text-color-background-img {
    width: 50vw;
    flex-shrink: 0;
    height: 340px !important;
	padding: 0 !important;
        color: #ffffff;
}

.text-color-background-img:first-child {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
    justify-content: center;
}


}

/***360***/

@media (max-width: 360px) {

.about-home {
    padding: 1rem;
}

}


/***landscape***/
@media screen and (max-height: 30em) and (orientation: landscape) {

.header-wrapper 
{
padding-top: 10px;
padding-bottom: 10px;
}

.menu-small .header-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}

.logo-name 
{
margin: 10px 0;
}

.logo-name a {
    padding: 6px 0;
	font-size: 12px;
}

.logo-name span {
    font-size: 12px;
}

.menu-btn p {
    font-size: 14px;
}

.logo-name a:after {
    height: 47px;
    top: -5px;
	border: 1px solid #ffffff;
}

//.logo-name a:hover:after {
    top: -7px;
}

.container-header {
    position: relative;
    top: 0;
	min-height: auto;
}

.home-hero-content {
    padding-top: 1rem;
    align-items: flex-start;
}

.home-hero-heading {
    font-size: 3.3rem;
}

.home-hero-heading img {
    width: 64px;
    height: auto;
}

.text-animation {
  font-size: 1.5rem;
  letter-spacing: -1px;
}

.currency_quotation {
    padding: 1rem 0;
}

.card-padding
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
	padding: 1.5rem;
}

.services-item-text {
    top: 87px;
}


#horizontal1 {
    margin-right: -10%;
}

.text-color-background {
    grid-template-columns: 40% auto;
	justify-items: center;
    gap: 1rem;
	overflow: hidden;
}

.text-color-background h3 {
    font-size: 2rem;
}

.text-color-background-block-grid div {
    padding: 1rem;
}

.text-color-background-block-grid {
    font-size: 18px;
	grid-template-columns: auto;
    border: none;
    gap: 1rem;
}

.text-color-background-block-grid div:nth-child(1),
.text-color-background-block-grid div:nth-child(2),
.text-color-background-block-grid div:nth-child(3)
 {
    border: none;
}

.text-color-background-block-grid div:after {
    right: 0;
    bottom: 0px;
    font-size: 66px;
}

.text-color-background-img img {
    width: 100%;
    height: 480px;
}

.error-404 img {
    max-width: 250px;
}

.error-404
{
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1rem;
}

.rotate {
    width: 100px;
    height: 100px;
}

.rotate a {
    width: 30px;
    width: 30px;
	padding: 26px;
}

}