.background{
    /* background-image: url('https://media.istockphoto.com/id/938335974/photo/aerial-view-of-kualoa-area-of-oahu-hawaii.webp?b=1&s=612x612&w=0&k=20&c=FyNaMqXpdmhxCbG9lUq1gO-VV1t6IlYXCQ5fvIgpXyo=');
    background-size: cover;
    background-position:jpg center;
    filter: blur(2px); 
    z-index: -1111;
   */
   /* min-height: 100vh;  
   width: 100%; */
   position: relative;
   min-height: 100vh;
}

.comment-main::before {
    content: "";
    position: absolute;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/media/stories.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* filter: blur(5px); */
    filter: brightness(85%) blur(0px);
    z-index: -1;
  }

.comment-main{
    width: 1320px;
    padding: 10em 4em;
    margin: 0 auto ; 
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* align-items: center; */
}
.comment-main h2{
    font-size: 4em;
    text-align: center;
    font-weight: 600;
    -webkit-text-stroke: 0.8px rgb(168, 239, 255, 0.4);
    padding-top: 1em;
    color: white;
}
.comment-main h3{
    font-size: 2em;
    text-align: center;
    font-weight: 600;
    -webkit-text-stroke: 0.8px rgb(168, 239, 255, 0.4);
 
    color: white;
}
.comment-info{
    padding: 3em 3em;
    margin-top: 6em;
    border-radius: 25px;
    display: flex;
    /* flex-wrap: nowrap; */
    gap: 6em;
    border-bottom: 2px solid #ccc;
    position: relative;
  /* cursor: pointer; */
    transition: transform 1.7s ease, box-shadow 0.3s ease;
  /* box-shadow: 0 0px 30px rgba(0,0,0,2.6);  */

}

.comment-info:hover {
  transform: scale(1.05); 
  box-shadow: 0 10px 30px rgba(0,0,0,2.6); 
}
.comment-info img{
    flex: 1 1 45%;

   width: 420px;
   height: 340px;
   object-fit:cover;
   border-radius: 25px;
   box-shadow:0 4px 8px rgba(0, 0, 0, 0.8);
   

}
.comment{
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    justify-content: space-between;
    /* color: white; */
}
.comment h4{
    overflow-wrap: break-word;
    font-weight: 500;
    line-height: 2em;
    color: #d4d4d4;
    font-size: 1.2em;
}
.comment p{
  overflow-wrap: break-word;
  font-weight: 500;
  line-height: 2.3em;
  color: #afaeae;
}
.author{
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
}
.person-info{
  flex: 0 0 50%;
  display: flex;
  gap: 1em;
  align-items: center;
}
.comment img{
    width: 40px;
    height: 40px;
    flex: 0 0 15%;
    border-radius: 50%;
}
.pagination {
  margin-top: 2em;
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
  }
  
  .pagination li {
    margin: 0 5px;
  }
  
  .pagination button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
  }
  .pagination button.active {
    background-color: #007bff; /* Примерен цвят за активния бутон */
    color: #fff; /* Цвят на текста за активния бутон */
  }
  .pagination button:hover {
    background-color: #e9e9e9;
  }
  
  .pagination button:focus {
    outline: none; /* Remove focus outline for clicked buttons */
  }
  
  .pagination .active button {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
  }
  .like-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: 0 ;
    right: 5px;
    padding: 5px;
    font-size: 2em;
    color:  white;
    margin-top: 10px;
    margin-right: 10px;
    align-self: flex-end; /* За да се позиционира в долната дясна част */
    /* position: relative; */
}

/* .like-button:hover {
    color: #007bff; 
    
} */
.likes-count{
  position: absolute;
  right: 55px;
  bottom: 8px;
  color: #afaeae;
  font-size: 1.2em;
}
button.liked {
    color: rgb(76, 76, 250); /* Цвят за харесан бутон */
    filter: drop-shadow(1px 1px 1px rgba(255, 160, 51, 0.65));
  }
  
  button.unliked {
    color: white; /* Цвят за нехаресан бутон */
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));

  }
  .pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    justify-content: center;
    padding-bottom: 2em;
  }
  
  .pagination li {
    margin: 0 5px;
  }
  
  .pagination li a {
    display: block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  .pagination li a.active {
    background-color: #007bff; /* Син цвят за активния бутон */
    color: white;
    cursor: default;
  }