/* front page only */

/* Social block on the main page */
.full-width-social {
	width: 100%;
	background: #fff;
	border: 0;
	padding: 4%;
	position: relative;
}

.full-width-social svg {
	width: 100%;
	position: relative;
	z-index: 4;
	fill: #333;
}

img.social-main-img {
	width: 100%;
	border-radius: 0px;
	border-radius: 40px;
}

@media only screen and (max-width: 960px) {
	a.social-main {
		margin: 2% 0 0 0;
		width: 47%;
	}
}

img.social-main-img-transparent {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: none;
	border-radius: 50%;
	line-height: 0;
}

a.social-main-a {
	position: absolute;
	z-index: 6;
	border: 0;
	border-radius: 50%;
	line-height: 0;
	background: url(../img/100-px-transparent.png) center center;
	background-size: cover;	
	-webkit-transition: background-image 0.2s ease-out;
	transition: background-image 0.2s ease-out;
	transition: transform .2s; /* Animation */
	transition: 0.2s ease-out;
}

a.social-main-a-soundcloud:hover,
a.social-main-a-telegram:hover,
a.social-main-a-dzen:hover,
a.social-main-a-vk:hover,
a.social-main-a-youtube:hover,
a.social-main-a-pinterest:hover
 {
	transform: scale(1.1);
}

:root {
	--social-icons-on-hover-bg-size: 110%;
}

a.social-main-a-soundcloud:hover {
	background: url(../../../wp-content/uploads/2023/05/social-media-icons-svg-tictok-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}

a.social-main-a-telegram:hover {
	background: url(../../../wp-content/uploads/2023/02/social-media-icons-svg-telegram-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}
a.social-main-a-dzen:hover {
	background: url(../../../wp-content/uploads/2023/02/social-media-icons-svg-dzen-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}
a.social-main-a-vk:hover {
	background: url(../../../wp-content/uploads/2023/02/social-media-icons-svg-vk-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}
a.social-main-a-youtube:hover {
	background: url(../../../wp-content/uploads/2024/08/social-media-icons-svg-vk-video-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}
a.social-main-a-pinterest:hover {
	background: url(../../../wp-content/uploads/2023/02/social-media-icons-svg-pinterest-01.svg) center center;
	background-size: var(--social-icons-on-hover-bg-size);
}
img.social-main-image {
	display: block;
	width: 8%;
	position: absolute;
	display: inline-block;
	z-index: 2;
	border-radius: 50%;
}
img.social-main-image-soundcloud, a.social-main-a-soundcloud {
	width: 7%;
	top: 32%;
	left: 8%;
	border-radius: 20%;
}
img.social-main-img-transparent-soundcloud {
	border-radius: 20%;
}
img.social-main-image-telegram, a.social-main-a-telegram {
	width: 7%;
	top: 52%;
	left: 17%;
}
img.social-main-image-dzen, a.social-main-a-dzen {
	width: 10%;
	top: 37%;
	left: 28%;
	border-radius: 50%;
}

img.social-main-image-vk, a.social-main-a-vk {
	width: 8%;
	top: 48%;
	left: 48%;
	border-radius: 10%;
}
img.social-main-img-transparent-vk {
	border-radius: 10%;
}
img.social-main-image-youtube, a.social-main-a-youtube {
	width: 11%;
	top: 34%;
	left: 61%;
}
img.social-main-image-pinterest, a.social-main-a-pinterest {
	width: 8%;
	top: 42%;
	left: 82%;
	border-radius: 50%;
}
/* Social block big */

@media only screen and (max-width: 960px) { /* Social block for mobile */
	.full-width-social {
		padding-bottom: 60%;
	}
	img.social-main-image-soundcloud,
	a.social-main-a-soundcloud,
	img.social-main-image-telegram, 
	a.social-main-a-telegram,
	img.social-main-image-dzen, 
	a.social-main-a-dzen,
	img.social-main-image-vk, 
	a.social-main-a-vk,
	img.social-main-image-youtube, 
	a.social-main-a-youtube,
	img.social-main-image-pinterest, 
	a.social-main-a-pinterest {
		width: 29.3%;
		border-radius: 20px;
	}
	
	img.social-main-image-soundcloud, a.social-main-a-soundcloud {
		top: 39%;
		left: 66.6%;
	}
	img.social-main-image-telegram, a.social-main-a-telegram {
		top: 39%;
		left: 35.3%;
	}
	img.social-main-image-dzen, a.social-main-a-dzen {
		top: 68.8%;
		left: 66.6%;
	}
	img.social-main-image-vk, a.social-main-a-vk {
		top: 68.8%;
		left: 4%;
	}
	img.social-main-image-youtube, a.social-main-a-youtube {
		top: 68.8%;
		left: 35.3%;
		border-radius: 10%!important;
		/*-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);*/
	}
	img.social-main-image-pinterest, a.social-main-a-pinterest {
		top: 39%;
		left: 4%;
	}
	a.social-main-a-soundcloud:hover,
	a.social-main-a-telegram:hover,
	a.social-main-a-dzen:hover,
	a.social-main-a-vk:hover,
	a.social-main-a-youtube:hover,
	a.social-main-a-pinterest:hover
	 {
		transform: scale(1);
	}
	/*a.social-main-a-youtube:hover {
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}*/
}
/* Social block on the main page */

/* Hero section */

.hero-section-wraper {
	/* background-image: linear-gradient(180deg, #fff, #eee); */
	padding-top: 112px;
	padding-left: 4%;
	padding-right: 4%;
	margin: 0 0 140px 0;
}

.hero-section {
	display: grid;
	grid-template-areas:
	"hero-section-image hero-section-text";
	grid-template-rows: auto;
	grid-template-columns: repeat(2, 48%);
	gap: 4%;
	height: calc(100vh - 112px);
	max-width: 1920px;
	margin: 0 auto;
}

.hero-section-text {
	display: grid;
	grid-area: hero-section-text;
	align-self: center;
	/* justify-content: center; */
}

.hero-section-text h1  {
	max-width: 640px;
}
.hero-section-text p {
	max-width: 480px;
} 

.hero-section-image {
	display: grid;
	grid-area: hero-section-image;
	/* background: center center url(https://tiku.ru/wp-content/uploads/2024/11/hero-section-photo-light-3.png.avif) no-repeat;
	background-size: 90%; */
	position: relative;
}

.hero-image-dark {
	display: none!important;
}

.hero-section-image img {
	display: block;
	width: 90%;
	margin: auto;
}

@media only screen and (max-width: 1100px) {
	.hero-section-text h1 {
		font-size: 1.6em;
	}
}

@media only screen and (max-width: 960px) {

	.hero-section-wraper {
		padding-top: 140px;
	}

	.hero-section {
		display: grid;
		grid-template-areas:
		"hero-section-image" 
		"hero-section-text";
		grid-template-rows: auto auto;
		grid-template-columns: repeat(1, 100%);
		gap: 0;
		height: auto;
		padding: 0;
	}
	
	.hero-section-text h1 {
		font-size: 1.2em;
	}

	.hero-section-image {
		height: 280px;
		background-size: contain;
		background-position: left center;
	}

	.hero-section-image img {
		height: 280px;
		width: auto;
		margin-left: 0;
	}

	.hero-section-text {
		align-self: start;
	}
}

@media only screen and (max-width: 380px) {
	.hero-section-image img {
		width: 100%;
		height: auto!important
	}
}

.hero-button {
	min-width: 222px;
}

/* Hero section */

.work-experince {
	background-color: var(--super-accent-color);
	display: inline-block;
	padding: 0px 6px;
	/* font-size: 0.6em; */
	border-radius: 8px;
	/* position: relative;
	top: -2px; */
	/* transform: rotate(8deg); 
	font-weight: bold; */
}

.floating {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}


















/* бегущая строка с логотипами */
/* бегущая строка с логотипами */
/* бегущая строка с логотипами */
/* бегущая строка с логотипами */

.main-page-item.full-width {
  width: 100%;
}

.companies-worked {
  width: 100%;
  overflow: hidden;
}

.companies-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
	margin: 40px 0 80px 0;
}

/* градиенты по краям */
.companies-slider::before,
.companies-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.companies-slider::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.companies-slider::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* лента */
.companies-slider__track {
  display: inline-block;
  white-space: nowrap;
  animation: companies-marquee 30s linear infinite;
}

/* пауза */
/* .companies-slider:hover .companies-slider__track {
  animation-play-state: paused;
} */

/* элементы */
.companies-slider__item {
  display: inline-block;
  vertical-align: middle;
  margin-right: 100px;
  width: auto !important;
  max-width: none !important;
  text-decoration: none;
}

/* логотипы */
.companies-slider__item img {
  display: block;
  height: 60px;
  width: auto !important;
  max-width: none !important;
  border-radius: 0;
}

.companies-worked__header h2 {
	text-align: center;
	margin: 40px;
}

.knauf-logo-slider img {
	height: 100px;
}

.sony-tv-logo-slider img {
	height: 90px;
}

.bright-fit-logo-slider img {
	height: 50px;
}

.maimoon-ceramica-logo-slider img {
	height: 55px;
}


/* анимация */
@keyframes companies-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 960px) {
  .companies-slider__item {
    margin-right: 40px;
  }

  .companies-slider__item img {
    height: 40px;
  }

  .companies-slider::before,
  .companies-slider::after {
    width: 40px;
  }

	.companies-slider {
		margin: 40px 0;
	}

	.knauf-logo-slider img {
		height: 70px;
	}

	.sony-tv-logo-slider img {
		height: 70px;
	}

	.bright-fit-logo-slider img {
		height: 30px;
	}

	.maimoon-ceramica-logo-slider img {
		height: 40px;
	}
}


.recommend-container {
	display: flex;
	justify-content: space-between;
	padding-top: 2%;
}

.recommend-container a {
	width: 22%;
	display: block;
	border: 0;
}

.recommend-container a img {
	width: 100%;
	display: block;
	transition: .3s ease-in-out;
}

.recommend-container a:hover img {
	/* border-color: var(--accent-color); */
	scale: 1.02;
}

.recommend-container a:hover {
	border: 0;
}

.recommend-container a p {
	font-size: .8em;
}


.recommend {
	padding: 2%;
	margin-top: 2%;
	margin-bottom: 0;
	background: var(--card-background);
	border-radius: 20px;
	width: 100%;
}

.recommend h3 {
	text-align: center;
}


@media (max-width: 960px) {

	.recommend-container {
		display: flex;
		overflow-x: auto;
		gap: 4%;
		padding-bottom: 10px;

		/* важно — убирает перенос */
		flex-wrap: nowrap;

		/* плавный скролл */
		scroll-behavior: smooth;

		/* скрыть скроллбар (опционально) */
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding-top: 4%;
		padding-left: 4%;
		padding-right: 4%;
		margin-left: -4%;
		margin-right: -4%;
	}

	.recommend-container::-webkit-scrollbar {
		display: none;
	}

	.recommend-container a {
		flex: 0 0 70%; /* ширина карточки */
		width: auto;
	}

	.recommend {
		padding: 4%;
		margin-top: 4%;
		margin-bottom: 0;
		background: var(--card-background);
		border-radius: 20px;
		width: 100%;
	}

}