/* style.css */
@import url(assets/styles/header.css);
@import url(assets/styles/experience.css);
@import url(assets/styles/footer.css);
@import url(assets/styles/link-profiles.css);

:root{
  --black: #0c0509;
  --white: #FFFFFF;
  --brown: #964b00;
  --orange: #ff8000;
} /* Палитра */

html {
  scroll-behavior: smooth;
} /*Плавность скрола*/

p {
  text-shadow: white 5px 5px 10px, white -5px -5px 10px;
} /*Тень*/

img {
  width: 100%;
}

.hr {
  width: 90%;
  height: 4px;
  background: #0b0b0b;
  margin: 10px;
} /*Разделитель*/

.h2_hr {
  display: flex;
  align-items: center;
  margin: 10px 0px;
} /*Контейнер с заголовками h2 и разделителями*/

.box-main {
  display: flex; /*Определяет как элемент должен быть показан в документе*/
  flex-direction: column;
  width: 100%;
} /*Родительский контейнер*/

.box_bg {
  width: 100%;
  background:#ff8000; /*Установит фон элемента*/
} /*Фон контейнера-UP*/

.box_1200 {
  max-width: 1240px;
  width: 100%;
  margin: auto;
} /*Контейнер 1240рх*/

.box-body.head_up {
  z-index: 2;
} /* Подъем шапки в верхний слой*/

.up {
  background: linear-gradient(180deg, var(--orange), var(--brown));
} /*Градиент для средней части фона*/

.down {
  background: linear-gradient(180deg, var(--brown), var(--orange));
} /*Градиент для нижней части фона*/

.bg {
  max-width: 1240px;
  min-width: 320px; /* Минимальная ширина */
  margin: auto;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 660px;
  background: linear-gradient(180deg, rgba(140, 215, 238, 0.2) 0%, #ff8000 100%), url(assets/images/wallpaper.jpg);
  background-size: cover;
  background-position: center;
  transform: scaleX(-1); /*Зеркалим картинку*/
} /*Фоновая картинка*/

.box-body {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  min-width: 320px; /*Минимальная ширина*/
  z-index: 1;
}/*Контейнер с контентом 900рх*/

* {
  font-family: Georgia, sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: #0b0b0b;
  margin: 0; /*Внешнии отступы*/
  padding: 0; /*Внутрение отступы*/
  box-sizing: border-box; /*Говорит браузеру учитывать любые границы и внутренние отступы в значениях*/
} /*Сброс стилей*/

.container {
  width: 100%;
  max-width: 1240px;
  min-width: 320px;
  margin: 0 auto;
}

h2, h1, a { position:relative; }
h2 span, h1 span, a span { position:absolute; top:-94px;
} /*Сдвигаем таргет якорей из за фиксированной шапки*/

h1 {
  font-size: 32px; /* Размер шрифта */
  padding: 10px 5px 5px; /*Внешнии отступы*/
  text-shadow: 1px 2px 5px var(--white); /*Тень*/
} /*Заголовок h1*/

h2 {
  font-size: 24px; /* Размер шрифта */
  padding: 10px 5px 5px; /*Внешнии отступы*/
  text-shadow: 1px 2px 5px var(--white); /*Тень*/
} /*Заголовки h2*/

p {
  padding: 0 5px; /*Внешнии отступы*/
} /*Параграфы */


/* ------- Фото и О себе ------- */

.foto {
  margin: 30px 0px 0px;
  width: 250px;
  max-width: 100%; /*Максимальная ширина*/
  border-radius: 125px;
  box-shadow: 1px 1px 5px rgba(0,0,0,.6);
} /*Фото*/

.hero {
  width: 100%; /*Устанавливает ширину содержимого элемента*/
  display: flex; /*Определяет как элемент должен быть показан в документе*/
  flex-wrap: wrap; /*Флексы выстраиваются в несколько строк*/
  justify-content: center; /*Выравнивает флекс-элементы внутри контейнера по горизонтали*/
  align-items: center; /*Выравнивает флекс-элементы внутри контейнера по вертикали*/
  margin-top: 74px; /*Внешний отступ сверху из за закрепленной шапки*/
  padding: 5px; /*Внутрений отступ*/
  color: #f9fffd; /* Цвет текста */
  z-index: 1;
} /*Контейнер фото и о себе*/

.hero_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 260px;
} /*Блок с автором и кнопками*/

.hero_foto {
  display: block; /*Определяет как элемент должен быть показан в документе*/
  padding: 10px; /*Внутренние отступы*/
} /*Блок фотографии*/

.hero_description {
  display: flex; /*Определяет как элемент должен быть показан в документе*/
  padding: 10px; /*Внутренние отступы*/
} /*Блок О себе*/

figcaption p.name {
  font-size: 24px;
  font-weight: 700; /* Насыщеновсть(толщина) шрифта */
} /*Подпись фото Ф.И.О.*/

.button-hero {
  margin-top: 10px;
} /*блок с кнопками*/

.hero_box, .hero_description {
  width: 100%; 
} /*Поведение системы до 575px*/

@media screen and (min-width: 1240px) {
  .hero_box { width: 35%; }
  .hero_description { width: 65%; }
} /*Поведение системы от 1240px*/

@media screen and (min-width: 575px) {
  .hero_box { width: 35%; }
  .hero_description { width: 65%; }
} /*Поведение системы от 575px до 1200px*/

/* ------- Курсы-навыки-инструменты ------- */

.menu_skills {
  display: flex;
  margin: 10px 0;
  align-items: center;
} /*Выстраиваем менюшку курсов и разделители в ряд*/

.menu_skills li {
  list-style: none;
  margin: 0 5px;
} /*Убираем и менюшки маркеры*/

.ul_menu_skills {
  display: flex;
} /*Выстраиваем менюшку курсов в ряд*/

.ul_menu_skills a {
  display: flex;
  font-size: 20px;
  cursor: pointer;
  font-weight: 700; /* Насыщеновсть(толщина) шрифта */
} /*Стилизуем менюшку*/

.ul_menu_skills a:hover {
  text-shadow: white 5px 5px 10px, white -5px -5px 10px !important;
} /*Наведение на менюшку*/

@media (max-width: 400px){
  .ul_menu_skills a {
    font-size: 16px;
  }

  .ul_menu_skills a:hover {
    font-size: 17px;
  }

} /*мобила уменьшаем шрифты чтоб влазели*/

.box-skill {
  padding: 5px;
  height: 300px;
  overflow: hidden;
  position: relative;
} /*Контейнер с навыками*/

.box-skill__button-open, .box-skill__button-close {
  background-color: var(--orange);
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 1px solid var(--black);
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  cursor: pointer;
  transition: 200ms;
} /*Кнопка контейнера со скилами*/

.box-skill__button-close {
  display: none;
} /*Кнопка контейнера со скилами закрывающая*/

.box-skill__button-open:hover, .box-skill__button-close:hover {
  box-shadow: 0 0 5px rgba(0,0,0,.6);
} /*Кнопка контейнера со скилами наведение*/

.box-skill__button-open:active, .box-skill__button-close:active {
  box-shadow: 0 0 5px rgba(0,0,0,.2);
} /*Кнопка контейнера со скилами наведение*/

.list_courses {
  display: flex;
} /*Вкладка курсы*/

.list_skills {
  display: none;
} /*Вкладка навыки*/

.list_tools {
  display: none;
} /*Вкладка инструменты*/

a.courses {
  text-shadow: white 5px 5px 10px, white -5px -5px 10px;
  text-decoration: underline;
} /*Тень менюшки навыков при загрузке*/

.courses_skills_tools {
  width: 100%; /*Устанавливает ширину содержимого элемента*/
  display: flex; /*Определяет как элемент должен быть показан в документе*/
  flex-direction: column;
  list-style-position: inside; /*Маркеры внутри списка*/
} /*Контейнер курсы-навыки-инструменты*/

.list_courses dd {
  padding-left: 5%; /*Внутрений левывй отступ*/
} /*Список курсов*/

.list_courses dt {
  padding: 5px 0 0;
  font-weight: 700; /* Насыщеновсть(толщина) шрифта */
} /*Список курсов назкания организаций*/

/* ------- Сертефикаты ------- */

section.gallery {
  position: relative;
} /*Корневой контейнер галереи*/

.gallery-box {
  display: grid;
  grid-template-columns: repeat(9, minmax(32.9%, 1fr));
  grid-template-rows: repeat(4, min(160px));
  grid-auto-flow: dense;
  grid-gap: 5px;
  overflow-x: auto; /*обрезаем по ширине контейнера со скролом*/
  scroll-behavior: smooth; /*плавность прокрутки*/
}

.gallery-box::-webkit-scrollbar {
  display: none;
} /*Убираем полосу прокрутки*/

.gallery-box__item {
  overflow: hidden;
  background: var(--bg) center / cover;
  box-shadow: inset 0 0 5px #000, 0 0 0 #000;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-box__item:hover {
  box-shadow: inset 0 0 0 #000, 0 3px 5px #000;
}

.gallery-box__item:nth-child(14),
.gallery-box__item:nth-child(12),
.gallery-box__item:nth-child(9),
.gallery-box__item:nth-child(5),
.gallery-box__item:nth-child(3),
.gallery-box__item:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-box__item:nth-child(7) {
  grid-column: span 1 !important;
  grid-row: span 2 !important;
}

.gallery-box__item__hover {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
} /*Форма при наведении на превью*/

.gallery-box__item:hover .gallery-box__item__hover {
  opacity: 1;
} /*Активация формы при наведении на превью*/

.gallery-box__item:hover img {
  transform: scale(1.3) rotate(5deg);
}

.gallery-box__item .gallery-box__item__hover-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255,128,0,.7);
  text-shadow: -10px -10px 10px rgba(255,255,255, 1), 10px 10px 10px rgba(255,255,255, 1);
  color: var(--black);
  font-size: 16px;
  z-index: 2;
}

.gallery-box__item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.gallery {
  position: relative;
}

.gallery-bn-prev,
.gallery-bn-next {
  opacity: 1;
  border: none;
  width: 10vw;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  cursor: pointer;
  z-index: 8;
} /*Кнопки карусели*/

.gallery-bn-prev {
  left: 0;
  transform: rotate(180deg);
} /*Левая кнопка*/

.gallery-bn-next {
  right: 0;
} /*Правая кнопка*/

.gallery-bn-prev img,
.gallery-bn-next img {
  width: 13px;
  height: 22px;
  opacity: 0.2;
} /*Картинки кнопок*/

.gallery-bn-prev:hover img,
.gallery-bn-next:hover img {
  opacity: 1;
} /*картинки кнопок при наведении*/

@media (max-width: 768px) {
  .gallery-box {
    grid-template-columns: repeat(6, minmax(49.5%, 1fr));
    grid-template-rows: repeat(3, min(160px));
  }


  .gallery-box__item:nth-child(1n) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .gallery-box {
    grid-template-columns: repeat(6, minmax(99%, 1fr));
    grid-template-rows: repeat(3, min(160px));
  }

}

/* ------- Портфолио ------- */

.product {
  position: relative;
  overflow: hidden; /*обрезаем контент без прокрутки*/
  padding: 20px 0;
  margin: 20px 0;
} /*Контейнер карусели*/

.product-container {
  padding: 0 10vw;
  display: flex;
  overflow-x: auto; /*обрезаем по ширине контейнера со скролом*/
  scroll-behavior: smooth; /*плавность прокрутки*/
} /*Корневой контейнер с карточками*/

.product-container::-webkit-scrollbar {
  display: none;
} /*Убираем полосу прокрутки*/

.product-card {
  flex: 0 0 auto;
  width: 250px;
  height: 450px;
  margin-right: 20px;
} /*Контейнер карточки*/

.product-image {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
} /*контейнер скриншот + кнопка*/

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
} /*Скриншот*/

.card-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  width: 90%;
  text-transform: capitalize;
  border: none;
  outline: none;
  background: var(--orange);
  border-radius: 5px;
  transition: 0.5s;
  cursor: pointer;
  opacity: 0;
} /*Кнопка*/

.product-card:hover .card-btn {
  opacity: 1;
} /*Отображение кнопки при наведении на карточку*/

.card-btn:hover {
  background: #D36A00;
}/*Наведение на кнопку*/

.product-info {
  width: 100%;
  height: 100px;
  padding-top: 10px;
} /*Контейнер с описанием карточки*/

.product-brand {
  font-size: 18px;
  text-transform: uppercase;
} /*Заголовок с описанием карточки*/

.product-short-description {
  width: 100%;
  line-height: 16px;
  overflow: hidden;
  opacity: 0.5;
  margin: 5px 0;
} /*Описание карточки*/

.pre-btn,
.nxt-btn {
  border: none;
  width: 10vw;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%); */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  cursor: pointer;
  z-index: 8;
} /*Кнопки карусели*/

.pre-btn {
  left: 0;
  transform: rotate(180deg);
} /*Левая кнопка*/

.nxt-btn {
  right: 0;
} /*Правая кнопка*/

.pre-btn img,
.nxt-btn img {
  opacity: 0.2;
  width: 13px;
  height: 22px;
} /*Картинки кнопок*/

.pre-btn:hover img,
.nxt-btn:hover img {
  opacity: 1;
} /*картинки кнопок при наведении*/