html {
    scroll-behavior: smooth;
}
*{
	margin:0
}
body{
	width: 100%;
	margin-top: 0;
	background-color: #FFEECA;
}
.butt_and_contact{
	display: flex;
	position: relative;
	background-color:#00000073;
	height: 100px;
	color: #00000073;
}


.social_icons {
	position: absolute; /* Абсолютное позиционирование внутри футера */
	bottom: 20px; /* Отступ от нижнего края футера */
	right: 5%; /* Отступ от правого края футера */
	display: flex;
	flex-direction: row; /* Размещаем иконки вертикально */
	gap: 10px; /* Расстояние между иконками */
}
.container {
	width: 100%;
	margin-right: 45%;;
    position: absolute;
    display: inline-block;
    cursor: pointer;
}

.image {
	display: none;
    width: 50px;
    height: 50px;
    transition: 0.3s;
}
/* Контейнер для кнопок (изначально спрятан под фото) */
.button-box {
	z-index: 10;
    position: absolute;
    width: 200px;
    left: 50%;
    top:70px;
    transform: translateX(-50%) translateY(20px);
    display: none;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
}

/* Анимация при появлении */
.active .button-box {
    opacity: 1;
    bottom: -100px;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}



/* Стили для кнопок */
.btn {
    display: block;
    padding: 10px;
   
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s;
}

.btn:hover {
    background-color: #caa864;
}

.soc{
	left:50px;
	bottom: 40px;
	width: 50px; /* Ширина иконки */
	height: 50px; /* Высота иконки */
	border-radius: 10px; /* Скруглённые углы, если нужно */
	transition: transform 0.3s; /* Эффект при наведении */
}
.soc:hover {
	transform: scale(1.1); /* Увеличение при наведении */
  }
.scroll-button2 {
    position: absolute; /* Позволяет использовать top, left, right, bottom */
    top: 45px; /* Расстояние от верхнего края окна */
    right: 40%; /* Расстояние от левого края окна */
    width: 100px; /* Ширина кнопки */
    height: 50px; /* Высота кнопки */
    text-align: center; /* Выравнивание текста по горизонтали */
    color: rgb(0, 0, 0); /* Цвет текста */
    text-decoration: none; /* Убираем подчёркивание */
    font-size: 16px; /* Размер текста */
    transition: transform 0.3s
  }
  .scroll-button {
    position: absolute; /* Позволяет использовать top, left, right, bottom */
    top: 35px; /* Расстояние от верхнего края окна */
    left: 40%; /* Расстояние от левого края окна */
    width: 100px; /* Ширина кнопки */
    height: 50px; /* Высота кнопки */
    text-align: center; /* Выравнивание текста по горизонтали */
    color: rgb(0, 0, 0); /* Цвет текста */
    text-decoration: none; /* Убираем подчёркивание */
    font-size: 16px; /* Размер текста */
    transition: transform 0.3s
  }


/* Эффект при наведении */
.scroll-button:hover {
	transform: scale(1.1); /* Увеличение размера кнопки на 10% */

}
.scroll-button2:hover {
	transform: scale(1.1); /* Увеличение размера кнопки на 10% */

}
.my_info{
	height: 100%;
	width: 100%;
	margin-top: 0px;
	padding-bottom: 30px;
	text-align: center;
	background: linear-gradient(240deg, #FFEECA, #FFDED1,#FFCBA2,#FFB4A2, #FFEECA  );
}
.nym{
	padding-bottom:50px;
	text-align: center;
	font-size: 1.135rem;
}
.start_text{
	padding-top: 20px;
	font-size: 1.15rem;
}
.start2{
	padding-top: 20px;
	margin-top: 20px;
}

.start{

	font-size: 1.5rem;
}
.my_person{
	margin-top: 30px;
	font-size: 1.75rem;
}
.my_photo{
	padding-top: 50px;
	width: 215px;
	height: 256px;
}
.trybka{
	position: absolute;
	margin-left: 100px;
	margin-top: 33px;
	width: 40px;
	height: 40px;
}
.footer {
	position: relative; /* Футер остаётся в общем потоке страницы */
	background-color: #968b75;; /* Цвет фона футера */
	padding: 20px;
	height: 75px; /* Пример высоты футера */
  }
  
  .social-icons {
	position: absolute; /* Абсолютное позиционирование внутри футера */
	bottom: 20px; /* Отступ от нижнего края футера */
	right: 47%; /* Отступ от правого края футера */
	display: flex;
	flex-direction: row; /* Размещаем иконки вертикально */
	gap: 10px; /* Расстояние между иконками */
  }
  
  .icon {
	width: 50px; /* Ширина иконки */
	height: 50px; /* Высота иконки */
	border-radius: 10px; /* Скруглённые углы, если нужно */
	transition: transform 0.3s; /* Эффект при наведении */
  }
  
  .icon:hover {
	transform: scale(1.1); /* Увеличение при наведении */
  }
  
.number{
	position: absolute; /* Абсолютное позиционирование внутри футера */
	top: 45px; /* Отступ от нижнего края футера */
	left: 175px; /* Отступ от правого края футера */
	font-size:  16px;
	display: flex;
	color: #ffffff;
}
/* Оформление секции с консультациями */
.consultations {
	position: relative;
	width: 90%; /* Ширина блока — 80% от ширины страницы */
	margin: 50px; /* Центрирование блока на странице */
	padding: 5px; /* Внутренние отступы (пространство внутри блока) */	
}

.consultations2 {
	position: relative;
	width: 90%; /* Ширина блока — 80% от ширины страницы */
	margin: 50px; /* Центрирование блока на странице */
	padding: 5px; /* Внутренние отступы (пространство внутри блока) */	
}


.natal-chart {
    position: absolute;
    top: 10px; /* Расстояние сверху, настройте по своему усмотрению */
    right: 10px; /* Расстояние справа, настройте по своему усмотрению */
    width: 300px;
    height: 500px;
   
}
.nymerologia{
    position: absolute;
    top: 180px; /* Расстояние сверху, настройте по своему усмотрению */
    right: 10px; /* Расстояние справа, настройте по своему усмотрению */
    width: 300px;
    height: 370px;
    
}
/* Стиль заголовка секции */
.section-title {
	margin-top: 30px;
	text-align: center; /* Текст заголовка выровнен по центру */
	margin-bottom: 30px; /* Отступ снизу 30px */
	font-size: 2.25rem; /* Размер текста заголовка (2 единицы rem) */
}
.natalcard{
	rotate: 30;
}
/* Оформление заголовка карточки */
.consultation-title {
	font-size: 1.375rem; /* Размер текста заголовка — 1.5 единицы rem */
	margin-bottom: 10px; /* Отступ снизу для расстояния до следующего элемента */
	text-transform: uppercase; /* Заглавные буквы для заголовка */
	justify-content: center;
	align-items: center;
	text-align:center ;
}
/* Оформление одной карточки консультации */
.consultation-card {
	background-color: #ffeeca00;
	
	
	
	transition: all 0.3s ease-in-out; /* Плавный переход для любых изменений */
}
/* Контейнер для контента карточки */
.consultation-content {
	position: relative; /* Этот элемент будет относительным, чтобы с ним было удобно работать */
}
/* Оформление подзаголовка */
.consultation-subtitle {
	font-size: 1rem; /* Размер текста чуть меньше основного заголовка */
	margin-bottom: 10px; /* Отступ снизу для пространства до текста */
	font-size: 26px;
	transition: transform 0.3s;
}
.consultation-subtitle:hover {
	transform: scale(1.01); /* Увеличение размера кнопки на 10% */
}
/* Скрытый блок с информацией */
.A {
	max-height: 0; /* По умолчанию текст невидим, потому что высота блока — 0 */
	overflow: hidden; /* Лишний текст скрыт */
	transition: max-height 0.5s ease-in-out; /* Плавное открытие блока за 0.5 секунды */
	line-height: 1.6; /* Пространство между строками текста */
	text-align: justify; /* Выравнивание текста по ширине */
	padding-left: 75px;
	padding-right: 75px;
	font-size: 20px;
	padding-bottom: 5px;
	width: 700px;
}
/* Оформление кнопки "подробнее/скрыть" */
.B {
	color: #020202; /* Цвет текста кнопки — серый */
	text-decoration: underline; /* Подчёркнутый текст */
	cursor: pointer; /* Курсор становится "рукой", когда наводишь на текст */
	display: inline-block; /* Кнопка выглядит как обычный текст */
	margin-top: 15px; /* Отступ сверху, чтобы кнопка не прилипала к тексту */
	font-weight: 600; /* Немного более жирный шрифт */
	transition: color 0.3s; /* Плавное изменение цвета текста */
	display: inline; /* Делаем его в одну линию с текстом */
	text-decoration: none; /* Убираем подчеркивание */
	padding-bottom: 15px;
}




/*1 card*/
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-info {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}
/* Если чекбокс включён, то текст раскрывается */
#toggle-info:checked ~ .consultation-details {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
}

/* Когда наводим на кнопку, она темнеет */
.toggle-label:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}


/*A card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoA:checked ~ .consultation-detailsA {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelA:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}

/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoA {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*B card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoB:checked ~ .consultation-detailsB {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelB:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoB {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*C card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoC:checked ~ .consultation-detailsC {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelC:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoC {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*D card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoD:checked ~ .consultation-detailsD {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelD:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoD {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*E card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoE:checked ~ .consultation-detailsE {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelE:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoE {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*F card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoF:checked ~ .consultation-detailsF {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelF:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoF {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*G card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoG:checked ~ .consultation-detailsG {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelG:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoG {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/*H card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoH:checked ~ .consultation-detailsH {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelH:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoH {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*I card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoI:checked ~ .consultation-detailsI {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelI:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoI {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*J card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoJ:checked ~ .consultation-detailsJ {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelJ:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoJ {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*K card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoK:checked ~ .consultation-detailsK {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeK:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoK {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*L card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoL:checked ~ .consultation-detailsL {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeL:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoL {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*M card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoM:checked ~ .consultation-detailsM {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeM:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoM {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*N card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoN:checked ~ .consultation-detailsN {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeN:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoN {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*O card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoO:checked ~ .consultation-detailsO {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeO:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoO {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*P card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoP:checked ~ .consultation-detailsP {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeP:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoP {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*Q card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoQ:checked ~ .consultation-detailsQ {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labeQ:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoQ {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}

/*R card*/
/* Если чекбокс включён, то текст раскрывается */
#toggle-infoR:checked ~ .consultation-detailsR {
	max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
}
/* Когда наводим на кнопку, она темнеет */
.toggle-labelR:hover {
	color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
/* Чекбокс (который мы используем для открытия и закрытия текста) */
#toggle-infoR {
	display: none; /* Скрываем сам чекбокс, чтобы его не видели */
}


/* ноуты*/
@media (max-width: 1400px) {
	.nymerologia{
		position: absolute;
		top: 180px; /* Расстояние сверху, настройте по своему усмотрению */
		right: 10px; /* Расстояние справа, настройте по своему усмотрению */
		width: 300px;
		height: 370px;
		
	}
	
	
	/* Стиль заголовка секции */
	.section-title {
		text-align: center; /* Текст заголовка выровнен по центру */
		margin-bottom: 30px; /* Отступ снизу 30px */
		font-size: 1.875rem; /* Размер текста заголовка (2 единицы rem) */
	}
	.natalcard{
		rotate: 30;
	}
	/* Оформление заголовка карточки */
	.consultation-title {
		font-size: 1.375rem; /* Размер текста заголовка — 1.5 единицы rem */
		margin-bottom: 10px; /* Отступ снизу для расстояния до следующего элемента */
		text-transform: uppercase; /* Заглавные буквы для заголовка */
		justify-content: center;
		align-items: center;
		text-align:center ;
	}
	/* Оформление одной карточки консультации */
	.consultation-card {
		background-color: #ffeeca00;
		
		
		
		transition: all 0.3s ease-in-out; /* Плавный переход для любых изменений */
	}
	/* Контейнер для контента карточки */
	.consultation-content {
		position: relative; /* Этот элемент будет относительным, чтобы с ним было удобно работать */
	}
	/* Оформление подзаголовка */
	.consultation-subtitle {
		font-size: 1rem; /* Размер текста чуть меньше основного заголовка */
		margin-bottom: 10px; /* Отступ снизу для пространства до текста */
		font-size: 26px;
	}
	/* Скрытый блок с информацией */
	.A {
		max-height: 0; /* По умолчанию текст невидим, потому что высота блока — 0 */
		overflow: hidden; /* Лишний текст скрыт */
		transition: max-height 0.5s ease-in-out; /* Плавное открытие блока за 0.5 секунды */
		line-height: 1.6; /* Пространство между строками текста */
		text-align: justify; /* Выравнивание текста по ширине */
		padding-left: 75px;
		padding-right: 75px;
		font-size: 20px;
		padding-bottom: 5px;
		width:550px;
	}
	/* Оформление кнопки "подробнее/скрыть" */
	.B {
		color: #7c7c7c; /* Цвет текста кнопки — серый */
		text-decoration: underline; /* Подчёркнутый текст */
		cursor: pointer; /* Курсор становится "рукой", когда наводишь на текст */
		display: inline-block; /* Кнопка выглядит как обычный текст */
		margin-top: 15px; /* Отступ сверху, чтобы кнопка не прилипала к тексту */
		font-weight: 600; /* Немного более жирный шрифт */
		transition: color 0.3s; /* Плавное изменение цвета текста */
		display: inline; /* Делаем его в одну линию с текстом */
		text-decoration: none; /* Убираем подчеркивание */
		padding-bottom: 15px;
	}




	/*1 card*/
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-info {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-info:checked ~ .consultation-details {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-label:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}


	/*A card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoA:checked ~ .consultation-detailsA {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelA:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoA {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*B card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoB:checked ~ .consultation-detailsB {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelB:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoB {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*C card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoC:checked ~ .consultation-detailsC {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelC:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoC {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*D card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoD:checked ~ .consultation-detailsD {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelD:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoD {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*E card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoE:checked ~ .consultation-detailsE {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelE:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoE {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*F card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoF:checked ~ .consultation-detailsF {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelF:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoF {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*G card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoG:checked ~ .consultation-detailsG {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelG:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoG {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*H card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoH:checked ~ .consultation-detailsH {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelH:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoH {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*I card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoI:checked ~ .consultation-detailsI {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelI:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoI {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*J card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoJ:checked ~ .consultation-detailsJ {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelJ:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoJ {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*K card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoK:checked ~ .consultation-detailsK {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelK:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoK {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*L card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoL:checked ~ .consultation-detailsL {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelL:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoL {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*M card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoM:checked ~ .consultation-detailsM {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelM:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoM {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*N card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoN:checked ~ .consultation-detailsN {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelN:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoN {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*O card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoO:checked ~ .consultation-detailsO {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelO:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoO {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*P card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoP:checked ~ .consultation-detailsP {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelP:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoP {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*Q card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoQ:checked ~ .consultation-detailsQ {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelQ:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoQ {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*R card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoR:checked ~ .consultation-detailsR {
		max-height: 1000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelR:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoR {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}
}

/* телефы 1к*/
@media (max-width: 1000px) {
	
	.container {
		height:300px;
		width: 100%;
		position:absolute;
		display: inline-block;
		cursor: pointer;
	}
	
	.image {
		z-index: 10;
		display: flex;
		position: absolute;
		margin-top: 44px;
		right: 47%;
		width: 25px;
		height: 25px;
		transition: 0.3s;
	}
	/* Контейнер для кнопок (изначально спрятан под фото) */
	.button-box {
		display:flex;
		
		position: absolute;
		width: 200px;
		left: 50%;
		top:70px;
		transform: translateX(-50%) translateY(20px);
		flex-direction: column;
		gap: 10px;
		opacity: 0;
		
		pointer-events: none;
		transition: opacity 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
	}
	
	/* Анимация при появлении */
	.active .button-box {
		opacity: 1;
		bottom: -90px;
		transform: translateX(-50%) translateY(0);
		pointer-events: auto;
	}
	
	
	
	/* Стили для кнопок */
	.btn {
		font-size: 16px;
		display: block;
		padding: 0px;
		background-color: #ddb662;
		color: rgb(0, 0, 0);
		text-decoration: none;
		border-radius: 5px;
		text-align: center;
		transition: 0.3s;
		height: 25px;
	}
	
	
	
	.soc{
		left:50px;
		bottom: 50px;
		width: 30px; /* Ширина иконки */
		height: 30px; /* Высота иконки */
		border-radius: 10px; /* Скруглённые углы, если нужно */
		transition: transform 0.3s; /* Эффект при наведении */
		margin-bottom: 4px;
	}
	.soc:hover {
		transform: scale(1.1); /* Увеличение при наведении */
	}
	.trybka{
	    display: none;
		position: absolute;
		margin-left: 5px;
		margin-top: 48px;
		width: 20px;
		height: 20px;
	}
	.number{
		position: absolute; /* Абсолютное позиционирование внутри футера */
		bottom: 30px; /* Отступ от нижнего края футера */
		left: 10px; /* Отступ от правого края футера */
		font-size: 17px;
		display: flex;
		font-weight: 800;
		margin-top: 1px;
		color: #ffffff;
	}
	.scroll-button2 {
		display: none;
		position: absolute; /* Позволяет использовать top, left, right, bottom */
		top: 45px; /* Расстояние от верхнего края окна */
		right: 20%; /* Расстояние от левого края окна */
		width: 100px; /* Ширина кнопки */
		height: 50px; /* Высота кнопки */
		text-align: center; /* Выравнивание текста по горизонтали */
		color: rgb(0, 0, 0); /* Цвет текста */
		text-decoration: none; /* Убираем подчёркивание */
		font-size: 16px; /* Размер текста */
		transition: transform 0.3s
	  }
	  .scroll-button {
		display: none;
		position: absolute; /* Позволяет использовать top, left, right, bottom */
		top: 45px; /* Расстояние от верхнего края окна */
		left: 30%; /* Расстояние от левого края окна */
		width: 100px; /* Ширина кнопки */
		height: 50px; /* Высота кнопки */
		text-align: center; /* Выравнивание текста по горизонтали */
		color: rgb(0, 0, 0); /* Цвет текста */
		text-decoration: none; /* Убираем подчёркивание */
		font-size: 16px; /* Размер текста */
		transition: transform 0.3s
	  }

	.consultations {
		position: relative;
		width: 95%; /* Ширина блока — 80% от ширины страницы */
		margin: 5px; /* Центрирование блока на странице */
		padding: 5px; /* Внутренние отступы (пространство внутри блока) */	
	}
	
	.consultations2 {
		position: relative;
		width: 95%; /* Ширина блока — 80% от ширины страницы */
		margin: 5px; /* Центрирование блока на странице */
		padding: 5px; /* Внутренние отступы (пространство внутри блока) */	
	}
	
	/* Стиль заголовка секции */
	.section-title {
		text-align: center; /* Текст заголовка выровнен по центру */
		margin-bottom: 30px; /* Отступ снизу 30px */
		font-size: 1.875rem; /* Размер текста заголовка (2 единицы rem) */
	}
	/* Оформление заголовка карточки */
	.consultation-title {
		font-size: 1.375rem; /* Размер текста заголовка — 1.5 единицы rem */
		margin-bottom: 10px; /* Отступ снизу для расстояния до следующего элемента */
		text-transform: uppercase; /* Заглавные буквы для заголовка */
		justify-content: center;
		align-items: center;
		text-align:center ;
	}


	.natal-chart {
		display: none;
		position: absolute;
		top: 5px; /* Расстояние сверху, настройте по своему усмотрению */
		right: 10px; /* Расстояние справа, настройте по своему усмотрению */
		width: 3px;
		height: 5px;
	   
	}
	.nymerologia{
		display: none;
		position: absolute;
		top: 1px; /* Расстояние сверху, настройте по своему усмотрению */
		right: 10px; /* Расстояние справа, настройте по своему усмотрению */
		width: 3px;
		height: 4px;
		
	}
	/* Оформление одной карточки консультации */
	.consultation-card {
		background-color: #ffeeca00;
		
		
		
		transition: all 0.3s ease-in-out; /* Плавный переход для любых изменений */
	}
	/* Контейнер для контента карточки */
	.consultation-content {
		position: relative; /* Этот элемент будет относительным, чтобы с ним было удобно работать */
	}
	/* Оформление подзаголовка */
	.consultation-subtitle {
		font-size: 1rem; /* Размер текста чуть меньше основного заголовка */
		margin-bottom: 10px; /* Отступ снизу для пространства до текста */
		font-size: 26px;
	}
	.social-icons {
		position: absolute; /* Абсолютное позиционирование внутри футера */
		bottom: 20px; /* Отступ от нижнего края футера */
		right: 38%; /* Отступ от правого края футера */
		display: flex;
		flex-direction: row; /* Размещаем иконки вертикально */
		gap: 10px; /* Расстояние между иконками */
	  }
	/* Скрытый блок с информацией */
	.A {
		max-height: 0; /* По умолчанию текст невидим, потому что высота блока — 0 */
		overflow: hidden; /* Лишний текст скрыт */
		transition: max-height 0.5s ease-in-out; /* Плавное открытие блока за 0.5 секунды */
		line-height: 1.6; /* Пространство между строками текста */
		text-align: left; /* Выравнивание текста по ширине */
		padding-left: 5px;
		padding-right: 5px;
		font-size: 20px;
		padding-bottom: 5px;
		width:300px;
	}
	/* Оформление кнопки "подробнее/скрыть" */
	.B {
		color: #7c7c7c; /* Цвет текста кнопки — серый */
		text-decoration: underline; /* Подчёркнутый текст */
		cursor: pointer; /* Курсор становится "рукой", когда наводишь на текст */
		display: inline-block; /* Кнопка выглядит как обычный текст */
		margin-top: 15px; /* Отступ сверху, чтобы кнопка не прилипала к тексту */
		font-weight: 600; /* Немного более жирный шрифт */
		transition: color 0.3s; /* Плавное изменение цвета текста */
		display: inline; /* Делаем его в одну линию с текстом */
		text-decoration: none; /* Убираем подчеркивание */
		padding-bottom: 15px;
	}




	/*1 card*/
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-info {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-info:checked ~ .consultation-details {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-label:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}


	/*A card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoA:checked ~ .consultation-detailsA {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelA:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoA {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*B card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoB:checked ~ .consultation-detailsB {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 500px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelB:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoB {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*C card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoC:checked ~ .consultation-detailsC {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelC:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoC {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*D card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoD:checked ~ .consultation-detailsD {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelD:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoD {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*E card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoE:checked ~ .consultation-detailsE {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelE:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoE {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*F card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoF:checked ~ .consultation-detailsF {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelF:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoF {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*G card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoG:checked ~ .consultation-detailsG {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelG:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoG {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}


	/*H card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoH:checked ~ .consultation-detailsH {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelH:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoH {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*I card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoI:checked ~ .consultation-detailsI {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelI:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoI {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*J card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoJ:checked ~ .consultation-detailsJ {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelJ:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoJ {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*K card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoK:checked ~ .consultation-detailsK {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelK:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoK {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*L card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoL:checked ~ .consultation-detailsL {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelL:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoL {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*M card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoM:checked ~ .consultation-detailsM {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelM:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoM {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*N card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoN:checked ~ .consultation-detailsN {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelN:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoN {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*O card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoO:checked ~ .consultation-detailsO {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelO:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoO {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*P card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoP:checked ~ .consultation-detailsP {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelP:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoP {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*Q card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoQ:checked ~ .consultation-detailsQ {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelQ:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoQ {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}

	/*R card*/
	/* Если чекбокс включён, то текст раскрывается */
	#toggle-infoR:checked ~ .consultation-detailsR {
		max-height: 2000px; /* Когда мы ставим галочку, текст разворачивается до 225px */
	}
	/* Когда наводим на кнопку, она темнеет */
	.toggle-labelR:hover {
		color: #55422c; /* Меняем цвет текста на чёрный при наведении */
}
	/* Чекбокс (который мы используем для открытия и закрытия текста) */
	#toggle-infoR {
		display: none; /* Скрываем сам чекбокс, чтобы его не видели */
	}
}