:root {
  --color-primary: #cc9933;
  --color-primary-hover: #f0bf5f;
  --color-primary-active: #a47312;
  --color-text: #000000;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-light: #7f7e7e;
  --color-bg: #f1f1f1;
  --color-bg-white: #ffffff;
  --color-border: #dadada;
  --color-border-light: #e1e1e1;
  --color-border-lighter: #e4e4e4;
  --color-border-lightest: #e9e9e9;
  --color-accent: #ead000;
  --transition-base: 0.3s ease;
  --transition-color: 0.4s ease-in-out;
}

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

@font-face {
  font-family: "OpenSans";
  src: local("OpenSans"), url("../fonts/OpenSansLight.woff2") format("woff2"),
    url("../fonts/OpenSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenSans";
  src: local("OpenSans"), url("../fonts/OpenSansSemiBold.woff2") format("woff2"),
    url("../fonts/OpenSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

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

img {
  max-width: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  min-width: 320px;
  line-height: 1.3;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/*glob*/
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex {
  display: flex;
}

.container {
  max-width: 1100px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.section-title {
  margin: 0 0 20px 40px;
  font-weight: normal;
  font-size: 30px;
  line-height: 40px;
  color: #333333;
}

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

.section-desc {
  margin: 0;
  font-style: normal;
  line-height: 200%;
}

.section-desc:not(:last-child) {
  margin-bottom: 20px;
}

.section-offset {
  padding: 35px 0;
}
/*header*/
.header {
  padding: 35px 0;
}

.header-top {
  max-width: 1170px;
  align-items: center;
  justify-content: space-between;
  margin-right: auto;
}

.header-container {
  align-items: center;
}

.header-logo-icon {
  margin-right: 20px;
}

.header-contacts {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color var(--transition-color);
}

.header-contacts:focus {
  color: var(--color-primary);
  outline-offset: 2px;
  outline: 1px solid var(--color-primary);
}

.header-contacts:hover {
  color: var(--color-primary);
}

.header-contacts:active {
  color: var(--color-primary-active);
  outline: none;
}

.header-icon {
  margin-left: auto;
  padding-left: 30px;
  background-position: left 3px;
}

.header-icon::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 30px;
  height: 10px;
  background-image: url(../img/icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.header-icon-href {
  font-size: 16px;
  line-height: 1;
  color: var(--color-primary);
  transition: background-color var(--transition-base), color 0.2s linear;
}

.logosection {
  display: flex;
  align-items: center;
  margin-right: 20px;
  gap: 5px;
}

.slogan {
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  max-width: 350px;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
}

.header-time {
  color: var(--color-text-light);
  font-size: 12px;
  line-height: 12px;
}

.header-soc {
  display: flex;
}

.top-callback a {
  display: inline-block;
  vertical-align: top;
  padding: 15px;
  border-radius: 5px;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 700;
}

.header-icon:focus {
  color: var(--color-primary);
  outline-offset: 2px;
  outline: 1px solid var(--color-primary);
}

.header-icon:hover {
  color: var(--color-primary-hover);
}

.header-icon:active {
  color: var(--color-primary-active);
  outline: none;
}

.header-nav {
  align-items: center;
  max-width: 1170px;
  padding: 15px 45px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 15px;
  background-color: var(--color-bg-white);
}

.header-list {
  flex-wrap: wrap;
  justify-content: space-between;
}

.header-link {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-base), color 0.2s linear;
}

.header-link:focus {
  color: var(--color-primary);
  outline-offset: 2px;
  outline: 1px solid var(--color-primary);
}

.header-link:hover {
  color: var(--color-primary);
}

.header-link:active {
  color: var(--color-primary-active);
  outline: none;
}

.nav-left {
  max-width: 700px;
  margin-right: auto;
  padding-right: 11px;
  border-right: 1px solid var(--color-border-light);
}

.header-aitems {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-right: 45px;
  line-height: 1;
}

.nav-right {
  max-width: 340px;
}

.link {
  color: var(--color-primary);
  transition: color var(--transition-color);
}

/*about-us*/

.main-headline-title {
  margin: 0 0 20px 40px;
  font-weight: normal;
  font-size: 40px;
  line-height: 40px;
  color: #0c0c0c;
}

.about-text {
  position: relative;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: 618px;
  padding: 45px;
  justify-content: space-between;
  border-radius: 15px;
  background: var(--color-bg-white);
}

/*catalog*/
.catalog {
  padding: 50px 0;
}

.catalog-works {
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: 618px;
}

.catalog-list {
  flex-wrap: wrap;
}

.catalog-items {
  display: flex;
  width: 350px;
  margin-bottom: 20px;
}

.catalog-promo {
  min-height: 340px;
  width: 350px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--color-bg-white);
}

.catalog-image {
  display: block;
  height: 217px;
  background-color: gray;
}

.centr {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.catalog-features {
  padding: 15px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--color-bg-white);
}

.catalog-description {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.catalog-titles {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.catalog-pras {
  max-width: 180px;
  margin-right: auto;
}

.catalog-items:not(:nth-child(3n)) {
  margin-right: 20px;
}

.hotel-pras-from {
  color: var(--color-text-muted);
}

.catalog-features-cost {
  font-size: 20px;
  line-height: 20px;
}

.catalog-features-title {
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1;
  font-weight: normal;
}

.catalog-features-text {
  display: block;
  margin-bottom: 10px;
  line-height: 20px;
  color: var(--color-text-muted);
}

/*works*/
.works {
  padding: 50px 0;
}

/* gallery */
.gallery {
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: 618px;
}

/*blog*/
.blog {
  padding: 50px 0;
}

.photo:not(:nth-child(5n)) {
  margin-right: 15px;
}

/*back*/
.back {
  padding: 50px 0;
}

.back-title {
  flex-wrap: wrap;
}

.back-item {
  flex-direction: column;
  width: 336px;
  margin-bottom: 20px;
  padding: 30px 20px 20px;
  border: 1px solid var(--color-border-lighter);
  border-radius: 10px;
  background: var(--color-bg-white);
}

.back-item:not(:nth-child(3n)) {
  margin-right: 10px;
}

.back-item-descr {
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 180%;
  color: #787878;
}

.back-img {
  border-radius: 90%;
  border: 1px solid #7d54b7;
}

.back-user {
  margin-top: auto;
  align-items: center;
}

.back-avatar {
  flex-shrink: 0;
  width: 50px;
  margin-right: 15px;
}

.back-name {
  margin: 0 0 5px;
}

/*contacts*/
.contacts {
  padding: 50px 0 20px;
}

.contacts-address-mail {
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: 618px;
  padding: 45px;
  justify-content: space-between;
  border-radius: 15px;
  background: var(--color-bg-white);
}

.contacts-data {
  width: 100%;
  max-width: 375px;
  line-height: 1.5;
}

.contacts-list {
  margin-bottom: 45px;
}

.contacts-items {
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 23px;
  margin-bottom: 23px;
  border-bottom: 1px solid var(--color-border-lightest);
}

.contacts-items:last-child {
  margin-bottom: 0;
}

.contacts-image {
  width: 100%;
  max-width: 653px;
  border-radius: 10px;
}

.contacts-item-caption {
  width: 100%;
  max-width: 120px;
  margin: 0;
  font-size: 20px;
  line-height: 20px;
}

.contacts-wrap {
  width: 100%;
  max-width: 230px;
}

.contacts-text {
  width: 100%;
  max-width: 230px;
  padding-right: 41px;
  font-style: normal;
  line-height: 1.5;
}

.contacts-phones,
.contacts-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.link:focus {
  color: var(--color-primary);
  outline-offset: 2px;
  outline: 1px solid var(--color-primary);
}

.link:hover {
  color: var(--color-primary-hover);
}

.link:active {
  color: var(--color-primary-active);
  outline: none;
}

.email-text {
  color: var(--color-text-muted);
}

.contacts-btn {
  padding: 27px 29px;
  font-weight: 700;
}

/* blog */
.blog-lighting {
  width: 900px;
}

.blog-desc {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  line-height: 1.3;
}

.room-lighting {
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: 618px;
  padding: 45px;
  justify-content: space-between;
  border-radius: 15px;
  background: var(--color-bg-white);
}