@font-face {
  font-family: "Bebas Neue Cyrillic";
  src: url("../fonts/bebas_neue_cyrillic.eot"); /* IE 9 Compatibility Mode */
  src:
    url("../fonts/bebas_neue_cyrillic.eot@")
      format("embedded-opentype"),
    /* IE < 9 */ url("../fonts/bebas_neue_cyrillic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/bebas_neue_cyrillic.woff")
      format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/bebas_neue_cyrillic.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/bebas_neue_cyrillic.svg")
      format("svg"); /* Chrome < 4, Legacy iOS */
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeueRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas_neue_bold.woff2") format("woff2"),
    url("../fonts/bebas_neue_bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --transition-duration: 0.3s;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-family: "Roboto", sans-serif;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

:focus {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* html .clearfix {
  height: 1%;
}

th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

br {
  line-height: 10px;
}

input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
  border: 0px;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none;
}

input[type="text"],
input[type="submit"],
input[type="button"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none;
  resize: none;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  height: auto;
}

.inner {
  max-width: 1438px;
  margin: 0 auto;
}

.flex-between-center {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  align-items: center;
  gap: 50px;
}

.button-white {
      white-space: nowrap;
  height: 60px;
  background: #fff;
  border-radius: 8px;
  padding: 0 38px;
  font-weight: 400;
  transition: all var(--transition-duration) ease;
  font-size: 18px;
  color: #000;
  display: inline-block;
  line-height: 60px;
  text-decoration: none;
}
.button-white:hover {
  opacity: 0.92;
  -webkit-box-shadow: 0px 1px 30px 8px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0px 1px 30px 8px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 1px 30px 8px rgba(255, 255, 255, 0.2);
  background: rgba(236, 186, 53, 1);
}

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

.header {
  width: 100%;
  background: rgba(0, 0, 0, 1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header.header--glass {
  background: rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header.header--glass .header__menu-item a {
  color: rgba(255, 255, 255, 0.9);
}

.header.header--glass .header__logo {
  opacity: 0.95;
}

.header .inner {
  height: 80px;
}

.header__logo {
  display: inline-block;
  width: 264px;
  height: 49px;
  background: url("../img/logo-header.png") no-repeat;
  background-size: cover;
  font-size: 0;
}



.header__list {
  display: -webkit-flex;
  display: flex;
  gap: 26px;

}

.header__list-item {
  list-style: none;
}

.header__list-link {
  display: block;
  width: 37px;
  height: 37px;
  transition: all var(--transition-duration) ease;
}

.header__list-link .icon {
  width: 100%;
  height: 100%;
  display: block;
}

.header__list-link .icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: all var(--transition-duration) ease;
}

.header__list-link:hover .icon svg path {
  fill: rgba(236, 186, 53, 1);
}

.header__menu {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  align-items: center;
}

.header__menu-item a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  margin: 0 13px;
  transition: color var(--transition-duration) ease;
}

.header__menu-item a:hover {
  color: rgba(236, 186, 53, 1);
}
.header .inneree {
    height: 60px;
}
.compyesno{
     display: none; 
}
@media only screen and (min-width: 320px) and (max-width: 996px){
.compyes{
   display: none; 
}
}
/****** header END *****/

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

/****** section hero *****/
.card-app {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-app__image img {
    width: 100%;
}
.card-app__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-top: -27px;
    background: #ececec;
    position: relative;
    clip-path: polygon(0 25px, 15% 25px, 20% 0, 100% 0, 100% 100%, 0 100%);
    padding: 20px 15px;
    gap: 30px;
}
.card-app__title {
    font-family: "Bebas Neue";
    font-size: 28px;
    font-weight: 700;
    margin-left: 20%;
    margin-top: -20px;
}
.card-app__content >p {
    margin-top: 25px;
}
.card-app__btn {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #3e5af7;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60px;
    cursor: pointer;
    border: none;
}
@media (max-width: 797.98px) {
    .card-app__title {
        font-size: 16px;
    }
}
@media (min-width: 1000px) {
.card-app__image img {
    min-height: 330px;
}
}
/* Equal height for Embla slides */
.embla__container {
  align-items: stretch;
}

.embla__slide {
  display: flex;
  height: auto;
}

.embla__slide > * {
  width: 100%;
}

/* Popular cards */
.popular__gallery .card-app,
.popular__gallery .applications__item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.popular__gallery .card-app__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popular__gallery .card__link {
  margin-top: auto;
}

/* Projects / achievements / partners image slides */
.projects__gallery .embla__slide,
.achievements__gallery .embla__slide,
.partners__gallery .embla__slide {
  align-items: stretch;
}

.projects__gallery-image,
.achievements__gallery img,
.partners__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Solutions slider */
.solutions__flex .embla__slide {
  display: flex;
}

.solutions__flex .solutions__item {
  width: 100%;
  height: 100%;
}

.hero {
  margin-top: -120px;
  width: 100%;
  background: url(../img/bg-image.webp) center bottom no-repeat;
  background-size: cover;
  height: 100%;
}

.hero .inner {
  min-height: calc(100vh - 130px);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  position: relative;
}

.hero__title {
  font-weight: 400;
  font-size: 120px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  margin-bottom: 35px;
}

.button--yellow {
  background: RGBA(255, 208, 84, 1);
  background: linear-gradient(
    90deg,
    rgba(255, 208, 84, 1) 0%,
    rgba(255, 238, 194, 1) 50%,
    rgba(255, 208, 84, 1) 100%
  );
  font-size: 20px;
  font-weight: 500;
  padding: 0 40px;
  line-height: 60px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3e2413;
  border: none;
  border-radius: 6px;
  min-width: 279px;
  height: 60px;
  box-sizing: border-box;
  transition: all var(--transition-duration) ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.button--yellow:hover {
  background: linear-gradient(
    90deg,
    rgba(236, 186, 53, 1) 0%,
    rgba(255, 238, 194, 1) 50%,
    rgba(236, 186, 53, 1) 100%
  );
}
.button--blue {
  background: #3e5af7;
  font-size: 20px;
  font-weight: 500;
  padding: 12px 40px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 6px;
  min-width: 279px;
  min-height: 60px;
  box-sizing: border-box;
  transition: all var(--transition-duration) ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.button--blue:hover {
  opacity: 0.8;
}

/* Оранжевая кнопка (блок производства — «Записаться на экскурсию») */
.button--orange {
  background: #e85a2a;
  background: linear-gradient(
    90deg,
    #d94e1f 0%,
    #e85a2a 50%,
    #d94e1f 100%
  );
  font-size: 20px;
  font-weight: 500;
  padding: 12px 40px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 6px;
  min-width: 279px;
  min-height: 60px;
  box-sizing: border-box;
  transition: all var(--transition-duration) ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.button--orange:hover {
  background: linear-gradient(
    90deg,
    #c44518 0%,
    #e85a2a 50%,
    #c44518 100%
  );
  color: #fff;
  opacity: 0.95;
}

.button-block {
  display: flex;
  gap: 15px;
  padding-top: 36px;
}

.hero__menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.hero__menu-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 4px;
}

.hero__menu-item {
  width: 100%;
  height: 130px;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 30px;
  padding: 0 40px;
  box-sizing: border-box;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.21);
}

.hero__menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    190deg,
    rgba(6, 14, 27, 0.8) 0%,
    rgba(61, 61, 61, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 0;
}

.hero__menu-item .icon,
.hero__menu-item .hero__menu-text {
  position: relative;
  z-index: 1;
}

.hero__menu-text {
  font-size: 28px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
}

/****** section hero END *****/

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

/****** section catalog *****/

.catalog {
  padding: 60px 0;
}

.catalog .catalog__flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 70px;
}

.catalog__left,
.catalog__right {
  width: 100%;
}

.template-title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  margin-bottom: 35px;
}

.catalog__sections {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 19px;
}

.catalog__section-link {
  width: 335px;
  position: relative;
  height: 237px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.catalog__section-link .catalog__section-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}

.catalog__section-link:hover .catalog__section-image {
  transform: scale(1.1);
}

.catalog__section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.catalog__section-title {
  font-size: 22px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
}

.yellow-color {
  background: linear-gradient(
    90deg,
    rgba(255, 208, 84, 1) 0%,
    rgba(255, 238, 194, 1) 50%,
    rgba(255, 208, 84, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: "Bebas Neue Cyrillic";
}

.catalog__section-caption {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 16px;
  color: #000;
  text-decoration: underline;
  display: inline-block;
  background-color: #fff;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  -webkit-border-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 4px;
  -moz-border-radius-bottomleft: 0;
  border-radius: 4px;
  border-bottom-left-radius: 0;
  transform: skewX(-14deg);
}

.catalog__section-link:hover .catalog__section-caption {
  text-decoration: none;
}

.catalog__center {
  text-align: center;
  margin-top: 60px;
}
.breadcrumbs {
    margin: 40px 0; padding: 0; /* Убираем отступы */
   }
   .breadcrumbs li {
    display: inline-block;
     /* Выстраиваем по горизонтали */
   }
   .breadcrumbs li::before {
    content: '/'; /* Разделитель */
    margin-left: 5px; /* Отступ слева */
    margin-right: 5px; /* Отступ справа */
    color: #7f7f7f; /* Цвет разделителя */
   }
   .breadcrumbs li:first-child::before {
    content: ''; /* Убираем разделитель для первого пункта */
    margin-left: 0px;
   }

.breadcrumbs li a {
    text-decoration:none;
    font-family: roboto;
    font-weight: 400;
    color: black;
}

.breadcrumbs li a:hover,
.breadcrumbs li a:hover::after,
.breadcrumbs li a.reduct,
.breadcrumbs li a.reduct::after {
    color: #999;
}
/****** section catalog END *****/

/****** Embla Carousel *****/

.projects__gallery.embla {
  overflow: hidden;
}

.projects__gallery .embla__viewport {
  overflow: hidden;
  scroll-behavior: smooth;
}

.projects__gallery .embla__container {
  display: flex;
  touch-action: pan-x;
}

.projects__gallery .embla__slide {
  flex: 0 0 30% !important;
  min-width: 0;
  padding: 0;
  margin: 0 10px;
  box-sizing: border-box;
  max-width: 30%;
  width: 30%;
}

.projects__gallery .embla__slide img {
width: 100%;
    min-height: 305px;
    object-fit: cover;
    height: auto;
    display: block;
}

.projects__gallery {
  margin-bottom: 10px;
}

/****** Embla Carousel END *****/

/****** section production *****/

.production {
  width: 100%;
  background: #fff;
  position: relative;
  overflow-x: hidden;
  padding-top: 68px;
  margin-top: 100px;
}

.production::before {
 content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 94px);
    background: #ececec;
    top: 68px;
    left: 60%;
}


.production .inner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  /* gap: 40px; */

  position: relative;
}

.production__image {
  width: 50%;
  height: 561px;
  border-radius: 0 22px 22px 0;
  position: relative;
}

.production__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: -16%;
  border-radius: 22px;
  top: -68px;
}

.production__content {
  flex: 1;
  max-width: 779px;
  width: 50%;
  background-color: #ececec;
  padding: 40px 0px 40px 171px;
  border-radius: 22px 0 11px 22px;
  margin-left: -16%;
}

.production__title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.production__description {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.6;
  margin-bottom: 40px;
}
.production__description p {
      line-height: 21px;
  margin-bottom: 22px;
}

.production__button {
  margin-top: 20px;
}

/****** section production END *****/

/****** section popular *****/

.popular {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.popular__title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 50px;
}

.popular__gallery.embla {
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
}

.popular__gallery .embla__viewport {
  overflow: hidden;
}

.popular__gallery .embla__container {
  display: flex;
  touch-action: pan-x;
  margin-left: -7px;
  margin-right: -7px;
}

.popular__gallery .embla__slide {
  flex: 0 0 33.333%;
  min-width: 0;
  padding-left: 7px;
  padding-right: 7px;
  box-sizing: border-box;
}


.card {
  position: relative;
  background: #ececec;
  border-radius: 8px;
  overflow: hidden;
}

.card__wrapper-image {
  width: 100%;
  height: 330px;
  position: relative;
  margin-bottom: 31px;
}

.card__wrapper-image .card__title {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: rgba(236, 236, 236, 1);
  height: 26px;
  width: 55%;
  padding: 6px 0;
  padding-left: 16px;
  -webkit-border-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 4px;
  -moz-border-radius-bottomleft: 0;
  border-radius: 4px;
  border-bottom-left-radius: 0;
  transform: skewX(-14deg);
}

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

.card__title {
  font-size: 28px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
}

.card__title .title__text {
  font-size: 28px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  transform: skewX(14deg);
  display: inline-block;
}

.card__description {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.5;
  margin: 0 15px 20px;
}
.popular__card > p {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.5;
  margin: 0 15px 20px;
}

.card__link {
  display: block;
  background: #3e5af7;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all var(--transition-duration) ease;
}

.card__link:hover {
  opacity: 0.9;
}

.card--empty {
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: auto;
}

.card__title-wrapper {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.card__title-text {
  color: #000;
  font-family: "Bebas Neue Cyrillic";
  font-size: 54px;
  font-style: normal;
  font-weight: 500;
  line-height: 55px;
  text-transform: uppercase;
  margin: 0;
}

.popular__nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.popular__nav-button {
  width: 56px;
  height: 56px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
}

.popular__nav-button svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.popular__nav-button:hover:not(:disabled) {
  background: #000;
}

.popular__nav-button:hover:not(:disabled) svg {
  color: #fff;
}

.popular__nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/****** section popular END *****/

/****** section advantages *****/

#home .advantages {
  width: 100%;
  padding: 100px 0;
  background: url("../img/advantages_bg.jpg") center center no-repeat;
  background-size: cover;
  position: relative;
}

.advantages__title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 50px;
}

.advantages__list { 
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 13px;
}

.advantages__listse .advantages__item {
  flex: 0 0 calc(25% - 10px);
  min-width: 0;
  position: relative;
  height: 208px;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  border-radius: 11px;
  padding: 17px 19px;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.advantages__item .icon {
  width: 62px;
  height: 56px;
  margin-bottom: 20px;
}

.advantages__caption {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.advantages__caption span {
  font-weight: 600;
}

/****** section advantages END *****/

/****** section screens *****/

.screens {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.screens__gallery {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
}

.screens__gallery-item {
  flex: 0 0 calc(33.333% - 10px);
  min-width: 0;
}

.screens__center {
  text-align: center;
}

/****** section screens END *****/

/****** section solutions *****/

.solutions {
  width: 100%;
  padding: 60px 0;
  background: #fff;
}

.solutions__title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 108px;
}

.solutions__flex.embla {
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
  margin-top: -62px;
}

.solutions__flex .embla__viewport {
  overflow: hidden;
}

.solutions__flex .embla__container {
  display: flex;
  touch-action: pan-x;
}

.solutions__flex .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
  pointer-events: none;
}

.solutions__flex .embla__slide.embla__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.solutions__item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding-top: 62px;
}

.solutions__left {
  width: 44%;
  position: relative;
  height: 572px;
}
.reason-item__text {
    color: #fff;
font-family: "Bebas Neue" !important;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    position: relative;
    z-index: 1;
}
.solutions__image {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  position: absolute;
  top: -59px;
  right: -108px;
}

.solutions__right {
  flex: 1;
  background: #ececec;
  width: 50%;
  padding: 40px;
  border-radius: 11px;
  /* box-sizing: border-box; */
  padding-left: 158px;
}

.solutions__subtitle {
  font-weight: 400;
  font-size: 34px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.solutions__right >p {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.3;
  margin-bottom: 30px;
}

.solutions__button {
  margin-top: 30px;
}

.solutions__nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.solutions__nav-button {
  width: 56px;
  height: 56px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
}

.solutions__nav-button svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.solutions__nav-button:hover:not(:disabled) {
  background: #000;
}

.solutions__nav-button:hover:not(:disabled) svg {
  color: #fff;
}

.solutions__nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/****** section solutions END *****/

/****** section contact *****/

.contact {
  width: 100%;
  padding: 100px 0;
  background: url("../img/contact_bg.jpg") center center no-repeat;
  background-size: cover;
  position: relative;
}

.contact__title {
  font-weight: 500;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}

.contact__form {
  max-width: 1440px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.contact__field {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.contact__field--row {
  -webkit-flex-direction: row;
  flex-direction: row;
  gap: 18px;
}

.contact__field--row .contact__input {
  flex: 1;
}

.contact__input {
  background: rgba(18, 15, 31, 0.5);
  border: 1px solid rgba(238, 238, 238, 0.21);
  border-radius: 8px;
  height: 68px;
  padding: 0 20px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  box-sizing: border-box;
}

.contact__input::placeholder {
  color: #fff;
  opacity: 1;
}

.contact__checkbox-label {
      pointer-events: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  cursor: pointer;
}

.contact__checkbox {
  width: 17px;
  height: 17px;
  background: #fff;
  border: none;
  cursor: pointer;
}

.contact__submit {
  margin: 0 auto;
  margin-top: 20px;
  cursor: pointer;
}

/* Solutions page specific contact styles */
.contact--solutions {
  padding: 96px 0 165px 0;
  background: none;
  min-height: 573px;
}

.contact--solutions .contact__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.contact--solutions .contact__bg-image {
  position: absolute;
  top: 0;
  left: -2.97%;
  width: 105.94%;
  height: 178.42%;
  object-fit: cover;
  pointer-events: none;
}

.contact--solutions .contact__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

.contact--solutions .inner {
  position: relative;
  z-index: 2;
}

.contact__title--solutions {
  font-weight: 400;
  color: #000;
  margin-bottom: 96px;
  line-height: normal;
 
}

.contact__title--decorative {
  color: #fff;
  text-align: center;
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
}

.contact__input--solutions {
  background: #fff;
  border: 1px solid rgba(62, 90, 247, 0.54);
  color: #000;
}

.contact__input--solutions::placeholder {
  color: #000;
}

.contact__field--checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
  margin-bottom: 0;
}

.contact__checkbox-label--solutions {
  color: #070505;
}

.contact__checkbox--solutions {
  border: 1px solid rgba(62, 90, 247, 0.54);
  flex-shrink: 0;
}

.contact__submit {
  width: 279px;
  height: 60px;
}

/****** section contact END *****/

/****** section achievements *****/

.achievements {
  width: 100%;
  padding: 100px 0;
  padding-bottom: 0px;
  background: #fff;
}

.achievements__gallery.embla {
  overflow: hidden;
  margin-bottom: 100px;
}

.achievements__gallery .embla__viewport {
  overflow: hidden;
}

.achievements__gallery .embla__container {
  display: flex;
  touch-action: pan-x;
  margin-left: -12.5px;
  margin-right: -12.5px;
}

.achievements__gallery .embla__slide {
  flex: 0 0 25%;
  min-width: 0;
  padding: 0 12.5px;
  box-sizing: border-box;
}

.achievements__gallery-item {

  background: #d9d9d9;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

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

/****** section achievements END *****/

/****** section partners *****/

.partners {
  width: 100%;
  padding: 20px 0;
  background: #fff;
}

.partners__gallery.embla {
  overflow: hidden;
  margin-bottom: 100px;
}

.partners__gallery .embla__viewport {
  overflow: hidden;
}

.partners__gallery .embla__container {
  display: flex;
  touch-action: pan-x;
  margin-left: -12.5px;
  margin-right: -12.5px;
}

.partners__gallery .embla__slide {
  flex: 0 0 25%;
  min-width: 0;
  padding: 0 12.5px;
  box-sizing: border-box;
}

.partners__gallery-item {
  height: 370px;
  background: #d9d9d9;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.partners__gallery-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/****** section partners END *****/

/****** footer *****/

.footer {
  width: 100%;
 background: url(../img/footer-banner.jpg) center / cover no-repeat;
  padding: 33px 0;
  padding-bottom: 0px;
  position: relative;
  /* overflow: hidden; */
  /* height: 541px; */
}

.footer .inner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.footer__image-wrapper {
  /* flex: 0 0 672px; */
  width: 100%;
  max-width: 475px;
  height: 511px;
  border-radius: 19px 19px 0 0;
  position: relative;
}

.footer__image {
  width: auto;
  height: 100%;
  min-height: 574px;
  /* object-fit: cover; */
  display: block;
  border-radius: 19px 19px 0 0;
  position: absolute;
  top: -63px;
  right: 0px;
}

.footer__content-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  flex: 1;
  max-width: 63%;
}

.footer__title {
  font-weight: 400;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 55px;
  padding-top: 42px;
}

.footer__content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__left {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 35px;
}

.footer__phone {
  font-size: 36px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-duration) ease;
}
.header__flex-right .footer__phone {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-duration) ease;
}
.header__flex-right .footer__email {
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #fff;
    text-transform: lowercase;
    text-decoration: none;
    transition: color var(--transition-duration) ease;
}
.header__flex-right .footer__left {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}
.footer__phone:hover {
  color: rgba(236, 186, 53, 1);
}

.footer__email {
  font-size: 36px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #fff;
  text-transform: lowercase;
  text-decoration: none;
  transition: color var(--transition-duration) ease;
}

.footer__email:hover {
  color: rgba(236, 186, 53, 1);
}

.footer__social {
  display: -webkit-flex;
  display: flex;
  gap: 26px;
}

.footer__social-item {
  list-style: none;
}

.footer__social-link {
  display: block;
  width: 37px;
  height: 37px;
  transition: all var(--transition-duration) ease;
}

.footer__social-link .icon {
  width: 100%;
  height: 100%;
  display: block;
}

.footer__social-link .icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: all var(--transition-duration) ease;
}

.footer__social-link:hover .icon svg path {
  fill: rgba(236, 186, 53, 1);
}

.footer__right {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 36px;
}

.footer__menu {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 36px;
  list-style: none;
}

.footer__menu-item {
  list-style: none;
}

.footer__menu-link {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition-duration) ease;
}

.footer__menu-link:hover {
  color: rgba(236, 186, 53, 1);
}

/****** footer END *****/

/****** solutions-hero START *****/
.solutions-hero {
  position: relative;
  min-height: calc(100vh - 120px);
  overflow: hidden;
}

.solutions-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.solutions-hero__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
  z-index: 1;
}

.solutions-hero__bg-image--active {
  opacity: 1;
  z-index: 2;
}

.solutions-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.solutions-hero__menu {
  position: relative;
  z-index: 4;
  margin: 0;
}

.solutions-hero__menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  position: relative;
  height: calc(100vh - 120px);
}

.solutions-hero__menu-item {
  flex: 1;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 1);
  height: 100%;
}

.solutions-hero__menu-item:last-child {
  border-right: none;
}

.solutions-hero__menu-item:first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
}

.solutions-hero__menu-link {
  display: block;
  padding: 190px 0 0 0px;
  text-decoration: none;
  color: white;
  transition: color var(--transition-duration) ease;
  position: relative;
  height: 100%;
  cursor: pointer;
  text-align: center;
}

.solutions-hero__menu-item--active .solutions-hero__menu-link {
  text-decoration: underline;
}

.solutions-hero__menu-text {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 54px;
  line-height: 54px;
  text-transform: uppercase;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
}

.solutions-hero__description {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: normal;
  color: white;
  max-width: 268px;
  /* margin: 73px 0 0 0; */
  transition:
    opacity var(--transition-duration) ease,
    visibility var(--transition-duration) ease;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 320px;
  left: 89px;
  text-align: left;
}

.solutions-hero__menu-item--active .solutions-hero__description {
  opacity: 1;
  visibility: visible;
}

.solutions-hero .inner {
  position: relative;
  z-index: 99;
  height: 100%;
}

.bottom--links {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 128px;
}

/* .header { */
/*   display: none; */
/* } */

/****** solutions-hero END *****/

/****** section led-ekran-hero *****/

.led-ekran-hero {
  width: 100%;
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -130px;
}

.led-ekran-hero.page-decorative {
  height: 641px;
}

.led-ekran-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.led-ekran-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.led-ekran-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.led-ekran-hero .inner {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 60px 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1438px;
  margin: 0 auto;
}

.led-ekran-hero__content {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

.led-ekran-hero__title {
  font-weight: 400;
  font-size: 120px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
}
.led-ekran-hero__title.size2 {
  font-size: 54px;
}

.led-ekran-hero__title br {
  display: block;
  content: "";
  margin-top: 0;
}

.led-ekran-hero__description {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  max-width: 600px;
  text-align: left;
}

/****** section led-ekran-hero END *****/

/****** section led-ekran-catalog *****/

.led-ekran-catalog {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.led-ekran-catalog .description {
  color: #000;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: 483px;
  margin-bottom: 38px;
}

.led-ekran-catalog.bg-gray {
  background: rgba(236, 236, 236, 1);
}

.led-ekran-catalog__filters {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
}

.led-ekran-catalog__filter-wrapper {
  position: relative;
  display: inline-block;
  min-width: 200px;
  width: auto;
}

.led-ekran-catalog__filter-select {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 0 50px 0 20px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-image: none;
  background-color: #fff;
}

.led-ekran-catalog__filter-select:hover {
  border-color: #d4d4d4;
}

.led-ekran-catalog__filter-select:focus {
  background-color: #fff;
  border-color: #3e5af7;
  outline: none;
}

.led-ekran-catalog__filter-select option {
  background: #fff;
  color: #000;
  padding: 10px;
}

.led-ekran-catalog__filter-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  z-index: 1;
  transition: all var(--transition-duration) ease;
  width: 12px;
  height: 8px;
}

.led-ekran-catalog__filter-wrapper:hover .led-ekran-catalog__filter-arrow {
  color: #3e5af7;
}

.led-ekran-catalog__filter-select:focus + .led-ekran-catalog__filter-arrow {
  color: #3e5af7;
  transform: translateY(-50%) rotate(180deg);
}

.led-ekran-catalog__filter-select option {
  background: #fff;
  color: #000;
  padding: 10px;
}

.led-ekran-catalog__items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
}

/****** portfolio styles *****/

.portfolio__filter-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.portfolio__filter-button {
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  background: #ececec;
  color: #666;
}

.portfolio__filter-button--active {
  background: #3e5af7;
  color: #fff;
}

.portfolio__filter-button:hover {
  opacity: 0.9;
}

.portfolio__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 14px;
  margin-top: 30px;
}

.portfolio__gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 200px;
}

.portfolio__gallery-item--wide {
  grid-column: span 2;
  min-height: 400px;
}

.portfolio__gallery-item--small {
  grid-row: span 1;
  min-height: 193px;
}

.portfolio__gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1200px) {
  .portfolio__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio__gallery-item--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .portfolio__filter-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .portfolio__gallery {
    grid-template-columns: 1fr;
  }

  .portfolio__gallery-item--wide {
    grid-column: span 1;
  }
}

.led-ekran-catalog__item {
  flex: 0 0 calc(33.333% - 10px);
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .led-ekran-catalog__item {
    flex: 0 0 calc(50% - 7px);
  }

  .led-ekran-hero__title {
    font-size: 90px;
  }
}

@media (max-width: 768px) {
  .led-ekran-catalog__item {
    flex: 0 0 100%;
  }

  .led-ekran-catalog {
    padding: 60px 0;
  }

  .led-ekran-catalog__filters {
    gap: 10px;
    margin-bottom: 30px;
  }

  .led-ekran-catalog__filter-btn {
    padding: 10px 20px;
    font-size: 16px;
    min-height: 44px;
  }

  .led-ekran-hero__title {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .led-ekran-hero__description {
    font-size: 16px;
  }

  .led-ekran-hero .inner {
    min-height: 400px;
    padding: 40px 0;
  }
}

/****** section led-ekran-catalog END *****/

/****** section led-lights-hero *****/

.led-lights-hero {
  width: 100%;
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -130px;
}

.led-lights-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.led-lights-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.led-lights-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.led-lights-hero .inner {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 60px 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1438px;
  margin: 0 auto;
}

.led-lights-hero__content {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

.led-lights-hero__title {
  font-weight: 400;
  font-size: 120px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  margin-bottom: 0;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
}

@media (max-width: 1200px) {
  .led-lights-hero__title {
    font-size: 90px;
  }
}

@media (max-width: 768px) {
  .led-lights-hero__title {
    font-size: 60px;
    margin-bottom: 0;
  }

  .led-lights-hero .inner {
    min-height: 400px;
    padding: 40px 0;
  }
}

/****** section led-lights-hero END *****/

/****** section led-lights-catalog *****/

.led-lights-catalog {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.led-lights-catalog__filters {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
}

.led-lights-catalog__filter-wrapper {
  position: relative;
  display: inline-block;
  min-width: 200px;
  width: auto;
}

.led-lights-catalog__filter-select {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 0 50px 0 20px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-image: none;
  background-color: #fff;
}

.led-lights-catalog__filter-select:hover {
  border-color: #d4d4d4;
}

.led-lights-catalog__filter-select:focus {
  background-color: #fff;
  border-color: #3e5af7;
  outline: none;
}

.led-lights-catalog__filter-select option {
  background: #fff;
  color: #000;
  padding: 10px;
}

.led-lights-catalog__filter-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  z-index: 1;
  transition: all var(--transition-duration) ease;
  width: 12px;
  height: 8px;
}

.led-lights-catalog__filter-wrapper:hover .led-lights-catalog__filter-arrow {
  color: #3e5af7;
}

.led-lights-catalog__filter-select:focus + .led-lights-catalog__filter-arrow {
  color: #3e5af7;
  transform: translateY(-50%) rotate(180deg);
}

.led-lights-catalog__items {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
}

.led-lights-catalog__item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  background: #ececec;
  border-radius: 8px;
  overflow: hidden;
  gap: 0;
}

.led-lights-catalog__item-image {
  width: 40%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.led-lights-catalog__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.led-lights-catalog__item-content {
  flex: 1;
  padding: 40px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  box-sizing: border-box;
}

.led-lights-catalog__item-title {
  font-size: 28px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 400;
}

.led-lights-catalog__item-description {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.5;
  margin-bottom: 30px;
  flex: 1;
}

.led-lights-catalog__item-buttons {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  gap: 20px;
  -webkit-align-items: center;
  align-items: center;
}

.led-lights-catalog__item-button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: all var(--transition-duration) ease;
  box-sizing: border-box;
}

.led-lights-catalog__item-button--yellow {
  min-width: 200px;
}

.led-lights-catalog__item-button--blue {
  background: #3e5af7;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  border-radius: 8px;
  min-width: 150px;
}

.led-lights-catalog__item-button--blue:hover {
  opacity: 0.9;
}

.led-lights-catalog__pagination {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}

.led-lights-catalog__pagination-link {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
  box-sizing: border-box;
  background: transparent;
  border: none;
  padding: 0;
  min-width: auto;
  height: auto;
}

.led-lights-catalog__pagination-link--prev {
  color: #a1a1a1;
}

.led-lights-catalog__pagination-link--next {
  color: #000;
}

.led-lights-catalog__pagination-link--number {
  color: #000;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.led-lights-catalog__pagination-link--number:hover {
  color: #3e5af7;
}

.led-lights-catalog__pagination-link--active {
  display: -webkit-flex;
  display: flex;
  width: 68px;
  padding: 24px 32px;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: #fff;
  color: #000;
  border: 2px solid #3e5af7;
  border-radius: 8px;
  height: auto;
  min-width: 68px;
  box-sizing: border-box;
}

.led-lights-catalog__pagination-link--active:hover {
  background: #fff;
  border-color: #3e5af7;
  color: #000;
}

@media (max-width: 1200px) {
  .led-lights-catalog__item {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .led-lights-catalog__item-image {
    width: 100%;
    height: 300px;
  }

  .led-lights-catalog__item-content {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .led-lights-catalog {
    padding: 60px 0;
  }

  .led-lights-catalog__filters {
    gap: 10px;
    margin-bottom: 30px;
  }

  .led-lights-catalog__filter-wrapper {
    min-width: 150px;
    flex: 1;
  }

  .led-lights-catalog__filter-select {
    padding: 0 40px 0 15px;
    font-size: 16px;
    min-height: 44px;
    height: 44px;
  }

  .led-lights-catalog__item-buttons {
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .led-lights-catalog__item-button {
    width: 100%;
  }

  .led-lights-catalog__item-button--yellow {
    min-width: auto;
  }

  .led-lights-catalog__pagination {
    flex-wrap: wrap;
    gap: 15px;
  }

  .led-lights-catalog__pagination-link--number {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .led-lights-catalog__pagination-link--prev,
  .led-lights-catalog__pagination-link--next {
    font-size: 16px;
  }
}

/****** section led-lights-catalog END *****/

/****** section mediafasady-hero *****/

.mediafasady-hero {
  width: 100%;
  position: relative;
  min-height: calc(100vh - 120px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  margin-top: -130px;
}

.mediafasady-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.mediafasady-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.mediafasady-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.mediafasady-hero .inner {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding: 60px 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1438px;
  margin: 0 auto;
}

.mediafasady-hero__content {
  width: 100%;
  margin-bottom: 40px;
}

.mediafasady-hero__title {
  font-weight: 400;
  font-size: 120px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  margin-bottom: 0;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
}

/* Универсальный класс hero-menu для переиспользования */
.hero-menu {
  margin-top: 40px;
  width: 100%;
}

.hero-menu.hero-menu--reusable {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
}

.hero-menu__list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-menu__item {
  width: 100%;
  height: 130px;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 30px;
  padding: 0 40px;
  box-sizing: border-box;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.21);
  list-style: none;
}

.hero-menu__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    190deg,
    rgba(6, 14, 27, 0.8) 0%,
    rgba(61, 61, 61, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 0;
}

.hero-menu__item .icon,
.hero-menu__item .hero-menu__text {
  position: relative;
  z-index: 1;
}

.hero-menu__text {
  font-size: 28px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
}

@media (max-width: 1200px) {
  .mediafasady-hero__title {
    font-size: 90px;
  }
}

@media (max-width: 768px) {
  .mediafasady-hero__title {
    font-size: 60px;
  }

  .mediafasady-hero .inner {
    min-height: 400px;
    padding: 40px 0;
  }

  .hero-menu__list {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
  }

  .hero-menu__item {
    height: auto;
    min-height: 100px;
    padding: 20px;
  }
}

/****** section mediafasady-hero END *****/

/****** section mediafasady-about *****/

.mediafasady-about {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.mediafasady-about__title {
  font-size: 48px;
  font-family: "Bebas Neue Cyrillic";
  color: #4a4a4a;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
}

.mediafasady-about__flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  gap: 30px;
  -webkit-align-items: stretch;
  align-items: stretch;
  margin-bottom: 40px;
}

.mediafasady-about__left {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.mediafasady-about__placeholder {
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: #ececec;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 30px;
  box-sizing: border-box;
}

.mediafasady-about__placeholder-text {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #4a4a4a;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}

.mediafasady-about__right {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.mediafasady-about__graphic {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: visible;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: #ececec;
  border-radius: 8px;
}

.mediafasady-about__graphic-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.mediafasady-about__video {
  width: 100%;
  height: 200px;
  background: #ececec;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mediafasady-about__video-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
  z-index: 1;
}

.mediafasady-about__video-button:hover {
  transform: scale(1.1);
}

.mediafasady-about__video-button svg {
  display: block;
}

.mediafasady-about__button-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-top: 40px;
}

.mediafasady-about__button {
  background: #3e5af7;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  padding: 18px 40px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.mediafasady-about__button:hover {
  background: #2d47d6;
}

@media (max-width: 1200px) {
  .mediafasady-about__flex {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .mediafasady-about__placeholder {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .mediafasady-about {
    padding: 60px 0;
  }

  .mediafasady-about__title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .mediafasady-about__placeholder {
    min-height: 300px;
    padding: 20px;
  }

  .mediafasady-about__placeholder-text {
    font-size: 14px;
    max-width: 100%;
  }

  .mediafasady-about__graphic {
    height: 250px;
  }

  .mediafasady-about__video {
    height: 180px;
  }

  .mediafasady-about__button {
    width: 100%;
    max-width: 300px;
  }
}

/****** section mediafasady-about END *****/

/****** section mediafasady-advantages *****/

.mediafasady-advantages {
  width: 100%;
  padding: 100px 0;
  background: #fff;
  position: relative;
}

.mediafasady-advantages__title {
  font-weight: 500;
  font-size: 54px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 50px;
  text-align: left;
}

.mediafasady-advantages__title.mb-2 {
  margin-bottom: 22px;
}

.mediafasady-advantages__list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 13px;
  -webkit-justify-content: center;
  justify-content: center;
}

.mediafasady-advantages__item {
  flex: 0 0 calc(25% - 10px);
  min-width: 0;
  position: relative;
  height: 208px;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  border-radius: 11px;
  padding: 17px 19px;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.mediafasady-advantages__item .icon {
  width: 62px;
  height: 56px;
  margin-bottom: 20px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.mediafasady-advantages__caption {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

@media (max-width: 1200px) {
  .mediafasady-advantages__item {
    flex: 0 0 calc(50% - 7px);
  }
}

@media (max-width: 768px) {
  .mediafasady-advantages {
    padding: 60px 0;
  }

  .mediafasady-advantages__title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .mediafasady-advantages__item {
    flex: 0 0 100%;
    height: auto;
    min-height: 180px;
  }
}

/****** section mediafasady-advantages END *****/

/****** section mediafasady-promo *****/

.mediafasady-promo {
  width: 100%;
  padding: 100px 0;
  background: linear-gradient(to right, #3e2413 0%, #8e4c26 100%);
  position: relative;
  overflow: visible;
}

.mediafasady-promo__inner {
  position: relative;
  min-height: 400px;
}

.mediafasady-promo__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -100px;
  width: 600px;
  height: 800px;
  background-image: url("../img/mediafasady_iphone.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  z-index: 1;
  pointer-events: none;
}

.mediafasady-promo__content {
  position: relative;
  z-index: 2;
  max-width: 50%;
}

.mediafasady-promo__title {
  font-size: 56px;
  font-family: "Bebas Neue Cyrillic";
  color: #fff;
  margin-bottom: 40px;
  padding-top: 40px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

.mediafasady-promo__button {
  min-width: 200px;
}

@media (max-width: 1200px) {
  .mediafasady-promo__content {
    max-width: 60%;
  }

  .mediafasady-promo__inner::after {
    bottom: -100px;
    width: 400px;
    height: 600px;
  }
}

@media (max-width: 768px) {
  .mediafasady-promo {
    padding: 60px 0;
  }

  .mediafasady-promo__inner {
    min-height: 300px;
  }

  .mediafasady-promo__inner::after {
    bottom: -60px;
    width: 250px;
    height: 400px;
  }

  .mediafasady-promo__content {
    max-width: 100%;
  }

  .mediafasady-promo__title {
    font-size: 36px;
    margin-bottom: 30px;
  }
}

/****** section mediafasady-promo END *****/

/****** section mediafasady-applications *****/

.mediafasady-applications {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.mediafasady-applications__title {
  font-size: 48px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  margin-bottom: 50px;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
}

.mediafasady-applications__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.mediafasady-applications__item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.mediafasady-applications__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mediafasady-applications__image-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 60%;
}

.mediafasady-applications__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediafasady-applications__content {
  padding: 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1;
  flex: 1;
}

.mediafasady-applications__item-title {
  font-size: 24px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-weight: 400;
}

.mediafasady-applications__item-description {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.5;
  margin-bottom: 20px;
  -webkit-flex: 1;
  flex: 1;
}

.mediafasady-applications__item-button {
  align-self: flex-start;
  min-width: 150px;
}

.mediafasady-applications__pagination {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 40px;
}

.mediafasady-applications__show-more {
  min-width: 200px;
}

@media (max-width: 1200px) {
  .mediafasady-applications__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .breadcrumbs {
    margin: 20px 0;
    padding: 0;
}
  .mediafasady-applications {
    padding: 60px 0;
  }

  .mediafasady-applications__title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .mediafasady-applications__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mediafasady-applications__content {
    padding: 20px;
  }
}

/****** section mediafasady-applications END *****/

/****** section mediafasady-gallery *****/

.mediafasady-gallery {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.mediafasady-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.mediafasady-gallery__item {
  width: 100%;
}

.mediafasady-gallery__item--empty {
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.mediafasady-gallery__title-wrapper {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.mediafasady-gallery__title-text {
  color: #000;
  font-family: "Bebas Neue Cyrillic";
  font-size: 54px;
  font-style: normal;
  font-weight: 500;
  line-height: 55px;
  text-transform: uppercase;
  margin: 0;
}

.mediafasady-gallery__image {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1200px) {
  .mediafasady-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.98px) {
    .reason-item__text {
        font-size: 20px;
        line-height: 23px;
    }
}
@media (max-width: 768px) {
  .mediafasady-gallery {
    padding: 60px 0;
  }

  .mediafasady-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/****** section mediafasady-gallery END *****/

/****** section mediafasady-projects *****/

.mediafasady-projects {
  width: 100%;
  padding: 100px 0;
  background: #fff;
}

.mediafasady-projects__title {
  font-size: 48px;
  font-family: "Bebas Neue Cyrillic";
  color: #000;
  margin-bottom: 50px;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
}

.mediafasady-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.mediafasady-projects__item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding-top: 60%;
  background: #ececec;
}

.mediafasady-projects__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mediafasady-projects__item:hover .mediafasady-projects__image {
  transform: scale(1.05);
}

.mediafasady-projects__pagination {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 40px;
}

.mediafasady-projects__show-more {
  min-width: 200px;
}

@media (max-width: 1200px) {
  .mediafasady-projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mediafasady-projects {
    padding: 60px 0;
  }

  .mediafasady-projects__title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .mediafasady-projects__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/****** section mediafasady-projects END *****/

.production-section {
  position: relative;
  padding: 80px 0 100px;
  background: #fff;
}

.production-section .inner {
  position: relative;
  max-width: 1438px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.production-section .description {
  max-width: 493px;
  margin-bottom: 42px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.5;
}

/* Обёртка: навигация сверху справа, под ней слайдер */
.production-slider-wrapper {
  position: relative;
  margin-bottom: 50px;
}

/* Кнопки навигации над слайдером, с правой стороны (как в макете) */
.production-slider-nav.production-slider-nav--top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.production-slider-nav .production-nav {
  background: #000;
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.production-slider-nav .production-nav:hover:not(:disabled) {
  opacity: 0.85;
}

.production-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Кнопка по центру после слайдера (как screens__button) */
.production-section__center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  padding: 0 20px;
}

.production-section__center .production-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Production slider embla — только слайды, без навигации внутри */
.production-slider.embla {
  overflow: hidden;
}

.production-slider .embla__viewport {
  overflow: hidden;
  width: 100%;
}

.production-slider .embla__container {
  display: flex;
  touch-action: pan-x;
  margin-left: 0;
  margin-right: 0;
}

.production-slider .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Дублируем под .production-section для обратной совместимости */
.production-section .embla__viewport {
  overflow: hidden;
  width: 100%;
}

.production-section .embla__container {
  display: flex;
  touch-action: pan-x;
  margin: 0 -1rem;
}

.production-section .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Внутренности слайда: картинка слева, текст справа */
.production-flex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 17px;
  min-height: 400px;
  box-sizing: border-box;
}

.production-left {
  flex: 0 0 50%;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background: #f0f0f0;
}

.production-left .production-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.production-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 43px 32px;
  box-sizing: border-box;
  background: #ECECEC;
  border-radius: 8px;
}

.production-title {
  font-family: "Bebas Neue Cyrillic";
  font-size: 36px;
  font-weight: 500;
  color: #000;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1.2;
}

.production-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #000;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .production-section .inner {
    padding: 0;
  }

  .production-slider-nav.production-slider-nav--top {
    margin-bottom: 16px;
  }

  .production-right {
    padding: 24px 20px;
  }

  .production-flex {
    flex-direction: column;
    min-height: auto;
    gap: 24px;
  }

  .production-left {
    flex: 0 0 auto;
    max-height: 280px;
  }

  .production-title {
    font-size: 28px;
  }

  .production-section__center {
    margin-top: 36px;
  }
}

/****** section banner-section *****/

.banner-section {
  position: relative;
  padding: 80px 0 100px;
  background: url("../img/banner_bg.jpg") no-repeat center / cover;
}

.banner-section .inner {
  max-width: 1438px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.banner-section .banner-heading {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 40px;
  color: #fff;
}

.banner-flex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 60px;
  flex-wrap: wrap;
}

.banner-left {
  flex: 1 1 400px;
  min-width: 0;
}

.banner-list-caption {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 16px;
}

.banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.banner-list-item {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16px;
  padding-left: 28px;
  position: relative;
}

.banner-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: rgba(255, 208, 84, 1);
  border-radius: 50%;
}

.banner-right {
  flex: 0 1 420px;
  min-width: 0;
}

.banner-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  width: 100%;
}

.banner-form input[type="text"],
.banner-form input[type="tel"] {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #000;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.banner-form input::placeholder {
  color: #999;
  text-align: center;
}

.banner-form input:focus {
  outline: none;
  border-color: rgba(255, 208, 84, 0.8);
  box-shadow: 0 0 0 2px rgba(255, 208, 84, 0.2);
}

.banner-submit-button {
  align-self: stretch;
  width: 100%;
  height: 60px;
  padding: 0 40px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #3e2413;
  background: linear-gradient(
    90deg,
    rgba(255, 208, 84, 1) 0%,
    rgba(255, 238, 194, 1) 50%,
    rgba(255, 208, 84, 1) 100%
  );
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.banner-submit-button:hover {
  opacity: 0.95;
}

@media (max-width: 768px) {
  .banner-section {
    padding: 60px 0 80px;
  }

  .banner-section .inner {
    padding: 0;
  }

  .banner-section .banner-heading {
    font-size: 36px;
    margin-bottom: 28px;
  }

  .banner-flex {
    flex-direction: column;
    gap: 40px;
  }

  .banner-right {
    flex: 1 1 auto;
  }

  .banner-form {
    max-width: 100%;
  }

  .banner-submit-button {
    width: 100%;
  }
}

/****** section banner-section END *****/

/****** section comfort-light-section *****/

.comfort-light-section {
  padding: 80px 0 100px;
  background: #fff;
}

.comfort-light-section .inner {
  max-width: 1438px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.comfort-light-section__title {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 56px;
  text-align: left;
}

.comfort-light-section__list {
  display: flex;
  flex-direction: row;
  gap: 40px;
  margin-bottom: 60px;
}

.comfort-light-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background: transparent;
}

.comfort-light-card__label {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #000;
  margin: 0 0 8px;
}

.comfort-light-card__label--solution {
  color: #3E5AF7;
}

.comfort-light-card__text {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #000;
  margin: 0;
}

.comfort-light-section__images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.comfort-light-section__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

@media (max-width: 768px) {
  .comfort-light-section {
    padding: 60px 0 80px;
  }

  .comfort-light-section .inner {
    padding: 0;
  }

  .comfort-light-section__title {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 40px;
  }

  .comfort-light-section__list {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
  }

  .comfort-light-card__label,
  .comfort-light-card__text {
    font-size: 16px;
  }

  .comfort-light-section__images {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .comfort-light-section__image {
    aspect-ratio: 16 / 9;
  }
}

/****** section comfort-light-section END *****/

/****** section lighting-steps-section *****/

.lighting-steps-section {
  padding: 80px 0 100px;
  background: #fff;
}

.lighting-steps-section .inner {
  max-width: 1438px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.lighting-steps-heading {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 56px;
  text-align: left;
}

.lighting-steps-flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.lighting-step {
  height: 296px;
  border-radius: 8px;
  background: #ECECEC;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 24px;
  box-sizing: border-box;
  min-width: 0;
}

.lighting-step-number {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 99px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #3E5AF7;
  margin-bottom: 16px;
  display: block;
}

.lighting-step-description {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  margin: 0;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .lighting-steps-flex {
    grid-template-columns: repeat(2, 1fr);
  }

  .lighting-step-number {
    font-size: 72px;
  }
}

@media (max-width: 768px) {
  .lighting-steps-section {
    padding: 60px 0 80px;
  }

  .lighting-steps-section .inner {
    padding: 0;
  }

  .lighting-steps-heading {
    font-size: 32px;
    margin-bottom: 40px;
  }

  .lighting-steps-flex {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lighting-step {
    height: auto;
    min-height: 240px;
    padding: 24px 20px;
  }

  .lighting-step-number {
    font-size: 64px;
    margin-bottom: 12px;
  }

  .lighting-step-description {
    font-size: 16px;
  }
}

/****** section lighting-steps-section END *****/

/****** section reviews-partners-section *****/

.reviews-partners-section {
  padding: 80px 0 100px;
  background: #fff;
}

.reviews-partners-section .inner {
  max-width: 1438px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.reviews-partners-section__title {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 50px;
  text-align: left;
}

.reviews-slider-wrapper {
  position: relative;
  margin-bottom: 0;
}

.reviews-slider.embla {
  overflow: hidden;
}

.reviews-slider .embla__viewport {
  overflow: hidden;
  width: 100%;
}

.reviews-slider .embla__container {
  display: flex;
  touch-action: pan-x;
  margin-left: 0;
  gap: 16px;
}

.reviews-slider .embla__slide {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}

.reviews-slider .embla__slide > .reviews-slide {
  height: 100%;
}

.catalog_butes{
display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.reviews-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px 17px;
  min-height: 359px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #B1B1B1;
  box-sizing: border-box;
}

.reviews-avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 42px;
  display: block;
}

.reviews-name {
  font-family: "Bebas Neue Cyrillic", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 26px;
}

.reviews-description {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #000;
  margin: 0;
}

@media (max-width: 1024px) {
  .reviews-slider .embla__slide {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

@media (max-width: 768px) {
  .reviews-partners-section {
    padding: 60px 0 80px;
  }

  .reviews-partners-section__title {
    font-size: 36px;
    margin-bottom: 32px;
  }

  .reviews-slider .embla__slide {
    flex: 0 0 100%;
  }

  .reviews-slide {
    padding: 24px 17px;
    min-height: auto;
  }

  .reviews-avatar {
    width: 95px;
    height: 95px;
    margin-bottom: 32px;
  }

  .reviews-name {
    font-size: 24px;
  }

  .reviews-description {
    font-size: 16px;
  }
}

  .cookie-block {
    position: fixed;
    display: block;
    box-shadow: 0 0 40px rgba(144, 144, 144, 0.35);
    bottom: 0;
    max-width: 100%;
    z-index: 999;
    visibility: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
        font-size: 14px;
    left: 0;
      background: rgb(255 255 255 / 20%);
}
.cookie-block-visible {
    visibility: visible;
}
.cookie-block-wrap {
  display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
}
.cookie-block-info {
    font-size: 11px;
    width: 70%;
}
.cookie-block-info a {
    color: black;
}
.cookie-button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cookie-block-icon {
    top: 15px;
    right: 15px;
    position: absolute;
    width: 14px;
    height: 14px;
    background-size: cover;
    cursor: pointer;
    background-image: url(/assets/img/icon/kr.svg);
}
a.cookie-actions-accept {
    margin: 0 15px;
}
.btn-v-lg {
    cursor: pointer;
background: RGBA(255, 208, 84, 1);
    background: linear-gradient(90deg, rgba(255, 208, 84, 1) 0%, rgba(255, 238, 194, 1) 50%, rgba(255, 208, 84, 1) 100%);
    font-size: 12px;
    font-weight: 500;
    padding: 0 8px;
    line-height: 26px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3e2413;
    border: none;
    border-radius: 6px;
    /* min-width: 279px; */
    /* height: 60px; */
    box-sizing: border-box;
    transition: all var(--transition-duration) ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.cookie-block-info b{
       font-weight: 700; 
}
.cookie-actions-accept:hover {
    text-decoration: none;
    background-color: black;
    color: #000;
    border-color: #006089;
}
.formpolitic{
  font-size: 12px;
    padding-bottom: 15px;
}
  .catalog {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        animation: catalogFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
      }



      .catalog .template-title,
      .catalog__left,
      .catalog__right,
      .catalog__center {
        animation: catalogFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .catalog__left { animation-delay: 0.1s; }
      .catalog__right { animation-delay: 0.2s; }
      .catalog__center { animation-delay: 0.32s; }

      .catalog__section-link {
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
        transform: translateZ(0);
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.35s ease,
          filter 0.35s ease;
      }

      .catalog__section-link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(135deg, rgba(255, 208, 84, 0.2), transparent 42%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.46));
        opacity: 0.72;
        transition: opacity 0.35s ease;
        pointer-events: none;
      }

      .catalog__section-link::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -70%;
        z-index: 3;
        width: 42%;
        height: 180%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        transform: rotate(14deg);
        transition: left 0.65s ease;
        pointer-events: none;
      }

      .catalog__section-link:hover {
        transform: translateY(-10px) scale(1.025);
        box-shadow: 0 28px 62px rgba(0, 0, 0, 0.22);
        filter: saturate(1.08);
      }

      .catalog__section-link:hover::before {
        opacity: 0.95;
      }

      .catalog__section-link:hover::after {
        left: 130%;
      }

      .catalog__section-image {
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
      }

      .catalog__section-link:hover .catalog__section-image {
        transform: scale(1.14);
        filter: brightness(0.92) contrast(1.06);
      }

      .catalog__section-overlay {
        transition: transform 0.35s ease;
      }

      .catalog__section-link:hover .catalog__section-overlay {
        transform: translateY(-4px);
      }

      .catalog__section-title {
        text-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
        transition: transform 0.35s ease, letter-spacing 0.35s ease;
      }

      .catalog__section-link:hover .catalog__section-title {
        transform: translateY(-3px);
        letter-spacing: 0.02em;
      }

      .catalog__section-caption {
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          background-color 0.35s ease,
          color 0.35s ease,
          box-shadow 0.35s ease;
      }

      .catalog__section-link:hover .catalog__section-caption {
        transform: translate(-8px, -8px);
        background-color: #ffd054;
        color: #000;
        box-shadow: 0 10px 24px rgba(255, 208, 84, 0.35);
      }

      .catalog__button {
        transition:
          transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.3s ease,
          filter 0.3s ease;
      }

      .catalog__button:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(255, 208, 84, 0.32);
        filter: brightness(1.04);
      }

      @keyframes catalogFadeUp {
        from {
          opacity: 0;
          transform: translateY(34px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes catalogGlowIn {
        from {
          opacity: 0;
          transform: translateY(24px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .catalog,
        .catalog::before,
        .catalog .template-title,
        .catalog__left,
        .catalog__right,
        .catalog__center {
          animation: none;
        }

        .catalog__section-link,
        .catalog__section-image,
        .catalog__section-overlay,
        .catalog__section-title,
        .catalog__section-caption,
        .catalog__button {
          transition: none;
        }
      }

      .hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background-size: 106% auto;
        animation: heroImageBreath 14s ease-in-out infinite alternate;
      }
      .hero::before,
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .hero::before {
        z-index: 0;
        background:
          linear-gradient(105deg, transparent 0%, rgba(255, 208, 84, 0.12) 36%, rgba(255, 255, 255, 0.22) 48%, transparent 62%),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px);
        mix-blend-mode: screen;
        opacity: 0.55;
        transform: translateX(-65%);
        animation: heroScreenSweep 5.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
      }

      .hero::after {
        z-index: 0;
        background:
          radial-gradient(circle at 72% 42%, rgba(255, 208, 84, 0.2), transparent 24%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24));
        opacity: 0.72;
        animation: heroLightPulse 7s ease-in-out infinite alternate;
      }

      .hero .inner {
        position: relative;
        z-index: 1;
      }

      @keyframes heroImageBreath {
        from {
          background-position: center bottom;
          filter: saturate(1) contrast(1);
        }
        to {
          background-position: 52% bottom;
          filter: saturate(1.08) contrast(1.04);
        }
      }

      @keyframes heroScreenSweep {
        0% {
          opacity: 0;
          transform: translateX(-70%) skewX(-10deg);
        }
        18% {
          opacity: 0.62;
        }
        58% {
          opacity: 0.46;
        }
        100% {
          opacity: 0;
          transform: translateX(72%) skewX(-10deg);
        }
      }

      @keyframes heroLightPulse {
        from {
          opacity: 0.48;
          transform: scale(1);
        }
        to {
          opacity: 0.82;
          transform: scale(1.03);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero,
        .hero::before,
        .hero::after {
          animation: none;
        }
      }

      .hero__title,
      .hero__button,
      .hero__menu-item {
        opacity: 0;
        transform: translateY(34px);
        animation: heroContentReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: opacity, transform, filter;
      }

      .hero__title {
        animation-delay: 0.22s;
        filter: blur(10px);
      }

      .hero__button {
        animation-delay: 0.48s;
        transform: translateY(26px) scale(0.96);
      }

      .hero__menu-item {
        animation-duration: 0.82s;
        transform: translateY(42px);
      }

      .hero__menu-item:nth-child(1) { animation-delay: 0.72s; }
      .hero__menu-item:nth-child(2) { animation-delay: 0.84s; }
      .hero__menu-item:nth-child(3) { animation-delay: 0.96s; }

      .hero__button {
        position: relative;
        overflow: hidden;
      }

      .hero__button::after {
        content: "";
        position: absolute;
        top: -60%;
        left: -65%;
        width: 44%;
        height: 220%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.46), transparent);
        transform: rotate(16deg);
        animation: heroButtonShine 2.8s 1.35s ease-in-out infinite;
        pointer-events: none;
      }

      .hero__menu-item::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 58%);
        opacity: 0;
        transform: translateY(18px);
        animation: heroPlateGlow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        pointer-events: none;
      }

      .hero__menu-item:nth-child(1)::after { animation-delay: 1.02s; }
      .hero__menu-item:nth-child(2)::after { animation-delay: 1.14s; }
      .hero__menu-item:nth-child(3)::after { animation-delay: 1.26s; }

      @keyframes heroContentReveal {
        0% {
          opacity: 0;
          transform: translateY(34px) scale(0.98);
          filter: blur(10px);
        }
        65% {
          opacity: 1;
          filter: blur(0);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      @keyframes heroButtonShine {
        0%, 42% {
          left: -65%;
          opacity: 0;
        }
        52% {
          opacity: 1;
        }
        72%, 100% {
          left: 125%;
          opacity: 0;
        }
      }

      @keyframes heroPlateGlow {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero__title,
        .hero__button,
        .hero__menu-item,
        .hero__button::after,
        .hero__menu-item::after {
          opacity: 1;
          transform: none;
          filter: none;
          animation: none;
        }
      }
@media only screen and (min-width: 320px) and (max-width: 678px){
.catalog {
    padding: 40px 0;
}
.catalog .catalog__flex {
    margin-bottom: 20px;
}
.production {
    width: 100%;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    padding-top: 18px;
    margin-top: 60px;
}
.popular {
    width: 100%;
    padding: 60px 0;
    background: #fff;
}
.card-app__title {
    font-family: "Bebas Neue";
    font-size: 22px;
    font-weight: 700;
    margin-left: 20%;
    margin-top: -13px;
}
.solutions__item {
    padding-top: 40px;
}
.solutions__right {
    padding: 5px;
}
.contact {
    width: 100%;
    padding: 60px 0;
}
.solutions {
    padding: 60px 0px 10px 0px; 
}
    .template-title,.popular__title,.template-title,.template-title,.advantages__title {
        font-size: 38px!important;
    }
    .catalog .inner {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
}
    #home .screens__center {
      margin-top: 40px;
      text-align: center;
    }

    #home .advantages {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #home .advantages::before {
      content: "";
      position: absolute;
      inset: 12% auto auto -180px;
      z-index: -1;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 205, 0, 0.18), transparent 68%);
      pointer-events: none;
    }

    #home .advantages__title {
      transform-origin: left bottom;
    }

    #home .advantages__item {
      position: relative;
      overflow: hidden;
      transform-origin: center bottom;
      will-change: transform, opacity, filter;
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
    }

    #home .advantages__item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 205, 0, 0.18), transparent 48%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    #home .advantages__item .icon {
      position: relative;
      z-index: 1;
      display: inline-flex;
      transition: transform 0.34s ease, filter 0.34s ease;
    }

    #home .advantages__item .icon svg {
      transition: transform 0.34s ease;
    }

    #home .advantages__caption {
      position: relative;
      z-index: 1;
    }

    #home .advantages__item:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 38px rgba(17, 24, 32, 0.18);
    }

    #home .advantages__item:hover::before {
      opacity: 1;
    }

    #home .advantages__item:hover .icon {
      transform: translateY(-4px) scale(1.08);
      filter: drop-shadow(0 10px 16px rgba(255, 205, 0, 0.28));
    }

    #home .advantages__item:hover .icon svg {
      transform: rotate(-3deg);
    }

    @keyframes advantageTileReveal {
      0% {
        opacity: 0;
        transform: translateY(36px);
        filter: blur(6px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    #home .advantages.advantages--ready:not(.advantages--visible) .advantages__item {
      opacity: 0;
      transform: translateY(36px);
      filter: blur(6px);
    }

    #home .advantages.advantages--ready.advantages--visible .advantages__item {
      animation: advantageTileReveal 0.68s cubic-bezier(0.2, 0.72, 0.18, 1) both;
    }

    #home .advantages.advantages--done .advantages__item {
      opacity: 1;
      animation: none;
      transform: none;
      filter: none;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(1) {
      animation-delay: 0s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(2) {
      animation-delay: 0.09s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(3) {
      animation-delay: 0.18s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(4) {
      animation-delay: 0.27s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(5) {
      animation-delay: 0.36s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(6) {
      animation-delay: 0.45s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(7) {
      animation-delay: 0.54s;
    }

    #home .advantages.advantages--visible .advantages__item:nth-child(8) {
      animation-delay: 0.63s;
    }

    @media (prefers-reduced-motion: reduce) {
      #home .advantages.advantages--ready:not(.advantages--visible) .advantages__item,
      #home .advantages.advantages--ready.advantages--visible .advantages__item,
      #home .advantages.advantages--done .advantages__item {
        opacity: 1;
        animation: none;
        transform: none;
        filter: none;
      }
    }

    @supports (animation-timeline: view()) {
      #home .advantages__title {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
      }

      #home .advantages__item {
        animation-timeline: auto;
        animation-range: normal;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #home .advantages__title,
      #home .advantages__item,
      #home .advantages__item::before,
      #home .advantages__item .icon,
      #home .advantages__item .icon svg {
        animation: none;
        transition: none;
        transform: none;
        filter: none;
      }

      #home .advantages__title,
      #home .advantages__item {
        opacity: 1;
      }
    }

    #home .projects__gallery-image {
      transition: transform 0.55s ease, filter 0.55s ease;
      will-change: transform, filter;
    }

    #home .projects__gallery .embla__slide:hover {
      transform: translateY(-10px) scale(1.025);
      box-shadow: 0 24px 48px rgba(17, 24, 32, 0.28);
      filter: saturate(1.08);
    }

    #home .projects__gallery .embla__slide:hover::before {
      opacity: 1;
      transform: translateX(120%);
    }

    #home .projects__gallery .embla__slide:hover .projects__gallery-image {
      transform: scale(1.07);
      filter: contrast(1.06) saturate(1.12);
    }

    @media (max-width: 767px), (hover: none) {
      #home .projects__gallery,
      #home .projects__gallery .embla__viewport,
      #home .projects__gallery .embla__container,
      #home .projects__gallery .embla__slide,
      #home .projects__gallery-image {
        touch-action: pan-y pinch-zoom;
      }

      #home .projects__gallery .embla__slide:hover {
        transform: none;
        box-shadow: none;
        filter: none;
      }

      #home .projects__gallery .embla__slide:hover::before {
        opacity: 0;
        transform: translateX(-120%);
      }

      #home .projects__gallery .embla__slide:hover .projects__gallery-image {
        transform: none;
        filter: none;
      }
    }

    @media (max-width: 767px), (hover: none) {
      #home .popular__gallery,
      #home .popular__gallery .embla__viewport,
      #home .popular__gallery .embla__container,
      #home .popular__gallery .embla__slide,
      #home .popular__gallery .applications__item,
      #home .popular__gallery .card__image {
        touch-action: pan-y pinch-zoom;
      }

      #home .popular__gallery .applications__item:hover,
      #home .popular__gallery .applications__item:focus-within,
      #home .popular__gallery .applications__item:hover .card__image,
      #home .popular__gallery .applications__item:focus-within .card__image,
      #home .popular__gallery .applications__item:hover .card-app__title,
      #home .popular__gallery .applications__item:focus-within .card-app__title {
        transform: none;
        filter: none;
      }
    }

    @media (max-width: 767px), (hover: none) {
      #home .solutions .embla,
      #home .solutions .embla__viewport,
      #home .solutions .embla__container,
      #home .solutions .embla__slide,
      #home .solutions__flex,
      #home .achievements__gallery,
      #home .achievements__gallery .embla__viewport,
      #home .achievements__gallery .embla__container,
      #home .achievements__gallery .embla__slide,
      #home .achievements__gallery-item,
      #home .partners__gallery,
      #home .partners__gallery .embla__viewport,
      #home .partners__gallery .embla__container,
      #home .partners__gallery .embla__slide,
      #home .partners__gallery .achievements__gallery-item {
        touch-action: pan-y pinch-zoom;
      }

      #home .solutions .embla__slide:hover,
      #home .solutions .solutions__slide:hover,
      #home .solutions .solutions__item:hover,
      #home .achievements__gallery .embla__slide:hover,
      #home .achievements__gallery-item:hover,
      #home .partners__gallery .embla__slide:hover,
      #home .partners__gallery .achievements__gallery-item:hover {
        transform: none;
        filter: none;
        box-shadow: none;
      }
    }

    @keyframes projectsSectionReveal {
      0% {
        opacity: 0;
        transform: translateY(72px) scale(0.97);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes projectsTitleReveal {
      0% {
        opacity: 0;
        transform: translateX(-48px);
        filter: blur(6px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
      }
    }

    @keyframes projectsGalleryReveal {
      0% {
        opacity: 0;
        transform: translateY(46px);
        filter: blur(7px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @supports (animation-timeline: view()) {
      #home .projects {
        opacity: 0;
        transform: translateY(72px) scale(0.97);
        filter: blur(8px);
        animation: projectsSectionReveal 1s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 8% cover 38%;
      }

      #home .projects .template-title {
        opacity: 0;
        transform: translateX(-48px);
        filter: blur(6px);
        animation: projectsTitleReveal 0.9s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 12% cover 42%;
      }

      #home .projects__gallery {
        opacity: 0;
        transform: translateY(46px);
        filter: blur(7px);
        animation: projectsGalleryReveal 0.95s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 16% cover 48%;
      }
    }

    @media (max-width: 767px) {
      @supports (animation-timeline: view()) {
        #home .projects,
        #home .projects .template-title,
        #home .projects__gallery {
          animation-range: entry 6% cover 30%;
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #home .projects,
      #home .projects .template-title,
      #home .projects__gallery,
      #home .projects__gallery .embla__slide,
      #home .projects__gallery .embla__slide::before,
      #home .projects__gallery-image {
        animation: none;
        transition: none;
        transform: none;
        filter: none;
      }

      #home .projects,
      #home .projects .template-title,
      #home .projects__gallery {
        opacity: 1;
      }
    }

    #home .production {
      transform-origin: center bottom;
    }

    #home .production__image,
    #home .production__content {
      will-change: transform, opacity, filter;
    }

    #home .production__image img {
      transition: transform 0.6s ease, filter 0.6s ease;
      will-change: transform, filter;
    }

    #home .production__button {
      position: relative;
      overflow: hidden;
      z-index: 0;
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        color 0.3s ease;
      will-change: transform;
    }

    #home .production__button::before {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: -1;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 70%);
      transform: translateX(-130%) skewX(-18deg);
      transition: transform 0.58s ease;
      pointer-events: none;
    }

    #home .production__button::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: #121820;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.34s ease;
      pointer-events: none;
    }

    #home .production__button:hover,
    #home .production__button:focus-visible {
      transform: translateY(-5px);
      color: #fff;
      box-shadow: 0 16px 34px rgba(18, 24, 32, 0.28);
    }

    #home .production__button:hover::before,
    #home .production__button:focus-visible::before {
      transform: translateX(130%) skewX(-18deg);
    }

    #home .production__button:hover::after,
    #home .production__button:focus-visible::after {
      transform: scaleX(1);
    }

    #home .production__image:hover img {
      transform: scale(1.025);
      filter: saturate(1.08) contrast(1.04);
    }

    @keyframes productionSectionReveal {
      0% {
        opacity: 0;
        transform: translateY(70px) scale(0.97);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes productionImageReveal {
      0% {
        opacity: 0;
        transform: translateX(-62px) scale(0.96);
        filter: blur(8px) saturate(0.85);
      }

      100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0) saturate(1);
      }
    }

    @keyframes productionContentReveal {
      0% {
        opacity: 0;
        transform: translateX(58px);
        filter: blur(7px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
      }
    }

    @supports (animation-timeline: view()) {
      #home .production {
        opacity: 0;
        transform: translateY(70px) scale(0.97);
        filter: blur(8px);
        animation: productionSectionReveal 1s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 8% cover 38%;
      }

      #home .production__image {
        opacity: 0;
        transform: translateX(-62px) scale(0.96);
        filter: blur(8px) saturate(0.85);
        animation: productionImageReveal 0.9s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 14% cover 44%;
      }

      #home .production__content {
        opacity: 0;
        transform: translateX(58px);
        filter: blur(7px);
        animation: productionContentReveal 0.95s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
        animation-timeline: view();
        animation-range: entry 18% cover 48%;
      }
    }

    @media (max-width: 767px) {
      @supports (animation-timeline: view()) {
        #home .production,
        #home .production__image,
        #home .production__content {
          animation-range: entry 6% cover 30%;
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #home .production,
      #home .production__image,
      #home .production__content,
      #home .production__image img,
      #home .production__button,
      #home .production__button::before,
      #home .production__button::after {
        animation: none;
        transition: none;
        transform: none;
        filter: none;
      }

      #home .production,
      #home .production__image,
      #home .production__content {
        opacity: 1;
      }

      #home .production__button::before {
        transform: translateX(-130%) skewX(-18deg);
      }

      #home .production__button::after {
        transform: scaleX(0);
      }
    }

    @media (max-width: 767px) {
      #home .hero,
      #home .hero::before,
      #home .hero::after {
        animation: none;
        transform: none;
        filter: none;
      }

      #home .hero {
        overflow: hidden;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
      }

      #home .hero::before,
      #home .hero::after {
        background-size: cover;
        background-position: center top;
      }

      #home .hero img,
      #home .hero picture,
      #home .hero__image,
      #home .hero__image img {
        animation: none;
        transform: none;
        filter: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center top;
      }
    }

    #home .applications__item.card-app {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transform: translateY(0);
      transition:
        transform 0.34s ease,
        box-shadow 0.34s ease,
        border-color 0.34s ease,
        background-color 0.34s ease;
      will-change: transform;
    }

    #home .applications__item.card-app::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(135deg, rgba(255, 205, 0, 0.2), transparent 46%);
      opacity: 0;
      transition: opacity 0.34s ease;
      pointer-events: none;
    }

    #home .applications__item.card-app::after {
      content: "";
      position: absolute;
      inset: -40% auto auto -65%;
      z-index: 2;
      width: 54%;
      height: 180%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
      transform: translateX(-120%) rotate(12deg);
      transition: transform 0.7s ease;
      pointer-events: none;
    }

    #home .applications__item .card-app__image {
      position: relative;
      overflow: hidden;
    }

    #home .applications__item .card__image {
      display: block;
      width: 100%;
      transition: transform 0.58s ease, filter 0.58s ease;
      will-change: transform, filter;
    }

    #home .applications__item .card-app__content {
      position: relative;
      z-index: 3;
    }

    #home .applications__item .card-app__title {
      transition: color 0.28s ease, transform 0.28s ease;
    }

    #home .applications__item.card-app:hover,
    #home .applications__item.card-app:focus-within {
      transform: translateY(-8px);
      box-shadow: 0 22px 46px rgba(17, 24, 32, 0.18);
    }

    #home .applications__item.card-app:hover::before,
    #home .applications__item.card-app:focus-within::before {
      opacity: 1;
    }

    #home .applications__item.card-app:hover::after,
    #home .applications__item.card-app:focus-within::after {
      transform: translateX(360%) rotate(12deg);
    }

    #home .applications__item.card-app:hover .card__image,
    #home .applications__item.card-app:focus-within .card__image {
      transform: scale(1.06);
      filter: saturate(1.12) contrast(1.05);
    }

    #home .applications__item.card-app:hover .card-app__title,
    #home .applications__item.card-app:focus-within .card-app__title {
      transform: translateY(-2px);
    }

    @media (max-width: 767px) {
      #home .applications__item.card-app:hover,
      #home .applications__item.card-app:focus-within {
        transform: translateY(-4px);
      }

      #home .applications__item.card-app:hover .card__image,
      #home .applications__item.card-app:focus-within .card__image {
        transform: scale(1.035);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #home .applications__item.card-app,
      #home .applications__item.card-app::before,
      #home .applications__item.card-app::after,
      #home .applications__item .card__image,
      #home .applications__item .card-app__title {
        transition: none;
        transform: none;
        filter: none;
      }
    }

    #home .contact__title-letter {
      display: inline-block;
      white-space: pre;
    }

    #home .contact.contact--ready .contact__title-letter {
      opacity: 0;
      transform: translateY(0.75em);
      filter: blur(6px);
    }

    #home .contact.contact--visible .contact__title-letter {
      animation: contactTitleLetterReveal 0.56s cubic-bezier(0.2, 0.72, 0.18, 1) both;
      animation-delay: calc(0.45s + (var(--letter-index, 0) * 0.045s));
    }

    #home .contact.contact--ready input:not([type="hidden"]),
    #home .contact.contact--ready textarea,
    #home .contact.contact--ready select,
    #home .contact.contact--ready button,
    #home .contact.contact--ready .contact__field {
      transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        filter 0.28s ease,
        opacity 0.42s ease;
    }

    #home .contact.contact--ready:not(.contact--visible) input:not([type="hidden"]),
    #home .contact.contact--ready:not(.contact--visible) textarea,
    #home .contact.contact--ready:not(.contact--visible) select,
    #home .contact.contact--ready:not(.contact--visible) button,
    #home .contact.contact--ready:not(.contact--visible) .contact__field {
      opacity: 0;
      transform: translateY(34px);
      filter: blur(5px);
    }

    #home .contact.contact--visible input:not([type="hidden"]),
    #home .contact.contact--visible textarea,
    #home .contact.contact--visible select,
    #home .contact.contact--visible button,
    #home .contact.contact--visible .contact__field {
      animation: contactFieldReveal 0.62s cubic-bezier(0.2, 0.72, 0.18, 1) both;
      animation-delay: var(--contact-field-delay, 1.55s);
    }

    #home .contact.contact--done .contact__title-letter,
    #home .contact.contact--done input:not([type="hidden"]),
    #home .contact.contact--done textarea,
    #home .contact.contact--done select,
    #home .contact.contact--done button,
    #home .contact.contact--done .contact__field {
      opacity: 1;
      animation: none;
      transform: none;
      filter: none;
    }

    #home .contact input:not([type="hidden"]):hover,
    #home .contact textarea:hover,
    #home .contact select:hover,
    #home .contact input:not([type="hidden"]):focus,
    #home .contact textarea:focus,
    #home .contact select:focus {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(17, 24, 32, 0.12);
      filter: brightness(1.02);
    }

    #home .contact button:hover,
    #home .contact button:focus-visible {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(17, 24, 32, 0.18);
      filter: brightness(1.04);
    }

    @keyframes contactTitleLetterReveal {
      0% {
        opacity: 0;
        transform: translateY(0.75em);
        filter: blur(6px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes contactFieldReveal {
      0% {
        opacity: 0;
        transform: translateY(34px);
        filter: blur(5px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #home .contact.contact--ready .contact__title-letter,
      #home .contact.contact--visible .contact__title-letter,
      #home .contact.contact--ready input:not([type="hidden"]),
      #home .contact.contact--ready textarea,
      #home .contact.contact--ready select,
      #home .contact.contact--ready button,
      #home .contact.contact--ready .contact__field {
        opacity: 1;
        animation: none;
        transition: none;
        transform: none;
        filter: none;
      }
    }

    #home .screens__gallery {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #home .screens__gallery-item {
      display: flex;
      flex-direction: column;
    }

    #home .screens__gallery-item .applications__item.card-app {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    #home .screens__gallery-item .card-app__content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    #home .screens__gallery-item .card__link {
      margin-top: auto;
    }
    @media (max-width: 768px) {
.footer__image-wrapper {
display: none;
}
    }
    .hero__menu-text{
          display: flex;
      flex-direction: column;
    }
        .hero__menu-text>p {
    font-size: 28px;
font-family: "Bebas Neue" !important;

    font-style: normal;
    font-weight: 400;
    color: #fff;
}
@media (max-width: 480px) {
    .hero__menu-item .hero__menu-text>p {
        font-size: 20px;
        font-weight: 300;
    }
}