@charset "UTF-8";

@font-face {
	font-family: 'KB ChopinScript';
	src: url('../fonts/kb_chopinscript/kb_chopinscript.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/kb_chopinscript/kb_chopinscript.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../fonts/kb_chopinscript/kb_chopinscript.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/kb_chopinscript/kb_chopinscript.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../fonts/kb_chopinscript/kb_chopinscript.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/kb_chopinscript/kb_chopinscript.svg#kb_chopinscript') format('svg'); /* Chrome < 4, Legacy iOS */
}

@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-Light.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-Light.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-Regular.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-Regular.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-Semibold.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-Semibold.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-Semibold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-Bold.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-Bold.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-Black.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-Black.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-Black.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-Black.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-LightIt.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-LightIt.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-LightIt.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-LightIt.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-It.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-It.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-It.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-It.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-SemiboldIt.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-SemiboldIt.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-SemiboldIt.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-SemiboldIt.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-BoldIt.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-BoldIt.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-BoldIt.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-BoldIt.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/Myriad-pro/MyriadPro-BlackIt.eot');
  src: url('../fonts/Myriad-pro/MyriadPro-BlackIt.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Myriad-pro/MyriadPro-BlackIt.woff') format('woff'),
  url('../fonts/Myriad-pro/MyriadPro-BlackIt.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
html {
  font-size: 16px;
}
body,
html {
  min-height: 100%;
}
body {
  font-family: "Myriad Pro", sans;
  background-color:  #7b7989; /* #eae7df; */  /* #7b7989; */
}
img {
  max-width: 100%;
}
a {
	color: #736f84;
}
a:hover {
	color: #645e86;
}
.basis-100 {
  flex-basis: 100%;
}
/*typography*/
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 16px;
}
.f-18 {
  font-size: 18px;
}
.f-20 {
  font-size: 20px;
}
.f-22 {
  font-size: 22px;
}
.f-24 {
  font-size: 24px;
}
.f-26 {
  font-size: 26px;
}
.f-28 {
  font-size: 28px;
}
.f-30 {
  font-size: 30px;
}
.f-40 {
  font-size: 40px;
}
.f-46 {
  font-size: 46px;
}
.f-72 {
  font-size: 72px;
}
.f-82 {
  font-size: 82px;
}
.f-86 {
  font-size: 86px;
}
.f-112 {
  font-size: 112px;
}
/* Розмір для мобільних екранів за замовчуванням (менше 768px) */
.f-responsive-heading {
    font-size: 46px;
}
/* Розмір для планшетів та комп'ютерів (від 768px і вище) */
@media (min-width: 768px) {
    .f-responsive-heading {
        font-size: 86px;
    }
}
.fw-semibold {
  font-weight: 500;
}
.text-orange {
  color: #ffaa00;
}
.text-red {
	color: red;
}
.text-dark-blue {
	color: #126e79;
}
.text-light-grey {
	color: #e6e6ef;
}
.text-color-fde59f {
	color: #fde59f;
}
.text-color-645e86 {
	color: #645e86;
}
.text-color-656d74 {
	color: #656d74;
}
.ff-ChopinScript {
  font-family: "KB ChopinScript", sans-serif;
}
/* На компьютерах делаем роскошный глубокий отступ */
@media screen and (min-width: 768px) {
    .ps-epigraph {
        padding-left: 180px !important; /* Настройте этот пиксельный шаг под свой вкус */
    }
}

/* На телефонах оставляем отступ небольшим, чтобы текст не превратился в узкую вертикальную ленту */
@media screen and (max-width: 767px) {
    .ps-epigraph {
        padding-left: 20px !important;
    }
}

.wrapper{
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  /*  text-shadow: 3px 3px 5px #404040;  добавил */
}
.header {
  padding: 100px 50px 0 50px;
  background-image: url("../images/header_1.jpg");
  background-size: auto 100%;   /* background-size: cover; */
  background-position: right center;
  background-repeat: no-repeat; /* 👈 Запрещает повторение картинки */
  background-color: #a2a2aa;
  color: #fff5d7;
}
/* Для экранов меньше 768px (мобильные и планшеты) */
@media (max-width: 767px) {
  .header {
    padding: 60px 20px 0 20px; /* Уменьшаем гигантские отступы хедера */
    background-size: auto 100%; /* Картинка подстроится под новую высоту и не сожмется до микроскопических размеров */
    background-position: right bottom; /* На мобильном часто лучше прижимать к правому нижнему углу */
  }
}
.header-2 {
  padding: 100px 50px 0 50px;
  background-size: cover; 
  background-color: #a2a2aa;
  color: #fff5d7;
}
@media (max-width: 767px) {
  .header-2 {
    padding: 60px 20px 0 20px; /* Уменьшаем гигантские отступы хедера */
    background-size: auto 100%; /* Картинка подстроится под новую высоту и не сожмется до микроскопических размеров */
    background-position: right bottom; /* На мобильном часто лучше прижимать к правому нижнему углу */
  }
}
.fs-50 {
  font-size: 32px;
  line-height: 34px;
}

/* Усиленный селектор: ищет класс .meditation внутри нашей секции */
.story .meditation {
    font-family: 'Lora', serif;   /* Playfair Display */
}

/* Применяем правила к абзацам ТОЛЬКО внутри блока .meditation */
.story .meditation p {
    font-family: 'Lora', serif;    /* Playfair Display */
    font-size: 22px;       /* Для этой строчки можно сделать размер чуть крупнее и заметнее */
    line-height: 1.6;      
 	font-weight: 400;  /* только для Lora */
    margin-bottom: 1rem; 
    color: #646171;        
}

.logo {
  height: 116px;  /* было 166px */
  width: 116px;
}
/*backgrounds*/
.blue-gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a1cde5+0,a1cde5+100&1+0,1+65,0+100 */
  background: -moz-linear-gradient(left,  rgba(161,205,229,1) 0%, rgba(161,205,229,1) 65%, rgba(161,205,229,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(161,205,229,1) 0%,rgba(161,205,229,1) 65%,rgba(161,205,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(161,205,229,1) 0%,rgba(161,205,229,1) 65%,rgba(161,205,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1cde5', endColorstr='#00a1cde5',GradientType=1 ); /* IE6-9 */
}
.cyan-gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a1cde5+0,a1cde5+100&1+0,1+65,0+100 */
  background: -moz-linear-gradient(left,  rgba(21,112,119,1) 0%, rgba(21,112,119,1) 65%, rgba(21,112,119,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(21,112,119,1) 0%,rgba(21,112,119,1) 65%,rgba(21,112,119,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(21,112,119,1) 0%,rgba(21,112,119,1) 65%,rgba(21,112,119,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1cde5', endColorstr='#00a1cde5',GradientType=1 ); /* IE6-9 */
}
.green-gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a1cde5+0,a1cde5+100&1+0,1+65,0+100 */
  background: -moz-linear-gradient(left,  rgba(175,217,92,1) 0%, rgba(175,217,92,1) 65%, rgba(175,217,92,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(175,217,92,1) 0%,rgba(175,217,92,1) 65%,rgba(175,217,92,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(175,217,92,1) 0%,rgba(175,217,92,1) 65%,rgba(175,217,92,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afd95c', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.blue-bg {
  background-color: #cdeaf9;
}
.green-bg {
  background-color: #daefc9;
}
.cyan-bg {
  background-color: #ddffff;
}
.grey-bg {
	background-color: #a2a2aa;
}
/*blocks and elements*/
.square-box {
  aspect-ratio: 1 / 1; /* 👈 Делает блок идеально квадратным при любой ширине экрана */
  width: 95%;         /* Занимает всю ширину колонки */
  overflow: hidden;    /* Прячет всё, что выходит за границы рамки */
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 👈 Картинка заполняет квадрат пропорционально, не сжимаясь */
  object-position: center;
}

.description {
  font-size: 24px; /* font-size: 22px; */
}
.feedback {
  font-size: 22px;
  line-height: 44px;
  margin-bottom: 44px;
}
.feedback-sign {
  font-size: 28px;
  color: #56718F;
  font-style: oblique;
  line-height: 44px;
  text-align: left;
}
.disclaimer {
  font-size: 19px;
  margin: 0 10% 0 10%;
}
.disclaimer h3 {
  text-align: center;
  border-top: 1px solid #000000;
  padding-top: 16px;
  font-size: 23px;
  font-weight: 400;
}
.disclaimer-ref {
	text-align: center;
}
.btn.square {
  border-radius: 0;
}
.btn-orange {
  background-color: #ffaa00;
  color: #fff;
  transition: all 0.25s ease-in-out;
}
.btn-green {
  background-color: #afd95c; /* #ffaa00; */
  color: #fff;
  transition: all 0.25s ease-in-out;
}
.btn-blue {
  background-color: #3d8d9e; 
  color: #fff;
  transition: all 0.25s ease-in-out;
}
.rot90 {
  display: inline-block;
  transform: rotate(90deg);
}
.btn-orange:hover {
  background-color: #df9600;
  transition: all 0.25s ease-in-out;
}
.btn-blue:hover {
  background-color: #1d7b7b;
  transition: all 0.25s ease-in-out;
}
.btn-orange.position-fixed {
  right:50px;
  bottom: 50px;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
.btn-blue.position-fixed {
  right:50px;
  bottom: 50px;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
.btn-orange.position-fixed.show {
  transition: all 0.25s ease-in-out;
  opacity: 1;
}
.btn-blue.position-fixed.show {
  transition: all 0.25s ease-in-out;
  opacity: 1;
}
.btn-736f84 {
  background-color: #736f84;
  color: #fff;
  transition: all 0.25s ease-in-out;
  z-index: 3;
}
.btn-736f84:hover {
  background-color: #645e86;
  color: #9e98b6;
  transition: all 0.25s ease-in-out;
}
.btn-736f84.position-fixed {
  right:50px;
  bottom: 50px;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
.btn-736f84.position-fixed.show {
  transition: all 0.25s ease-in-out;
  opacity: 1;
}
.lesson-card {
  border-top: 3px solid #fff2d2;
}

.short-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height:3px;
  border-bottom: 3px solid #fff2d2;
}
.icon-link {
  height: 60px;
  width: 60px;
}
.icon-link:hover {
  opacity: 0.8;
  transition: all 0.25s ease-in-out;
}

.credits {
    position: relative; 
	width: 100%;       
    height: 160px;     
	margin-top: -160px;
}
@media (min-width: 768px) {
	.credits {
		position: relative; 
		width: 100%;       /* Блок розтягується на всю ширину екрана */
		height: 320px;     /* Фіксована висота контейнера */
		margin-top: -320px;
	}
}

.footer-img-320 {
    position: relative; 
	width: 100%;       /* Блок розтягується на всю ширину екрана */
    height: 160px;     /* Фіксована висота контейнера */
    overflow: hidden;  /* Ховає все, що виходить за межі 320px */
}

.footer-img-320 img {
    width: 100%;       /* Картинка займає всю ширину */
    height: 100%;      /* Картинка займає всю висоту (320px) */
    object-fit: cover; /* Головна магія: масштабує та обрізає краї, зберігаючи пропорції */
    object-position: center; /* Центрує картинку (обрізає порівну зліва і справа) */
}
@media (min-width: 768px) {
    .footer-img-320 {
	  position: relative; 
	  height: 320px;
	  width: auto;
    }
}

/* 1. Главный контент сайта */
.site-content {
  position: relative;
  z-index: 2;
  background-color: #eae7df;
  margin-bottom: 160px; 
}

/* 2. Футер */
.footer-effect {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1; 
  height: 160px;
  
  /* ХАК ДЛЯ МОБИЛЬНЫХ: Запрещаем футеру реагировать на лишние скроллы 
     и фиксируем его жестко внизу видимого экрана */
  will-change: transform;
}

/* 3. Адаптивность для планшетов и ПК (от 768px) */
@media (min-width: 768px) {
  .site-content {
    margin-bottom: 318px; 
  }
  
  .footer-effect {
    height: 330px; 
  }
}

.footer-credits {
    position: absolute;
    top: 15px;        /* Відступ від верхнього краю картинки */
    right: 20px;      /* Відступ від правого краю картинки */
    font-size: 11px;  /* Розмір шрифту 14px */
    color: #ffffff;   /* Білий колір тексту */
    opacity: 0.7;     /* Легка прозорість, щоб напис виглядав акуратно і не муляв око */
    font-family: sans-serif; /* Або ваш основний шрифт сайту */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Тінь під літерами, щоб текст читався навіть на світлих ділянках фото */
    z-index: 10;      /* Гарантує, що текст буде поверх самої картинки */
}
@media (min-width: 768px) {
    .footer-credits {
	  font-size: 14px;
    }
}