/* BLOCK #1 */
.container-block-1 {
  display: flex;
  align-items: center;
  height: 50vh;
  background-color: black;
  color: white;
  padding: 7%;
}
  
.left-side {
  flex: 0.8;
}

.right-side {
  flex: 1;
  display: flex;        /* Use flexbox within the right-side for layout */
  flex-direction: column; /* Stack the text and the cursor vertically */
  align-items: flex-start;  /* Align items to the left side */
  margin-top: 20%;

}

.question {
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10%;
  letter-spacing: 0.05em; /* Added letter-spacing */
}

.description {
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1%;
  letter-spacing: 0.05em; /* Added letter-spacing */
}

.office-image {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
}

.cursor-image {
  width: 10vw;
  align-self: flex-end;  /* Position cursor to the right (horizontally) */
}
/* BLOCK #1 END */

/* BLOCK #2 */

/* CSS */
.container-block-2 {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 7%;
}

.left-side-block-2 {
  flex: 1;
  position: relative; /* Needed for positioning the circle */
}

.right-side-block-2 {
  flex: 1;
}

.advantage, .question-block-2 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: 10%;
}

.optimization-text {
  font-size: 1.2em;     /* Adjust text size */
  text-align: center;
}

.image-wrapper {
  position: relative; /* Containing block for the arrow */
}

.team-image {
  width: 35vw;
  border-radius: 10px;
}

.arrow-image {
  width: 200px; /* Adjust arrow size */
  position: absolute;
  top: -35%; /* Adjust position above image */
  left: -5%; /* Center horizontally */
  transform: translateX(-50%); /* Correct centering */
  transform: translateX(-50%) rotate(-15deg); /* Rotate the arrow */
}

/* BLOCK #2 END */

/* BLOCK #3 */

.container-block-3 {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 7%;
}

.left-side-block-3 {
  flex: 1.2;
}

.right-side-block-3 {
  flex: 1;
}

.question-block-3 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 5%;
}

.mission-block-3 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.robot-image {
  width: 70%;
  border-radius: 10px;
}

/* BLOCK #3 END */

/* BLOCK #4 */

.container-block-4 {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 7%;
}

.left-side-block-4 {
  flex: 1;
}

.right-side-block-4 {
  flex: 0.8;
  display: flex;
  flex-direction: column;
}

.question-block-4 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 5%;
}

.mission-block-4 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-left: 5%;
}

.loading-image {
  width: 30%;
  margin-left: -15%;
  margin-bottom: -10%;
}

.background-image {
  width: 80%;
  border-radius: 10px;
  margin-top: auto; /* Push the image to the bottom */
}

/* BLOCK #4 END */

/* BLOCK #5 */

.container-block-5 {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 7%;
}

.left-side-block-5 {
  flex: 1;
}

.right-side-block-5 {
  flex: 1;
  position: relative; /* Needed for absolute positioning of the arrow */
}

.title-block-5 {
  font-size: 3em;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 5%;
  font-family: Arial, sans-serif; /* Примерный шрифт, как на картинке */
}

.values-block-5 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.question-block-5 {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 5%;
}

.arrow-image-block-5 {
  width: 30%; /* Adjust arrow size as needed */
  position: absolute;
  top: 10%;    /* Adjust vertical position */
  right: 0;   /* Align to the right */
  transform: rotate(-355deg);
}

.do-something-great-image {
  width: 70%; /* Adjust size as needed */
  left: 0;   /* Align to the left */
}

.title-image-block-5 {
  width: 60%; /* Adjust width as needed */
  margin-bottom: 5%;
}

/* BLOCK #5 END */

/* Адаптивные стили для больших ноутбуков */
@media (min-width: 1580px) and (max-width: 1710px) {
  .description {
    margin-left: 5%;
  }
  
  .advantage {
    margin-right: 5%;
  }
}

/* Адаптивные стили для ноутбуков */
@media (min-width: 1200px) and (max-width: 1580px) {
  .question,
  .description,
  .advantage,
  .question-block-2,
  .question-block-3,
  .mission-block-3,
  .question-block-4,
  .mission-block-4,
  .question-block-5,
  .values-block-5 {
    font-size: 1.8em;
  }
  
  .description {
    margin-left: 10%;
  }
  
  .advantage {
    margin-right: 10%;
  }
}

/* Адаптивные стили для средних ноутбуков */
@media (min-width: 1024px) and (max-width: 1200px) {
  .question,
  .description,
  .advantage,
  .question-block-2,
  .question-block-3,
  .mission-block-3,
  .question-block-4,
  .mission-block-4,
  .question-block-5,
  .values-block-5 {
    font-size: 1.6em;
  }
  
  .description {
    margin-left: 8%;
  }
  
  .advantage {
    margin-right: 8%;
  }
}

/* Адаптивные стили для планшетов в горизонтальной ориентации */
@media (min-width: 768px) and (max-width: 1024px) {
  .question,
  .description,
  .advantage,
  .question-block-2,
  .question-block-3,
  .mission-block-3,
  .question-block-4,
  .mission-block-4,
  .question-block-5,
  .values-block-5 {
    font-size: 1.4em;
  }
  
  .description {
    margin-left: 5%;
  }
  
  .advantage {
    margin-right: 5%;
  }
}

@media (max-width: 768px) {
  /* Для экранов меньше 768px (планшеты) */

  .container-block-1,
  .container-block-2,
  .container-block-3,
  .container-block-4,
  .container-block-5 {
    flex-direction: column; /* Перестраиваем блоки в колонку */
    align-items: center;
    padding: 5%;
    height: 100%;
  }

  .left-side,
  .right-side,
  .left-side-block-2,
  .right-side-block-2,
  .left-side-block-3,
  .right-side-block-3,
  .left-side-block-4,
  .right-side-block-4,
  .left-side-block-5,
  .right-side-block-5 {
    width: 100%; /* Занимаем всю ширину */
    margin: 0%;
  }

  .mission {
    padding: calc(var(--index) * 0) 0;
  }

  /* Добавлены стили order для блоков */
  .left-side-block-2 {
      order: 2;
  }

  .right-side-block-2 {
      order: 1;
  }

  .left-side-block-4 {
    order: 2;
  }

  .right-side-block-4 {
    order: 1;
  }

  .left-side-block-5 {
    order: 2;
  }

  .right-side-block-5 {
    order: 1;
  }

  .question,
  .description,
  .advantage,
  .question-block-2,
  .question-block-3,
  .mission-block-3,
  .question-block-4,
  .mission-block-4,
  .question-block-5,
  .values-block-5 {
    font-size: 1.2em; /* Уменьшаем размер шрифта для планшетов */
  }

  .office-image,
  .team-image,
  .robot-image,
  .background-image {
    width: 80%; /* Растягиваем картинки на всю ширину */
    margin-left: 10%;
    margin-bottom: 10%;
  }

  .cursor-image {
    width: 30vw; /* Увеличиваем размер курсора */
  }

  .arrow-image {
    width: 65%; /* Уменьшаем размер стрелки */
    top: -30%; /* Корректируем положение стрелки */
    left: 5%;
  }

  .business-optimization-image {
    width: 65%;
  }

  .loading-image {
    width: 50%; /* Увеличиваем размер loading image */
    margin-left: 0;
  }

  .arrow-image-block-5 {
    width: 35%;
    top: 5%;
  }

  .title-image-block-5 {
    width: 80%;
  }
}

@media (max-width: 480px) {
  /* Для экранов меньше 480px (телефоны) */
  .question,
  .description,
  .advantage,
  .question-block-2,
  .question-block-3,
  .mission-block-3,
  .question-block-4,
  .mission-block-4,
  .question-block-5,
  .values-block-5 {
    font-size: 1em; /* Еще уменьшаем размер шрифта для телефонов */
  }

  .mission {
    padding: calc(var(--index) * 0) 0;
  }

  .cursor-image {
    width: 20vw; /* Еще увеличиваем размер курсора */
  }

  .arrow-image {
    width: 20vw;
  }

  .loading-image {
    width: 35%; /* Еще увеличиваем размер loading image */
  }

  .title-image-block-5 {
    width: 100%; /* Растягиваем title image на всю ширину */
  }
}