@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ptsans-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ptsans-700.woff2") format("woff2");
  font-display: swap;
}

:root {
  --basic-extra-dark: #000000;
  --basic-normal-dark: #333333;
  --total-white: rgba(255, 255, 255, 1);
  --basic-normal-green: #7DB54F;
  --basic-normal-brown: #756157;
  --basic-normal-blue: #82B3D3;
  ---basic-palm-soft: rgba(131, 179, 211, 0.12);
  --basic-palm-soft1: rgba(131, 179, 211, 0.2);
  ---basic-border: rgba(229, 229, 229, 1);
  ---basic-card-border: rgba(230, 230, 230, 1);
  ---pagination-item-active: rgba(242, 242, 242, 1);
  ---global-grey: rgba(242, 242, 242, 1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

html {
  height: 100%;
}

body {
  font-family: "PT Sans", sans-serif;
  color: var(--basic-normal-dark);
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  background-color: var(---global-grey);
  margin: 0;
}

.global-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--total-white);
}

.main {
  flex-grow: 1;
}

.font-super-heading {
  font-weight: 700;
  font-size: 60px;
  line-height: 78px;
  text-transform: capitalize;
  margin: 0;
}

.font-section-heading {
  color: var(--basic-extra-dark);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.subscribe_with .font-section-heading {
  color: var(--total-white);
}

.subscribe-button {
  min-width: 232px;
  height: 52px;
}

.font-main-subtitle {
  font-weight: 400;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  margin: 0;
}

.font-mini-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  width: fit-content;
  border-radius: 4px;
  color: var(--total-white);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  box-sizing: border-box;
  font-family: inherit;
  white-space: nowrap;
}

.button_brown {
  background-color: var(--basic-normal-brown);
}

.button_blue {
  background-color: var(--basic-normal-blue);
}

.button_green {
  background-color: var(--basic-normal-green);
}

.button_transparent {
  background-color: transparent;
}

.button_big {
  font-size: 20px;
  line-height: 36px;
}

/* index.html HERO */

.advantages-title {
  padding: 69px 290px 0 290px;
  margin-bottom: 25px;
}

.advantages-subtitle {
  padding: 0 274px 0 274px;
  margin-bottom: 90px;
}

.hero-wrapper {
  background: chocolate url('../images/index/hero-background.jpg') no-repeat;
  background-size: cover;
}

.hero-divider {
  background: url('../images/index/hero-divider.png') no-repeat bottom;
  height: 485px;
}

.hero-welcome {
  transform: translate(371px, 51px);
}

/* index.html ADVANTAGES */

.advantages-item__title {
  margin: 112px auto 62px auto;
  width: 175px;
  height: 56px;
}

.advantages-item__subtitle {
  max-width: 230px;
  margin: 0 auto;
}

.advantages-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.advantages-item {
  min-height: 385px;
  width: 400px;
  text-align: center;
  background-color: var(---basic-palm-soft);
  color: var(--basic-extra-dark);
}

.advantages-item__text {
  min-height: 385px;
  width: 400px;
  text-align: center;
}

.advantages-item_big {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  min-width: 1200px;
  background-color: var(--basic-normal-blue);
  color: var(--total-white);
}

.advantages-item_active {
  background-color: var(--basic-palm-soft1);
}

/* index.html SERVICE */

.service-title {
  margin-bottom: 20px;
  padding: 96px 247px 0 247px;
}

.service-subtitle {
  margin-bottom: 64px;
  padding: 0 355px 0 355px;
}

.service-list {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding-left: 0;
}

.service-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  text-align: center;
  width: 400px;
  min-height: 385px;
  background-color: var(---basic-palm-soft);
}

.service-item_active {
  background-color: var(--total-white);
}

.service-item::before {
  content: "";
  display: block;
  width: 75px;
  height: 72px;
  background-size: contain;
}

.service-house::before {
  background: url('../images/index/house-icon.svg') center no-repeat;
}

.service-food::before {
  background: url('../images/index/food-icon.svg') center no-repeat;
}

.service-gift::before {
  background: url('../images/index/gift-icon.svg') center no-repeat;
  height: 76px;
}

.service-name {
  color: var(--basic-extra-dark);
}

.service-description {
  margin: 0;
  max-width: 230px;
  text-align: center;
}

/* index.html SEARCH */

.search {
  padding: 96px 304px 96px 304px;
}

.search-title {
  margin-bottom: 20px;
}

.search-subtitle {
  margin-bottom: 54px;
}

.search-button {
  min-width: 376px;
  height: 52px;
  margin: 0 auto;
}

/* SUBSCRIBE */

.subscribe {
  padding: 96px 258px 104px 258px;
}

.subscribe-title {
  /* padding: 96px 398px 0 398px; */
  margin-bottom: 20px;
}

.subscribe-subtitle {
  margin-bottom: 54px;
}

.subscribe-form {
  max-width: 684px;
  margin-inline: auto;
}

.subscribe-form > input {
  font-family: inherit;
}

.subscribe_with {
  background: url('../images/subscribe-background.jpg') center no-repeat;
  background-size: cover;
  color: var(--total-white);
}

/* HEADER */

.header-button {
  min-width: 160px;
  height: 36px;
}

.header-navigation {
  display: flex;
  align-items: center;
  padding: 0 70px 0 70px;
  max-height: 64px;
}

.sedona-logo {
  margin-right: 30px;
}

.navigation-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navigation-list > li {
  padding: 20px 16px 20px 16px;
}

.navigation-link {
  text-decoration: none;
  color: var(--basic-extra-dark);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}

.user-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  margin-left: auto;
  padding: 0;
}

.user-list > li:first-child {
  align-self: center;
}

.user-link::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
}

.glass-link {
  display: block;
  min-width: 20px;
  padding: 22px 12px 22px 12px
}

.glass-link::before {
  background: url("../images/search-icon.svg");
}

.heart-link {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  box-sizing: border-box;
  padding: 12px 7px 22px 7px;
}

.heart-link::before {
  background: url("../images/heart-icon.svg");
  grid-row: 2 / -1;
  grid-column: 1 / 3;
}

.user-link {
  text-decoration: none;
}

.favorite-bandage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: var(--basic-normal-green);
  border-radius: 50%;
  font-size: 10px;
  line-height: 10px;
  color: var(--total-white);
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}

/* FOOTER */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 70px 30px 70px;
}

.social-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.social-link {
  display: block;
  position: relative;
  text-decoration: none;
  width: 47px;
  height: 40px;
}

.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(131, 179, 211);
  mask-position: center;
  mask-repeat: no-repeat;
}

.social-vk::before {
  mask-image: url('../images/vk-social-icon.svg');
}

.social-telegram::before {
  mask-image: url('../images/tg-social-icon.svg');
}

.social-youtube::before {
  mask-image: url('../images/youtube-social-icon.svg');
}

.phone-link {
  text-decoration: none;
  color: var(--basic-extra-dark);
  font-size: 40px;
  line-height: 40px;
  font-style: normal;
}

/* catalog.html FILTER */

.filter-title {
  padding-left: 70px;
  padding-top: 35px;
}

.breadcrumbs-list {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  padding-left: 70px;
  padding-top: 8px;
}

.breadcrumbs-item {
  display: flex;
  gap: 8px;
}

.breadcrumbs-list li:first-child::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("../images/catalog/breadcrumbs-item.svg");
}

.breadcrumbs-list li:nth-child(2)::before {
  content: "";
  display: block;
  width: 8px;
  height: 20px;
  background: url("../images/catalog/breadcrumbs-arrow.svg");
}

.toolbar {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 50px 70px 40px 70px;
}

.toolbar-result {
  color: var(--basic-extra-dark);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
}

.filter {
  min-width: 1200px;
  background: url('../images/catalog/filter-background.jpg') center no-repeat;
  background-size: cover;
  color: var(--total-white);
}

.catalog-form {
  display: flex;
  margin: 0;
  padding-top: 40px;
  padding-left: 70px;
}

.catalog-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.filter-submit-button, .filter-reset-button {
  min-width: 191px;
  height: 36px;
}

.cost-fieldset {
  max-width: 288px;
  display: flex;
}

.cost-control {
  color: var(--basic-extra-dark);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
}

.cost-control > input {
  font-family: inherit;
}

.cost-control input[type="number"] {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.cost-name {
  font-weight: 400;
}

.breadcrumbs-link {
  text-decoration: none;
  color: var(--total-white);
  font-size: 16px;
  line-height: 21px;
}

.filter-select {
  font-family: inherit;
  margin-right: 70px;
  margin-left: auto;
}

.filter-legend {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 32px;
}

.infrastructure-list, .accommodation-list {
  list-style-type: none;
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.infrastructure-fieldset, .accommodation-fieldset {
  min-width: 200px;
}

/* catalog.html CATALOG*/

.vision-list {
  display: flex;
  gap: 8px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.vision-link {
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: solid 2px var(---basic-border);
}

.vision-link_active {
  border: solid 2px var(--basic-extra-dark);
}

.tile-link {
  background: url('../images/catalog/vision-card-icon.svg') center no-repeat;
}

.card-link {
  background: url('../images/catalog/vision-list-icon.svg') center no-repeat;
}

.list-link {
  background: url('../images/catalog/vision-tile-icon.svg') center no-repeat;
}

.cards-list {
 list-style-type: none;
 margin: 0;
 padding: 0 70px 0 70px;
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}

.card {
  width: 340px;
  box-sizing: border-box;
  border: solid 1px var(---basic-card-border);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.card__picture {
  margin-bottom: 16px;
}

.card__picture img {
  max-width: 100%;
  height: auto;
}

.card-name {
  color: var(--basic-extra-dark);
  text-decoration: none;
  margin-right: auto;
  margin-bottom: 16px;
}

.card-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-rating {
  display: flex;
  justify-content: space-between;
}

.pagination-list {
  list-style-type: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 70px;
}

.pagination-link {
  display: block;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  color: var(--total-white);
  background-color: var(--basic-normal-blue);
  min-width: 60px;
  padding: 12px 10px;
}

.pagination-item_current {
  background-color: var(---pagination-item-active);
}

.pagination-item_current .pagination-link {
  color: var(--basic-extra-dark);
}

.pagination-item_blank {
  background-color: var(--total-white);
}

.pagination-item_blank .pagination-link {
  color: var(--basic-extra-dark);
}