:root {
  --font-family: "PT Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif;

  --logo-color: #000000;
  --primary-text-color: #202846;
  --secondary-text-color: #ffffff;
  --text-form-color: #323236;
  --footer-text-color: #eeecf1;
  --header-bg-color: #202846;
  --secondary-header-bg-color: #c6c6dc;
  --page-bg-color: #dcdcdc;
  --section-bg-color: #c1c1c3;
  --form-bg-color: #f2eeee;
  --accent-color: #2196f3;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  color: #202846;
  background-color: var(--page-bg-color);
  line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.2;
}

p {
  margin: 0;
}

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

.list {
  list-style: none;
}

.container {
  max-width: 1510px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
}

.container-header {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* прибираємо зайвий заголовок з головної сторінки */
.visually-hidden {
  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;
}

ul {
  margin: 0;
  padding: 0;
}

section {
  background-color: var(--section-bg-color);
}

.container-header {
  max-width: 1640px;
}

header,
footer {
  width: 100%;
  height: 90px;
  background-color: var(--header-bg-color);
}

footer {
  font-style: italic;
  font-size: 36px;
  color: var(--footer-text-color);
}

/* HEADER */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 90px;
}

.site-nav {
  display: flex;
  align-items: center;
  height: 90px;
}

.site-nav .link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  padding: 0 25px;

  color: var(--secondary-text-color);
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;

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

.site-nav .link:hover,
.site-nav .link:focus {
  color: #000000;
  background-color: var(--accent-color);
}

.site-nav li {
  min-width: auto;
  border-right: 3px solid var(--secondary-text-color);
}

.site-nav li:last-child {
  border: none;
}

.hero {
  min-height: 369px;
  margin-top: 53px;
  margin-bottom: 53px;
  padding-top: 115px;

  background-image: url("../images/hero.jpg");
}

.hero-title {
  margin-bottom: 30px;

  font-size: 75px;
  text-align: center;
  color: var(--secondary-text-color);
}

.hero-text {
  font-weight: 700;
  font-size: 50px;
  text-align: center;
  color: var(--secondary-text-color);
}

.our-houses {
  position: relative;
  min-height: 604px;
  margin-bottom: 18px;

  background-image: url("../images/house-1.jpg");
}

.our-houses-text {
  position: absolute;
  left: 0;
  bottom: 30px;
  display: inline-block;
  max-width: 1160px;
  min-height: 170px;
  padding: 35px 25px;

  font-style: italic;
  font-size: 24px;
  background-color: var(--form-bg-color);

  opacity: 0.8;
}

.our-houses-link {
  position: absolute;
  left: 911px;
  bottom: 167px;

  z-index: 1;
}

.our-houses-link::after {
  content: "";
  width: 36px;
  height: 22px;
  margin-left: 22px;
  background-image: url("../images/arrow.svg");
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 245px;
  height: 68px;
  padding: 17px 30px;

  background-color: var(--header-bg-color);

  font-size: 24px;
  text-decoration: none;
  color: var(--secondary-text-color);

  border: none;
  border-radius: 38.72px / 34px;
}

.our-proposals {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 18px;
  margin-bottom: 18px;
  padding-top: 47px;
  padding-bottom: 47px;
  padding-left: 70px;
  padding-right: 70px;
}

.our-proposals-description {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 632px;
  min-height: 349px;
  padding-left: 10px;
  padding-right: 10px;

  font-size: 26px;
  text-align: center;
  background-color: var(--page-bg-color);
}

/* form feedback */

.feedback-form {
  display: flex;
  flex-direction: column;
  width: 518px;
  min-height: 481px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  padding-top: 21px;

  border: 3px solid rgba(170, 170, 170, 0.2);

  background-color: rgba(242, 238, 238, 1);
}

.feedback-form h2,
.form-field {
  padding-inline: 55px;
  /* padding-left: 55px;
  padding-right: 55px; */
}

.form-title {
  font-size: 36px;
  font-weight: 400;
  text-align: center;

  margin-bottom: 31px;
}

.form-field {
  margin-bottom: 16px;
}

.form-field:last-of-type {
  margin-bottom: 36px;
}

.form-label {
  display: block;
  font-size: 30px;
  margin-bottom: 16px;
}

.form-input {
  display: block;
  width: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 28px;
  padding-right: 28px;
  font-size: 30px;
}

.form-input::placeholder {
  font-size: 20px;
}

.form-input:focus {
  outline: none;
  border: 2px solid var(--accent-color);
}

.feedback-submit {
  width: 100%;
  min-height: 104px;
  margin-top: auto;

  font-size: 36px;

  border-radius: 0;
}

/* about us */

.page-header {
  margin-bottom: 50px;
  min-height: 140px;
  background-color: var(--secondary-header-bg-color);
}

.page-header .container {
  min-height: 140px;
  display: flex;
  align-items: center;
}

.page-title {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
}

.our-company {
  display: flex;
  flex-direction: column;
  justify-content: center;

  margin-bottom: 30px;
  min-height: 227px;
  background-color: var(--header-bg-color);
  background-image: url("../images/holiday-time.jpg");
}

.our-company-title {
  font-size: 48px;
  text-align: center;
  color: var(--secondary-text-color);
  -webkit-text-stroke: 2px var(--primary-text-color);
}

.our-company-text {
  font-style: italic;
  font-size: 36px;
  text-align: center;
  color: var(--secondary-text-color);
}

.about-us {
  height: 380px;
  margin-bottom: 30px;
}

.about-us-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-left: 70px;
  padding-right: 70px;
  font-size: 30px;
  text-align: justify;
}

.about-us-text {
}

.about-us-text:not(:last-child) {
  margin-bottom: 30px;
  margin-top: 0;
}

/* CONTACTS */

.page-header-contact {
  margin-bottom: 0;
}

.contact-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 600px;
}

.address {
  font-size: 32px;
  text-align: left;
  color: var(--primary-text-color);
}

.address .link {
  color: inherit;
  border-top: 3px solid var(--primary-text-color);
  text-decoration: none;
}

/* RESERVETION */

.find-houses {
  background-color: var(--page-bg-color);
  margin-bottom: 90px;
}

.list-houses .item {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 300px;
  background-color: var(--section-bg-color);
}

.list-houses .item + .item {
  margin-top: 36px;
}

.btn-more-details {
  position: absolute;
  right: -30px;
  bottom: -20px;

  border: none;

  cursor: pointer;
}

.card {
  width: 712px;
  height: 244px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-style: italic;
  font-size: 36px;
  color: var(--primary-text-color);
}

.house-photo {
  height: 244px;
}

.house-description {
  display: flex;
  align-items: center;
  height: 184px;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 22px;
  text-align: center;
  background-color: var(--page-bg-color);
}

/* BOOKING HOUSE */

.house {
  position: relative;

  min-height: 665px;

  margin-bottom: 36px;
}

.house-group-1 {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.house-group-1 img:not(:last-child) {
  margin-bottom: 10px;
}

.house-group-2 {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;

  padding: 10px;
  margin-left: 10px;
}

.house-group-2 img:last-child {
  margin-left: 10px;
}

.house-description-group {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 870px;
  justify-content: start;
  padding-top: 25px;
}

/* Check Availability */

.booking {
  padding-top: 20px;
  margin-bottom: 50px;
}

.booking-title {
  font-size: 48px;
  font-weight: 700;

  text-align: center;

  margin-bottom: 36px;
}

.booking__form {
  position: relative;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 30px;
  padding-bottom: 28px;
  font-size: 30px;
}

.booking-description {
  margin-bottom: 25px;
}

.form-date {
  display: flex;
  margin-bottom: 30px;
}

.booking__field {
  display: flex;
  flex-direction: column;
}

.form-date .booking__field + .booking__field {
  margin-left: 100px;
}

.form-date label {
  display: block;
  margin-bottom: 8px;
}

.form-date input {
  min-width: 350px;
  min-height: 62px;
  padding: 10px;

}

.form-cout {
  display: flex;
}

.form-cout .booking__field {
  flex-direction: row;
}

.form-cout input {
  max-width: 70px;
  padding: 5px;
  margin-left: 15px;

  text-align: center;
}

.form-cout .booking__field + .booking__field {
  margin-left: 30px;
}

.booking__submit {
  position: absolute;
  bottom: 50%;
  right: 110px;
  transform: translateY(50%);
  max-width: 350px;
  min-height: 112px;

  border: none;
  border-radius: 5px;
  background-color: var(--header-bg-color);
  color: var(--secondary-text-color);
}