@font-face {
  font-family: "Inter";
  src: url("src/fonts/Inter-Regular.woff2") format("woff2"),
    url("src/fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-white: #ffffff;
  --main-red: #fb3453;
  --main-black: #232323;
  --main-gray: #f6f6f6;
  --dark-gray: #c9c8c8;
}

* {
  font-family: "Inter", sans-serif;
}

.container {
  max-width: 1680px;
  margin: 0 auto;
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
}

p {
  text-align: center;
  font-size: 32px;
}

/*header */
.header {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 40px 0;
  gap: 50px;
}

.header-search-mob {
  display: none;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.header-location__select {
  width: min-content;
  color: var(--dark-gray);
  border: none;
  height: 20px;
}

.header-logo {
  display: flex;
  align-items: center;
  height: 54px;
}

.header-middle {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  gap: 50px;
  max-width: 1080px;
}

.header-nav__list {
  display: flex;
  gap: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 20px;
}

.header-nav__item {
  font-size: 16px;
  color: var(--main-black);
}

.header-nav__item--sale {
  color: var(--main-red);
}

.header-catalog-search-wrap {
  display: flex;
  align-items: center;
  gap: 25px;
}

.header-catalog-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 54px;
  border-radius: 15px;
  background-color: var(--main-red);
  font-size: 16px;
  font-weight: 600;
  color: var(--main-white);
  text-decoration: none;
}

.header-search {
  flex-grow: 1;
}

.header-search__input {
  padding: 0;
  margin: 0;
  border: none;
  background-color: var(--main-gray);
  padding: 16px 40px;
  border-radius: 15px;
  width: 100%;
}

.header-search__input::placeholder {
  color: var(--dark-gray);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 50px;
}

.header-info {
  display: flex;
  gap: 15px;
  align-items: center;
  height: 20px;
}

.header-info__worktime {
  font-size: 14px;
  color: var(--dark-gray);
}

.header-info__tel {
  font-weight: 600;
  font-size: 16px;
  color: var(--main-black);
}

.header-tools {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-tools__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  font-size: 13px;
  color: var(--main-black);
}

.header-tools__img {
  width: 25px;
  height: 25px;
}

/* main banner */
.main-banner {
  position: relative;
}

.main-banner__text {
  position: absolute;
  bottom: 50px;
  left: 140px;
  color: var(--main-white);
  width: 30%;
  text-align: left;
}

@media (max-width: 880px) {
  .header {
    gap: 0;
  }

  .header-search-mob {
    display: block;
    width: 50px;
  }

  .header-location__select {
    display: none;
  }

  .header-middle {
    display: none;
  }

  /* .header-catalog-search-wrap {
    display: none;
  } */

  .header-info {
    display: none;
  }

  .header-tools__item--busket,
  .header-tools__item--profile {
    display: none;
  }

  .header-tools {
    gap: 12px;
  }
  .header-tools__title {
    display: none;
  }
  .header-logo {
    height: auto;
  }
  .logo {
    width: 94px;
  }

  .header-tools__img {
    width: 19px;
    height: 19px;
  }

  .main-banner__text {
    bottom: 10px;
    left: 10px;
    width: 85%;
    font-size: 16px;
    text-align: center;
  }
}