/* Импорт шрифта */
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");

/* Стили "обнуления" для страницы */
* {
  padding: 0;
  margin: 0;
}

/* Медиазапросы */
/* Медиазапрос по градиенту (малый экран)*/
@media screen and (max-width: 992px) {
  .bg-light,
  footer {
    background: linear-gradient(
      to right,
      #fc88abc2 0%,
      #9051f578 40%,
      #ceb8f29d 100%
    );
    animation: gradient 3s infinite linear alternate;
    background-size: 200%;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 0%;
    }
    25% {
      background-position: 25% 0%;
    }
    50% {
      background-position: 50% 0%;
    }
    75% {
      background-position: 75% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }

  /* Калибровка внешних отступов у телефонных номеров (малый экран)*/
  .decorate-phone {
    margin: 0 5px 3px 0;
  }
}

/* Медиазапрос по градиенту (большой экран)*/
@media screen and (min-width: 992px) {
  .bg-light,
  footer {
    background: linear-gradient(
      to right,
      #fc88abc2 0%,
      #9051f578 40%,
      #ceb8f29d 100%
    );
    animation: gradient 3s infinite linear alternate;
    background-size: 200%;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 0%;
    }
    25% {
      background-position: 25% 0%;
    }
    50% {
      background-position: 50% 0%;
    }
    75% {
      background-position: 75% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }

  /* Калибровка внешних отступов у телефонных номеров (большой экран)*/
  .decorate-phone {
    margin: 0 5px 3px 10px;
  }

  /* Декоративные линии у ФИО (большой экран) */
  .info1::before {
    content: "";
    display: inline-block;
    width: 100px;
    height: 2px;
    vertical-align: middle;
    margin-right: 1%;
    background-color: #fff;
  }

  .info1::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 2px;
    vertical-align: middle;
    margin-left: 1%;
    background-color: #fff;
  }
}

/* Центрирование элементов "Обо мне" и фото в зависимости от размера экрана*/
@media screen and (min-width: 472px) and (max-width: 576px) {
  .card-img-center {
    position: relative;
    left: 4%;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .card-img-center {
    position: relative;
    left: 9%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .card-text-center {
    position: relative;
    left: 8%;
  }

  .card-img-center {
    position: relative;
    left: 60%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .card-text-center {
    position: relative;
    left: 20%;
  }

  .card-img-center {
    position: relative;
    left: 80%;
  }
}

@media screen and (min-width: 1400px) {
  .card-text-center {
    position: relative;
    left: 3%;
  }

  .card-img-center {
    position: relative;
    left: 5%;
  }
}

/* Калибровка секции о предоставляемых услугах (малый экран) */
@media screen and (max-width: 767px) {
  .services-help {
    flex-direction: column;
  }

  .services {
    margin: 0 4% 15% 4%;
  }

  .help {
    margin: 0 4% 0 4%;
  }
}

/* Общие стили для тела сайта */
body {
  width: 100%;
  background-color: #f6f5f3;
  font-family: "Comfortaa", sans-serif;
  color: #fae08d;
  box-sizing: border-box;
}

/* Внутренние отступы для элементов панели навигации*/
.styling-nav {
  padding: 10px 15px 10px 15px;
}

/* Бэкграунд фон и стилизация баннера*/
.main-info {
  background: url(BackgroungImg.jpg) center no-repeat;
  background-size: cover;
  width: 100%;
  height: 70vh;
  text-align: center;
  color: #fff;
}

/* Внутренний отступ для ФИО */
.info1 {
  padding: 6% 0 1% 0;
}

/* Тень для объёмности текста выбранных элементов */
.main-info,
h4,
p {
  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
    0px -4px 10px rgba(255, 255, 255, 0.3);
}

/* Скругление элементов "Обо мне" и фото*/
.card {
  border-radius: 20px;
  overflow: hidden;
}

/* Фоновый цвет и тень для выделения карты "Обо мне"*/
.card-color-shadow {
  background-color: #4c5072;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

/* Маркеры списка */
ul li::marker {
  content: "✔ ";
}

/* Тень для объёмности текста списка */
li {
  padding: 1%;
  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
    0px -4px 10px rgba(255, 255, 255, 0.3);
}

/* Тень для выделения границ фото*/
.card-img-shadow {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* Размер текста и расстояние между буквами для секции о предоставляемых услугах */
p {
  font-size: 1.1em;
  letter-spacing: 2px;
}

/* Нижний отступ для заголовков секции услуг */
.spacing-text {
  padding-bottom: 5%;
}

/* Общая стилизация секции услуг */
.services-help {
  display: flex;
  gap: 10%;
  justify-content: center;
  padding: 4% 0;
  background-color: #4c5072;
  margin-bottom: 4%;
}

/* Левый отступ (левая колонка услуг) */
.services {
  margin-left: 4%;
}

/* Правый отступ (правая колонка услуг) */
.help {
  margin-right: 4%;
}

/* Стилизация текста "Расположение офиса" */
.text-map {
  margin-left: 10%;
  color: #474a51;
  font-weight: bold;
}

/* Стилизация для встроенной карты */
.api-map {
  width: 90%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}

/* Общая стилизация отступов для подвала сайта */
footer {
  margin-top: 5%;
  padding: 1%;
}

/* Центрирование эдлементов SVG */
.footer-container {
  display: flex;
  justify-content: center;
}

/* Отступы для эдлементов SVG */
.footer-item {
  margin: 2% 5% 0 5%;
}

/* Стилизация текста об авторстве */
.footer-copyright {
  text-align: center;
  font-size: 0.7em;
  letter-spacing: 1px;
  color: #474a51;
  margin-top: 3%;
  text-shadow: none;
}

/* Стили для добавления через JS (при наведении мыши на элементы навигации и ссылки на соцсети) */
.styling-nav-text {
  filter: invert(100%);
  transition: filter 200ms linear;
}

.styling-svg {
  filter: invert(100%);
  transform: scale(1.15);
  transition: transform 300ms linear;
}