* {
	margin: 0;
	padding: 0;
}

*, *::before, *::after {
    box-sizing: inherit;
}

@font-face {
  font-family: "Arial";
  font-style: normal;
  font-weight: normal;

}

html {
  box-sizing: border-box;
  display: block;
 }

body {
	font-family: "Santello", sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.4;
	color: #000000;
    background-color: #d9e3ed;
	background-position: 50% 50%;
	background-size: cover;
}
/* Навигация */
.nav {
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #83bfdd;
	z-index: 10;
}

.nav-list {
	display: flex;
	margin-right: 2rem;
	list-style: none;
	align-items: center;
}


.nav-list a {
  display: block;
  padding: 0 0 0 2rem;
  font-size: 1.6rem;
  color: white;
  }

 a {
 	text-decoration: none;
   
 }
/* Конец навигации */

h1 {
    font-size: 3.5rem;
}

h1, h2, h3, h4 {
	text-align: center;
    padding: 1.4rem;   
    position: relative;        
}

/* Начало секций */
section {
    display: block;
    margin-bottom: 2em;
}

/* Секция обо мне */
.about {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	padding-top: 4em;
}

.two {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    margin-right: 1.2rem;
}


.image img {
	width: 13em;
	height: 15em;
	object-fit: cover;

	margin-right: 1.3em;
	margin-left: 1em;
}

.image2 img {
  width: 90%; /* Занимает 90% ширины устройства */
  max-width: 100%; /* Не превышает реальный размер изображения */
  height: auto; /* Сохраняет пропорции */
  margin: 0 auto; /* Центрирование (опционально) */
  display: block; /* Убирает лишние отступы в инлайновых элементах */
}

.about_p {
    padding:0 2em 0 2em;
}
 
.btn {
    background: #83bfdd;
    font-weight: bold;
    border: none;
    border-radius: 1em;
    font-size: 2.2rem;
    padding: .7em 2em .7em 2em;
    cursor: pointer;
    color: white;
}

.btn:hover {
    color: #f0fff0;
}

.list p {
	margin-bottom: 1em;
    padding:0 2em 0 2em;
}

.list p:before {
     content: '✔ ';
     color: #009e79;
}


/* Секция  моя работа*/
.feedback, .events, .contacts {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.work_p {
    padding:0 2em 0 2em;
    text-align: center;
}

/* Секция услуги */
.uslugi {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.list1 li {
    list-style-type: '✔ ';
    color: #009e79;
    padding:0 2em 0 2em;
}

.list1 li span {
    color: #444;
}

.list_items li, .last_items li {
    padding:0 2em 0 2em;
}

.spoiler_content_1, .spoiler_content_2, .spoiler_content_3, .spoiler_content_4 {
	opacity: 1;
    transition: opacity 0.4s ease-in-out;
    
}

.spoiler_content_1 li, .spoiler_content_2 li, .spoiler_content_3 li, .spoiler_content_4 li {
    width: 90%;
    margin-left: 11vw;
}

.spoiler_content_1 p, .spoiler_content_2 p, .spoiler_content_3 p, .spoiler_content_4 p{
    text-align: left;
}

.read-more-state-1, .read-more-state-2, .read-more-state-3, .read-more-state-4 {
    display: none;
}

.text_hide_1, .text_hide_2, .text_hide_3, .text_hide_4{
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: transform 1s linear;
    visibility: hidden;
}

.read-more-state-1:checked~.spoiler_content_1 .text_hide_1, .read-more-state-2:checked~.spoiler_content_2 .text_hide_2, .read-more-state-3:checked~.spoiler_content_3 .text_hide_3, .read-more-state-4:checked~.spoiler_content_4 .text_hide_4 {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
    visibility: visible;
}

.read-more-state-1:checked~.spoiler_content_1 .text_hide_1 .button-wrapper, .read-more-state-2:checked~.spoiler_content_2 .text_hide_2 .button-wrapper, .read-more-state-3:checked~.spoiler_content_3 .text_hide_3 .button-wrapper, .read-more-state-4:checked~.spoiler_content_4 .text_hide_4 .button-wrapper  {
    display: flex;
    justify-content: center;
    padding-top: 1.5em;
    margin-bottom: 1.5em;
}

.read-more-state-1:checked~.spoiler_content_1 p,.read-more-state-2:checked~.spoiler_content_2 p, .read-more-state-3:checked~.spoiler_content_3 p, .read-more-state-4:checked~.spoiler_content_4 p {
    margin-top: 2vh;
    margin-bottom: 2vh;
    text-align: center;
    font-weight: bold;
}


.read-more-state-1~.read-more-trigger-1:before {
    content: '> Базовая консультация';
    font-weight: bold;
    font-size: 1.8em;
}

.read-more-state-2~.read-more-trigger-2:before {
    content: '> Программа по восстановлению организма';
    font-weight: bold;
    font-size: 1.8em;
}

.read-more-state-3~.read-more-trigger-3:before {
    content: '> Сопровождение';
    font-weight: bold;
    font-size: 1.8em;
}

.read-more-state-4~.read-more-trigger-4:before {
    content: '> Диагностическая консультация';
    font-weight: bold;
    font-size: 1.8em;
}

.read-more-trigger-1, .read-more-trigger-2, .read-more-trigger-3, .read-more-trigger-4 {
    margin-top: 2em;
	  width: 100%;
	  text-align: center;
    cursor: pointer;
    display: inline-block;
    font-size: .9em;
    background: #83bfdd;
    border-radius: 1.4em;
    padding-left: 22px;
    padding-right: 22px;
    color: white;
}

.read-more-trigger-1:hover, .read-more-trigger-2:hover, .read-more-trigger-3:hover, .read-more-trigger-4:hover{
    background: #83bfdd;
    border-radius: 1.4em;
    text-indent: 30px;
}

.read-more-trigger-1:hover::before{
    transform: scale(1,1);
    text-indent: 0;
    content: '>Базовая консультация';
}

.read-more-trigger-2:hover::before{
    transform: scale(1,1);
    text-indent: 0;
    content: '>Программа по восстановлению организма';
}

.read-more-trigger-3:hover::before{
    transform: scale(1,1);
    text-indent: 0;
    content: '>Сопровождение';
}

.read-more-trigger-4:hover::before{
    transform: scale(1,1);
    text-indent: 0;
    content: '>Диагностическая консультация';
}

.list_items {
    padding-bottom: 2em;
}

.last_items {
    padding-bottom: 2em;
}

/* Секция события */
.events_p {
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    padding:0 2em 0 2em;
}

form {
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #DAD2CA;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mw {
text-align: center;
}

.mw label{
 padding-left: 2em;
}

input[type="number"] {
  
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: .4em;
  font-size: 1rem;
}

.calc_l {
   margin-top: 1rem;
}

.button-wrapper{
  display: none;    
}

.btn2 {
  background: #E6E6FA;
  font-weight: bold;
  border: none;
  border-radius: .4em;
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  margin-top: 1rem;
}

.btn2:hover {
    color: white;
}

.calc_p {
  margin-top: 1.2rem;
  font-size: 1.2rem;
}

/* Блок отзывы */
.slider {
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.slider1-fade, .slider2-fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Секция контакты */
.social {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.social a {
	color: black;
	margin-top: 1.4rem;
    font-size: 1.6em;
    letter-spacing: 5px;
}

.social a:hover {
  color: #009e79;
}


@media screen and (max-width: 768px) {
  form {
    flex-direction: column;
  }
  
  input[type="number"] {
    width: calc(90% - 0.5rem);
    margin-right: 1rem;
  }
}

@media (max-width: 65em){
html {
    font-size: 70%;
}
}

@media (max-width: 50em){
html {
    font-size: 62%;
    text-align: justify;
}
.image img {
	width: 24em;
	height: 30em;
}

.two {
	 flex-direction: column;
    }

.about_p {
    margin-bottom: 2em;
    margin-top: 1.4em;
    font-size: 140%;
    text-align: center;
}

.work_p, .list, .list1, .list_items, .last_items, .events_p {
    font-size: 140%;
}


h4 {
    font-size: 140%;
    text-decoration: underline;
}

.list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 20px;
	padding-left: 10px;	
}

.nav-list {
	font-size: 62%;
}

}

@media (max-width: 30em){
html {
    font-size: 48%;
}