@import url("variables.css");
@import url("global.css");

/* header */
.header__container {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
  padding: 23px 167px 27px 165px;
  background-color: #3f2aff;
}

.header__logo {
  width: 94px;
  height: 21px;
}

.header__nav {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 470px;
  min-height: 21px;
}

.header__list {
  flex-wrap: wrap;
  gap: 59px;
}

.header__item {
  max-width: 135px;
}

.header__link {
  font-size: var(--main-text-color);
  color: var(--white-color);
  letter-spacing: 0.8px;
}

/* hero */
.hero__container {
  max-width: 1440px;
  min-height: 600px;
  margin-bottom: 58px;
  padding-left: 179px;
  background-image: radial-gradient(44.07% 44.07% at 67.78% 55.93%,
      rgb(85, 86, 129, 0%),
      rgb(33, 33, 51, 100%));
}

.hero__desc {
  padding: 130px 0 130px 1px;
}

.hero__title {
  max-width: 460px;
  margin-bottom: 29px;
  font-size: 60px;
  color: var(--white-color);
}

.hero__text {
  max-width: 446px;
  margin-bottom: 63px;
  font-size: var(--main-text-size);
  line-height: 147%;
  color: var(--white-color);
}

.hero__btn {
  max-width: 270px;
  min-height: 69px;
  padding: 25px 75px 22px 75px;
  border-radius: var(--radius);
  outline: none;
  text-align: center;
  background-color: var(--button-color);
}

.hero__link {
  display: block;
  outline: none;
  font-weight: 700;
  font-size: var(--main-text-size);
  text-align: center;
  color: var(--white-color);
}

.hero__img {
  padding: 15px 29px 0px 3px;
}

/* about */
.about-us__container {
  min-height: 296px;
  margin-bottom: 37px;
  padding-left: 154px;
}

.about-entry {
  min-height: 186px;
  padding: 22px 1px 6px 7px;
}

.about-entry__img {
  padding: 21px 0 11px 20px;
}

.about-entry__title {
  max-width: 380px;
  margin-bottom: 17px;
  color: var(--bg-color);
}

.about-entry__text {
  max-width: 585px;
}

.about-more {
  max-width: 100%;
  padding: 15px 3px 15px 3px;
}

.about-more__item {
  max-width: 370px;
  min-height: 110px;
  padding: 13px 20px 19px 117px;
  background-size: 80px 80px;
  background-position: 9px 0;
}

.about-more__item:not(:last-child) {
  margin-right: auto;
}

.priorities {
  background-image: url("../img/priorities-img.svg");
}

.teachers {
  background-image: url("../img/teachers-img.svg");
}

.importance {
  background-image: url("../img/importance-img.svg");
}

.about-more__text {
  max-width: 245px;
  font-weight: 700;
  line-height: 120%;
}

/* instructors */
.instructors__container {
  min-height: 576px;
  margin-bottom: 74px;
  padding: 74px 151px 73px 151px;
  background-color: var(--bg-color);
}

.instructors__title {
  margin-bottom: 24px;
  margin-left: 14px;
  color: var(--white-color);
}

.instructors__avatar {
  margin-bottom: 27px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.instructors__item-title {
  margin-bottom: 7px;
  color: var(--white-color);
}

.instructors__item-text {
  color: #85859b;
}

/* courses */
.courses__container {
  margin-bottom: 51px;
}

.courses__title {
  margin-bottom: 24px;
  margin-left: 15px;
}

.courses__article {
  position: relative;
  min-height: 300px;
  margin-bottom: 29px;
  border-radius: var(--radius);
  background-color: #edf0f9;
  overflow: hidden;
}

.hours {
  position: absolute;
  top: 9px;
  right: 5px;
  align-items: center;
  gap: 5px;
}

.hours__desc {
  align-self: flex-end;
  color: var(--white-color);
}

.courses__image {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

.courses__desc {
  min-height: 270px;
  padding: 0 30px 30px;
}

.courses__desc-title {
  margin-bottom: 7px;
}

.courses__desc-text {
  height: 113px;
  margin-bottom: 31px;
}

.courses__desc-btn {
  max-width: 202px;
  min-height: 60px;
  padding: 20px 59px 17px 59px;
  border-radius: var(--radius);
  background-color: var(--button-color);
}

.courses__desc-link {
  display: block;
  color: var(--white-color);
  font-weight: 700;
}

/* footer */
.footer__container {
  flex-direction: column;
  min-height: 98px;
  background-image: linear-gradient(var(--bg-color) 81%, var(--white-color) 81%);
}

.footer-top {
  min-height: 80px;
  padding: 28px 165px 28px 165px;
}

.social {
  justify-content: center;
  gap: 30px;
}

.footer-bottom {
  justify-content: center;
}

.footer-bottom__link {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
  color: var(--black-color);
}

.reg {
  color: var(--button-color);
}