/* #region RESET */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
label,
input,
textarea {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}
/* #endregion */

/* #region VARIABLES */
:root {
  --color-grey: #757575;
  --color-blue: #2196f3;
  --color-white: #ffffff;
  --color-black: #212121;
  --color-link-footer: #ffffff99;
  --background-color: #2f303a;
  --color-light-violet: #f5f4fa;
  --color-projects-border: #eeeeee;
  --color-icon: #afb1b8;
  --color-icon-footer: #ffffff1a;
}
/* #endregion */

/* #region NORMALIZE*/

html {
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont;
  color: var(--color-black);
}

a {
  text-decoration: none;
  color: inherit;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}
/* #endregion */

/* #region CONTAINER */

.container {
  width: 1170px;
  margin: 0 auto;
}
/* #endregion */

/* #region HEADER */

.header {
  border-bottom: 1px solid #ececec;
}

.header__content {
  display: flex;
}

.header__logo {
  margin-right: 93px;
}

.header__contacts {
  margin-left: auto;
}
/* #endregion */

/* #region NAV */

.nav__list {
  display: flex;
  gap: 50px;
}

.nav__link {
  display: flex;
  align-items: center;

  height: 80px;

  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;

  transition: 250ms color;
}

.nav__item:hover {
  color: var(--color-blue);
}
/* #endregion */

/* #region ACTIVE */

.is-active {
  position: relative;

  color: var(--color-blue);
}

.is-active:after {
  content: "";

  position: absolute;
  bottom: -1px;

  height: 4px;
  width: 100%;

  border-radius: 2px;

  background-color: var(--color-blue);
}
/* #endregion */

/* #region CONTACTS */

.contacts {
  display: flex;
  gap: 50px;
}

.contacts--footer {
  flex-direction: column;
  gap: 9px;
}

.contacts__link {
  display: flex;
  align-items: center;
  gap: 10px;

  line-height: 21px;

  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.02em;

  color: var(--color-grey);

  transition: 250ms color;
}

.contacts__link:hover {
  color: var(--color-blue);
}

.contacts__link--footer {
  color: var(--color-link-footer);
}

.contacts__link--footer:nth-child(1) {
  color: var(--color-white);
}

.contacts__link--footer:nth-child(1):hover {
  color: var(--color-blue);
}

.contacts__icon {
  color: inherit;
}

.contacts__icon--email {
  width: 16px;
  height: 12px;
}

.contacts__icon--smartphone {
  width: 10px;
  height: 16px;
}

/* #endregion */

/* #region LOGO */

.logo {
  display: flex;
  align-items: center;

  font-family: Raleway, Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.logo__web {
  color: var(--color-blue);
}

.logo--footer {
  color: var(--color-white);
}

/* #endregion */

/* #region SECTION */

.section {
  padding: 94px 0;
}

.section__title {
  margin: 0 0 50px;
  text-align: center;

  line-height: 42px;

  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.03;
}

/* #endregion */

/* #region BANNER */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 600px;

  background: linear-gradient(
      90deg,
      rgba(47, 48, 58, 0.4) 0%,
      rgba(47, 48, 58, 0.4) 0%
    ),
    url("../images/banner--bg.jpeg"), var(--background-color);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center top 30%;
}

.banner__title {
  margin: 0 0 30px;

  width: 696px;

  font-size: 44px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 0.06em;

  text-align: center;
  text-transform: uppercase;

  color: var(--color-white);
}

.banner__button {
  width: 216px;
}
/* #endregion */

/* #region BUTTON */

.button {
  padding: 0 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 50px;

  font-size: 16px;
  font-weight: 500;
  line-height: 30px;

  background-color: var(--color-light-violet);
  color: var(--color-black);

  border: none;
  border-radius: 4px;

  transition: all 250ms;

  cursor: pointer;
}

.button--small {
  padding: 0 22px;
  height: 38px;

  line-height: 26px;
}

.button--blue {
  background-color: var(--color-blue);
  color: var(--color-white);

  border: none;
}

.button--bold {
  font-weight: 700;
}

.button--subscribe {
  padding: 0 28px;

  gap: 10px;

  letter-spacing: 0.06em;
}

.button--send {
  padding: 0 52px;

  letter-spacing: 0.06em;
}

.button--send:hover {
  box-shadow: 0px 2px 1px 0px #00000033;
}
/* #endregion */

/* #region FEATURES */

.features {
  padding-bottom: 0;
}

.features__list {
  display: flex;
  gap: 30px;
}

.feature {
  width: 270px;
}

.feature__image {
  margin-bottom: 30px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 120px;

  background-color: var(--color-light-violet);

  border-radius: 4px;
}

.feature__icon {
  width: 70px;
  height: 70px;
}

.feature__title {
  margin: 0 0 10px;

  line-height: 16px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.feature__description {
  line-height: 24px;

  font-size: 14px;
  letter-spacing: 0.03em;

  color: var(--color-grey);
}
/* #endregion */

/* #region SERVICES */

.services__list {
  display: flex;
  gap: 30px;
}

.services__item {
  position: relative;
}

.service__image {
  display: flex;

  width: 370px;
}

.service__overlay {
  position: absolute;
  bottom: 0;
  left: 0;

  height: 70px;
  width: 370px;

  background-color: #2f303acc;
}

.service__title {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;

  color: var(--color-white);
}
/* #endregion */

/* #region TEAM */

.team {
  background-color: #f5f4fa;
}

.team__list {
  display: flex;
  gap: 30px;
}
/* #endregion */

/* #region PERSON */

.person {
  box-shadow: 0px 1px 3px 0px #0000001f;
  border-radius: 4px;
  background-color: var(--color-white);
}

.person__image {
  width: 270px;
}

.person__info {
  padding: 30px 32px;
  text-align: center;
}

.person__name {
  margin: 0 0 10px;

  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.person__role {
  margin-bottom: 16px;

  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.03em;

  color: var(--color-grey);
}

/* #endregion */

/* #region SOCIAL */

.social__title {
  margin: 0 0 20px;
}

.social__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.social__item {
  color: var(--color-icon);
  background-color: var(--color-white);

  border-radius: 50%;

  transition: 250ms background-color, 250ms color;
}

.social__item:hover,
.social__item--footer:hover {
  color: var(--color-white);
  background-color: var(--color-blue);
}

.social__link {
  padding: 12px;

  display: flex;
}

.social__icon {
  width: 20px;
  height: 20px;
}

.social__item--footer {
  color: var(--color-white);
  background-color: var(--color-icon-footer);
}

/* #endregion */

/* #region CLIENTS */

.clients__list {
  display: flex;
  gap: 30px;
}

.clients__item {
  color: var(--color-icon);
  background-color: var(--color-white);

  border: 1px solid var(--color-icon);
  border-radius: 4px;

  transition: 250ms color;
}

.clients__item:hover {
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}
/* #endregion */

/* #region CLIENT */
.client__link {
  padding: 15px 31px;

  display: flex;
}

.client__icon {
  width: 106px;
  height: 60px;
}

/* #endregion */

/* #region FOOTER */

.footer {
  padding: 60px 0;

  background-color: var(--background-color);
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.footer__logo {
  margin: 0 0 20px;
}

.footer-title {
  line-height: 16px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: var(--color-white);
}

/* #endregion */

/* #region FILTERS */
.filters {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.filters__button:hover,
.filters__button--active {
  color: var(--color-white);
  background-color: var(--color-blue);

  box-shadow: 0px 3px 1px 0px #0000001a;
}

/* #endregion*/

/* #region PROJECTS */

.projects__filters {
  margin-bottom: 50px;
}

.projects__list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* #endregion*/

/* #region PROJECT */

.project {
  display: flex;
  flex-direction: column;

  transition: 250ms box-shadow;

  cursor: pointer;
}

.project:hover {
  box-shadow: 1px 4px 6px 0px #00000029;
}

.project:hover .project__overlay {
  transform: translateY(0);
}

.project__container {
  position: relative;

  overflow: hidden;
}

.project__image {
  display: flex;

  width: 370px;
}

.project__overlay {
  position: absolute;
  top: 0;

  transform: translateY(100%);

  width: 370px;
  height: 294px;

  background-color: #2196f3e5;

  transition: 250ms transform;
}

.project__description {
  position: absolute;
  left: 24px;
  top: 63px;

  line-height: 28px;

  font-size: 18px;
  letter-spacing: 0.03em;

  color: var(--color-white);
}

.project__info {
  padding: 20px 24px;

  border: 1px solid var(--color-projects-border);
  border-top: none;
}

.project__name {
  margin: 0 0 4px;

  line-height: 36px;

  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.project__type {
  line-height: 30px;

  font-size: 16px;
  letter-spacing: 0.03em;

  color: var(--color-grey);
}

/* #endregion */

/* #region MODAL */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  opacity: 0;

  transition: opacity 700ms;

  pointer-events: none;
}

.modal:target {
  opacity: 1;

  pointer-events: all;
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background-color: rgba(0, 0, 0, 0.2);
}

.modal:target .modal__window {
  transform: translate(-50%, -50%);
}

.modal__window {
  position: absolute;
  top: 50%;
  left: 50%;

  padding: 40px;

  transform: translate(-50%, -35%);

  width: 528px;

  background-color: var(--color-white);

  box-shadow: 0px 2px 1px #00000033;

  border-radius: 4px;

  transition: transform 700ms ease-in-out;
}

.modal__button {
  position: absolute;
  top: 8px;
  right: 8px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 30px;
  width: 30px;

  background-color: var(--color-white);

  border: 1px solid #0000001a;
  border-radius: 50%;

  transition: color 250ms, border-color 250ms;
}

.modal__close {
  width: 11px;
  height: 11px;

  color: var(--color-black);

  transition: 250ms color;
}

.modal__button:hover {
  border-color: var(--color-blue);
}

.modal__button:hover .modal__close {
  color: var(--color-blue);
}

.modal__title {
  margin-bottom: 12px;

  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.03em;

  text-align: center;

  color: var(--color-black);
}

.modal__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal__conditions {
  margin-bottom: 30px;
}

/* #endregion */

/* #region FORM */
.form {
  display: flex;
  flex-direction: column;

  border: 0 none;
}

.form__label {
  margin-bottom: 10px;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 4px;

  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.01em;

  color: var(--color-grey);
}

.form__label--message {
  margin-bottom: 20px;
}

.form__label--terms {
  margin-bottom: 30px;

  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.03em;

  color: var(--color-grey);
}

.form__input {
  padding-left: 42px;

  width: 448px;
  height: 40px;

  outline: none;

  border: 1px solid #21212133;
  border-radius: 4px;

  transition: border-color 250ms;

  cursor: pointer;
}

.form__input:hover {
  border-color: var(--color-blue);
}

.form__input--message {
  padding: 12px 16px;

  height: 120px;
  font-family: inherit;

  resize: none;
}

.form__input--message::placeholder {
  color: #75757580;
}

.form__input--terms {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.form__link {
  text-decoration: underline;

  color: var(--color-blue);
}

.form__icon {
  position: absolute;
  bottom: 11px;
  left: 12px;

  width: 18px;
  height: 18px;

  color: var(--color-black);

  transition: color 250ms;
}

.form__icon--checkbox,
.form__icon--checkbox-checked {
  height: 16px;
  width: 16px;
}

.form__icon--checkbox-checked {
  display: none;
}

.form__label:hover .form__icon {
  color: var(--color-blue);
}

.form__input--terms:checked ~ .form__icon--checkbox {
  display: none;
}
.form__input--terms:checked ~ .form__icon--checkbox-checked {
  display: block;
}

/* #endregion */

/* #region SUBSCRIBE */
.subscribe {
  position: relative;

  width: 570px;
  height: 86px;
}

.subscribe__input {
  position: absolute;
  left: 0;
  bottom: 0;

  padding: 15px 16px;

  height: 50px;
  width: 358px;

  outline: none;

  border: 1px solid #ffffff4d;
  border-radius: 4px;

  background-color: transparent;

  color: var(--color-white);

  transition: border-color 250ms;

  cursor: pointer;
}

.subscribe__input::placeholder {
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.03em;

  color: #ffffff99;
}

.subscribe__input:hover {
  border-color: var(--color-blue);
}

.subscribe__icon-telegram {
  width: 24px;
  height: 24px;
}

.subscribe__button {
  position: absolute;
  right: 0;
  bottom: 0;
}
/* #endregion */