body {
    margin: 0;
    padding: 0;
    font-family: Montserrat, Arial, sans-serif;
    line-height: 1.6;
    background-color: #fbf1f2;
    padding-top: 104px; /* Отстояние, за да не се припокрива със статичния хедър */
}

/* Добавяне на шрифта SavoyeLET заврънтулки за началната страница */
@font-face {
  font-family: 'SavoyeLET';
  src: url('fonts/SavoyeLET.ttf') format('truetype');
  font-weight: bold;
  /*font-style: normal;*/
}

/* Добавяне на шрифта Montserrat за текста */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}

.textSavoyeLET {
  font-family: 'SavoyeLET';
  font-size: clamp(1.4rem, 2.6vw, 2.2rem)!important; /* Адаптивен размер на шрифта за заглавието */
  line-height: 0.9; /* Увеличено разстояние между редовете */
  color: #0F2432;
  font-weight: bold;
  text-align: left;
  margin-left: 5%; /* Заглавието започва от 1/4 от екрана */
}



.textMontserrat {
  font-family: 'Montserrat';
  font-size: clamp(1.1rem, 1.4vw, 1.9rem)!important; /* Адаптивен размер на шрифта за заглавието */
  color: #0F2432;
  line-height: 1.6rem; /* Увеличено разстояние между редовете */
   margin-left: 5%; /* Заглавието започва от 1/4 от екрана */
}

/* ----------- TEXT and Pictures ---------- */
.containerTextFirstPage{
	 margin: 0 auto;
  padding-top: 1rem;
  padding-bottom:1rem;
  max-width: 85%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
	
}
.containerTextFirstPage h2 {
  font-size: clamp(3rem, 2vw, 1rem)!important;
  margin-left: 20%;
  margin-top: 0;
  margin-bottom: 0;
  
   text-align: center;
   
  line-height: 1.1;
}
.containerTextFirstPage p {
  font-size: clamp(0.9rem, 1.9vw, 1.1rem);
  color: #0F2432;
  /*line-height: 1 !important; /* Задаване на минимално отстояние между редовете */
  text-align: justify;
  text-indent: 5%;
  margin-top: 0;
  margin-bottom: 0;
}


.containerText {
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom:1rem;
  max-width: 85%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.containerText img {
  float: left;
  margin-right: 15px;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  height: auto;
}

/* За хоризонтални изображения – ако ширината е значително по-голяма от височината */
.containerText img.landscape {
  width: 40%;
}

/* За вертикални изображения – ако височината е значително по-голяма от ширината */
.containerText img.portrait {
  width: 25%;
}



.containerTextFirstPage h2.textSavoyeLET  {
  text-align: left!important;
}
.containerText h2 {
  font-size: clamp(2rem, 2vw, 1rem)!important;
  margin-left: 20%;
  margin-top: 4%;
  margin-bottom: 0;
  padding-top: 30px;
   text-align: center;
   
  line-height: 1.1;
}
.containerText h3 {
  font-size: clamp(1.5rem, 1.5vw, 0.5rem)!important; /* Адаптивен размер на шрифта за заглавието */
  /*margin-left: 20%;*/
  margin-top: 30px;
  margin-bottom: 10px;
  padding: 20px;
  text-align: center;
  line-height: 1.4;
}

.containerText p {
  font-size:clamp(1.1rem, 1.4vw, 1.9rem);
  color: #0F2432;
  /*line-height: 1 !important; /* Задаване на минимално отстояние между редовете */
  text-align: justify;
  text-indent: 5%;
  margin-top: 0;
  margin-bottom: 0;
}
.containerText  ul li {
	text-align: justify;
	font-size: clamp(1.1rem, 1.4vw, 1.9rem);
	margin-left: 8%; /* Отстъп за по-добра видимост */
}

header {
  position: fixed; /* Фиксира хедъра към горната част на екрана */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* Гарантира, че хедърът е над другото съдържание */
  background: linear-gradient(135deg, #ca85bb, #e2b4d8);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Добавя сянка за визуално разделяне */
  height:104px;/* !!!!!!!!!!!!!!!!!!!!! */
}

header .top-bar {
	margin-top: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

header img.logo {
  height: 100px;
  padding: 5px;
  margin: 0px;
}

.banner {
	
  width: 100%;
  height: 100%; /* Височина на полето */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Предотвратява препълване */
  background-color: #f0f0f0; /* Задаване на фон за празните области */
}

.banner-image {
	
  width: 100%;
  height: 100%; /* Запълва цялото поле */
  object-fit: cover; /* Запълва и изрязва изображението, ако е необходимо */
}

/* --------------- НАВИГАЦИОННО МЕНЮ -------------- */
nav {
  position: relative;
  width: 100%;
  background: none;
  z-index: 1000;
  display: flex; /* Flexbox за центриране */
  justify-content: center; /* Центрира съдържанието по хоризонтала */
  align-items: center; /* Центрира съдържанието по вертикала */
  height: 80px; /* Добавяме височина, за да центрираме вертикално */
}

/* Стил за самите елементи в менюто */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul li {
  margin: 0 15px;
  position: relative;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  display: block;
  text-align: center;
}




/* Подменю */
nav ul li.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(135deg, #ca85bb, #e2b4d8);
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

nav ul li.dropdown:hover .dropdown-menu {
  display: block;
}

nav ul li.dropdown .dropdown-menu li {
  margin: 0;
}

nav ul li.dropdown .dropdown-menu li a {
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}

nav ul li.dropdown .dropdown-menu li a:hover {
  background-color: #a56798;
}

nav ul li.active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #ca85bb;
}
/* Активен и hover ефект !!!!!!!!!!!!!!!!!!!!!!!!!*/
nav ul li a:hover{
	
  background-color: #a66298;
  color: white;
}

nav ul li.active a {
	
  background-color: #a66298;
  color: white;
}



/* Подменюто, когато не е активно */
nav ul li .dropdown-menu li a {
  background-color: transparent; /* Без тъмен фон по подразбиране */
  color: black;
}

nav ul li .dropdown-menu li.active a {
  background-color: #a66298; /* Тъмен фон за активния елемент в подменюто */
  color: white;
}

/*  -------------------------------  NAVIGATION MENU ZA MOBILNI USTROISTVA  ------------------------------ */
@media (max-width: 768px) {
.containerText {
  margin-top: 50px;
  
}
.containerText h2 {
  font-size: 14px!important; /* Адаптивен размер на шрифта за заглавието na index и aboutMe */
 /* margin-left: 20%;*/
  text-align: center; 
  line-height: 1.1; 
}

.containerText h3 { /* TEKSTA V ZAGLAVIQTA h3 - MOBILNA VERSIQ  */
  font-size: 12px!important; /* Адаптивен размер на шрифта за заглавието na index и aboutMe */
  text-align: center; 
  line-height: 1.1;
  margin-top:10px!important;
  padding:0px;
}

.containerText p {/* При мобилна версия да е ляво центриран текста */
  text-align: left!important;
  font-size: 10px!important;
  line-height: 1.2;
}

.containerText  ul li {
	text-align: left;
	font-size: 10px;
	line-height: 1.2;
}

.containerText img {/*Мобилната версия да не изрязва снимките.*/
   
    margin-right: 15px;
    width: 100%;  /* Снимките заемат цялата ширина на контейнера */
    object-fit: contain;  /* Изображенията се показват без изрязване */
  }
  
  
header {
  position: fixed; /* Фиксира хедъра към горната част на екрана  ако не искаме static за да се движи надолу*/
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* Гарантира, че хедърът е над другото съдържание */
  background: linear-gradient(135deg, #ca85bb, #e2b4d8);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Добавя сянка за визуално разделяне */
  height:54px;/* !!!!!!!!!!!!!!!!!!!!! */
  
}

header img.logo {
  height: 50px;
  margin: 0px;
}


.banner-image {
	margin-top:54px;
 }
	body {
    margin: 0;
    padding: 0;
    font-family: Montserrat, Arial, sans-serif;
    line-height: 1.6;
    background-color: #fbf1f2;
    
}
	 

    /* Основно меню */
	
	
/* За мобилни устройства */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}


    nav ul {
		margin-top: 40%;
		margin-left: 30%;
		
		font-size: 9px;
        flex-direction: column;
		display: none; /* Скриване на менюто по подразбиране */
        width: 35%;
		
    }

    nav ul.show {
        display: flex; /* Покажете менюто, когато е активирано */
		  background-color: #ca85bb; /* Лилав фон за мобилно меню */
    }
	nav ul li { /* мобилна версия */
  margin: 0px;
  position: relative;
}

nav ul li a { /* мобилна версия */
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 5px;
  display: block;
  text-align: center;
}

    .hamburger {
        display: flex; /* Покажете хамбургер бутона */
		position: absolute;
    top: 0px; /* разстояние от горната част */
    right: 20px; /* разстояние от дясната част */
    z-index: 1000; /* за да бъде над останалите елементи */
	margin-top:20px;
    }

   

    /* Падащото меню при клик върху Услуги */
    .dropdown-menu {
        display: none;
        position: right;
        /*top: 1%; /* Разположено веднага под менюто "Услуги" */
       /* left: 1%; /* Позиционирано от дясно на "Услуги" */
        background-color: #a56798;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateX(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
		padding: 0;
    }

    .dropdown.show .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .dropdown-menu li {
        padding: 0px !important;
    }

    .dropdown-menu li a {
        color: white;
        text-decoration: none;
    }

    .dropdown-menu li a:hover {
        background-color: #ca85bb;
    }
}


/* -------------------- CSS box със снимка за видовете консултации в кръгчета  ------------- */

.container {
  display: flex; /* Използваме Flexbox за хоризонтално подреждане */
  justify-content: flex-start; /* Разпределяме елементите отляво */
  gap: 1px; /* Разстояние между контейнерите */
  width: 100%; /* Контейнерът заема 100% от ширината на родителския елемент */
  overflow-x: hidden; /* Скриваме хоризонталния слайдбар */
  overflow-y: hidden; /* Скрива вертикалния скролер */
 /* max-width: 70%; /* Намалява ширината на контейнера за картата */
  margin-right: 15px; /* Разстояние между картата и текста */
}

.box {
  flex: 0 0 calc(16% - 10px); /* Всяка кутия да заема 16% от ширината на контейнера */
  height: 300px; /* Фиксирана височина за кутията */
  display: flex;
  flex-direction: column; /* Поставяме съдържанието в колона */
  justify-content: center; /* Центрираме съдържанието по вертикала */
  align-items: center; /* Центрираме съдържанието по хоризонтала */
  background: none; /* Без фон */
  box-shadow: none; /* Без сянка */
  box-sizing: border-box; /* Включва padding и border в размерите на елемента */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Плавен преход за уголемяване и затъмняване */
}

.box:hover {
  transform: scale(1.25); /* Уголемяване с 5% */
}

.container .box:hover ~ .box {
  opacity: 0.7; /* Останалите контейнери да станат бледи */
  transform: scale(0.9); /* Намаляване с 5% */
}

.container .box:hover {
  opacity: 1; /* Активният контейнер да остане видим */
}

.box .image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  margin-top: 30px;
}

.box .text {
  font-size: 1.1rem;
  color: #333;
  text-align: center;
  line-height: 1.3;
}

.box-link {
  display: block;
  text-decoration: none;
  width: 100%;
}

/* ------------------------------  MOBILNA VERSIQ -   CSS box със снимка за видовете консултации в кръгчета  -----------------------------*/
@media (max-width: 768px) {
  /* Основни настройки за контейнера, за да подредиш снимките вертикално */
  .container {
    flex-direction: column; /* Подреждаме контейнерите една под друга */
    align-items: center; /* Центрираме елементите по хоризонтала */
    gap: 20px; /* Разстояние между елементите */
    margin-right: 0; /* Няма нужда от разстояние отдясно */
  }

  /* Настройки за всяка "box" */
  .box {
    flex: 0 0 100%; /* Всяка кутия да заема 100% от ширината на контейнера */
    height: auto; /* Височината се адаптира според съдържанието */
    box-sizing: border-box;
    margin-bottom: 0px; /* Разстояние между картинките */
  }

  /* Ако има снимки вътре в .box */
  .box .image {
    width: 200px; /* Ширината на снимката ще бъде по-малка */
    height: 200px; /* Размерите на снимката са фиксирани */
    border-radius: 50%; /* Кръгла форма */
    margin-bottom: 5px; /* Разстояние между снимката и текста */
  }
}


/* --------------------------   CSS box със снимка за дипломната в портретни (нагоре) снимки  -------------------------- */




/* Стилове за контейнера */
.containerPortretDiplom {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Намаляване на разстоянието за повече снимки на ред */
    width: 90%; /* По-широк контейнер, за да побере повече изображения */
    margin-left: 5%;
    margin-top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    /*flex-wrap: wrap; /* Автоматично прехвърляне на следващ ред, ако няма място */
}

/* Стилове за boxPortretDiplom */
.boxPortretDiplom {
    width: 18%; /* 5 изображения на ред, като се отчита gap */
    aspect-ratio: 4 / 5; /* Портретно съотношение */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	text-align:center;
    background: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.boxPortretDiplom.zoomed {
    width: 50%;
    z-index: 10;
}

/* Стилове за изображението */

.boxPortretDiplom .image {
    width: 70%; /* Изображението заема цялото пространство на контейнера */
    height: auto;
    object-fit: cover;
    border-radius: 5%;
    transition: transform 0.3s ease, border-radius 0.3s ease;
    cursor: pointer;
    user-select: none; /* Забранява селектиране на изображението */
}

.boxPortretDiplom .image.zoomed {
    transform: scale(1.4); /* Увеличение */
    border-radius: 5%; /* Намалено заобляне */
}

/* -------------------- Уголемяване на избраната картинка при клик -------------------- */
.image-expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-expanded img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.image-expanded.show {
    opacity: 1;
}

.image-expanded .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}






/* ----------- MOBILNA za diplomite ----------- */
/* Основни стилове за десктоп остават същите */
/* Стилове за мобилни устройства (до 768px ширина) */
@media (max-width: 768px) {
    .containerPortretDiplom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px; /* Разстояние между кутиите */
        width: 100%;
        margin-left: 0;
    }

    .boxPortretDiplom {
        flex-basis: calc(33.33% - 10px); /* Точно три на ред, отчитайки gap */
        flex-grow: 1;
        aspect-ratio: 4 / 5;
        overflow: visible; /* Позволява текстът да се вижда изцяло */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        transition: transform 0.3s ease, opacity 0.3s ease;
        position: relative;
        font-size: 12px; /* По-малък текст за мобилни */
    }

    .boxPortretDiplom .image {
        width: 90%; /* По-малки изображения */
        height: auto;
        object-fit: cover;
        border-radius: 5%;
        transition: transform 0.3s ease, border-radius 0.3s ease;
        cursor: pointer;
        user-select: none;
        margin-bottom: 5px; /* Малко разстояние под изображението за текста */
    }

    .boxPortretDiplom.zoomed {
        width: 90%; /* При увеличение заема почти целия екран */
        z-index: 10;
    }

    .boxPortretDiplom .text {
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.2; /* По-добра четливост на текста */
    }

    .image-expanded img {
        max-width: 90%;
        max-height: 90%;
    }

    .image-expanded .close {
        font-size: 1.5rem;
    }
}



/* ---------------------FOOTER ------------------ */
footer {
	margin-top: 35px;
  background: #333;
  color: white;
  padding: 1rem 0;
  text-align: center;
}

/* --------------------- GOOGLE MAPS ----------- */
.map-container {
  position: left;
  width: 50%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.map-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.contact-info {
	 word-wrap: break-word; /* За да предотвратиш излизането на текста извън контейнера */
  word-break: break-word;
  display: flex;               /* Използваме Flexbox */
  flex-direction: column;      /* Вертикално подреждаме съдържанието */
  justify-content: center;     /* Центрираме по вертикала */
  align-items: left;         /* Центрираме по хоризонтала */
  flex-grow: 1;                /* Ще заема остатъчното пространство */
  padding-left: 20px;          /* Разстояние между картата и текста */
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-left: 15px;           /* Добавяме малко отстояние за визуално разстояние */

}
.center-text {
    text-align: center !important; /* Центрира текста */
	font-size:1.5em;
}
.contact-info p {
  margin: 5px 0; 
  font-style: 'Montserrat';
  font-size: 1em;
  color: #555;
  text-align: left; /* За да не центрираме текста */
  white-space: nowrap; /* Прекратява новите редове */
}

.contact-info p strong {
  display: inline; /* Да бъде на същия ред с текста */
}



.contact-info p span {
  display: inline; /* Ако имаш нужда да добавиш други тагове, те също да са на същия ред */
    padding-left: 1.7em; /* Отстъп за всички следващи редове */
}


@media (max-width: 768px) {
  .contact-info {
    width: 100%; /* За мобилни устройства, да заема 100% от ширината */
    margin-left: 0; /* Премахваме разстоянието за мобилни устройства */
	font-size: 12px;
  }
  
  .contact-info p{
    width: 100%; /* За мобилни устройства, да заема 100% от ширината */
    margin:1%; /* Премахваме разстоянието за мобилни устройства */
	font-size: 0.6rem!important;
	line-height: 0.6rem; /* Увеличено разстояние между редовете */
	text-indent: 1.7em; /* Отстъп за първия ред */
  }
  

  
   .map-container {
  position: left;
  width: 100%!important;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}

.containerText .map-container {
  position: relative;
  width: 50%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.containerText .map-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.containerText #map {
  position: left;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.containerText .textMontserrat {
  color: #333;
}

/* -------------------------------- ZA KONTAKTNATA FORMA ------------------- */


form {
    display: flex;
	padding:20px;
	margin: 30px;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 95%; /*ширина на контейнера */
     background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group-row {
    display: flex;
    gap: 10px;
}

.form-group-row .form-group {
    flex: 1;
}

form input{
	width: calc(100% - 40px); /* Оставя 20px отстояние от всяка страна */
    padding: 8px;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
	
}
form textarea {
	 width: calc(100% - 40px); /* Оставя 20px отстояние от всяка страна */
	 height: 150px; /* Тук можеш да регулираш височината на полето */
    padding: 8px;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

form button {
    padding: 8px;
    font-size: 1rem;
    background-color: #a56798;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
	 max-width: 95%; /*ширина на контейнера */
}

form button:hover {
    background-color: #ca85bb;
}


@media (max-width: 768px) {
	form {
    display: flex;
	padding-right:5%;
	margin-right: 5%;
    flex-direction: column;
    gap: 15px;
    width: 95%;
    max-width: 85%; /*ширина на контейнера */
     background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
	
	form button {
    margin: 5%;
}
	
}

 /***************************** KARTA S CENI ****************************/
 
 .pricing-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.priceCard {
    flex: 0 0 calc(33.33% - 20px);
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 370px; /* Зададена височина за картите */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2%; /* Отстояние отгоре */
	
}

.priceCard-image {
    flex: 0 0 62%; /* Изображението заема 50% от височината на картата */
    width: 100%;
    height: 60%;
    object-fit: cover; /* Адаптира изображението, запълвайки контейнера */
    border-bottom: 1px solid #ddd; /* Разделителна линия */
}

.priceCard-content {
    flex: 1;
    height: 120px; /* Конкретна височина за контейнера с текст */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрира текста вертикално */
    align-items: center; /* Центрира текста хоризонтално */
}
.priceCard-text {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрира текста хоризонтално */
    padding: 10px; /* Опционално, за да добавите отстояние около текста */
    height: auto; /* Автоматична височина в зависимост от съдържанието */
    margin: 0; /* Премахване на всякакви допълнителни отстояния, ако е необходимо */
}

.priceCard h3 {
    margin: 5px; /* Премахва допълнителното отстояние */
    color: #333;
    font-size: 1.3rem;
    display: flex; /* Използва се flexbox */
    justify-content: flex-start; /* Текущото ви изискване да бъде запазено */
    align-items: center; /* Центрира текста по вертикала */
    margin-bottom: 8px;
    height: 100%; /* Запълва целия контейнер по височина */
    align-self: center; /* Центрира заглавието по вертикала в контейнера */
}

.priceCard-text p{
    display: flex;
    flex-direction: column;
    text-align: center; /* Центрира текста хоризонтално */
    padding: 10px; /* Опционално, за да добавите отстояние около текста */
    height: auto; /* Автоматична височина в зависимост от съдържанието */
    margin: 0; /* Премахване на всякакви допълнителни отстояния, ако е необходимо */
}

.priceCard p {
    margin: 5px;
    color: #555;
	align-items: center; /* Центрира текста хоризонтално */
	
}

.priceCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


@media (max-width: 768px) {
    .pricing-cards-container {
		margin-top:50px;
        display: flex;
        flex-wrap: wrap; /* Позволява на картите да се нареждат в редове */
        justify-content: center; /* Центрира картите хоризонтално */
        gap: 10px; /* Разстояние между картите */
		
    }

    .priceCard {
        flex: 0 0 40%; /* Картите ще заемат 45% от ширината на контейнера */
        margin-top: 2%; /* Отстояние отгоре */
		
        height: auto; /* Височината ще се адаптира автоматично */
    }

    .priceCard-image {
        height: auto; /* Изображенията ще се адаптират към съдържанието */
        width: 100%; /* Изображенията ще се разтягат по ширина */
		
        object-fit: cover; /* Поддържа пропорциите на изображението */
    }

    .priceCard-content {
		margin-top: 5%; /* Отстояние отгоре */
        height: auto; /* Съдържанието ще се адаптира автоматично */
		
    }
	.priceCard p {
	font-size:0.7rem;
   /* margin: 5px;*/
    color: #555;
	align-items: center; /* Центрира текста хоризонтално */
}

.priceCard-text h3 {
	font-size:0.8rem;
    margin: 5px;
	text-align: center
}
}


/* ----------------- ЧЕСТО ЗАДАВАНИ ВЪПРОСИ FAQ ------------------ */
 h4 {
  font-family: 'Montserrat';
  font-size: clamp(1.5rem, 1.5vw, 0.5rem); /* Адаптивен размер на шрифта за заглавието */
  color: #333;
  line-height: 0px; /* Увеличено разстояние между редовете */
   margin-left: 7%; /* Заглавието започва от 1/4 от екрана */
 }
 details {
            margin: 20px 0;
			padding:0px;
            border: 3px solid #EAC0DF;
            border-radius: 10px;
            overflow: hidden; /* За да изглежда гладко преходът между въпроса и отговора */
        }
        summary {
            background-color: #EAC0DF;
            padding: 2px 5px; /* Минимален padding за най-малка височина */
		    font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            list-style: none;
            border-radius: 10px 10px 0 0; /* Заобляне само отгоре */
        }
        summary::after {
            content: "▼"; /* Начална стрелка надолу */
            font-size: 16px;
            margin-left: 10px;
            transition: transform 0.3s ease;
        }
        details[open] summary::after {
            content: "▲"; /* Променя се на стрелка нагоре */
        }
        .faq-answer {
            padding: 10px;
            background-color: #FEF8F9;
        }
		
		@media (max-width: 768px) {
			
			details {
              border: 1px solid #EAC0DF;
            }
			
		}