:root {
  --blue: #35426D;
  --light-blue: rgba(69, 123, 157, 1);
  --green: rgba(0, 168, 150, 1);
  --red: rgba(242, 95, 92, 1);
  --horizontal-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0.5%, rgba(53, 66, 109, 0.3) 52.5%, rgba(255, 255, 255, 0.3) 100%);
  --vertical-gradient: linear-gradient(rgba(255, 255, 255, 0.3) 0.5%, rgba(53, 66, 109, 0.3) 52.5%, rgba(255, 255, 255, 0.3) 100%);
  --ligth-gray: rgba(245, 245, 247, 1);
}



body {
  color: var(--blue);
  font-family: 'Play';
}


.layout {
  max-width: 3810px;
  padding: 0 15px;
  margin: 0 auto;
  background-color: #fff;
  max-height: 2160px;
  display: block;
  height: 100vh;
}

/*Кнопка назад*/
.back {
  position: fixed;
  width: 157px;
  height: 143px;
  bottom: 50px;
  right: 150px;
  background-color: var(--color-primary);
  border-radius: 12px;
  cursor: pointer;
}

.back img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.master-logo img {
  height: 200px;
}
/*****************************************************************************************************************************************/

.container {
  max-width: 3800px;
  padding: 0 20px;
  margin: 0 auto;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.production {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 70px;
  margin-top: 80px;
}

.production-left {
  position: relative;
  padding-right: 20px;
}

.production-left::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: var(--vertical-gradient);
  margin-left: 30px;
}

.production-right {
  padding-left: 40px;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 140px;
  width: 2705px;
}

.nav-icon {
  margin-bottom: 50px;
}

.nav-card {
  flex: 0 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 541px;
  position: relative;
}

.nav-card:hover {
  background-color: var(--ligth-gray);
  cursor: pointer;
}

.nav-card:nth-child(1)::after,
.nav-card:nth-child(2)::after,
.nav-card:nth-child(3)::after,
.nav-card:nth-child(4)::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 200%;
  background: var(--vertical-gradient);
  top: 0;
  right: 0;
  z-index: 3;
}

.nav-card:nth-child(3)::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 600%;
  background: var(--horizontal-gradient);
  bottom: 0;
  z-index: 3;
}

.nav-name {
  font-size: 38px;
  width: 390px;
  text-align: center;
  height: 100px;
  display: flex;
  align-items: start;
  justify-content: center;
}


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

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 20px 0;
}
.header::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0.5%, rgba(53, 66, 109, 0.3) 52.5%, rgba(255, 255, 255, 0.3) 100%);
  left: 0;
  right: 0;
  bottom: 0;
}
.header-title {
  display: flex;
  align-items: center;
}
.header-item {
  font-size: 80px;
  color: var(--color-primary);
  position: relative;
  padding: 0 20px;
}
.header-item-main {
  font-size: 85px;
  font-weight: 700;
}
.header-item:nth-child(2)::after, .header-item:nth-child(3)::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0.5%, rgba(53, 66, 109, 0.3) 52.5%, rgba(255, 255, 255, 0.3) 100%);
  margin-left: 30px;
  left: -35px;
}

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

.scrollable {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  touch-action: pan-y;
  direction: ltr; /*direction: rtl;*/
}
.scrollable::-webkit-scrollbar {
  width: 8px;
}

.scrollable::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 1px;
  border: 1px solid #fff;
}
/*****************************************************************************************************************************************/