/* 1) Общий селектор */
* {
  box-sizing: border-box;
}

/* 2) Градиент фона */
body {
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(120deg, #0f172a, #1e293b, #0ea5e9);
  margin: 0;
}

/* 3) Цвета ссылок */
a {
  color: #0ea5e9;
}

a:visited {
  color: #38bdf8;
}

a:hover {
  color: #facc15;
}

/* 4) Меню и контейнер */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container {
  padding-left: 5px;
  padding-right: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -70px;
}

/* 5) Адаптивная верстка */
@media (min-width: 780px) {
  .container {
    width: 760px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1170px) {
  .container {
    width: 1170px;
  }
}

.flat-page header {
  min-height: 80px;
  display: flex;
}

@media (max-width: 767px) {
  .flat-page header {
    min-height: auto;
    display: initial;
  }
}

.flat-page header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .flat-page header .container {
    flex-direction: column;
    justify-content: center;
  }
}

/* 6) Логика отображения ссылок */
.flat-page header .links {
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .flat-page header .links {
    text-align: center;
    gap: 20px;
  }
}

/* 7) Цвет ссылок по умолчанию в шапке */
.flat-page header .links li {
  margin-left: 10px;
  color: #e5e7eb;
  cursor: pointer;
  transition: 0.3s;
}

@media (max-width: 900px) {
  .flat-page header .links li {
    margin-left: auto;
  }
}

/* 8) Цвет кнопки меню */
.flat-page header .links li:last-child {
  border-radius: 20px;
  padding: 10px 20px;
  color: #fff;
  background-color: #0ea5e9;
}

/* 9) Выравнивание контента */
.flat-page .content .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 140px;
  min-height: calc(100vh - 80px);
}

@media (max-width: 767px) {
  .flat-page .content .container {
    gap: 0;
    min-height: calc(100vh - 101px);
    justify-content: center;
    flex-direction: column-reverse;
  }
}

@media (max-width: 767px) {
  .flat-page .content .info {
    text-align: center;
    margin-bottom: 15px;
  }
}

/* 10) Цвет заголовка */
.flat-page .content .info h1 {
  color: #fbbf24;
  font-size: 38px;
}

/* 11) Абзац */
.flat-page .content .info p {
  margin: 0;
  line-height: 1.6;
  font-size: 15px;
  color: #e5e7eb;
}

/* 12) Кнопка внизу */
.flat-page .content .info button {
  border: 0;
  border-radius: 20px;
  padding: 12px 30px;
  margin-top: 30px;
  cursor: pointer;
  color: #fff;
  background-color: #0ea5e9;
  box-shadow: 0px 4px 8px rgba(15, 23, 42, 0.6);
}

.flat-page .content .info button a {
  text-decoration: none;
  color: #fff;
}

/* 13) Картинка */
.flat-page .content .image img {
  max-width: 120%;
  margin-top: 50px;
  border-radius: 16px;
}

/* 14) Навигация */
nav {
  margin: 0 auto;
  margin-top: 3em;
  width: 1083px;
  margin-left: -20px;
}

nav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 1em 1em 1em 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 0.01em;
  position: relative;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  border-radius: 30px 30px 30px 30px;
  padding: 1em 2em;
  background: #6c63ff;
  line-height: 0.8;
  box-shadow: 0px 4px 8px lightgreen;
  width: 10em;
}

/* 15) Ссылки в меню */
nav li a {
  padding-bottom: 1em;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  padding: 21px;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  color: #f9fafb;
}

/* 16) Цвет вкладки при наведении */
nav ul li:hover {
  background: #0ea5e9;
}

/* 17) Подменю – логика раскрытия */
nav ul li ul {
  padding: 0;
  position: absolute;
  top: 3.5em;
  left: 0;
  width: 16em;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

/* 18) Цвет субменю по умолчанию */
nav ul li ul li {
  background-color: #1e293b;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 0 #000;
  top: -0.5em;
}

/* 19) Цвет субменю при наведении */
nav ul li ul li:hover {
  background-color: #0ea5e9;
}

/* 20) Отображение подменю при ховере и обертка */
nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

#wrapper {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}