main{
  font-size: 1.3vw;
  text-align: justify;
  font-family: "Philosopher", sans-serif;
  font-weight: 700;
  font-style: normal;
}
h4{
  margin-top: -2vh;
  font-size: 1.8vw;
}
.pics{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin:0px auto 7vh;
 
}
.names{
  height: 10vh;
  text-align: center;
  background-color: lightgray;
  cursor: pointer;
}

.popup {
display: none;
position: fixed;
width: 87%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
padding: 7vh 1vw ;
background-color: #fff;
background-image: url("images/border1.jpg");
background-position:top;
background-size:cover;
z-index: 1000;
/* max-height: 100vh;  Ограничение за височината на прозореца */
overflow: hidden; /* Скриване на излизащото съдържание */
}
.popup-content {
font-weight: 500;
margin: 11vh 7vw ;
max-height: 100%; /* Ограничение за височината на съдържанието */
overflow-y: auto; /* Вертикален скролбар, ако съдържанието е дълго */
}

.close {
position: absolute;
bottom:5%;
right: 47%;
font-size: 1.5vw;
width: 6vw;
height: 13vh;
cursor: pointer;
background-image: url("images/close.jpg");
background-position: center;
background-size: cover;
text-align: center;
padding-top: 4vh;
}
.card{
cursor: pointer;
}
a.previous img, a.next img {
  width: 80%; /* Увеличаване на ширината за по-добра видимост */
  max-width: 20vw; /* Може да коригирате стойността според нуждите */}

@media (max-width: 768px) {
  h1{
    font-size: 3rem;
  }
  h4{
    font-size: 1.5rem;
  }
  .popup {
      width: 95%;
      padding: 2vh 2vw;
      max-height: 95vh; /* Малко повече пространство за мобилни устройства */

  }
  .popup-content {
      margin: 3vh 2vw 11vh;
      font-size: 1rem;
    height: 77vh;
    max-height: 97vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* За плавен скрол на iOS */
    scrollbar-width: thin; /* За Firefox */
  }
  .close {
      font-size: 1rem;
      width: 12vw;
      height: 9vh;
      padding-top: 2.5vh;
  }
  a.previous img {
    position: fixed;
        bottom:5vh;
        right:7vw; 
        width:9vw;
        height: 6vh;
    }
    
    a.next img {
    position: fixed;
        bottom:12vh;
        right: 1vw; 
        width: 6vw;
        height: 6vh;
    }
}
@media (min-width: 1200px) {
  h1 {
      font-size: 3vw;
  }
  h4 {
      font-size: 1.8vw;
  }
 
}
  @media (max-width: 480px) {
      a.previous img {
          position: fixed;
              bottom:5vh;
              right:7vw; 
              width:9vw;
              height: 6vh;
          }
          
          a.next img {
          position: fixed;
              bottom:12vh;
              right: 1vw; 
              width: 7vw;
              height: 6vh;
          }
    }