@font-face {
  font-family: raintungsten_bold;
  font-weight: 700;
  src: url(./Fonts/raintungsten_medium.ttf);
}

@font-face {
  font-family: raintungsten_medium;
  font-weight: 400;
  src: url(./Fonts/raintungsten_medium.ttf);
}

@font-face {
  font-family: Open Sans Condensed;
  font-weight: 400;
  src: url(./Fonts/Opensans/OpenSans-CondLight.ttf);
}

@font-face {
  font-family: Oswald;
  font-weight: 400;
  src: url(./Fonts/oswald/oswald-e-l.woff2);
}


@font-face {
  font-family: barlow-condensed-regular;
  font-weight: 400;
  src: url(./Fonts//Barlow/BarlowCondensed-Light.ttf);
}


:root {
  --light-gray: #efefef;
  --gray: #adadad;
  --dark: #2f2f2f;
  --font-gray: #adadad;
  --font-dark: #2f2f2f;
  --size--base: 4px;
  --content-width-max: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 4px;
}
body {
  font-size: 4rem;
}

html,
body {
  margin: 0;
  padding: 0;
  
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}


a {
    color: inherit; /* Наследует цвет от родителя */
    text-decoration: none;
    
}

a:hover {
  color: #772924; /* цвет ссылок при наведении */
}

/* layout*/



.page__content {
  display: flex;
  /* отступы */
  row-gap: calc(var(--size--base) * 28);
}

/*------------правое меню-----------*/
.right__menu {
  background-color: black;
  width: 15%;
  height: 100vh; /* Высота на весь экран */
  
  background-image: url("./Images/Background/cells.png");
  background-position: center;
  background-repeat: repeat-y; /* Повторение по вертикали */
  background-size: 100%; 
  
  position: fixed; 
  top: 0;
  right: 0;
}

.right__menu__text {
  margin: 20px;
  margin-top: 220px;
}

.nav__link__side {
  width: 220px;
  height: 40px;
  padding-inline: 10px;
  letter-spacing: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: right;
  font-family: raintungsten_medium;
  font-weight: 400;
  font-size: 7rem;
  text-decoration: none;
  font-size: 8rem;
  color: var(--font-gray);
}

.nav__link__side--active {
  width: 220px;
  height: 40px;
  padding-inline: 10px;

  font-family: raintungsten_medium;
  font-weight: 400;
  font-size: 7rem;
  text-decoration: none;
  font-size: 8rem;
  background-color: #efefef;
  color: #2f2f2f;
}

.nav__link__side:hover {
  width: 220px;
  height: 40px;

  background-color: #adadad;
  color: white;
}

/*--------конец правого меню---------*/



/* Левая часть */
.left__content {
  display: flex;
  flex-direction: column;
  width: 85%;
}

/* верхнее левое меню навигации - оболочка */
.nav__menu {
  display: flex;
  justify-content: right;
  align-items: center;

  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* верхнее левое меню навигации - цвета и шрифты */
.nav__link {
  display: flex;
  justify-content: center;
  letter-spacing: 0.2rem;
  align-items: center;
  width: 120px;
  height: 40px;
  text-align: center;
  user-select: none;
  font-family: raintungsten_medium;
  font-weight: 400;
  font-size: 5rem;
  text-decoration: none;
  color: var(--gray);
  transition: all 0.2s ease-in-out; /* Задержка анимации 0.2 секунд */ 
}
/*----mouseover----*/



.nav__link:hover {
  width: 120px;
  height: 40px;

  background-color: #adadad;
  color: white;
}

/*----активная кнопка меню----*/
.nav__link--active {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;

  width: 120px;
  height: 40px;
  letter-spacing: 0.2rem;
  font-family: raintungsten_medium;
  font-weight: 400;
  font-size: 5rem;  

  color: #efefef;
  background-color: #2f2f2f;
}

/* заголовок H1*/
.title__h1 {
  font-family: raintungsten_medium;
  font-weight: 400;
  font-size: 16rem;
  letter-spacing: 0.3rem;
  align-items: left;
  margin-left: 80px;
}

.backgray__content {
  background-color: var(--light-gray);
  margin-top: 40px;
  margin-left: 80px;
  margin-right: 80px;
  margin-bottom: 200px;  
  
}

/* упаковка блоков изображений в ряд */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  background-color: var(--light-gray);
  margin-left: 80px;
  margin-bottom: 200px;
  
}


/* картины с подписями */

.card {
  display: flex;
  flex-direction: column;  
  padding-right:80px;
  padding-top:80px;
  padding-bottom:40px;
  background-color: #efefef;  

}

.card_content img {
  width: 100%; /* Ширина адаптивная */
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1 (квадрат) */
  object-fit: cover; /* Обрезает края изображения, сохраняя его пропорции */
  border-radius: 10px; /* скругление углов */

}

.description__frame {
display: flex;

}
/*  цена картины */

.description {
  font-family: Open Sans Condensed; /*шрифт описания*/
  font-size: 6rem;
  line-height: 1.5;
  color: var(--font-gray);
  width: 100%;
}

.price {
  font-family: raintungsten_medium; /*шрифт цены*/
  font-weight: 700;
  font-size: 7rem;
  color: var(--font-dark);
  width: 100%;
  text-align: right;
}

/*конец галереи*/




.back__stripes {
    background-repeat: repeat; /* Повторение по вертикали */
    height: 150vh; /* Занять всю высоту экрана */
    width: 75vh;
    position: absolute;
    top: 0;
    left: -100px;
    z-index: -1;
}


.responsive-image {
    width: calc(var(--size--base) * 100); /* Ширина картинки 50% от ширины экрана */
    height: auto; /* Высота автоматически подстраивается под ширину */
}

/*стрелка вверх*/
.arrow{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
  }
  .arrow a{
    height: 50px;
    width: 50px;
    text-align: center;
    background: #1b1b1b;
    display: block;
    
  }
  .arrow a span{
    color: #f2f2f2;
    font-size: 25px;
    line-height: 39px;
    cursor: pointer;
  }

  .UP__text {
    
    img {       
        width: 40px;
        height: 60px;        
      }
      
  }


  /*--------------CLUB style--------------*/

  .pic_and_tex{
    display: flex;
    flex-direction: row;
    justify-items: center;
    padding-top: 5%;
    padding-bottom: 5%;

  }

.pic__club {
  display: flex;
  padding-left: 80px;
  padding-right: 1px;  
  
}

.pic__club img {
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1 (квадрат) */
  object-fit: cover; /* Обрезает края изображения, сохраняя его пропорции */
  width: 30vw; 
  height: auto;
  border-radius: 10px; /* скругление углов */
}


.pic__club__reverse {
  display: flex;
  padding-left: 1px;
  padding-right: 5%;
  
}

.pic__club__reverse img {
  width: 40vw;
  height: 100%; 
  border-radius: 10px; 
}


.text_wrap{
  display: flex;
  flex-direction: column;  
  
  padding-left: 5%;
  padding-right: 5%; 
  gap: 1%;
  
  font-family: Open Sans Condensed;
  font-size: 5rem;
  line-height:1.5;
  color: var(--font-dark);
  text-indent: 1em;  /* отступ для первой строки */   
}


.text_wrap_reverse{

  display: flex;
  flex-direction: column;
  
  padding-left: 5%;
  padding-right: 1px; 
  gap: 1%;
  
  font-family: Open Sans Condensed;
  font-size: 5rem;
  line-height:1.5;
  color: var(--font-dark);
  text-indent: 1em;  /* отступ для первой строки */   
}

  .gray_back_text {
    background-color: #efefef;
    padding: 20px;
    
/*размеры серого фона под текстом*/
}

/*------------css консультации--------------*/


.gray__container {
  
  padding-left: 40px; /* отступы от фона */
  padding-right: 80px;
  padding-top: 20px;

  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки */
  grid-template-rows: auto auto; /* Два ряда */
  gap: 40px; /* Расстояние между элементами */
}

.gray__container_text {
  display: block;
  padding: 40px;
  background-color: #efefef;
  font-family: Open Sans Condensed;
  font-size: 6rem;
  line-height:2;
  color: var(--font-dark);
  /*жестко заданная высота серого фона
  height: 333px;
  */
  max-height: flex;
  text-indent: 30px;  /* Устанавливаем отступ для первой строки */
}

.gray__container_text iframe { 
  display: block;   /* Обеспечивает, что iframe отображается как блочный элемент */ 
  margin: 0 auto; /* Центрирует iframe */ 
  text-indent: 30px;  /* Устанавливаем отступ для первой строки */
} 

.gray__container_text p { 
  display: block; /* Обеспечивает, что каждый абзац будет на новой строке */
  margin-top: 20px; /* Отступ сверху для текста */ 
  text-align: left; /* Выровнять текст по левому краю */ 
  text-indent: 30px;  /* Устанавливаем отступ для первой строки */
}


.consulting__content{
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

/*------------css Контакты-----------------*/

.container__dark__background {
  display: block;
  background-color: var(--dark);
  background-image: url("./Images/Background/scratch.png");
  background-position: center; /* Центрирует фоновое изображение */
  background-repeat: no-repeat; /* Предотвращает повторение фонового изображения */
  
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Три колонки */
  align-content: flex-start;
  gap: 66px; /* Расстояние между элементами */
}


/*****************/

.icon-text {
  display: flex;
  align-items: flex-start;
  fill: #d64b4b;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  min-width: 50px; /* Задаёт минимальную ширину для иконок */
}

.text {
  text-align: left;
}

.text1, .text2 {
  font-family: Oswald;
  color: #adadad;
  font-weight: 200;
  text-decoration: none;
  font-size: 5rem;
  padding: 20px;
}

.text2 {
  color: #f2f2f2;
  font-weight: 400;
  font-size: 7rem;
}

.container__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Выравнивает элементы по левому краю */
  padding: 20px;
  line-height: 0.8; /* Настройка межстрочного интервала */
}


/*----------------- Всплывающее окно галереи ------------------*/

.popup-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ширина и высота вспывающей картины */
  
  /* 
  тень под картинкой. Отключена.
  background-color: #000000;
  box-shadow: 10 10 15px rgba(0, 0, 0, 0.5);
  */
  z-index: 1001;
}
.popup img {
  width: auto;
  height: 100vh; /*высота картинки по экрану*/  
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #6c6c6c;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 40px;
  border-radius: 10%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ---------------Интерьер-----------------*/

.interior_gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  /*gap: 20px; /* Расстояние между колонками */
}


.interior_pic_and_tex{
  display: flex;
  flex-direction: row;
  justify-items: center;
  padding-top: 40px;
  padding-bottom: 40px;

}

.pic__interior {
  display: flex;
  justify-content: center; 
  align-items: center; 
  padding-left: 80px;
  width: 100%;

  overflow: hidden; /* Чтобы изображение не выходило за границы */
}

.pic__interior img {
  width: 100%; /* Заполняет родительский контейнер */
  height: 100%; /* Заполняет родительский контейнер */
  object-fit: cover; /* Сохранение пропорций, обрезка лишнего */
  border-radius: 10px; /* скругление углов */
}




.pic__interior__reverse {
display: flex;
padding-left: 1px;
padding-right: 40px;
max-width: 333px;
height: auto;
}


.interior_text_wrap{
display: flex;
flex-direction: column;
padding-left: 40px;
padding-right: 80px; 
gap: 40px;
font-family: Open Sans Condensed;
font-size: 6rem;
line-height:2;
color: var(--font-dark);
text-indent: 30px;  /* Устанавливаем отступ для первой строки */   
}


.interior_text_wrap_reverse{
display: flex;
flex-direction: column;
padding-left: 80px;
padding-right: 1px; 
gap: 40px;
font-family: Open Sans Condensed;
font-size: 6rem;
line-height:2;
color: var(--font-dark);
text-indent: 30px;  /* Устанавливаем отступ для первой строки */   
}

.interior_gray_back_text {
background-color: #efefef;
/*размеры серого фона под текстом*/
  padding: 0;
  margin: 0 auto;
}

/********************* интерьер картинки с подписями *********************************/



.interior_backgray__content {
  background-color: var(--light-gray);
  margin-left: 80px;
  margin-right: 80px;
  margin-bottom: 200px;  
  margin-top: 80px;
  padding-left:80px;

}

.interior_card {

display: flex;
  flex-direction: column;  
  padding-right:80px;
  padding-top:80px;
  padding-bottom:40px;
  background-color: #efefef;  
}

.interior_card_content img {
  width: 100%; /* Ширина адаптивная */
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1 (квадрат) */
  object-fit: cover; /* Обрезает края изображения, сохраняя его пропорции */
  border-radius: 10px; /* скругление углов */



}







.interior_description__frame {
display: flex;
  
}

.interior_description {
  font-family: Oswald; /*шрифт описания*/
  font-size: 5rem;
  line-height: 1.5;
  color: var(--font-gray);
  width: 100%;
}

.interior_right__menu {
  background-color: black;
  width: 15%;
  height: 100%;  
  background-image: url("./Images/Background/cells.png");
  height: 180vh;
  background-position: center;
  background-repeat: repeat-y; /* Повторение по вертикали */
  background-size: cover; /* Заполнение всей высоты */
  background-size: 100%; /* размеры картинки бэка */

}



/* Плакаты верхняя надпись */
.text_gray_back {
  display: inline-block; /* Размер блока зависит от содержимого */
  padding: 20px; /* Отступы вокруг текста */
  
  margin-left: 80px;
  margin-right: 80px;
  margin-bottom: 20px; 
  margin-top: 40px;  

  background-color: #efefef;  
  overflow: hidden; /* Предотвращает вылазание контента */
}