:root {
    
    /* Основные цвета */
    --color-background_body:#FFFFFF; /* белый */
    --color-background-basic:#2A2A2A; /* черный */
    --color-second:#F2F2F2;/* серый */
    --color-accent:#fcac00;/* оранж */
    --color-text-bacic:#000000;/* черный */
    --color-text-second:#FFFFFF;/* белый */
    
    /* Основные шрифт */
    --font-main: 'Montserrat', 'Roboto', 'sans-serif';
    --font-main-second: 'Montserrat', 'Roboto', 'sans-serif';
 }

/* ---------- Блок прибиваемый к верху ---------- */ 
.page-block-top { 
    flex: 1;
    background: var(--color-background-basic);
}

/* ---------- Контейнер внутри блока ---------- */
.page-block-top-inside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);   /* плавный интервал между элементами */
    padding: clamp(1em, 4vw, 1em); /* отступ адаптивно от экрана */
    flex-wrap: wrap;
}

/* ---------- Тексты ---------- */
.page-block-top-inside-text,
.page-block-top-inside-text2,
.page-block-top-inside-text3 {
    text-align: center;
    color: var(--color-text-second);
    font-size: clamp(14px, 2vw, 18px); /* плавное изменение размера шрифта */
    line-height: 1.5;
    padding: 0 clamp(0px, 2vw, 15px);
}

/* ---------- Ограничение ширины для длинного текста ---------- */
.page-block-top-inside-text3 {
    max-width: clamp(350px, 75vw, 700px);
}

/* ---------- Дополнительная адаптация под очень маленькие экраны ---------- */
@media (max-width: 480px) {
  .page-block-top-inside {
      gap: 8px;
  }

  .page-block-top-inside-text,
  .page-block-top-inside-text2,
  .page-block-top-inside-text3 {
      font-size: 13px;
      line-height: 1.4;
  }
}