/* Subtitles (H3) */
.section h3 {
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    background: linear-gradient(90deg, #ff4500, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0rem;
    text-shadow: 0 0 15px rgba(255,140,0,0.8), 0 0 30px rgba(255,69,0,0.5);
    font-weight: bold;       /* Enhance visibility */
    letter-spacing: 1px;     /* Add slight spacing for better readability */
}



/* Alchemy Container for Interactive Cards */
    .alchemy-container {
      width: 1000px;
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      padding: 20px;
    }
    /* Flex container for rows */
    .card-row {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      gap: 33px;
    }
    /* Flip card styles */
    .flip-card {
      background-color: transparent;
      width: 280px;
      height: 380px;
      perspective: 1000px;
      margin: 10px;
      cursor: pointer;
    }
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      border-radius: 10px;
    }
    .flip-card.flipped .flip-card-inner {
      transform: rotateY(180deg);
    }


    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      /* Using the provided background, padding, border-radius, and animation */
      background: linear-gradient(135deg, #1c1c1c, #2a2a2a);
      padding: 20px;
      box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
    }

       /* Flex centering for the front face */
    .flip-card-front {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .flip-card-front h3 {
      margin-bottom: 10px;
      color: #FFD700; /* Gold-yellow accent */
      z-index: 999;
    }
    .flip-card-front p {
      font-size: 0.9rem;
      margin: 0.1rem 0rem 1rem;
    }
    /* Back face: Displaying original detailed text */
    .flip-card-back {
      transform: rotateY(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .flip-card-back p,
    .flip-card-back strong,
    .flip-card-back em {
      font-size: 0.9rem;
      margin: 0.1rem 0rem 1rem;
      z-index: 999;
    }
    /* When flipped, adjust the box-shadow to a teal blue tone */
    .flip-card.flipped .flip-card-front,
    .flip-card.flipped .flip-card-back {
      box-shadow: 0 0 15px rgba(64, 224, 208, 0.6);
      animation: none;
    }

.card-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 99;
  border-radius: 10px;
}

/* Increase image opacity on hover */
.flip-card:hover .card-bg-image {
  opacity: 0.37;
}

/* Increase box-shadow on the front face when hovering over the card */
.flip-card:hover .flip-card-front {
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.6);
}

/* Make colors slightly stronger on hover by increasing brightness and saturation */
.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
  filter: brightness(1.1) saturate(1.17);
}


    /* Responsive adjustments */
    @media (max-width: 1024px) {
      .alchemy-container {
        width: 90%;
      }
      .flip-card {
        width: 100%;
        height: 300px;
      }
    .card-row
    {
    display: inline;
    gap: 0px;
    }

.flip-card.flipped .flip-card-front h3 {
  visibility: hidden;
}

    }