@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarina&display=swap');
/* Общие стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

img, video {
  max-width: 100%;
  height: auto;
}


body {
  background: #000;
}


image-slider {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
    }
    .slide-content {
      display: flex;
      width: 100%;
      align-items: center;
      padding: 20px;
      border-radius: 10px;
    }
    .slide-image {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .slide-image img {
      width: 70%;
      border-radius: 10px;
    }
    .slide-text {
      flex: 2;
      padding: 20px;
      font-size: 24px;
      font-family: 'Montserrat', sans-serif;
      color: #D2FFFD;
    }
    .slide-text p {
      margin: 0;
      line-height: 1.5;
      color: #D2FFFD;
    }

/* Рамка-экран */
.page-frame {
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu-item {
  text-align: center;
}

.item-1 {
      width: clamp(60px, 15vw, 210px);
      font-size: 24px;
  /* Масштабируемая ширина */
}

.item-2 {
      width: clamp(60px, 15vw, 210px);
      font-size: 24px;
}

.item-3 {
      width: clamp(60px, 15vw, 210px);
      font-size: 24px;
}

.item-4 {
      width: clamp(60px, 15vw, 210px);
      font-size: 24px;
}

.item-5 {
      width: clamp(60px, 15vw, 210px);
      font-size: 24px ;
}

.menu-item a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight:bolder;
  font-size: clamp(14px, 1.71vw, 18px);
  /* Масштабируемый текст */
}

.page-content {
  transform-origin: center;
  width: 100%;
  height: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  /* scroll-behavior: smooth; - Можно убрать, так как html уже имеет smooth */
}

.page-content::-webkit-scrollbar {
  display: none;
}

.bah {
  width: 100%;
  max-width: 1240px;
  height: 780px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(20px, 2.14vw, 30px) auto;
  box-sizing: border-box;
}



.photos-container {
  position: relative;
  /* Для позиционирования изображений */
  width: 100%;
  max-width: 520px;
  /* Соответствует ширине .photo-1 */
  height: 780px;
  /* Соответствует высоте .photo-1 */
  margin: 0 auto;
  /* Центрирование */
}

.photos-container img {
  max-width: 100%;
  object-fit: cover;
}

.photo-2 {
  width: 500px;
  /* Фиксированная ширина */
  height: 750px;
  /* Фиксированная высота */
  border-radius: 4px;
  z-index: 1;
  position: relative;
  /* Базовая позиция */
  display: block;
}

.photo-1 {
  width: 520px;
  /* Фиксированная ширина */
  height: 780px;
  /* Фиксированная высота */
  position: absolute;
  /* Поверх .photo-2 */
  z-index: 2;
  bottom: clamp(10px, 1.5vw, 20px);
  /* Адаптивный отступ снизу */
  right: clamp(10px, 1.5vw, 20px);
  /* Адаптивный отступ справа */
}


/* Основной контент */
.page-wrapper {
  width: clamp(430px, 100vw, 100%);
  /* Масштабируемая ширина */
  margin: 0 auto;
  background-color: #D2FFFD;
  background-image: url("assets/images/leaves.png");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

/* Header */
header {
  position: relative;
  width: clamp(430px, 100vw, 100%);
  /* Масштабируемая ширина */
  height: clamp(400px, 68.21vw, 100vw);
  /* Масштабируемая высота */
  overflow: hidden;
}

.header-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NAV / HEADER FIXES: ensure navigation is readable above header image */
/* Контейнер меню */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* уберём, чтобы вручную контролировать отступы через ::after */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Hide the hamburger on wide screens; it's shown only in the small-screen media rule */
.hamburger { display: none; }

/* Каждый элемент меню */
.nav-menu li {
  display: flex;
  align-items: center;
}

/* Ссылка */
.nav-menu li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: clamp(14px, 1.2vw, 18px);
  color: #D2FFFD;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Hover эффект только на ссылку */
.nav-menu li a:hover {
  color: #4DFCCD;
  text-decoration: none;
}

/* Разделительная вертикальная линия */
.nav-menu li::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px; /* расстояние от текста до линии */
  color: rgba(210, 255, 253, 0.6);
  font-size: clamp(14px, 1vw, 16px);
  pointer-events: none; /* чтобы hover не подсвечивал линию */
  line-height: 1; /* чтобы линия стояла строго по центру */
}

/* У последнего элемента разделитель убираем */
.nav-menu li:last-child::after {
  content: none;
}


/* On wide screens keep nav horizontal and lower; on small screens allow wrapping */
@media (min-width: 780px) {
  header .nav-container { top: 3.2rem !important; padding: 0.25rem 0.6rem !important; }
  header .nav-menu { flex-wrap: nowrap !important; gap: clamp(12px, 1.5vw, 26px) !important; }
  header .nav-menu li a { font-size: clamp(14px, 1.2vw, 18px) !important; }
}

@media (max-width: 779px) {
  header .nav-container { top: 0.6rem !important; padding: 0.25rem 0.4rem !important; }
  header .nav-menu { flex-wrap: wrap !important; gap: 8px !important; }
  header .nav-menu li a { font-size: 14px !important; padding: 6px 8px !important; }
}

@media (max-width: 480px) {
  header .nav-menu { gap: 8px; }
  header .nav-menu li a { font-size: 13px; padding: 4px 6px; }
}

/* Навигация (fallback) */
.nav-container {
  /* non-header nav fallback: keep minimal so header-specific rules can override */
  position: relative;
  margin-top: clamp(5px, 0.71vw, 10px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: clamp(3px, 0.36vw, 5px);
  list-style: none;
  align-items: center;
}

.nav-menu li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}


.paragraph-box {
  color: #0F3228;
  text-align: right;
}

.paragraph-box p{
  font-size: 24px;
   font-family: 'Montserrat', serif;
}

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

.nav-menu li a {
  font-weight: 400;
  font-size: clamp(16px, 1.71vw, 24px);
  /* Масштабируемый шрифт */
  color: #D2FFFD;
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  transition: transform 0.4s ease;
}

.nav-menu li a:hover {
  transform: scale(1.3);
}

/* Главная секция */


   .about-me {
    position: relative;
       display: flex;
        height: clamp(400px, 68.21vw, 100vw);
      width: clamp(430px, 100vw, 100%);
      align-items: center;
      justify-content: center;

        
      }

      .about-content{
       
        position: absolute;
        width: 100%;
             display: grid;
        grid-template-columns: repeat(2, 1fr);
        
        
        
      }

      .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .image {
        position: relative;
        width: 80%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
      }
      .foto2 {
        position: absolute;
        top:5%;
        left: 6%; 
        border-radius: 8px;
      }

      .text-container {
       
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 100%;
      }
      h1{
        font-size: 72px;
       font-family: 'Bodoni Moda', serif;
      }
      .text-container p{
        font-family: 'Montserrat';
         font-size: 24px;
  line-height: 1.3;
  color: #0F3228;
  display: flex;
  text-align: end;
  word-spacing: -1px;
      }

/* Hero секция */
.hero-section {
  width: 100vw; /* Полная ширина экрана */
  height: 100vh; /* Полная высота экрана */
  overflow: hidden;
  margin: 0; /* Сброс отступов */
  padding: 0;
  flex-direction: column;
  justify-content: space-between; /* Распределяем hero-top и bottom-rate */
  align-items: center;
}

.hero-top {
  position: relative; /* Перенёс relative сюда для оверлеев и фона */
  width: 100%;
  height: 100vh; /* 80% высоты экрана для верхней части */
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0; /* Не сжимается */
}

.main-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* Покрывает .hero-top */
  z-index: 1;
}

/* Элементы поверх главной картинки */
.overlay-top {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 0;
  max-width: clamp(300px, 100%, 100%); /* Масштабируемая */
}

.overlay-top .text-yoga {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background-color: #0F3228d9;
  max-width: 100%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.overlay-top .text-yoga .text-yoga-l{
  font-size: 24px;
  line-height: 1.3;
  color: #D2FFFD;
  padding: 20px;
  flex: 1;

}
.overlay-top .text-yoga .text-yoga-l span{
  font-weight: 500;
}

.overlay-top .text-yoga .text-yoga-r{
  font-size: 24px;
  line-height: 1.3;
  color: #D2FFFD;
  padding: 20px;
  flex: 1;
  text-align: end;
}

.overlay-center {
  position: absolute;
  top: 65%; /* Ниже центра */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
}

.cta-btn {
  padding: 25px 30px;
  font-size: 22px;
  border-radius: 50px;
  border: 1px solid rgba(176, 184, 182);
  background: rgba(15, 88, 68);
  color: rgba(148, 202, 195);
  cursor: pointer;
  width: 26%; /* Масштабируемая */
  height: 18%;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.cta-btn:hover {
  background-color: #D2FFFD;
  color: #0F5844;
  border-color: #0F5844;
}

.overlay-bottom {
  position: absolute;
  bottom: 10%; /* Внизу .hero-top */
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Нижний блок (bottom-rate — внизу экрана) */
.bottom-rate {
  width: 100%;
  height: 20vw; /* 20% высоты экрана */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0; /* Не сжимается */
  z-index: 4; /* Выше всего */
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Затемнение */
  position: relative; /* Добавил relative для ::before */
  
}

.bottom-rate::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(15, 50, 40, 0.8), rgba(15, 50, 40, 0.8)), url("assets/images/bgds2.png");
  background-size: cover;
  background-position: bottom;
  z-index: -1;
}

.centerr {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: relative;
  width: 100%;
  max-width: 100%; /* Центрирование и масштабирование */
}

.centerr button {
  padding: 25px 30px;
  font-size: 22px;
  border-radius: 71px;
  border: 1.5px solid rgba(210, 255, 253, 1);
  background: rgba(15, 88, 68);
  color: rgba(148, 202, 195);
  cursor: pointer;
  width: clamp(80px, 18vw, 100px);
  height: clamp(80px, 18vw, 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
}

.centerr button:active {
  background-color: #D2FFFD;
  color: #0F5844;
  border-color: #0F5844;
}

.fix {
  position: relative;
  display: flex;
  justify-content: center; /* Центрируем изображение */
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 60px; /* Добавляем "внутренний воздух" для стрелок */
  box-sizing: border-box;
}

.fix img,
.fix .review-image {
  display: block;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  margin: 0 auto; /* Абсолютное выравнивание по центру */
  position: relative;
  z-index: 2; /* Чтобы изображение не пересекалось со стрелками */
}

/* Стрелки навигации */
.rate-btn-l,
.rate-btn-r {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 60, 50, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3; /* Поверх картинки */
}

.rate-btn-l:focus,
.rate-btn-r:focus {
  background: rgba(0, 90, 70, 1);
  transform: translateY(-50%) scale(1.05);
}

/* Расположение стрелок */
.rate-btn-l {
  left: 10px;
}

.rate-btn-r {
  right: 10px;
}




/* Footer */
footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Масштабируемая ширина */
  gap: min(100px, 8.08vw);
  
  width: 100%;
  
}

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



.poetry-block h2 {
  font-family: Bodoni, serif;
  font-size: clamp(36px, 5.82vw, 72px);
  color: #0F3228;
  font-weight: 600;
}

.poetry-table {
  width: 100%;
  height: auto;
  min-height: min(480px, 38.8vw);
  margin-bottom: min(40px, 3.23vw);
  overflow: hidden;
}

#poemContainer,
#poemTitle,
#poemText {
  font-family: Montserrat, sans-serif;
  font-size: clamp(16px, 1.94vw, 24px);
}

.poetry-slider {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: min(204px, 16.49vw);
  width: 100%;
}

.arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
  width: min(145px, 11.72vw);
  /* Не изменяется */
  min-width: 80px;
  /* Не изменяется */
  height: min(55px, 4.45vw);
  /* Не изменяется */
  border-radius: min(50px, 4.04vw);
  /* Не изменяется */
  border: 1.5px solid rgba(176, 184, 182);
  /* Не изменяется */
  background: rgba(15, 88, 68);
  /* Не изменяется */
  color: rgba(148, 202, 195);
  /* Не изменяется */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.arrow-btn:hover {
  background-color: #D2FFFD;
  /* Не изменяется */
  color: #0F5844;
  /* Не изменяется */
  border-color: #0F5844;
  /* Не изменяется */
}

.arrow-btn svg {
  width: min(70px, 5.66vw);
  /* Не изменяется */
  height: min(20px, 1.62vw);
  /* Не изменяется */
  color: #D2FFFD;
  /* Не изменяется */
  transition: all 0.3s ease;
}

.arrow-btn:hover svg {
  color: #0F3228;
  /* Не изменяется */
}

/* Footer photos */
.footer-photos {
  position: relative;
  width: min(400px, 32.33vw);
  height: min(625px, 50.52vw);
}

.footer-photo {
  position: absolute;
}

.photo-main {
  top: 0;
  right: 0;
  width: min(500px, 40.42vw);
  z-index: 2;
}

.photo-frame {
  top: calc(-1 * min(15px, 1.21vw));
  right: calc(-1 * min(45px, 3.64vw));
  width: min(520px, 42.04vw);
  z-index: 1;
}

/* Автор */
.author {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 70px);
  /* Масштабируемый зазор */
  background-color: #0F3228;
  padding: clamp(20px, 2.14vw, 30px);
  /* Масштабируемый отступ */
  height: clamp(100px, 10.71vw, 150px);
  /* Масштабируемая высота */
  font-family: 'Montserrat', sans-serif;
}

.name p {
  font-family: Montserrat, sans-serif;
  font-size: clamp(16px, 1.71vw, 24px);
  /* Масштабируемый шрифт */
  color: #D2FFFD;
}

.logo,
.logo2 {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.43vw, 20px);
  /* Масштабируемый зазор */
  cursor: pointer;
}

.logo img,
.logo2 img {
  width: clamp(30px, 3.57vw, 50px);
  /* Масштабируемый размер */
  height: clamp(30px, 3.57vw, 50px);
  /* Масштабируемый размер */
}

.label {
  color: #D2FFFD;
  font-size: clamp(16px, 1.71vw, 24px);
  /* Масштабируемый шрифт */
  transition: font-size 0.6s ease;
}

.logo:hover .label,
.logo2:hover .label {
  font-size: clamp(20px, 2.14vw, 30px);
  /* Масштабируемый шрифт */
}

/* Article */
article {
  background-image: url("assets/images/case/cases1 1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top; /* прижимаем фон к левому верхнему углу */
  min-width: 100%;
  height: 65vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* прижимаем контент к левому краю */
  justify-content: flex-start;
  padding: clamp(20px, 2.86vw, 40px);
  box-sizing: border-box;
}

.opq {
  width: clamp(300px, 90%, 591px);
  height: clamp(200px, 25vw, 350px);
  position: relative;
  display: flex;
  justify-content: center; /* контент к левому краю */
  align-items: flex-start;     /* верхний край */
}

.cases {
  width: 100%;
  display: flex;
  justify-content: center; /* прижимаем к левому краю */
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}

.incases {
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 2vw, 30px);
  justify-content: flex-end; /* контент к левому краю */
  width: 100%;
}

.img-block {
  display: flex;
  justify-content: center; /* элементы к левому краю */
  align-items: flex-end;
  gap: clamp(15px, 2vw, 45px);
  width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}
@media (min-width: 1500px) {
    .img-block img {
  width: clamp(150px, 200vw, 30%);
  object-fit: cover;
  border-radius: clamp(10px, 1.43vw, 20px);
  box-shadow: 0 4px 15px rgba(15, 50, 40, 0.2);
}
.incases{
    width: 100%;
}
}

.circle {
  display: flex;
  justify-content: center; /* прижимаем к левому краю */
  align-items: center;
  width: 100%;
  background-color: rgba(210, 255, 253, 0.7);
  height: clamp(50px, 5.86vw, 82px);
  padding: 0 clamp(20px, 5vw, 80px);
  box-sizing: border-box;
  border-radius: clamp(10px, 1vw, 15px);
}

.dots {
  display: flex;
  justify-content: center; /* прижимаем к левому краю */
  align-items: center;
  gap: clamp(15px, 2vw, 50px);
  flex: 1;
}

.dot {
  width: clamp(12px, 1.5vw, 25px);
  height: clamp(12px, 1.5vw, 25px);
  border-radius: 50%;
  background-color: #D2FFFD;
  border: 3px solid #0F5844;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: #0F5844;
}

.active-slide {
  position: absolute;
  left: 5%;
  width: 100%;
  height: 100%;
  display: flex;
 
  align-items: flex-start;

  transition: all 0.5s ease;
 

}

.slide-container {
  width: 100%; /* Tighter clamp for mid-screens */
  max-width: 100%; /* Prevent overflow */
  background-color: #D2FFFD;
  border-radius: clamp(10px, 1.43vw, 20px);
  padding: clamp(20px, 2.5vw, 30px); /* Breathing room */
  box-sizing: border-box;
  display: block; /* <<< ИЗМЕНЕНО: block вместо flex — текст течёт естественно */
  text-align: left; /* Left-align */
  font-size: clamp(14px, 1.8vw, 24px);
  color: #0F3228;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 15px rgba(15, 50, 40, 0.2);
  overflow: hidden;
  line-height: 1.5; /* Чуть больше для читаемости, без "блоков" */
  white-space: normal; /* <<< НОВОЕ: нормальный перенос строк, без жёстких разрывов */
}

.slide-container p,
  .slide-container a {
    color: #0F3228 !important;
    font-family: 'Montserrat', sans-serif !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important; /* <<< УБРАЛИ 1em — нет "блоков" */
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    line-height: inherit !important; /* Наследует от контейнера */
    word-break: break-word; /* Только для длинных слов */
    display: inline !important; /* <<< Inline для ссылок и p — текст не ломается на блоки */
  }

.slide-container a:hover {
  color: #D2FFFD;
  text-decoration: underline;
}

/* Абзацы — без лишних отступов, чтобы не было "блоков" */
.slide-container p {
  margin: 0 0 0.5em 0; /* Минимальный bottom-margin, только если несколько <p> */
  font-size: inherit; /* Наследует от контейнера */
  line-height: inherit;
}

/* ============================================= */
/* 📱 Улучшенная мобильная адаптация (до 600px) */
/* ============================================= */
@media (max-width: 600px) {

  body {
    font-size: 14px;
    overflow-x: hidden;
  }

  /* Шапка и меню */
  header {
    height: auto;
  }


  .nav-menu {
    flex-wrap: wrap; 
    justify-content: center;
    gap: 8px;
  }

  .nav-menu li {
    border-right: none;
  }

  .nav-menu li a {
    font-size: 13px;
    padding: 6px 10px;
    font-weight: 600;
    color: rgb(215, 255, 255);
  }

  /* Hero section */
  .hero-section {
    flex-direction: column;
    height: 100vw;
    padding: 0;
  }

  .hero-top {
    height: auto;
  }

  .main-bg {
        height: 100vw;
    object-fit: cover; 
    z-index: 1;
  }

  img[alt="Yoga text overlay"] {
    margin-top: 1000px;
  }

  .cta-btn {
    width: 50%;       /* ширина относительно родителя */  
    max-width: 210px;
    height: 30px;
    font-size: 14px;
    padding: 5px 10px;
    margin-bottom: 20px;
    transform: translateY(500%);
  }

  .bottom-rate {
    height: auto;
    padding: 20px 0;
  }

  .fix {
    padding: 0;
    display: flex;
    align-items: center;
  }

  /* Про мене */
  .about-me {
    flex-direction: column;
    background-image: none;
    padding: 20px 15px;
    height: auto;
  }

  .imgr {
    display: none;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .image-container {
    order: 1;
  }

  .foto2 {
    width: 90%;
    height: auto;
    top: 0;
    left: 0;
  }

  .overlay-top .text-yoga {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content to top and bottom */
    align-items: center;
    background: none;
    padding: 0;
    margin-top: 20px;
    height: 100%; /* Ensure it spans the full height of parent */
    width: 100%;
  }

  .overlay-top .text-yoga .text-yoga-l {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Split content to top and bottom */
    font-size: 14px;
    padding: 0;
    gap: 40vw;
    width: 100%;
    height: 100%; /* Ensure it takes full height to push spans apart */
  }

  .overlay-top .text-yoga .text-yoga-l .span-phone-1 {
    width: 100%;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
    background-color: #0F3228d9;
    padding: 10px; /* Add padding for better appearance */
    text-align: end;
  }

  .overlay-top .text-yoga .text-yoga-l .span-phone-2 {
    width: 100%;
    font-weight: 500;
    display: flex;
    justify-content: flex-start;
    background-color: #0F3228d9;
    padding: 10px; /* Add padding for better appearance */
    text-align: start;
  }

  .overlay-top .text-yoga .text-yoga-r {
    display: none; /* Already hidden, kept for clarity */
  }

  .text-container {
    order: 2;
    align-items: flex-start;
  }

  .text-container h1 {
    font-size: 32px;
  }

  .text-container p {
    font-size: 15px;
    line-height: 1.4;
  }

  /* Кейсы */
  article {
    height: auto;
    background-size: contain;
    padding:10px;
  }

  .img-block {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-template-rows: repeat(auto-fill, minmax(0px, auto));
  }

  .img-block img {
    width: 30%;
    height: auto;
  }

  .circle {
    gap: 10px;
    height: auto;
    padding: 10px;
  }

  /* Поезія */
  .footer-content {
    align-items: center;
    gap: 20px;
    padding: 0 10px;
  }

  .poetry-slider {
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
  }

  .footer-photos {
    width: 100%;
    height: auto;
  }

  .photo-main,
  .photo-frame {
    position: static;
    width: 100%;
    height: auto;
  }

  /* Footer */
  .author {
    gap: 10px;
    text-align: center;
  }

  .logo,
  .logo2 {
    justify-content: center;
  }

  .label {
    font-size: 14px;
  }

  img[alt="Фото поэзии 2"] {
    display: none;
  }
  img[alt="Фото поэзии 1"] {
    margin-left: 0px;
  }
}


@media (min-width: 601px) and (max-width: 779px) {
  .text-container {

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }

  .text-container h1 {
    font-size: 1.3rem;
  }

  .text-container p {
    font-size: 11px;
    font-weight: 600;
    display: block;
  }

  .foto2 {
    width: 200px;
    height: 240px;
  }

  .fix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 70%;
    padding: 30px 0;
    font-size: 14px;
  }

  .fix img {
    width: 85%;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    
    box-shadow: none !important;
    border: none !important;
  }
  .opq {
    width: 250px;
    height: 350px;
    margin-left: -4px;
    margin-top: 10px;
  }

  .rate-btn-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 15px;
  }

  .imgr {
    display: none;
  }

  .rate-btn-l { 
    left: 40px;
  }
  .rate-btn-r { 
    right: 40px; 
  }

    .img-block img {
    width: clamp(140px, 20vw, 280px);
    height: clamp(140px, 20vw, 280px);
    object-fit: cover;
    border-radius: clamp(10px, 1.43vw, 20px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-top: 60px;
  }


  #poemText {
    font-size: 12px;
  }
  
}
/* ============================= */
@media (min-width: 780px) and (max-width: 992px) {
  .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .text-container h1 {
    font-size: 2.3rem;
  }

  .text-container p {
    font-size: 0.89rem;
    font-weight: 600;
    display: block;
    max-width: 90%;
  }

  .fix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90%;
  }

  .fix img {
    width: 85%;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: none !important;
    border: none !important;
  }
  .opq {
    width: 400px;
    height: 550px;
    margin-left: -47px;
  }

  .rate-btn-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 15px;
  }

  .imgr {
    display: none;
  }

  .rate-btn-l { left: 40px; }
  .rate-btn-r { right: 40px; }

    .img-block img {
    width: clamp(140px, 20vw, 280px);
    height: clamp(140px, 20vw, 280px);
    object-fit: cover;
    border-radius: clamp(10px, 1.43vw, 20px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
}

@media (min-width: 993px) and (max-width: 1400px) {
  .fix {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    padding: 40px 10px;
  }

  .fix img {
    height: auto;
    border-radius: 20px;
    box-shadow: none !important;
  }
  .bottom-rate {
    height: 25vw;
  }
  .text-container{
    padding-right: 10px !important;
  }

  .rate-btn-l,
  .rate-btn-r {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 60, 50, 0.9);
    border: none;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rate-btn-l { left: -38px; }
  .rate-btn-r { right: -38px; }

  .text-container p {
    font-size: 1.2rem;
  }

  .text-container h1 {
    font-size: 3.5rem;
  }

  .opq {
    width: 40vw;
    height: 500px;
  }

  .img-block img {
    width: clamp(140px, 20vw, 280px);
    height: clamp(140px, 20vw, 280px);
    object-fit: cover;
    border-radius: clamp(10px, 1.43vw, 20px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
}

/* ============================= */
/* 🖥 Большие экраны (от 1400px) */
/* ============================= */
@media (min-width: 1401px) {
  .fix {
    max-width: 1100px;
  }

  .fix img {
    max-width: 800px;
  }

  .rate-btn-l { left: -60px; }
  .rate-btn-r { right: -60px; }
}


/* ============================= */
/* 🧩 Дополнительные фиксы */
/* ============================= */

section, article {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.footer-content{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-right: 0;
}

.text-container, .image-container {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

button, a {
  touch-action: manipulation;
}

/* Emergency mobile fixes: stronger rules for very small phones to avoid overlapping and huge hero */
@media (max-width: 600px) {
  /* Make header compact and ensure header background doesn't dominate */
  header { height: auto !important; padding: 0 !important; }
  .header-bg { position: relative !important; width: 100vw !important;  object-fit: cover !important; }

  /* Tame hero background and overlays */
  .hero-top { height: auto !important; padding: 0 !important; }
  .main-bg { position: relative !important;   object-fit: cover !important; }
  .overlay-top { position: absolute !important;justify-content: start !important;height: 100vw;top: 0px !important; z-index: 10 !important;   }
  .overlay-top .text-yoga {position: absolute;justify-content: space-between !important;max-width: 100% !important; width: 100% !important; height: auto !important;  margin: 0 auto !important; }

  /* Make CTA sit below overlays and be visible */
  .overlay-top .cta-btn { display: block !important; margin: 10px auto !important; width: 88% !important; }

  /* Remove heavy page background inside about section to stop visual stacking issues */
  .about-me { background-image: none !important; height: auto !important; padding-right:6px !important; }
  .about-content { position: static !important; display: flex !important; flex-direction: row !important; gap: 12px !important; }

  /* Ensure hero bottom-rate area doesn't overlap following content */
  .bottom-rate { position: relative !important; height: auto !important; padding: 8px 0 !important; }

  /* Nav tweaks */
  .nav-container { height: auto !important; padding: 8px 0 !important; }
  .nav-menu { gap: 6px !important; }
  .nav-menu li a { font-size: 13px !important; }

  /* Footer guard */
  .footer-content, .author { z-index: 9999 !important; position: relative !important; }

  /* Safety: ensure arrows are inside .fix and visible */
  .fix { position: relative !important; }
  .rate-btn-l, .rate-btn-r { display: flex !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 99999 !important; }
  .rate-btn-l { left: 10px !important; }
  .rate-btn-r { right: 10px !important; }
  .header-bg, .main-bg { z-index: 1 !important; }
  .header-bg { margin-right: 10px; }
}

/* Small-phone specific: lower nav and shrink slider controls */
@media (max-width: 600px) {
  /* Move the header nav lower so it doesn't obscure the top of the hero */
  header .nav-container { position: absolute !important; right: 1%; top: 1% !important; padding: 6px 8px !important; background: rgba(0,0,0,0.06) !important; }
  header .nav-menu li a { font-size: 13px !important; padding: 5px 8px !important; }

  /* Shrink the rate/slider buttons and centerr buttons inside .fix to be less dominant */
  .rate-btn-l, .rate-btn-r { width: 40px !important; height: 40px !important; }
  .rate-btn-l svg, .rate-btn-r svg { width: 18px !important; height: 18px !important; }

  .centerr button { width: 50px !important; height: 50px !important; padding: 8px !important; }

  /* Reduce padding inside .fix so images remain the main focus */
  .fix { padding: 8px 12px !important; }
}

/* Hamburger popup styles for small screens */
@media (max-width: 600px) {
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    background: rgba(15,88,68,0.9);
    color: #D2FFFD;
    border: none;
    border-radius: 8px;
    margin-right: 8px;
    cursor: pointer;
    z-index: 9999;
  }
  .hero-section {
    height: 100vw !important;
  }
.active-slide {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center; /* Center the slide-container inside */
  transition: all 0.5s ease;
  z-index: 5; /* Above thumbnails */
}

.slide-container {
    width: 100% !important;
    max-width: 100% !important;
    background: #d2fdffd9 !important;
    border-radius: 0 !important;
    padding: clamp(10px, 2vw, 15px) !important; /* Меньше padding на мобиле */
    display: block !important; /* Подтверждаем block */
    font-size: 14px !important;
    color: #0F3228 !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    line-height: 1.4 !important; /* Теснее на мобиле */
    white-space: normal !important; /* Плавный поток */
    border-radius: 20px !important; /* Слегка скругленные углы */
  }

  /* <<< ИЗМЕНЕНО: убираем display: block и margin для p/a — теперь естественный flow */
  .slide-container p,
  .slide-container a {
    color: #0F3228 !important;
    font-family: 'Montserrat', sans-serif !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important; /* <<< УБРАЛИ 1em — нет "блоков" */
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    line-height: inherit !important; /* Наследует от контейнера */
    word-break: break-word; /* Только для длинных слов */
    display: inline !important; /* <<< Inline для ссылок и p — текст не ломается на блоки */
  }

  /* Если несколько <p> — лёгкий отступ */
  .slide-container p + p {
    margin-top: 0.5em !important;
  }

.slide-container a:hover {
  color: #D2FFFD;
  text-decoration: underline;
}

  /* hide the regular inline menu in favor of popup */
  .nav-inner {
    display: none;
  }

  /* popup when active */
  .nav-inner.open {
    display: block;
    position: fixed;
    overflow: hidden;
    height: 200px;
    inset: 0 6% 0 6%; /* center with side margins */
    top: 12%;
    background: rgba(0,0,0,0.85);
    color: #D2FFFD;
    padding: 18px;
    border-radius: 12px;
    z-index: 10000;
    overflow-y: auto;
  }

  .nav-inner.open .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  .nav-inner.open .nav-menu li a {
    display: block;
    padding: 12px 16px;
    font-size: 18px;
    background: transparent;
    color: #D2FFFD;
    border-radius: 8px;
    text-align: left;
  }

  /* make sure the hamburger shows in header layout */
  header .hamburger { position: relative; z-index: 10001; }
}

/* FINAL: enforce header nav appearance (highest priority overrides) */
header .nav-container {
  max-width: none !important;
  width: auto !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 6px !important;
}

header .nav-container .nav-menu {
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

header .nav-container .nav-menu li {
  margin: 0 6px !important;
  border-right: none !important;
}

header .nav-container .nav-menu li a {
  font-size: clamp(13px, 2vw, 24px) !important;
  padding: 6px 8px !important;
  white-space: nowrap !important; /* keep labels on single line when possible */
  display: inline-block !important;
}

@media (max-width: 480px) {
  header .nav-container .nav-menu {
    gap: 10px !important;
  }
  header .nav-container .nav-menu li a {
    font-size: 13px !important;
    padding: 5px 6px !important;
  }
}

/* Enhanced media query for max-width: 430px with stricter text overflow prevention */
@media (max-width: 431px) {
  header .nav-container {
    position: absolute !important;
    right: 1%;
    top: 1% !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }

  .about-content {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw; /* Enforce viewport constraint */
    overflow: hidden; /* Clip any overflow */
    position: relative; /* Contain absolute children */
  }

  .about-me {
    width: 100vw; /* Full viewport width to match wrapper */
    max-width: 100vw;
    padding: 0; /* Remove any padding that could push content */
    overflow: hidden; /* Prevent section-level overflow */
  }

  .image-container {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    height: 220px;
    overflow: visible; /* Allow image, but container is constrained */
  }

  .foto2 {
    position: absolute;
    width: 150%;;
    max-width: none;
    left: clamp(-15vw, -10vw, -20vw); /* Adaptive: less protrusion on smaller screens to avoid overflow */
    top: 0;
    border-radius: 8px;
    object-fit: cover;
    z-index: 2;
  }

  .text-container {
    width: 100%;
    max-width: 100%;
    min-width: 0; /* Allow flex children to shrink below content size */
    gap: 15px;
    text-align: right;
    align-items: flex-end;
    padding-left: 0;
    padding-bottom: 30px;
    padding-right: 10px;
    order: 2;
    overflow: hidden; /* Clip text overflow */
    overflow-wrap: break-word; /* Break long words */
    word-break: break-word; /* Aggressive word breaking for very long words */
    hyphens: auto; /* Enable hyphenation */
    box-sizing: border-box;
    white-space: normal; /* Ensure normal wrapping */
    flex-shrink: 1; /* Allow shrinking in flex context */
  }

  .text-container h1 {
    font-size: clamp(18px, 5vw, 24px); /* Responsive: smaller on tiny screens */
    margin-bottom: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.1; /* Tighter line height to reduce vertical space */
    white-space: normal;
  }

  .text-container p {
    font-size: clamp(12px, 3.5vw, 14px); /* Responsive: even smaller if needed */
    line-height: 1.2;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
  }
  .slide-text{
    font-size: clamp(12px, 3.5vw, 14px) !important; /* Responsive: even smaller if needed */
  }
}

/* Fixed syntax: added 'and' after 'screen' for proper media query */
@media screen and (max-width: 400px) {
  header .nav-container {
    position: absolute !important;
    right: 8% !important;
    top: 1% !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }
}

/* Fixed syntax: added 'and' after 'screen' for proper media query */
@media screen and (max-width: 390px) {
  header .nav-container {
    position: absolute !important;
    right: 10% !important;
    top: 1% !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }
}

/* Extra safety for very small screens (e.g., < 360px) - stack vertically if still issues */
/* Fixed: changed justify-content to center for actual centering, and ensured grid/flex compatibility */
@media (max-width: 330px) {
  .about-content {
    grid-template-columns: 1fr;
    display: flex !important; /* Force flex for direction override */
    flex-direction: column; /* Force vertical stack */
    align-items: center; /* Center everything */
  }
  .bottom-rate{
      height: 20vh;
  }

  .image-container {
    justify-content: center; /* Actually center image (fixed comment mismatch) */
    height: auto;
    min-height: 200px;
  }

  .foto2 {
    left: 0; /* Reset protrusion to avoid horizontal issues */
    width: 200px; /* Smaller image on tiny screens */
    max-width: 90vw;
  }

  .text-container {
    width: 100%;
    align-items: center; /* Center text on tiny screens */
    text-align: center; /* Switch to center alignment for better fit */
    padding: 0 10px;
    order: 2;
  }

  .text-container h1 {
    font-size: clamp(16px, 4.5vw, 20px);
  }

  .text-container p {
    font-size: clamp(11px, 3vw, 13px);
  }
}

/* Global overflow prevention for the entire page on small screens (moved inside main query for efficiency) */
@media (max-width: 430px) {
  html,
  body {
    overflow-x: hidden; /* Prevent horizontal scroll globally */
  }

  .page-wrapper {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

@media  (min-width: 1439px) {
  .hero-section {
    height: 100vh;
  }
  .hero-top {
    height: 100vh;
  }
  .text-container{
      padding: 0 30% 0 0;
  }
  .text-yoga-l, .text-yoga-r{
    padding: 30px 90px !important;
  }
  .foto2{
    right: 4% !important;
    left:auto !important;
  }
  .imgr{
    right: 8% !important;
    left:auto !important;
    position: relative;
  }
  .image-container{
    height: 100%;
    align-items: end;
    justify-content: flex-end;
    
  }
  .image{
    width: auto;
  }
  .incases{
        padding-top: 10%;
  }
}