@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;
}
html {
  height:100%;
}
.main-container {
  flex-grow:1;
}
.catalog-page-title {
  margin:0;
  padding:0;
  margin: 8px 0 8px;
  flex-grow: 1;
}
body {
  margin:0 auto;
  display:flex;
  flex-direction:column;
  min-height:100%;
  width:1200px;
  font-family: "PT Sans", sans-serif;
  font-size:22px;
  line-height:26px;
  color:#000000 ;
  background-color: #F2F2F2;
}
.page-wrapper {
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.btn {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color:#FFFFFF;
  text-decoration: none;
}
.btn-want-here, .btn-more-detail{
  display:block;
  background-color:#756157;
  font-size: 16px;
  line-height: 20px;
  min-height: 36px;
  border-radius: 4px;
  text-align:center;
}
.btn-want-here {
  min-width:160px;
}
.btn-more-detail {
  min-width:140px;
}
.btn-is-like{
  min-height: 36px;
  min-width: 140px;
  border:none;
  border-radius: 4px;
  background-color:#7DB54F;
  font-size: 16px;
  line-height: 20px;
}
.btn-search-hotel{
  background-color:#756157;
  font-size: 20px;
  line-height: 36px;
  width:376px;
}
.btn-sign-up{
  background-color:#82B3D3;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  min-height: 52px;
  min-width: 232px;
  border:none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-apply, .btn-in-like {
  background-color:#82B3D3;
  font-size: 16px;
  line-height: 20px;
  min-height: 36px;
  border-radius: 4px;
  border:none;
}
.btn-apply {
  min-width: 191px;
}
.btn-in-like {
  min-width: 140px;
}
.btn-reset{
  background-color:rgba(0,0, 0, 0);
  font-size: 16px;
  line-height: 20px;
  min-width: 191px;
  min-height: 36px;
  border-radius: 4px;
  border:none;
}
.page-wrapper {
  background-color: #FFFFFF;
}
.page-header{
  font-weight: 700;
}
.page-header .navigation-link {
  display:block;
  font-size:20px;
  line-height:24px;
  text-decoration: none;
  color: #000000;
  padding: 20px 16px;
}
.btn-want-here{
  font-size:16px;
  line-height:20px;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
}
.index-welcome {
  display:flex;
  align-items: center;
  background-image: url("../images/index-background-element.svg"), url("../images/index-welcome-background.jpg");
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color:#82B3D3;
  min-height: 485px;
  }
.description-title, .text-page, .search-hotel-title, .subscribe-title{
  font-size:30px;
  line-height:36px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.subscribe-title {
  display:block;
  margin:0;
  padding:0;
  margin:96px auto 20px;
}
.search-hotel-title {
  display:block;
  margin:0;
  padding:0;
  margin-top:96px;
  margin-bottom:20px;
}
.description-title {
  display:block;
  margin: 0;
  padding:0;
  min-width: 505px;
  margin: 64px auto 20px;
}

.text-page .usual-text-page, .description-text, .search-hotel-text, .subscribe-text{
  font-size:22px;
  line-height:26px;
  font-weight: 400;
  text-align: center;
  color: #333333;
}
.subscribe-text {
  max-width:475px;
  margin:0;
  padding:0;
  margin:0 auto 54px;
}
.search-hotel-text {
  display: block;
  margin:0;
  padding:0;
  max-width: 592px;
  margin-bottom:54px;
}
.usual-text-page {
  display:block;
  margin:0;
  padding:0;
  margin-bottom:64px;
}
.subscribe-text{
  color:#FFFFFF;
}

.advantages-list, .services-list{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  text-align: center;
  padding:0;
  margin:0;
  justify-content:flex-start;
  list-style-type:none;
  align-items: flex-start;
}
/* .advantages-card-text, services-card-text {
  width:230px;
  /* !!!!!!!!!!!!!!
} */

 .advantages-item, .services-item{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width:400px;
  min-height: 385px;
  flex-shrink:0;
}
.advantages-item, .services-item {
  color: #333333;
}
.advantages-card-title, .services-card-title{
  font-size:24px;
  line-height:28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
}
.advantages-card-text, services-card-text{
   font-size:18px;
  line-height:21px;
  font-weight: 400;
}
.first-advantages, .fifth-advantages, .first-advantages .advantages-card-title, .fifth-advantages   .advantages-card-title{
  color: #FFFFFF;
  background-color: #82B3D3;
}
.second-advantages, .fourth-advantages, .first-service, .third-service {
  background-color: #83B3D31F;
}
.third-advantages{
  background-color: #83B3D333;
}
.advantages-card-img {
  display:block;
  max-width: 100%;
  height: auto;
}
.search-hotel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  min-height:406px;
  box-sizing: border-box;
}
.btn-search-hotel, .btn-sign-up {
  color:#FFFFFF;
  font-size:20px;
  line-height:36px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
}
.btn-search-hotel {
  display:block;
  min-height: 52px;
  min-width: 376px;
  border:0;
  border-radius: 4px;
  margin-bottom:96px;
}
.subscribe{
  display:flex;
  flex-direction:column;
  color: #FFFFFF;
  background-color: #82B3D3;
  background-image: url("../images/index-subscribe-background.jpg");
  min-height:414px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
  padding:0;
}

.page-footer .phone-number {
  font-size:40px;
  line-height:40px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
}

.phone-number {
  grid-column: 2/3;
  }
.wrapper-filters {
  background-image: url("../images/catalog-background.jpg");
  min-height:412px;
  background-color:  #82B3D3;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding: 35px 70px 70px;
  box-sizing: border-box;
}
.breadcrums-link{
  color: #FFFFFF;
  font-size: 16px;
  line-height:21px;
  text-decoration: none;
}

.catalog-page-title {
  font-size: 60px;
  line-height: 78px;
  font-weight: 700;
}
.hotels-filter-title, .price-filter-title{
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}
.hotels-filter-title{
  padding:0;
  margin:0;
}
.hotels-filter-group {
  border:none;
  padding:0;
  margin:0;
}
.control {
  font-size:18px;
  line-height:23px;
}
.type-display-title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  text-transform: uppercase;
  margin:0;
  padding:0;
  grid-column: 1/2;
}
.hotel-card-title {
  margin:0;
  font-size:24px;
  line-height: 28px;
  font-weight: 700;
}
.hotel-card-text, .hotel-card-price{
  margin:0;
  font-size:18px;
  line-height:21px;
  color:#333333;
}

 .hotel-card-price {
  text-align: end;
 }

.hotel-card-raiting {
  margin:0;
  font-size:16px;
  line-height:21px;
  color:#333333;
  text-transform: uppercase;
  background-color: #F2F2F2;
  min-width:140px;
  min-height: 37px;
  border:none;
  border-radius: 4px;
  text-align: center;
}
.pagination-link {
  display:block;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color:#FFFFFF;
  text-decoration: none;
  background-color:#82B3D3;
  font-size: 20px;
  line-height: 36px;
  min-width: 60px;
  min-height: 60px;
  border:none;
  border-radius: 4px;
}
.pagination-link-current{
  background-color:#F2F2F2;
  color:#000000;
}
.pagination-link-more {
  background-color:rgba(0,0, 0, 0);
  color:#000000;
}
.subscribe-catalog{
  color:#000000;
  background-image: none;
  background-color: #FFFFFF;
  text-align:center;
}
.subscribe-text-catalog{
  color:#333333;
}
.navigation {
  display:grid;
  align-items: flex-start;
  grid-template-columns: 140px 1fr auto;
  column-gap:28px;
  margin:0 70px;
}
.navigation-list {
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin:0;
  padding: 0;
  list-style-type:none;
}
.navigation-user {
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  max-width:300px;
  margin-left:auto;
}
.navigation-user .navigation-link {
  min-width:20px;
  min-height: 20px;
}
.welcome-img-text {
  display:block;
  margin: 51px auto 82px;
  max-width:458px;
  min-height:352px;
}
.footer-contacts {
  display:grid;
  grid-template-columns: auto max-content auto;
  column-gap: 230px;
  align-items: center;
  margin: 40px 70px 30px;
}
.network-list {
display:flex;
padding:0;
margin:0;
flex-wrap: wrap;
list-style-type:none;
grid-column: 1/2;
}
.network-link {
  display:block;
  min-width:47px;
  min-height:40px;
  padding: 18px 12px;
  box-sizing: border-box;
}
.network-item {
  padding:0;
  margin:0;
}
.htmlacademy-logo {
  max-width:115px;
  height:auto;
  grid-column: 5/6;
  object-fit: contain;
}
.page-logo {
  min-width:140px;
  min-height:64px;
}

.advantages-li-image {
  width:800px;
  height:385px;
}
.breadcrums-list {
  padding:0;
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  margin:0;
  list-style-type:none;
}
.hotels-filter-list {
  list-style-type: none;
  margin: 0;
  padding:0;
}
.breadcrums-item {
  margin-right: 26px;
}
.hotels-filters-wrapper {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}
.description {
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  min-height:282px;
}
.text-page-index {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height:246px;
}
.filter-group-wrapper {
  display:flex;
  min-width:370px;
  justify-content: space-between;
}
.price-filter-wrapper {
 display:flex;
 flex-direction:row;
}
.filter-buttons {
  display:flex;
  flex-direction:column;
}
.hotel-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:auto auto;

}
.type-display-hotels {
  display:grid;
  grid-template-columns: 470px 292px auto;
  grid-gap: 70px;
  align-items: center;
  margin: 50px 70px 40px;
  box-sizing: border-box;
}
.select-control {
  width:292px;
  height:49px;
  grid-column: 2/3;
}
.hotel-card-list {
  display:grid;
  grid-template-columns: repeat(3,340px);
  gap:20px;
  padding:0;
  margin:0;
  margin-right:70px;
  margin-left:70px;
  margin-bottom:80px;
  list-style-type:none;
}
.hotel-card-wrapper {
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid #E5E5E5;
  box-sizing: border-box;
}
.card-text-wrapper {
  display: flex;
  flex-wrap:nowrap;
  justify-content: space-between;
  margin:0;
  margin-bottom: 16px;
}
/* .card-btn-wrapper {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  margin:0;
  margin-bottom: 16px;
} */
/* .card-raiting-wrapper {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  margin:0;
} */
.hotel-card-stars {
  display:block;
  margin:0;
}
.hotel-card-link {
  display:flex;
  flex-direction:column;
  margin-bottom:16px;
}
.hotel-card-img {
  order:-1;
  object-fit: contain;
  margin-bottom: 16px;
}
.hotel-card-item:nth-child(3n) .hotel-card-wrapper
{
  margin-right:0;
}
.pagination-list {
  display:flex;
  flex-wrap: wrap;
  list-style-type:none;
  margin:0;
  padding:0;
  margin: 0 70px 60px;
}
.type-display-list {
  display:flex;
  flex-wrap: wrap;
  margin:0;
  margin-left:auto;
  width:160px;
  list-style-type: none;
  grid-column: 3/4;
}
.wrapper-title-breadcrums {
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom:40px;
}
.characteristics-wrapper {
  display:grid;
  grid-template-columns: auto auto;
  gap: 20px;
}
.advantages-card, .services-card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top:102px;
  margin-bottom:102px;
}
.services-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top:81px;
  margin-bottom: 81px;
}
.advantages-card-title {
  display:block;
  margin:0;
  margin-bottom: 62px;
  max-width: 175px;
  min-height: 56px;
}
.services-card-title {
  display:block;
  margin:0;
  margin-bottom: 30px;
  max-width: 175px;
  min-height: 56px;
}
.advantages-card-text, .services-card-text {
  display:block;
  margin:0;
  max-width: 230px;
  min-height: 63px;
}
.subscribe-form {
  display: grid;
  grid-template-columns: 452px max-content;
  gap:0;
  margin-bottom: 104px;
}
.type-display-item {
  display:block;
  min-width: 48px;
  min-height: 48px;
  margin-right: 8px;
}
.type-display-item:last-child{
  margin:0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.network-item:nth-child(3n) {
  margin-right: 0;
}
.subscribe-input-email {
  background-color:#F2F2F2;
  color: #333333;
  font-size:18px;
  line-height: 24px;
  font-weight: 400;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border:none;
}
.btn-more-detail, .hotel-card-stars, .hotel-card-text {
  grid-column: 1/2;
}
.hotel-card-price, .btn-in-like, .hotel-card-raiting {
  grid-column:2/3;
}

 /* Временные решения */

.pagination-item {
  margin-right: 8px;
}