/* 1. ПОДКЛЮЧАЕМ ШРИФТ С ЗАСЕЧКАМИ (ДЛЯ ЗАГОЛОВКОВ) */
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; 
    font-style: normal;
    font-display: swap;
}

/* 2. ПОДКЛЮЧАЕМ ВАРИАТИВНЫЙ INTER (ДЛЯ ТЕКСТА И МЕНЮ) */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
    /* Указываем диапазон жирности, который поддерживает Inter */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* Убираем стандартное синее выделение текста */
::selection {
    background: transparent;
    color: inherit;
}

::-moz-selection {
    background: transparent;
    color: inherit;
}


:root{
--index: calc( 1vw + 1vh);
}

body{
     font-family: 'Playfair Display', serif;
    font-weight: 700; /* Жирный */
     /* height: 100vh;
 /* background-image: url('/assets/images/common/backgroundIndex.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   overflow: hidden; */
   
}

 
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/common/backgroundIndex.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   overflow: hidden;
  filter: brightness(55%); /* Уменьшаем яркость фона до 40% */
  z-index: -1; /* Уводит фон под текст */
}


/* header */
header {
    display: flex;            
    justify-content: center; 
    align-items: center;
    margin-top: 2vh; 
    height: 10vh;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
}

/* Логотипы оставляем абсолютно позиционированными по краям шапки */
.header_spanFirst {
    font-family: 'Playfair Display', serif;
    color: #DEDAD7;
    letter-spacing: 10px;
    font-weight: 350;
    font-size: calc(var(--index) * 2);
    position: absolute;
    left: 5vw;
}

.header_spanSecond {
    font-family: 'Playfair Display', serif;
    color: #DEDAD7;
    letter-spacing: 10px;
    font-weight: 350;
    font-size: calc(var(--index) * 2);
    position: absolute;
    right: 5vw;
}

/* Блок с навигацией (меню) */
.blockA {
    font-family: 'Playfair Display', serif;
    font-weight: 350;
    font-size: calc(var(--index) * 1.2);
    height: 100%;
    
    /* Флекс автоматически распределит ссылки */
    display: flex;  
    align-items: center;
    justify-content: space-between; /* Ссылки встанут: одна слева, одна строго в центре, одна справа */
    
    width: 40vw; /* Немного уменьшили ширину, чтобы меню не поджималось слишком близко к логотипам */
    color: #DEDAD7;
}

/* Очищаем абсолютные свойства у ссылок, теперь за них отвечает flex-контейнер */
.blockA_aFirst,
.blockA_aSecond,
.blockA_aThird {
    position: static; /* Отменяет absolute */
    transform: none;  /* Сбрасываем центрирование через transform */
    width: auto;      /* Позволяет блоку быть ровно по ширине слова */
    text-align: center;
}

  .blockA_aFirst_span{
    border-bottom: 1px solid #B19A8C;
  }

/* Для центральной ссылки оставляем только ваше подчеркивание */
.blockA_aSecond {
     position: absolute;
     top: 50%;
    left: 50%;
     transform: translate(-50%, -50%);
}
 /* main */

 .container{
 
  width: 100vw;
  height: 88vh;
  position: relative;
   display: flex;            
    align-items: center;    
}

.hero-content{
    position: relative;
    margin-top: 10vh;
    margin-left: 5vw;
   
     width: 50vw;
     height: 65vh;
}

.subtitle{
   display: inline-block;
transform: translateY(0vh);
    font-family: 'inter', serif;
    font-size: calc(var(--index)*1.15);
      font-weight: 350;
      letter-spacing: 2px;
      color: rgba( 222, 218, 215, 0.7);
}

  .main-title{
     font-family: 'Playfair Display', serif;
    font-weight: 100; 
    line-height: 1.0; 
    letter-spacing: -0.02em; 
    font-size: calc(var(--index)*3);
    color: rgb( 222, 218, 215);
    margin-top: 1vh;
     transition: transform 0.3s ease;
    
  }

  .main-title_mainText{
    display: inline-block;
     transition: transform 0.3s ease;
}

.main-title_midlleText{
    display: inline-block;
      margin-left: 8vw;
        transition: transform 0.3s ease;
}

.main-title_bottomText{
    display: inline-block;
    margin-left: 8vw;
      transition: transform 0.3s ease;
}

.description{
     font-family: 'Inter';
     font-weight: 450;
     font-size: calc(var(--index)*0.75);
     color: rgba( 222, 218, 215, 0.9);
     margin-top: 3vh;
     line-height: 3.5vh;
}

.btn-explore{
    display: block;
    width: 25vw;
    height: 7vh;
    color: #ECD5CD ;
    background-color: rgba(236, 213, 205, 0.1);
    border: 1px solid #ECD5CD ;
    border-radius: 5px;
     display: inline-flex;    
    justify-content: center;   
      align-items: center;
      margin-top: 3.4vh;
    transition: all 0.3s ease; 
}

.btn-explore:hover {
    background-color: #ECD5CD;   /* Кнопка заливается пудровым цветом */
    color: #0b0b0b;              /* Текст внутри становится темным для читаемости */
}


.main-title_mainText:hover{
transform: translateX(10px);
}


.main-title_midlleText:hover{
    transform: translateX(10px);
}

.main-title_bottomText:hover{
    transform: translateX(10px);
}


/* Исправляем выравнивание меню */
.blockA {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40vw;
    height: 100%;
}

/* Убираем индивидуальное позиционирование ссылок */
.blockA_aFirst,
.blockA_aSecond,
.blockA_aThird {
    position: static;
    width: auto;
    margin: 0;
    transform: none;
}

/* Эффект при наведении */
.blockA_aFirst:hover,
.blockA_aSecond:hover,
.blockA_aThird:hover {
    transform: scale(1.05);
}


/* ADAPTIVE */
@media (max-width:1245px) {
  .btn-explore{
     width: 60%;
  }
}

@media (max-width:910px) {
  .description{
    font-size: calc(var(--index)*0.85);
  }

   .btn-explore{
     width: 70%;
     height: 8.5vh;
  }
  
}

@media (max-width: 800px) {
  body{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.2) 70%), url('/assets/images/common/backgroundIndex.png');
  }
 .description{
    font-size: calc(var(--index)*0.85);
    line-height: 2.5vh;
    color: rgba( 222, 218, 215, 1);
  }
  
   .btn-explore{
     width: 70%;
     height: 8vh;
  }
}


@media (max-width: 715px) {
  body{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.2) 70%), url('/assets/images/common/backgroundIndex.png');
  }

.main-title_mainText{
  margin-left: 6vw;
}

 .main-title_bottomText{ 
  margin-left: 0vw;
 }
    
.subtitle{
    margin-left: 3.5vw;
  }

  .btn-explore{
    width: 40vw;
    height: 7vh;
  }
}


@media (max-width:627px) {
  
.main-title_mainText{
  margin-bottom: 3vh;
}

 .main-title_bottomText{ 
  margin-top: 3vh;
 }

    
.description{
  margin-top: 5vh;
    font-size: calc(var(--index)*1.1);
    display: inline-block;
    width: 40vw;
    opacity: 0.9;
  }

  .btn-explore{
    margin-top: 4vh;
    width: 40vw;
  }

  .header_spanFirst {
    font-size: calc(var(--index) * 1.1);
}


.header_spanSecond {
    font-size: calc(var(--index) * 1.1);
}


/* Исправляем выравнивание меню */
.blockA {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40vw;
    height: 100%;
}

/* Убираем индивидуальное позиционирование ссылок */
.blockA_aFirst,
.blockA_aSecond,
.blockA_aThird {
    position: static;
    width: auto;
    margin: 0;
    transform: none;
}

/* Эффект при наведении */
.blockA_aFirst:hover,
.blockA_aSecond:hover,
.blockA_aThird:hover {
    transform: scale(1.05);
}


.container{
  padding-bottom: 10vh;
}
}

@media (max-width: 535px) {
  .header_spanSecond {
    display: none; /* Скрываем правый логотип на очень маленьких экранах */
 }
  .blockA{
    width: 50vw;
    font-size: calc(var(--index)*1.5);
    margin-left: 35px;
  }
  
.container{
  padding-bottom: 10vh;
}
  

}

@media (max-width: 520px) {
 
 .main-title_bottomText{ 
  margin-right: 10vw;
  text-align: center;
 }

    
.description{
  margin-top: 5vh;
    font-size: calc(var(--index)*1);
    display: inline-block;
    width: 40vw;
    margin-left: 5vw;
  }

  .btn-explore{
    margin-left: 5vw;
  }

   .blockA{
   width: 50vw;
}

.container{
  padding-bottom: 10vh;
}

 .subtitle{
    transform: translateY(-10px);
 }

 
.hero-content{
  width: 50vw;
}
.main-title{
  text-align: center;
}
.main-title_bottomText{
  margin-right: 0;
}

.main-title_midlleText{
  margin-left: 0;
}
.main-title_mainText{
  margin-left: 0;
}
.subtitle{
  text-align: center;
  margin-left: 0;
}

   .blockA{
   margin-left: 15vw;
}
.btn-explore{
  width: 50vw;
}

.description{
  width: 50vw;
}

}

@media (max-width: 450px) {
  
.btn-explore{
  width: 50vw;
}

.description{
  width: 50vw;
}

}

@media (max-width:400px) {
   .header_spanFirst{
    display: none;
   }
   .blockA{
 margin-left: 0;
 width: 80%;
 font-size: calc(var(--index)*1.7);
   }
  
}

@media (orientation: landscape) and (max-height: 600px) {
  header {
    height: 48px;
    margin-top: 0;
  }

  .header_spanFirst,
  .header_spanSecond {
    font-size: 18px;
    letter-spacing: 5px;
  }

  .blockA {
    width: min(42vw, 360px);
    height: 100%;
    margin-left: 0;
    font-size: 15px;
  }

  .container {
    min-height: calc(100svh - 48px);
    height: auto;
    align-items: center;
    padding: 0 0 20px;
    box-sizing: border-box;
  }

  .hero-content {
    width: min(62vw, 700px);
    height: auto;
    margin: 0 0 0 5vw;
  }

  .subtitle {
    margin: 0;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .main-title {
    margin-top: 8px;
    font-size: clamp(30px, 7vh, 46px);
    line-height: 0.95;
  }

  .main-title_mainText,
  .main-title_midlleText,
  .main-title_bottomText {
    margin: 0;
  }

  .description {
    width: min(52vw, 560px);
    margin-top: 12px;
    font-size: clamp(12px, 2.4vh, 15px);
    line-height: 1.45;
  }

  .btn-explore {
    width: min(30vw, 280px);
    height: 42px;
    margin-top: 14px;
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  header {
    height: 40px;
  }

  .header_spanFirst,
  .header_spanSecond {
    font-size: 15px;
    letter-spacing: 3px;
  }

  .container {
    min-height: calc(100svh - 40px);
  }

  .hero-content {
    width: min(68vw, 700px);
  }

  .main-title {
    font-size: clamp(26px, 6.5vh, 34px);
  }

  .description {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
  }

  .btn-explore {
    height: 36px;
    margin-top: 10px;
  }
}