/* Default styles (for desktop) */
.vc_column-inner {
  margin-bottom: 50px;
}

.vpb_wrapper h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.posts {
  list-style-type: none;
  padding: 0;
  display: grid; /* Necessary for grid layout */
  grid-template-columns: repeat(2, 1fr); /* 3 columns for desktop */
  gap: 20px; /* Space between items */
}

.posts li {
  background-color: #ffffff;
  padding: 5px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover */
	clip-path: polygon(90px 0%, 100% 0%, 100% calc(100% - 90px), calc(100% - 90px) 100%, 0% 100%, 0% 90px) !important;
}

.posts li img {
  width: 100%; /* Make the image take full width of the container */
  height: 300px;
  border-radius: 8px;
  transition: transform 0.3s ease, width 0.3s ease; /* Smooth transition for image movement */
}

.posts li h2 {
  font-size: 14px;
  color: #333;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* Center the heading */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease, bottom 0.3s ease; /* Smooth transition for opacity and position */
}

/* Hover effect for image and heading */
.posts li:hover img {
  transform: translateX(-80%); /* Shift image to the left by 80% */
}

.posts li:hover h2 {
  opacity: 1; /* Show the heading when hovered */
  bottom: 75%; /* Move heading to the top */
  transform: translateX(-50%); /* Center text */
}

/* Active state styling for <li> when clicked */
.posts li.active {
  background-color: #e0e0e0; /* Background color changes on active state */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding box shadow to highlight active <li> */
}

.entry-content ul, .entry-content ol {
    
    padding-left: 0px;
}


/* Tablet view (600px to 1024px) */
@media (max-width: 1024px) {
  .posts {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet */
    gap: 20px; /* Maintain gap between items */
  }

  .posts li {
    padding: 5px;
  }

  .posts li h2 {
    font-size: 1.1rem;
  }

  .posts li a {
    font-size: 1.3rem;
  }
}

/* Mobile view (up to 600px) */
@media (max-width: 600px) {
  .vc_column-inner {
    margin-bottom: 30px;
  }

  .wpb_wrapper h2 {
    font-size: 1.6rem; /* Slightly smaller heading for mobile */
  }

  .posts {
    grid-template-columns: 1fr; /* 1 column for mobile */
    gap: 15px; /* Adjusted gap for mobile screens */
  }

  .posts li {
    padding: 10px;
  }

  .posts li h2 {
    font-size: 1rem;
  }

  .posts li a {
    font-size: 1.2rem;
  }
}