.collapsible {
  background-color: #444444;
  color: white;
  cursor: pointer;
  text-align: left;
  font-size: clamp(1rem, 1.2rem, 1.4rem);
  margin: 20px 22px 0px 20px; 
  padding: clamp(1rem, 1.5vw, 2rem) clamp(1rem, 2vw, 2.5rem);
  min-height: 120px;
  height: auto;
  border-radius: 12px 12px 0 0;
  }

  .collapsible:hover, .active {
  background-color: #555555;
  transform: scale(1.01);
  }

  .content {
  max-height: 0;
  overflow: hidden;
  background-color: #222222;
  color: white;
  margin: 0px 22px 30px 20px;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.4s ease;
  border-radius: 0 0 12px 12px;
  }

  .content.show {
  max-height: 2000px; /* Large enough to accommodate content */
  padding: 2% 2% 2% 2%;
  }

  /* Text animation effects for content */
  .content p,
  .content a,
  .content img,
  .content h2,
  .content h3,
  .content h4 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
  }

  .content.show p,
  .content.show a,
  .content.show img,
  .content.show h2,
  .content.show h3,
  .content.show h4 {
  opacity: 1;
  transform: translateY(0);
  }

  /* Staggered animation for multiple elements */
  .content.show p:nth-child(1) { transition-delay: 0.3s; }
  .content.show p:nth-child(2) { transition-delay: 0.4s; }
  .content.show p:nth-child(3) { transition-delay: 0.5s; }
  .content.show img:nth-child(1) { transition-delay: 0.35s; }
  .content.show img:nth-child(2) { transition-delay: 0.45s; }

  .button-like { 
  transition: transform 0.15s ease-out;
  }

  .button-like:hover {
  transform: scale(1.01);
  }